SiaFoundation · alexfreska · Feb 26, 2024 · Feb 26, 2024
diff --git a/.changeset/mighty-ghosts-drive.md b/.changeset/mighty-ghosts-drive.md
@@ -0,0 +1,6 @@
+---
+'hostd': minor
+'renterd': minor
+---
+
+All graphs now remember any chart configuration that the user has selected.
diff --git a/.changeset/small-apricots-sort.md b/.changeset/small-apricots-sort.md
@@ -0,0 +1,5 @@
+---
+'@siafoundation/design-system': minor
+---
+
+ChartXY now remembers any chart configuration that the user has selected per unique chart.
diff --git a/apps/hostd/components/Home/HomeBandwidth.tsx b/apps/hostd/components/Home/HomeBandwidth.tsx
@@ -34,7 +34,7 @@ export function HomeBandwidth() {
         />
       </DatumScrollArea>
       <ChartXY
-        id="bandwidth"
+        id="hostd/v0/metrics/graphs/bandwidth"
         height={300}
         data={bandwidth.data}
         config={bandwidth.config}

diff --git a/apps/hostd/components/Home/HomeCollateral.tsx b/apps/hostd/components/Home/HomeCollateral.tsx
@@ -34,7 +34,7 @@ export function HomeCollateral() {
         />
       </DatumScrollArea>
       <ChartXY
-        id="collateral"
+        id="hostd/v0/metrics/graphs/collateral"
         actionsLeft={
           <>
             <Text font="mono" weight="semibold">

diff --git a/apps/hostd/components/Home/HomeContracts.tsx b/apps/hostd/components/Home/HomeContracts.tsx
@@ -46,7 +46,7 @@ export function HomeContracts() {
         />
       </DatumScrollArea>
       <ChartXY
-        id="contracts"
+        id="hostd/v0/metrics/graphs/contracts"
         actionsLeft={
           <>
             <Text font="mono" weight="semibold">

diff --git a/apps/hostd/components/Home/HomeOperations.tsx b/apps/hostd/components/Home/HomeOperations.tsx
@@ -37,7 +37,7 @@ export function HomeOperations() {
           />
         </DatumScrollArea>
         <ChartXY
-          id="operations"
+          id="hostd/v0/metrics/graphs/operations"
           height={300}
           data={operations.data}
           config={operations.config}

diff --git a/apps/hostd/components/Home/HomePricing.tsx b/apps/hostd/components/Home/HomePricing.tsx
@@ -93,7 +93,7 @@ export function HomePricing() {
         />
       </DatumScrollArea>
       <ChartXY
-        id="pricing"
+        id="hostd/v0/metrics/graphs/pricing"
         height={300}
         data={pricing.data}
         config={pricing.config}

diff --git a/apps/hostd/components/Home/HomeRevenue.tsx b/apps/hostd/components/Home/HomeRevenue.tsx
@@ -59,7 +59,7 @@ export function HomeRevenue() {
         />
       </DatumScrollArea>
       <ChartXY
-        id="revenue"
+        id="hostd/v0/metrics/graphs/revenue"
         height={300}
         data={revenue.data}
         config={revenue.config}

diff --git a/apps/hostd/components/Home/HomeStorage.tsx b/apps/hostd/components/Home/HomeStorage.tsx
@@ -46,7 +46,7 @@ export function HomeStorage() {
         />
       </DatumScrollArea>
       <ChartXY
-        id="storage"
+        id="hostd/v0/metrics/graphs/storage"
         height={300}
         data={storage.data}
         config={storage.config}

diff --git a/apps/renterd/components/Contracts/ContractMetrics.tsx b/apps/renterd/components/Contracts/ContractMetrics.tsx
@@ -46,7 +46,7 @@ export function ContractMetrics() {
     <div className="w-full h-full">
       {graphMode === 'spending' && !selectedContract && (
         <ChartXY
-          id="fundingAndSpending"
+          id="renterd/v0/contracts/graphs/fundingAndSpending"
           height="100%"
           data={allContractsSpendingMetrics.data}
           config={allContractsSpendingMetrics.config}
@@ -57,7 +57,7 @@ export function ContractMetrics() {
       )}
       {graphMode === 'spending' && selectedContract && (
         <ChartXY
-          id="fundingAndSpending"
+          id="renterd/v0/contracts/graphs/fundingAndSpending"
           height="100%"
           data={selectedContractSpendingMetrics.data}
           config={selectedContractSpendingMetrics.config}
@@ -68,7 +68,7 @@ export function ContractMetrics() {
       )}
       {graphMode === 'count' && !selectedContract && (
         <ChartXY
-          id="count"
+          id="renterd/v0/contracts/graphs/count"
           height="100%"
           data={contractSetCountMetrics.data}
           config={contractSetCountMetrics.config}

diff --git a/libs/design-system/src/app/WalletBalanceEvolution.tsx b/libs/design-system/src/app/WalletBalanceEvolution.tsx
@@ -77,7 +77,7 @@ export function BalanceEvolution({
   return (
     <div className="relative">
       <ChartXY
-        id="balance"
+        id="all/v0/wallet/balance"
         height={200}
         allowConfiguration={false}
         data={chart.data}

diff --git a/libs/design-system/src/components/ChartXY/useChartXY.tsx b/libs/design-system/src/components/ChartXY/useChartXY.tsx
@@ -19,6 +19,7 @@ import {
 } from './types'
 import { daysInMilliseconds } from '../../lib/time'
 import { usePrefersReducedMotion } from '@siafoundation/react-core'
+import useLocalStorageState from 'use-local-storage-state'
 
 const numTicks = 4
 const defaultChartType = 'areastack'
@@ -45,28 +46,50 @@ export function useChartXY<Key extends string, Cat extends string>(
   >('center')
   const [gridProps, setGridProps] = useState<[boolean, boolean]>([false, false])
   const [showGridRows, showGridColumns] = gridProps
-  const [xAxisOrientation, setXAxisOrientation] = useState<'top' | 'bottom'>(
-    'bottom'
-  )
-  const [yAxisOrientation, setYAxisOrientation] = useState<'left' | 'right'>(
-    'right'
-  )
+  const [xAxisOrientation, setXAxisOrientation] = useLocalStorageState<
+    'top' | 'bottom'
+  >(`${id}/xAxisOrientation`, {
+    defaultValue: 'bottom',
+  })
+  const [yAxisOrientation, setYAxisOrientation] = useLocalStorageState<
+    'left' | 'right'
+  >(`${id}/yAxisOrientation`, {
+    defaultValue: 'right',
+  })
   const [showTooltip, setShowTooltip] = useState(true)
   const [showVerticalCrosshair, setShowVerticalCrosshair] = useState(true)
   const [showHorizontalCrosshair, setShowHorizontalCrosshair] = useState(false)
   const [snapTooltipToDatum, setSnapTooltipToDatum] = useState(true)
   const [sharedTooltip, setSharedTooltip] = useState(true)
 
-  const initialChartType = config.chartType || defaultChartType
-  const initialCurveType = config.curveType || defaultCurveType
-  const initialStackOffset = config.stackOffset || defaultStackOffset
+  const [chartType, setChartType] = useLocalStorageState<ChartType>(
+    `${id}/chartType`,
+    {
+      defaultValue: config.chartType || defaultChartType,
+    }
+  )
+  const [curveType, setCurveType] = useLocalStorageState<CurveType>(
+    `${id}/curveType`,
+    {
+      defaultValue: config.curveType || defaultCurveType,
+    }
+  )
+  const [stackOffset, setStackOffset] = useLocalStorageState<StackOffset>(
+    `${id}/stackOffset`,
+    {
+      defaultValue: config.stackOffset || defaultStackOffset,
+    }
+  )
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const initialChartType = useMemo(() => config.chartType, [])
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const initialCurveType = useMemo(() => config.curveType, [])
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const initialStackOffset = useMemo(() => config.stackOffset, [])
 
-  const [chartType, setChartType] = useState<ChartType>(initialChartType)
-  const [curveType, setCurveType] = useState<CurveType>(initialCurveType)
   const isLine = ['line', 'area', 'areastack'].includes(chartType)
   const isStack = ['barstack', 'areastack'].includes(chartType)
-  const [stackOffset, setStackOffset] =
-    useState<StackOffset>(initialStackOffset)
   const glyphOutline = theme.xyChartTheme.gridStyles.stroke
   const [enableTooltipGlyph, setEnableTooltipGlyph] = useState(false)
   const [tooltipGlyphComponent, setTooltipGlyphComponent] = useState<