Brandon Presley
a9acc6f216
We published these changes, yet the error was still occurring. Leaving this in just lowers performance for no value.
51 lines
1.3 KiB
TypeScript
51 lines
1.3 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 { useTheme } from "react-native-paper";
|
|
|
|
interface ChartProps {
|
|
labels: string[];
|
|
data: number[];
|
|
}
|
|
|
|
export default function AppLineChart({ labels, data }: ChartProps) {
|
|
const { width } = useWindowDimensions();
|
|
const { colors } = useTheme();
|
|
|
|
const config: AbstractChartConfig = {
|
|
backgroundGradientFrom: colors.background,
|
|
backgroundGradientTo: colors.elevation.level1,
|
|
color: () => colors.primary,
|
|
};
|
|
|
|
const pruned = useMemo(() => {
|
|
if (labels.length < 3) return labels;
|
|
const newPruned = [labels[0]];
|
|
const centerIndex = Math.floor(labels.length / 2);
|
|
for (let i = 1; i < labels.length - 1; i++) {
|
|
if (i === centerIndex) newPruned[i] = labels[i];
|
|
else newPruned[i] = "";
|
|
}
|
|
newPruned.push(labels[labels.length - 1]);
|
|
return newPruned;
|
|
}, [labels]);
|
|
|
|
return (
|
|
<LineChart
|
|
height={400}
|
|
width={width - 20}
|
|
data={{
|
|
labels: pruned,
|
|
datasets: [
|
|
{
|
|
data,
|
|
},
|
|
],
|
|
}}
|
|
bezier
|
|
chartConfig={config}
|
|
/>
|
|
);
|
|
}
|