refactor: chartxy, y axis, font classes

SiaFoundation · Nov 20, 2023 · 2003a88 · 2003a88
1 parent b923aa4
commit 2003a88
Show file tree

Hide file tree

Showing 29 changed files with 238 additions and 110 deletions.
diff --git a/.changeset/great-games-prove.md b/.changeset/great-games-prove.md
@@ -0,0 +1,5 @@
+---
+'hostd': minor
+---
+
+The revenue graph is now a bar stack, much more clearly showing earned vs potential revenue.
diff --git a/.changeset/healthy-laws-lick.md b/.changeset/healthy-laws-lick.md
@@ -0,0 +1,5 @@
+---
+'hostd': minor
+---
+
+The metrics graphs now show a y-axis.
diff --git a/.changeset/ninety-pots-deny.md b/.changeset/ninety-pots-deny.md
@@ -0,0 +1,5 @@
+---
+'@siafoundation/design-system': minor
+---
+
+The ChartXY API has been refactored.
diff --git a/apps/hostd/contexts/metrics/index.tsx b/apps/hostd/contexts/metrics/index.tsx
@@ -9,7 +9,7 @@ import {
   minutesInMilliseconds,
   ValueScFiat,
 } from '@siafoundation/design-system'
-import { humanBytes, humanNumber } from '@siafoundation/sia-js'
+import { humanBytes, humanNumber, humanSiacoin } from '@siafoundation/sia-js'
 import { useCallback, useMemo } from 'react'
 import { chartConfigs } from '../../config/charts'
 import { useMetricsPeriod } from '@siafoundation/react-hostd'
@@ -253,10 +253,16 @@ function useMetricsMain() {
         formatComponent: function ({ value }) {
           return <ValueScFiat variant="value" value={new BigNumber(value)} />
         },
+        formatTickY: (v) =>
+          humanSiacoin(v, {
+            fixed: 0,
+            dynamicUnits: true,
+          }),
         formatTimestamp,
         disableAnimations,
+        chartType: 'barstack',
+        stackOffset: 'diverging',
       },
-      chartType: 'line',
       isLoading: metricsPeriod.isValidating,
     }
   }, [metricsPeriod, formatTimestamp])
@@ -289,9 +295,16 @@ function useMetricsMain() {
           return <ValueScFiat variant="value" value={new BigNumber(value)} />
         },
         formatTimestamp,
+        formatTickY: (v) =>
+          humanSiacoin(v, {
+            fixed: 0,
+            dynamicUnits: true,
+          }),
         disableAnimations,
+        chartType: 'area',
+        curveType: 'linear',
+        stackOffset: 'none',
       },
-      chartType: 'area',
       isLoading: metricsPeriod.isValidating,
     }
   }, [metricsPeriod, formatTimestamp])
@@ -354,9 +367,16 @@ function useMetricsMain() {
           return <ValueScFiat variant="value" value={new BigNumber(value)} />
         },
         formatTimestamp,
+        formatTickY: (v) =>
+          humanSiacoin(v, {
+            fixed: 0,
+            dynamicUnits: true,
+          }),
         disableAnimations,
+        chartType: 'line',
+        curveType: 'linear',
+        stackOffset: 'none',
       },
-      chartType: 'line',
       isLoading: metricsPeriod.isValidating,
     }
   }, [metricsPeriod, formatTimestamp])
@@ -391,9 +411,12 @@ function useMetricsMain() {
         },
         format: (v) => `${v} contracts`,
         formatTimestamp,
+        formatTickY: (v) => humanNumber(v),
         disableAnimations,
+        chartType: 'areastack',
+        curveType: 'linear',
+        stackOffset: 'none',
       },
-      chartType: 'areastack',
       isLoading: metricsPeriod.isValidating,
     }
   }, [metricsPeriod, formatTimestamp])
@@ -473,9 +496,12 @@ function useMetricsMain() {
         },
         format: (v) => humanBytes(v),
         formatTimestamp,
+        formatTickY: (v) => humanBytes(v, { fixed: 0 }),
         disableAnimations,
+        chartType: 'line',
+        curveType: 'linear',
+        stackOffset: 'none',
       },
-      chartType: 'line',
       isLoading: metricsPeriod.isValidating,
     }
   }, [metricsPeriod, formatTimestamp])
