diff --git a/src/App.tsx b/src/App.tsx index c502eb4..433b017 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -99,9 +99,30 @@ export default function App() { localStorage.setItem("sortBy", sortBy); }, [sortBy]); + const [colorRepeat, setColorRepeat] = React.useState(() => { + const colorRepeatValue = localStorage.getItem("colorRepeat"); + + let colorRepeat = 0; + if (colorRepeatValue) { + colorRepeat = parseInt(colorRepeatValue, 10); + } + + return colorRepeat; + }); + + React.useEffect(() => { + localStorage.setItem("colorRepeat", colorRepeat.toString()); + }, [colorRepeat]); + return ( <> - + {data.benches.length < 1 ? ( diff --git a/src/components/Buttons/Buttons.tsx b/src/components/Buttons/Buttons.tsx index b7e596d..fd53eb5 100644 --- a/src/components/Buttons/Buttons.tsx +++ b/src/components/Buttons/Buttons.tsx @@ -41,11 +41,13 @@ export default function Buttons({ setData, sortBy, colors, + colorRepeat, }: { data: Data; setData: React.Dispatch>; sortBy: (typeof sortOptions)[number]; colors: typeof initialColors; + colorRepeat: number; }) { const resetRef = React.useRef<() => void>(null); @@ -56,11 +58,19 @@ export default function Buttons({ multiple accept=".csv,.json" onChange={(files) => { - void handleUpload(files, data, setData, sortBy, resetRef, colors); + void handleUpload( + files, + data, + setData, + sortBy, + resetRef, + colors, + colorRepeat + ); }} > {(props) => ( - + diff --git a/src/components/Misc/Misc.tsx b/src/components/Misc/Misc.tsx index f0611ee..49b96b0 100644 --- a/src/components/Misc/Misc.tsx +++ b/src/components/Misc/Misc.tsx @@ -5,6 +5,7 @@ import { Button, FileButton, Text, + NumberInput, } from "@mantine/core"; import { IconTrash, IconUpload } from "@tabler/icons-react"; import s from "./Misc.module.css"; @@ -67,11 +68,15 @@ export default function Misc({ setChartsPerRow, sortBy, setSortBy, + colorRepeat, + setColorRepeat, }: { chartsPerRow: number; setChartsPerRow: React.Dispatch>; sortBy: (typeof sortOptions)[number]; setSortBy: React.Dispatch>; + colorRepeat: number; + setColorRepeat: React.Dispatch>; }) { const resetRef = React.useRef<() => void>(null); @@ -97,6 +102,22 @@ export default function Misc({ setSortBy(ev.target.value as (typeof sortOptions)[number]); }} /> + { + if (typeof value === "number") { + setColorRepeat(value); + } + }} + min={0} + max={100} + clampBehavior="strict" + allowNegative={false} + allowDecimal={false} + stepHoldDelay={250} + stepHoldInterval={1} + />