refactor: add numeric value to bar totals data

plouc · Mar 19, 2024 · 999ba05 · 999ba05
1 parent ab67405
commit 999ba05
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 5 deletions.
diff --git a/packages/bar/src/BarCanvas.tsx b/packages/bar/src/BarCanvas.tsx
@@ -68,7 +68,7 @@ function renderTotalsToCanvas<RawDatum extends BarDatum>(
     ctx.textAlign = layout === 'vertical' ? 'center' : 'start'
 
     barTotals.forEach(barTotal => {
-        ctx.fillText(barTotal.value, barTotal.x, barTotal.y)
+        ctx.fillText(barTotal.formattedValue, barTotal.x, barTotal.y)
     })
 }
 

diff --git a/packages/bar/src/BarTotals.tsx b/packages/bar/src/BarTotals.tsx
@@ -69,7 +69,7 @@ export const BarTotals = <RawDatum extends BarDatum>({
             textAnchor={layout === 'vertical' ? 'middle' : 'start'}
             alignmentBaseline={layout === 'vertical' ? 'alphabetic' : 'middle'}
         >
-            {barTotal.value}
+            {barTotal.formattedValue}
         </animated.text>
     ))
 }
diff --git a/packages/bar/src/compute/totals.ts b/packages/bar/src/compute/totals.ts
@@ -6,7 +6,8 @@ export interface BarTotalsData {
     key: string
     x: number
     y: number
-    value: string
+    value: number
+    formattedValue: string
     animationOffset: number
 }
 
@@ -61,7 +62,8 @@ export const computeBarTotals = <RawDatum extends BarDatum>(
                 key: 'total_' + indexValue,
                 x: xPosition,
                 y: yPosition,
-                value: formatValue(indexTotal),
+                value: indexTotal,
+                formattedValue: formatValue(indexTotal),
                 animationOffset,
             })
         })
@@ -104,7 +106,8 @@ export const computeBarTotals = <RawDatum extends BarDatum>(
                 key: 'total_' + indexValue,
                 x: xPosition,
                 y: yPosition,
-                value: formatValue(indexTotal),
+                value: indexTotal,
+                formattedValue: formatValue(indexTotal),
                 animationOffset,
             })
         })