56 lines
1.4 KiB
TypeScript
56 lines
1.4 KiB
TypeScript
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 { PADDING } from "./constants";
|
|
import useDark from "./use-dark";
|
|
import { useTheme } from "react-native-paper";
|
|
|
|
interface ChartProps {
|
|
labels: string[];
|
|
data: number[];
|
|
preserve?: number;
|
|
}
|
|
|
|
export default function Chart({ labels, data, preserve = 3 }: ChartProps) {
|
|
const { width } = useWindowDimensions();
|
|
const { colors } = useTheme();
|
|
|
|
const config: AbstractChartConfig = {
|
|
backgroundGradientFrom: colors.background,
|
|
backgroundGradientTo: colors.elevation.level1,
|
|
color: () => colors.primary,
|
|
};
|
|
|
|
const pruned = useMemo(() => {
|
|
const newPruned = [...labels];
|
|
if (labels.length <= preserve + 2) return labels;
|
|
|
|
let interval = Math.floor((labels.length - 2) / (preserve + 1));
|
|
for (let i = 1; i < labels.length - 1; i++) {
|
|
if ((i - 1) % interval !== 0 || i === 1) {
|
|
newPruned[i] = "";
|
|
}
|
|
}
|
|
return newPruned;
|
|
}, [labels, preserve]);
|
|
|
|
console.log({ labels, data, pruned, preserve });
|
|
|
|
return (
|
|
<LineChart
|
|
height={400}
|
|
width={width - 20}
|
|
data={{
|
|
labels: pruned,
|
|
datasets: [
|
|
{
|
|
data,
|
|
},
|
|
],
|
|
}}
|
|
chartConfig={config}
|
|
/>
|
|
);
|
|
}
|