Massive/Chart.tsx
Brandon Presley b7f1c2192e Pause converting to typeorm due to odd error
ERROR  TypeError: Cannot read property 'getItem' of undefined

This error is located at:
    in FlatList (created by SetList)
    in RCTView (created by View)
    in View (created by Page)
    in Page (created by SetList)
    in SetList (created by SceneView)
...

I found an open issue on the react-native github which seems
related https://github.com/facebook/react-native/issues/31523
but after following all of their suggestions I still have the
same error. I tried:
- Removing @babel/plugin-proposal-class-properties & @babel/plugin-transform-flow-strip-types
- Adding @babel/plugin-transform-flow-strip-types
2022-10-31 13:20:36 +13:00

65 lines
1.7 KiB
TypeScript

import * as shape from 'd3-shape';
import {View} from 'react-native';
import {Grid, LineChart, XAxis, YAxis} from 'react-native-svg-charts';
import {CombinedDarkTheme, CombinedDefaultTheme} from './App';
import {useColor} from './color';
import {MARGIN, PADDING} from './constants';
import GymSet from './gym-set';
import useDark from './use-dark';
export default function Chart({
yData,
xFormat,
xData,
yFormat,
}: {
yData: number[];
xData: GymSet[];
xFormat: (value: any, index: number) => string;
yFormat: (value: any) => string;
}) {
const {color} = useColor();
const dark = useDark();
const axesSvg = {
fontSize: 10,
fill: dark
? CombinedDarkTheme.colors.text
: CombinedDefaultTheme.colors.text,
};
const verticalContentInset = {top: 10, bottom: 10};
const xAxisHeight = 30;
return (
<>
<View style={{height: 300, padding: PADDING, flexDirection: 'row'}}>
<YAxis
data={yData}
style={{marginBottom: xAxisHeight}}
contentInset={verticalContentInset}
svg={axesSvg}
formatLabel={yFormat}
/>
<View style={{flex: 1, marginLeft: MARGIN}}>
<LineChart
style={{flex: 1}}
data={yData}
contentInset={verticalContentInset}
curve={shape.curveBasis}
svg={{
stroke: color,
}}>
<Grid />
</LineChart>
<XAxis
style={{marginHorizontal: -10, height: xAxisHeight}}
data={xData}
formatLabel={xFormat}
contentInset={{left: 10, right: 10}}
svg={axesSvg}
/>
</View>
</View>
</>
);
}