feat(config): extract date constants to a dedicated config

refs #163, #313

apps/stats-web/src/app/graph/[snapshot]/GraphContainer.tsx

@@ -9,7 +9,7 @@ import dynamic from "next/dynamic";
 import { DiffNumber } from "@/components/DiffNumber";
 import { DiffPercentageChip } from "@/components/DiffPercentageChip";
 import { TimeRange } from "@/components/graph/TimeRange";
-import { selectedRangeValues } from "@/lib/constants";
+import { SELECTED_RANGE_VALUES } from "@/config/date.config";
 import { percIncrease, udenomToDenom } from "@/lib/mathHelpers";
 import { SNAPSHOT_NOT_FOUND } from "@/lib/snapshotsUrlHelpers";
 import { bytesToShrink } from "@/lib/unitUtils";
@@ -25,7 +25,7 @@ export interface IGraphProps {
 }
 
 export default function GraphContainer({ snapshot }: IGraphProps) {
-  const [selectedRange, setSelectedRange] = useState(selectedRangeValues["7D"]);
+  const [selectedRange, setSelectedRange] = useState(SELECTED_RANGE_VALUES["7D"]);
   const { data: snapshotData, status } = useGraphSnapshot(snapshot);
   const snapshotMetadata = snapshotData && getSnapshotMetadata(snapshot as Snapshots);
   const rangedData = snapshotData && snapshotData.snapshots.slice(Math.max(snapshotData.snapshots.length - selectedRange, 0), snapshotData.snapshots.length);
@@ -50,7 +50,7 @@ export default function GraphContainer({ snapshot }: IGraphProps) {
     const csvContent = parser.parse(rangedData.map(d => ({ date: d.date, value: snapshotMetadata.unitFn(d.value).value })));
 
     const datePart = new Date().toISOString().substring(0, 10).replaceAll("-", "");
-    const rangePart = Object.keys(selectedRangeValues).find(key => selectedRangeValues[key] === selectedRange);
+    const rangePart = Object.keys(SELECTED_RANGE_VALUES).find(key => SELECTED_RANGE_VALUES[key] === selectedRange);
     const fileName = `${snapshot}-${datePart}-${rangePart}.csv`;
 
     const encodedUri = encodeURI("data:text/csv;charset=utf-8," + csvContent);

apps/stats-web/src/app/provider-graph/[snapshot]/GraphContainer.tsx

@@ -9,7 +9,7 @@ import dynamic from "next/dynamic";
 import { DiffNumber } from "@/components/DiffNumber";
 import { DiffPercentageChip } from "@/components/DiffPercentageChip";
 import { TimeRange } from "@/components/graph/TimeRange";
-import { selectedRangeValues } from "@/lib/constants";
+import { SELECTED_RANGE_VALUES } from "@/config/date.config";
 import { percIncrease } from "@/lib/mathHelpers";
 import { getProviderSnapshotMetadata } from "@/lib/providerUtils";
 import { SNAPSHOT_NOT_FOUND } from "@/lib/snapshotsUrlHelpers";
@@ -25,7 +25,7 @@ export interface IGraphProps {
 }
 
 export default function GraphContainer({ snapshot }: IGraphProps) {
-  const [selectedRange, setSelectedRange] = useState(selectedRangeValues["7D"]);
+  const [selectedRange, setSelectedRange] = useState(SELECTED_RANGE_VALUES["7D"]);
   const { data: snapshotData, status } = useProviderGraphSnapshot(snapshot);
   const snapshotMetadata = snapshotData && getProviderSnapshotMetadata(snapshot as ProviderSnapshots);
   const rangedData = snapshotData && snapshotData.snapshots.slice(Math.max(snapshotData.snapshots.length - selectedRange, 0), snapshotData.snapshots.length);
@@ -50,7 +50,7 @@ export default function GraphContainer({ snapshot }: IGraphProps) {
     const csvContent = parser.parse(rangedData.map(d => ({ date: d.date, value: snapshotMetadata.unitFn(d.value).value })));
 
     const datePart = new Date().toISOString().substring(0, 10).replaceAll("-", "");
-    const rangePart = Object.keys(selectedRangeValues).find(key => selectedRangeValues[key] === selectedRange);
+    const rangePart = Object.keys(SELECTED_RANGE_VALUES).find(key => SELECTED_RANGE_VALUES[key] === selectedRange);
     const fileName = `${snapshot}-${datePart}-${rangePart}.csv`;
 
     const encodedUri = encodeURI("data:text/csv;charset=utf-8," + csvContent);

apps/stats-web/src/components/graph/TimeRange.tsx

@@ -2,7 +2,7 @@
 import { ReactNode } from "react";
 import { ToggleGroup, ToggleGroupItem } from "@akashnetwork/ui/components";
 
-import { selectedRangeValues } from "@/lib/constants";
+import { SELECTED_RANGE_VALUES } from "@/config/date.config";
 import { cn } from "@/lib/utils";
 
 type Props = {
@@ -20,24 +20,24 @@ export const TimeRange: React.FunctionComponent<Props> = ({ selectedRange, onRan
     <ToggleGroup type="single" aria-label="Graph range select" color="secondary" size="sm" className="mx-auto my-0 sm:mx-0">
       <ToggleGroupItem
         value="7D"
-        className={cn({ ["!bg-primary font-bold !text-white"]: selectedRange === selectedRangeValues["7D"] })}
-        onClick={() => _onRangeChange(selectedRangeValues["7D"])}
+        className={cn({ ["!bg-primary font-bold !text-white"]: selectedRange === SELECTED_RANGE_VALUES["7D"] })}
+        onClick={() => _onRangeChange(SELECTED_RANGE_VALUES["7D"])}
         size="sm"
       >
         7D
       </ToggleGroupItem>
       <ToggleGroupItem
         value="1M"
-        className={cn({ ["!bg-primary font-bold !text-white"]: selectedRange === selectedRangeValues["1M"] })}
-        onClick={() => _onRangeChange(selectedRangeValues["1M"])}
+        className={cn({ ["!bg-primary font-bold !text-white"]: selectedRange === SELECTED_RANGE_VALUES["1M"] })}
+        onClick={() => _onRangeChange(SELECTED_RANGE_VALUES["1M"])}
         size="sm"
       >
         1M
       </ToggleGroupItem>
       <ToggleGroupItem
         value="ALL"
-        className={cn({ ["!bg-primary font-bold !text-white"]: selectedRange === selectedRangeValues["ALL"] })}
-        onClick={() => _onRangeChange(selectedRangeValues["ALL"])}
+        className={cn({ ["!bg-primary font-bold !text-white"]: selectedRange === SELECTED_RANGE_VALUES["ALL"] })}
+        onClick={() => _onRangeChange(SELECTED_RANGE_VALUES["ALL"])}
         size="sm"
       >
         ALL

apps/stats-web/src/config/date.config.ts

@@ -0,0 +1,5 @@
+export const SELECTED_RANGE_VALUES: Record<string, number> = {
+  "7D": 7,
+  "1M": 30,
+  ALL: Number.MAX_SAFE_INTEGER
+};

apps/stats-web/src/lib/constants.ts

@@ -1,11 +1,5 @@
 import { MAINNET_ID, SANDBOX_ID, TESTNET_ID } from "@akashnetwork/network-store";
 
-export const selectedRangeValues: { [key: string]: number } = {
-  "7D": 7,
-  "1M": 30,
-  ALL: Number.MAX_SAFE_INTEGER
-};
-
 const productionMainnetApiUrl = "https://console-api.akash.network";
 const productionTestnetApiUrl = "https://console-api-testnet.akash.network";
 const productionSandboxApiUrl = "https://console-api-sandbox.akash.network";