SiaFoundation · alexfreska · Nov 20, 2023 · Nov 15, 2023 · Nov 15, 2023 · Nov 17, 2023
diff --git a/.changeset/calm-coins-shave.md b/.changeset/calm-coins-shave.md
@@ -0,0 +1,5 @@
+---
+'renterd': minor
+---
+
+The configuration now has zen-specific suggested/default values for number of contract hosts and shard values.
diff --git a/.changeset/friendly-dryers-type.md b/.changeset/friendly-dryers-type.md
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/.changeset/sweet-actors-pretend.md b/.changeset/sweet-actors-pretend.md
@@ -0,0 +1,5 @@
+---
+'renterd': minor
+---
+
+The contract list now updates after a contract is deleted.
diff --git a/README.md b/README.md
@@ -50,6 +50,7 @@ The Sia web libraries provide developers with convenient TypeScript SDKs for usi
 - [@siafoundation/sia-nodejs](libs/sia-nodejs) - Sia NodeJS client for controlling a v1 `siad`.
 - [@siafoundation/design-system](libs/design-system) - React-based design system used across Sia apps and websites.
 - [@siafoundation/data-sources](libs/data-sources) - Data sources used for stats on the website.
+- [@siafoundation/fonts](libs/fonts) - Next font configuration for use across apps.
 - [@siafoundation/units](libs/units) - Methods and types for converting and displaying units.
 
 ## Internal

diff --git a/apps/explorer/app/layout.tsx b/apps/explorer/app/layout.tsx
@@ -2,27 +2,8 @@ import { Layout } from '../components/Layout'
 import '../config/style.css'
 import { NextAppSsrAppRouter } from '@siafoundation/design-system'
 import { appLink } from '../config'
-import { IBM_Plex_Sans, IBM_Plex_Mono } from '@next/font/google'
-import { cx } from 'class-variance-authority'
 import Script from 'next/script'
