2023-08-12 03:22:50 +00:00
|
|
|
import { useTheme } from "@react-navigation/native";
|
|
|
|
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 { MARGIN, PADDING } from "./constants";
|
|
|
|
import GymSet from "./gym-set";
|
|
|
|
import useDark from "./use-dark";
|
2022-09-02 00:24:28 +00:00
|
|
|
|
|
|
|
export default function Chart({
|
|
|
|
yData,
|
|
|
|
xFormat,
|
|
|
|
xData,
|
|
|
|
yFormat,
|
|
|
|
}: {
|
2023-08-12 03:22:50 +00:00
|
|
|
yData: number[];
|
|
|
|
xData: GymSet[];
|
|
|
|
xFormat: (value: any, index: number) => string;
|
|
|
|
yFormat: (value: any) => string;
|
2022-09-02 00:24:28 +00:00
|
|
|
}) {
|
2023-08-12 03:22:50 +00:00
|
|
|
const { colors } = useTheme();
|
|
|
|
const dark = useDark();
|
2022-10-16 04:08:18 +00:00
|
|
|
const axesSvg = {
|
|
|
|
fontSize: 10,
|
|
|
|
fill: dark
|
|
|
|
? CombinedDarkTheme.colors.text
|
|
|
|
: CombinedDefaultTheme.colors.text,
|
2023-08-12 03:22:50 +00:00
|
|
|
};
|
|
|
|
const verticalContentInset = { top: 10, bottom: 10 };
|
|
|
|
const xAxisHeight = 30;
|
2022-09-02 00:24:28 +00:00
|
|
|
|
|
|
|
return (
|
|
|
|
<>
|
2022-11-23 08:49:27 +00:00
|
|
|
<View
|
|
|
|
style={{
|
|
|
|
height: 300,
|
|
|
|
padding: PADDING,
|
2023-08-12 03:22:50 +00:00
|
|
|
flexDirection: "row",
|
2023-06-27 03:16:59 +00:00
|
|
|
}}
|
|
|
|
>
|
2022-09-02 00:24:28 +00:00
|
|
|
<YAxis
|
|
|
|
data={yData}
|
2023-06-27 03:16:59 +00:00
|
|
|
style={{ marginBottom: xAxisHeight }}
|
2022-09-02 00:24:28 +00:00
|
|
|
contentInset={verticalContentInset}
|
|
|
|
svg={axesSvg}
|
|
|
|
formatLabel={yFormat}
|
|
|
|
/>
|
2023-06-27 03:16:59 +00:00
|
|
|
<View style={{ flex: 1, marginLeft: MARGIN }}>
|
2022-09-02 00:24:28 +00:00
|
|
|
<LineChart
|
2023-06-27 03:16:59 +00:00
|
|
|
style={{ flex: 1 }}
|
2022-09-02 00:24:28 +00:00
|
|
|
data={yData}
|
|
|
|
contentInset={verticalContentInset}
|
|
|
|
curve={shape.curveBasis}
|
|
|
|
svg={{
|
2022-10-31 08:32:33 +00:00
|
|
|
stroke: colors.primary,
|
2023-06-27 03:16:59 +00:00
|
|
|
}}
|
|
|
|
>
|
2022-09-02 00:24:28 +00:00
|
|
|
<Grid />
|
|
|
|
</LineChart>
|
|
|
|
<XAxis
|
|
|
|
data={xData}
|
|
|
|
formatLabel={xFormat}
|
2023-06-27 03:16:59 +00:00
|
|
|
contentInset={{ left: 15, right: 16 }}
|
2022-09-02 00:24:28 +00:00
|
|
|
svg={axesSvg}
|
|
|
|
/>
|
|
|
|
</View>
|
|
|
|
</View>
|
|
|
|
</>
|
2023-08-12 03:22:50 +00:00
|
|
|
);
|
2022-09-02 00:24:28 +00:00
|
|
|
}
|