Change look of ViewBest
- Use color scheme for color of curve - Use curveBasis instead of curveNatural - Make chart taller (the y axis was a bit crowded.)
This commit is contained in:
parent
3322289c17
commit
a7d84c4dbd
15
ViewBest.tsx
15
ViewBest.tsx
|
@ -1,4 +1,6 @@
|
||||||
import {
|
import {
|
||||||
|
DarkTheme,
|
||||||
|
DefaultTheme,
|
||||||
RouteProp,
|
RouteProp,
|
||||||
useFocusEffect,
|
useFocusEffect,
|
||||||
useNavigation,
|
useNavigation,
|
||||||
|
@ -6,7 +8,7 @@ import {
|
||||||
} from '@react-navigation/native';
|
} from '@react-navigation/native';
|
||||||
import * as shape from 'd3-shape';
|
import * as shape from 'd3-shape';
|
||||||
import React, {useCallback, useContext, useEffect, useState} from 'react';
|
import React, {useCallback, useContext, useEffect, useState} from 'react';
|
||||||
import {Text, View} from 'react-native';
|
import {Text, useColorScheme, View} from 'react-native';
|
||||||
import {IconButton} from 'react-native-paper';
|
import {IconButton} from 'react-native-paper';
|
||||||
import {Grid, LineChart, XAxis, YAxis} from 'react-native-svg-charts';
|
import {Grid, LineChart, XAxis, YAxis} from 'react-native-svg-charts';
|
||||||
import {DatabaseContext} from './App';
|
import {DatabaseContext} from './App';
|
||||||
|
@ -19,6 +21,7 @@ export default function ViewBest() {
|
||||||
const [sets, setSets] = useState<Set[]>([]);
|
const [sets, setSets] = useState<Set[]>([]);
|
||||||
const db = useContext(DatabaseContext);
|
const db = useContext(DatabaseContext);
|
||||||
const navigation = useNavigation();
|
const navigation = useNavigation();
|
||||||
|
const dark = useColorScheme() === 'dark';
|
||||||
|
|
||||||
useFocusEffect(
|
useFocusEffect(
|
||||||
useCallback(() => {
|
useCallback(() => {
|
||||||
|
@ -56,7 +59,7 @@ export default function ViewBest() {
|
||||||
return (
|
return (
|
||||||
<View style={{padding: 10}}>
|
<View style={{padding: 10}}>
|
||||||
<Text>Best weight per day</Text>
|
<Text>Best weight per day</Text>
|
||||||
<View style={{height: 200, padding: 20, flexDirection: 'row'}}>
|
<View style={{height: 300, padding: 20, flexDirection: 'row'}}>
|
||||||
<YAxis
|
<YAxis
|
||||||
data={sets.map(set => set.weight)}
|
data={sets.map(set => set.weight)}
|
||||||
style={{marginBottom: xAxisHeight}}
|
style={{marginBottom: xAxisHeight}}
|
||||||
|
@ -69,8 +72,12 @@ export default function ViewBest() {
|
||||||
style={{flex: 1}}
|
style={{flex: 1}}
|
||||||
data={sets.map(set => set.weight)}
|
data={sets.map(set => set.weight)}
|
||||||
contentInset={verticalContentInset}
|
contentInset={verticalContentInset}
|
||||||
curve={shape.curveNatural}
|
curve={shape.curveBasis}
|
||||||
svg={{stroke: 'rgb(134, 65, 244)'}}>
|
svg={{
|
||||||
|
stroke: dark
|
||||||
|
? DarkTheme.colors.primary
|
||||||
|
: DefaultTheme.colors.primary,
|
||||||
|
}}>
|
||||||
<Grid />
|
<Grid />
|
||||||
</LineChart>
|
</LineChart>
|
||||||
<XAxis
|
<XAxis
|
||||||
|
|
Loading…
Reference in New Issue
Block a user