@@ -515,10 +541,13 @@ function useMetricsMain() {
           storageWrites: chartConfigs.storageWrites,
         },
         format: (v) => humanNumber(v),
+        formatTickY: (v) => humanNumber(v),
         formatTimestamp,
         disableAnimations,
+        chartType: 'line',
+        curveType: 'linear',
+        stackOffset: 'none',
       },
-      chartType: 'line',
       isLoading: metricsPeriod.isValidating,
     }
   }, [metricsPeriod, formatTimestamp])
@@ -545,9 +574,15 @@ function useMetricsMain() {
         },
         format: (v) => humanBytes(v),
         formatTimestamp,
+        formatTickY: (v) =>
+          humanBytes(v, {
+            fixed: 0,
+          }),
         disableAnimations,
+        chartType: 'line',
+        curveType: 'linear',
+        stackOffset: 'none',
       },
-      chartType: 'line',
       isLoading: metricsPeriod.isValidating,
     }
   }, [metricsPeriod, formatTimestamp])

diff --git a/apps/hostd/contexts/metrics/types.tsx b/apps/hostd/contexts/metrics/types.tsx
@@ -116,17 +116,17 @@ export const dataTimeSpanOptions: {
 }[] = [
   {
     label: '1D',
-    interval: '5m',
+    interval: '15m',
     value: '1',
   },
   {
     label: '7D',
-    interval: '15m',
+    interval: 'hourly',
     value: '7',
   },
   {
     label: '1M',
-    interval: 'hourly',
+    interval: 'daily',
     value: '30',
   },
   {

diff --git a/apps/hostd/pages/_document.tsx b/apps/hostd/pages/_document.tsx
@@ -1,3 +1,23 @@
-import { NextDocument } from '@siafoundation/design-system'
+'use client'
 
-export default NextDocument
+import { rootFontClasses } from '@siafoundation/fonts'
+import DefaultNextDocument, {
+  Head,
+  Html,
+  Main,
+  NextScript,
+} from 'next/document'
+
+export class NextDocument extends DefaultNextDocument {
+  override render() {
+    return (
+      <Html lang="en">
+        <Head />
+        <body className={rootFontClasses}>
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    )
+  }
+}
diff --git a/apps/renterd/pages/_document.tsx b/apps/renterd/pages/_document.tsx
@@ -1,3 +1,23 @@
-import { NextDocument } from '@siafoundation/design-system'
+'use client'
 
-export default NextDocument
+import { rootFontClasses } from '@siafoundation/fonts'
+import DefaultNextDocument, {
+  Head,
+  Html,
+  Main,
+  NextScript,
+} from 'next/document'
+
+export class NextDocument extends DefaultNextDocument {
+  override render() {
+    return (
+      <Html lang="en">
+        <Head />
+        <body className={rootFontClasses}>
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    )
+  }
+}
diff --git a/apps/walletd/pages/_document.tsx b/apps/walletd/pages/_document.tsx
@@ -1,3 +1,23 @@
-import { NextDocument } from '@siafoundation/design-system'
+'use client'
 
-export default NextDocument
+import { rootFontClasses } from '@siafoundation/fonts'
+import DefaultNextDocument, {
+  Head,
+  Html,
+  Main,
+  NextScript,
+} from 'next/document'
+
+export class NextDocument extends DefaultNextDocument {
+  override render() {
+    return (
+      <Html lang="en">
+        <Head />
+        <body className={rootFontClasses}>
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    )
+  }
+}
diff --git a/apps/website/components/NextAppSsr.tsx b/apps/website/components/NextAppSsr.tsx
@@ -1,5 +1,4 @@
 import { TooltipProvider, Toaster } from '@siafoundation/design-system'
-import { rootFontClasses } from '@siafoundation/fonts'
 import { AppProps } from 'next/app'
 import { AppSettingsProvider, CoreProvider } from '@siafoundation/react-core'
 import { ThemeProvider } from 'next-themes'
@@ -17,7 +16,7 @@ export function NextAppSsr({
         <ThemeProvider attribute="class">
           <TooltipProvider>
             <AppSettingsProvider>
-              <div id="root" className={rootFontClasses}>
+              <div id="root">
                 <Toaster />
                 <Layout>
                   <Component {...pageProps} />
@@ -34,7 +33,7 @@ export function NextAppSsr({
       <ThemeProvider attribute="class">
         <TooltipProvider>
           <AppSettingsProvider>
-            <div id="root" className={rootFontClasses}>
+            <div id="root">
               <Toaster />
               <Component {...pageProps} />
             </div>

diff --git a/apps/website/pages/_document.tsx b/apps/website/pages/_document.tsx
@@ -1,3 +1,23 @@
-import { NextDocument } from '@siafoundation/design-system'
+'use client'
 
-export default NextDocument
+import { rootFontClasses } from '@siafoundation/fonts'
+import DefaultNextDocument, {
+  Head,
+  Html,
+  Main,
+  NextScript,
+} from 'next/document'
+
+export class NextDocument extends DefaultNextDocument {
+  override render() {
+    return (
+      <Html lang="en">
+        <Head />
+        <body className={rootFontClasses}>
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    )
+  }
+}
diff --git a/libs/design-system/package.json b/libs/design-system/package.json
@@ -43,7 +43,6 @@
     "react-dropzone": "^14.2.3",
     "@radix-ui/react-radio-group": "^1.0.0",
     "tailwindcss": "3.2.7",
-    "@next/font": "13.1.1",
     "tailwind-scrollbar": "^2.0.1",
     "tailwindcss-text-fill": "^0.2.0",
     "tailwindcss-shadow-fill": "^1.0.1",

diff --git a/libs/design-system/src/app/WalletBalanceEvolution.tsx b/libs/design-system/src/app/WalletBalanceEvolution.tsx
@@ -62,9 +62,14 @@ export function BalanceEvolution({
         },
         format: (v) => humanSiacoin(v),
         formatTimestamp: getDataIntervalLabelFormatter('default'),
+        formatTickY: (v) =>
+          humanSiacoin(v, {
+            fixed: 0,
+            dynamicUnits: true,
+          }),
         disableAnimations: true,
+        chartType,
       },
-      chartType,
       isLoading,
     }
   }, [balances, isLoading, chartConfigs, chartType])
@@ -77,7 +82,6 @@ export function BalanceEvolution({
         allowConfiguration={false}
         data={chart.data}
         config={chart.config}
-        chartType={chart.chartType}
       />
     </div>
   )

diff --git a/libs/design-system/src/components/ChartXY/ChartXYConfig.tsx b/libs/design-system/src/components/ChartXY/ChartXYConfig.tsx
@@ -19,6 +19,8 @@ export function ChartXYConfig<Key extends string, Cat extends string>({
   setStackOffset,
   xAxisOrientation,
   setXAxisOrientation,
+  yAxisOrientation,
+  setYAxisOrientation,
 }: ChartXYProps<Key, Cat>) {
   const shouldDisableAll = initialChartType === 'line'
   const shouldDisableStack = initialChartType === 'area'
@@ -71,9 +73,13 @@ export function ChartXYConfig<Key extends string, Cat extends string>({
             className="flex flex-col gap-1"
           >
             <Radio disabled={!isStack} value="none">
-              Auto
+              None
               <InfoTip>zero-baseline</InfoTip>
             </Radio>
+            <Radio disabled={!isStack} value="diverging">
+              Diverging
+              <InfoTip>non zero-baseline</InfoTip>
+            </Radio>
             <Radio disabled={!isStack} value="expand">
               Expand
               <InfoTip>values sum to 1</InfoTip>
@@ -113,14 +119,14 @@ export function ChartXYConfig<Key extends string, Cat extends string>({
               <Radio value="bottom">Bottom</Radio>
               <Radio value="top">Top</Radio>
             </RadioGroup>
-            {/* <RadioGroup
-            value={yAxisOrientation}
-            onValueChange={(v) => setYAxisOrientation(v as 'left' | 'right')}
-            className="flex flex-col gap-2"
-          >
-            <Radio value="left">Left</Radio>
-            <Radio value="right">Right</Radio>
-          </RadioGroup> */}
+            <RadioGroup
+              value={yAxisOrientation}
+              onValueChange={(v) => setYAxisOrientation(v as 'left' | 'right')}
+              className="flex flex-col gap-2"
+            >
+              <Radio value="left">Left</Radio>
+              <Radio value="right">Right</Radio>
+            </RadioGroup>
           </div>
         </div>
       </div>