-
-const sans = IBM_Plex_Sans({
-  weight: ['100', '200', '300', '400', '500', '600', '700'],
-  style: ['normal', 'italic'],
-  subsets: ['latin'],
-  variable: '--font-sans',
-  display: 'swap',
-  preload: true,
-})
-
-const mono = IBM_Plex_Mono({
-  weight: ['100', '200', '300', '400', '500', '600', '700'],
-  style: ['normal', 'italic'],
-  subsets: ['latin'],
-  variable: '--font-mono',
-  display: 'swap',
-  preload: true,
-})
+import { rootFontClasses } from '@siafoundation/fonts'
 
 export const metadata = {
   title: 'Explorer',
@@ -40,11 +21,7 @@ export default function RootLayout({
   children: React.ReactNode
 }) {
   return (
-    <html
-      lang="en"
-      suppressHydrationWarning
-      className={cx(sans.variable, mono.variable)}
-    >
+    <html lang="en" suppressHydrationWarning className={rootFontClasses}>
       <body>
         <NextAppSsrAppRouter>
           <Layout>{children}</Layout>

diff --git a/apps/explorer/jest.config.ts b/apps/explorer/jest.config.ts
@@ -12,7 +12,7 @@ export default {
     '/node_modules/(?!d3|d3-array|d3-axis|d3-brush|d3-chord|d3-color|d3-contour|d3-delaunay|d3-dispatch|d3-drag|d3-dsv|d3-ease|d3-fetch|d3-force|d3-format|d3-geo|d3-hierarchy|d3-interpolate|d3-path|d3-polygon|d3-quadtree|d3-random|d3-scale|d3-scale-chromatic|d3-selection|d3-shape|d3-time|d3-time-format|d3-timer|d3-transition|d3-zoom}|internmap|d3-delaunay|delaunator|robust-predicates)',
   ],
   moduleNameMapper: {
-    '@next/font/(.*)': require.resolve(
+    'next/font/(.*)': require.resolve(
       'next/dist/build/jest/__mocks__/nextFontMock.js'
     ),
   },

diff --git a/apps/hostd/components/Home/HomeBandwidth.tsx b/apps/hostd/components/Home/HomeBandwidth.tsx
@@ -39,7 +39,6 @@ export function HomeBandwidth() {
         data={bandwidth.data}
         config={bandwidth.config}
         isLoading={bandwidth.isLoading}
-        chartType={bandwidth.chartType}
         actionsLeft={
           <>
             <Text font="mono" weight="semibold">

diff --git a/apps/hostd/components/Home/HomeCollateral.tsx b/apps/hostd/components/Home/HomeCollateral.tsx
@@ -45,7 +45,6 @@ export function HomeCollateral() {
         data={collateral.data}
         config={collateral.config}
         isLoading={collateral.isLoading}
-        chartType={collateral.chartType}
         height={300}
       />
     </div>

diff --git a/apps/hostd/components/Home/HomeContracts.tsx b/apps/hostd/components/Home/HomeContracts.tsx
@@ -57,7 +57,6 @@ export function HomeContracts() {
         data={contracts.data}
         config={contracts.config}
         isLoading={contracts.isLoading}
-        chartType={contracts.chartType}
         height={300}
       />
     </div>

diff --git a/apps/hostd/components/Home/HomeOperations.tsx b/apps/hostd/components/Home/HomeOperations.tsx
@@ -62,7 +62,6 @@ export function HomeOperations() {
           data={operations.data}
           config={operations.config}
           isLoading={operations.isLoading}
-          chartType={operations.chartType}
           actionsLeft={
             <>
               <Text font="mono" weight="semibold">

diff --git a/apps/hostd/components/Home/HomePricing.tsx b/apps/hostd/components/Home/HomePricing.tsx
@@ -98,7 +98,6 @@ export function HomePricing() {
         data={pricing.data}
         config={pricing.config}
         isLoading={pricing.isLoading}
-        chartType={pricing.chartType}
         actionsLeft={
           <>
             <Text font="mono" weight="semibold">

diff --git a/apps/hostd/components/Home/HomeRevenue.tsx b/apps/hostd/components/Home/HomeRevenue.tsx
@@ -78,7 +78,6 @@ export function HomeRevenue() {
         data={revenue.data}
         config={revenue.config}
         isLoading={revenue.isLoading}
-        chartType={revenue.chartType}
         actionsLeft={
           <>
             <Text font="mono" weight="semibold">

diff --git a/apps/hostd/components/Home/HomeStorage.tsx b/apps/hostd/components/Home/HomeStorage.tsx
@@ -41,7 +41,6 @@ export function HomeStorage() {
         data={storage.data}
         config={storage.config}
         isLoading={storage.isLoading}
-        chartType={storage.chartType}
         actionsLeft={
           <>
             <Text font="mono" weight="semibold">

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/jest.config.ts b/apps/hostd/jest.config.ts
@@ -12,7 +12,7 @@ export default {
     '/node_modules/(?!d3|d3-array|d3-axis|d3-brush|d3-chord|d3-color|d3-contour|d3-delaunay|d3-dispatch|d3-drag|d3-dsv|d3-ease|d3-fetch|d3-force|d3-format|d3-geo|d3-hierarchy|d3-interpolate|d3-path|d3-polygon|d3-quadtree|d3-random|d3-scale|d3-scale-chromatic|d3-selection|d3-shape|d3-time|d3-time-format|d3-timer|d3-transition|d3-zoom}|internmap|d3-delaunay|delaunator|robust-predicates)',
   ],
   moduleNameMapper: {
-    '@next/font/(.*)': require.resolve(
+    'next/font/(.*)': require.resolve(
       'next/dist/build/jest/__mocks__/nextFontMock.js'
     ),
   },

diff --git a/apps/hostd/pages/_app.tsx b/apps/hostd/pages/_app.tsx
@@ -3,6 +3,7 @@ import { NextAppCsr } from '@siafoundation/design-system'
 import { AppProps } from 'next/app'
 import { Providers } from '../config/providers'
 import { routes } from '../config/routes'
+import { rootFontClasses } from '@siafoundation/fonts'
 
 export default function App({
   Component,
@@ -12,6 +13,7 @@ export default function App({
 }>) {
   return (
     <NextAppCsr
+      className={rootFontClasses}
       fallback={pageProps.fallback}
       passwordProtectRequestHooks
       lockRoutes={routes}

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 DefaultNextDocument, {
+  Head,
+  Html,
+  Main,
+  NextScript,
+} from 'next/document'
+import { rootFontClasses } from '@siafoundation/fonts'
+
+export default class NextDocument extends DefaultNextDocument {
+  override render() {
+    return (
+      <Html lang="en">
+        <Head />
+        <body className={rootFontClasses}>
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    )
+  }
+}
diff --git a/apps/renterd/components/Files/EmptyState/index.tsx b/apps/renterd/components/Files/EmptyState/index.tsx
@@ -3,7 +3,6 @@ import { CloudUpload32 } from '@siafoundation/react-icons'
 import { routes } from '../../../config/routes'
 import { useFiles } from '../../../contexts/files'
 import { useAutopilotNotConfigured } from '../checks/useAutopilotNotConfigured'
-import { useUploadPackingSettings } from '../../../hooks/useUploadPackingSettings'
 import { useNotEnoughContracts } from '../checks/useNotEnoughContracts'
 import { StateError } from './StateError'
 import { StateNoneMatching } from './StateNoneMatching'
@@ -14,7 +13,6 @@ export function EmptyState() {
 
   const autopilotNotConfigured = useAutopilotNotConfigured()
   const notEnoughContracts = useNotEnoughContracts()
-  const uploadPacking = useUploadPackingSettings()
 
   if (dataState === 'noneMatchingFilters') {
     return <StateNoneMatching />
@@ -62,21 +60,11 @@ export function EmptyState() {
           <CloudUpload32 className="scale-[200%]" />
         </Text>
         <div className="flex flex-col gap-4 justify-center items-center">
-          {uploadPacking.data?.enabled ? (
-            <Text color="subtle" className="text-center max-w-[500px]">
-              Drag and drop files or click here to start uploading. Redundancy
-              is configured to use {notEnoughContracts.required} shards which
-              means at least that many contracts are required. Small files can
-              be uploaded before contracts have formed but larger files will
-              fail to upload.
-            </Text>
-          ) : (
-            <Text color="subtle" className="text-center max-w-[500px]">
-              There are not enough contracts to upload data yet. Redundancy is
-              configured to use {notEnoughContracts.required} shards which means
-              at least that many contracts are required.
-            </Text>
-          )}
+          <Text color="subtle" className="text-center max-w-[500px]">
+            There are not enough contracts to upload data yet. Redundancy is
+            configured to use {notEnoughContracts.required} shards which means
+            at least that many contracts are required.
+          </Text>
           <Text size="30" className="text-center max-w-[500px]">
             {notEnoughContracts.count}/{notEnoughContracts.required}
           </Text>