2023-10-25 23:20:15 +00:00
|
|
|
import { useMemo } from "react";
|
|
|
|
import { useWindowDimensions } from "react-native";
|
|
|
|
import { LineChart } from "react-native-chart-kit";
|
|
|
|
import { AbstractChartConfig } from "react-native-chart-kit/dist/AbstractChart";
|
|
|
|
import { useTheme } from "react-native-paper";
|
2022-09-02 00:24:28 +00:00
|
|
|
|
2023-10-25 23:20:15 +00:00
|
|
|
interface ChartProps {
|
|
|
|
labels: string[];
|
|
|
|
data: number[];
|
|
|
|
}
|
|
|
|
|
2023-10-26 07:43:48 +00:00
|
|
|
export default function Chart({ labels, data }: ChartProps) {
|
2023-10-25 23:20:15 +00:00
|
|
|
const { width } = useWindowDimensions();
|
2023-08-12 03:22:50 +00:00
|
|
|
const { colors } = useTheme();
|
2023-10-25 23:20:15 +00:00
|
|
|
|
|
|
|
const config: AbstractChartConfig = {
|
|
|
|
backgroundGradientFrom: colors.background,
|
|
|
|
backgroundGradientTo: colors.elevation.level1,
|
|
|
|
color: () => colors.primary,
|
2023-08-12 03:22:50 +00:00
|
|
|
};
|
2023-10-25 23:20:15 +00:00
|
|
|
|
|
|
|
const pruned = useMemo(() => {
|
2023-10-26 07:43:48 +00:00
|
|
|
if (labels.length < 3) return labels;
|
|
|
|
const newPruned = [labels[0]];
|
|
|
|
const centerIndex = Math.floor(labels.length / 2);
|
2023-10-25 23:20:15 +00:00
|
|
|
for (let i = 1; i < labels.length - 1; i++) {
|
2023-10-26 07:43:48 +00:00
|
|
|
if (i === centerIndex) newPruned[i] = labels[i];
|
|
|
|
else newPruned[i] = "";
|
2023-10-25 23:20:15 +00:00
|
|
|
}
|
2023-10-26 07:43:48 +00:00
|
|
|
newPruned.push(labels[labels.length - 1]);
|
2023-10-25 23:20:15 +00:00
|
|
|
return newPruned;
|
2023-10-26 07:43:48 +00:00
|
|
|
}, [labels]);
|
2022-09-02 00:24:28 +00:00
|
|
|
|
|
|
|
return (
|
2023-10-25 23:20:15 +00:00
|
|
|
<LineChart
|
|
|
|
height={400}
|
|
|
|
width={width - 20}
|
|
|
|
data={{
|
|
|
|
labels: pruned,
|
|
|
|
datasets: [
|
|
|
|
{
|
|
|
|
data,
|
|
|
|
},
|
|
|
|
],
|
|
|
|
}}
|
|
|
|
chartConfig={config}
|
|
|
|
/>
|
2023-08-12 03:22:50 +00:00
|
|
|
);
|
2022-09-02 00:24:28 +00:00
|
|
|
}
|