Use better formatters for chart value labels

streamr-dev · May 2, 2024 · e7ed55b · e7ed55b
1 parent 7baad21
commit e7ed55b
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 9 deletions.
diff --git a/src/components/Graphs/TimeSeries.tsx b/src/components/Graphs/TimeSeries.tsx
@@ -60,13 +60,17 @@ const formatDate = (milliseconds: number, dateDisplay: DateDisplay = 'day') => {
   return `${monthName} ${date.getDate()}`
 }
 
+function defaultLabelFormat(x: number): string {
+  return `${x}`
+}
+
 const UnstyledTimeSeriesGraph = ({
   graphData,
   showCrosshair,
   dateDisplay,
   height,
   ratio,
-  labelFormat,
+  labelFormat = defaultLabelFormat,
   ...props
 }: Props) => {
   const [tooltipWidth, setTooltipWidth] = useState(0)
@@ -142,10 +146,8 @@ const UnstyledTimeSeriesGraph = ({
                   if (data.payload != null && data.payload[0] != null) {
                     return (
                       <CrosshairValue ref={tooltipRef}>
-                        {typeof labelFormat === 'function'
-                          ? labelFormat(data.payload[0].payload.y)
-                          : data.payload[0].payload.y}{' '}
-                        ({formatDate(data.payload[0].payload.x, dateDisplay)})
+                        {labelFormat(data.payload[0].payload.y)} (
+                        {formatDate(data.payload[0].payload.x, dateDisplay)})
                       </CrosshairValue>
                     )
                   }

diff --git a/src/components/Stats.tsx b/src/components/Stats.tsx
@@ -370,7 +370,7 @@ function NetworkStatsGraph({ metricKey }: NetworkStatsGraphProps) {
         ratio="1:2"
         showCrosshair
         dateDisplay={['realtime', '24hours'].includes(interval) ? 'hour' : 'day'}
-        labelFormat={(value) => value.toPrecision(4)}
+        labelFormat={(value) => networkMetricValueFormatter(metricKey, value)}
       />
       <Intervals
         options={['realtime', '24hours', '1month', '3months', 'all']}
@@ -380,6 +380,18 @@ function NetworkStatsGraph({ metricKey }: NetworkStatsGraphProps) {
   )
 }
 
+function networkMetricValueFormatter(metricKey: NetworkMetricKey, value: number): string {
+  if (metricKey === 'apy') {
+    return `${value.toFixed(2)}%`
+  }
+
+  if (metricKey === 'tvl') {
+    return value < 10 ** 6 ? value.toPrecision(4) : `${(value / 10 ** 6).toPrecision(4)}M`
+  }
+
+  return value.toPrecision(4)
+}
+
 interface NodeStatsProps {
   nodeId: string
 }
@@ -445,9 +457,7 @@ export function NodeStats({ nodeId }: NodeStatsProps) {
           ratio="1:2"
           showCrosshair
           dateDisplay={['realtime', '24hours'].includes(interval) ? 'hour' : 'day'}
-          labelFormat={(value) => {
-            return (/bytes/i.test(metricKey) ? value / 1024 / 1024 : value).toPrecision(4)
-          }}
+          labelFormat={(value) => nodeMetricValueFormatter(metricKey, value)}
         />
         <Intervals
           options={['realtime', '24hours', '1month', '3months', 'all']}
@@ -457,3 +467,11 @@ export function NodeStats({ nodeId }: NodeStatsProps) {
     </>
   )
 }
+
+function nodeMetricValueFormatter(metricKey: NodeMetricKey, value: number): string {
+  if (/bytes/i.test(metricKey)) {
+    return (value / 1024 / 1024).toPrecision(4)
+  }
+
+  return value.toPrecision(4)
+}