feat(Bar): add bar totals

packages/bar/src/Bar.tsx

@@ -24,6 +24,7 @@ import { svgDefaultProps } from './props'
 import { useTransition } from '@react-spring/web'
 import { useBar } from './hooks'
 import { computeBarTotals } from './compute/totals'
+import { BarTotals } from './BarTotals'
 
 type InnerBarProps<RawDatum extends BarDatum> = Omit<
     BarSvgProps<RawDatum>,
@@ -289,6 +290,7 @@ const InnerBar = <RawDatum extends BarDatum>({
         grid: null,
         legends: null,
         markers: null,
+        totals: null,
     }
 
     if (layers.includes('annotations')) {
@@ -368,6 +370,11 @@ const InnerBar = <RawDatum extends BarDatum>({
         )
     }
 
+    if (layers.includes('totals') && enableTotals) {
+        const barTotals = computeBarTotals(bars, xScale, yScale, layout, groupMode, totalsOffset)
+        layerById.totals = <BarTotals barTotals={barTotals} />
+    }
+
     const layerContext: BarCustomLayerProps<RawDatum> = useMemo(
         () => ({
             ...commonProps,
@@ -407,16 +414,6 @@ const InnerBar = <RawDatum extends BarDatum>({
         ]
     )
 
-    const barTotals = computeBarTotals(
-        enableTotals,
-        bars,
-        xScale,
-        yScale,
-        layout,
-        groupMode,
-        totalsOffset
-    )
-
     return (
         <SvgWrapper
             width={outerWidth}
@@ -436,21 +433,6 @@ const InnerBar = <RawDatum extends BarDatum>({
 
                 return layerById?.[layer] ?? null
             })}
-            {barTotals.map(barTotal => (
-                <text
-                    key={barTotal.key}
-                    x={barTotal.x}
-                    y={barTotal.y}
-                    fill={theme.text.fill}
-                    fontSize={theme.text.fontSize}
-                    fontWeight="bold"
-                    textAnchor="middle"
-                    alignmentBaseline="middle"
-                    data-test="bar-total"
-                >
-                    {barTotal.value}
-                </text>
-            ))}
         </SvgWrapper>
     )
 }

packages/bar/src/BarCanvas.tsx

@@ -6,6 +6,7 @@ import {
     ComputedBarDatum,
 } from './types'
 import {
+    CompleteTheme,
     Container,
     Margin,
     getRelativeCursor,
@@ -32,7 +33,7 @@ import { renderAxesToCanvas, renderGridLinesToCanvas } from '@nivo/axes'
 import { renderLegendToCanvas } from '@nivo/legends'
 import { useTooltip } from '@nivo/tooltip'
 import { useBar } from './hooks'
-import { computeBarTotals } from './compute/totals'
+import { BarTotalsData, computeBarTotals } from './compute/totals'
 
 type InnerBarCanvasProps<RawDatum extends BarDatum> = Omit<
     BarCanvasProps<RawDatum>,
@@ -53,6 +54,21 @@ const findBarUnderCursor = <RawDatum,>(
 
 const isNumber = (value: unknown): value is number => typeof value === 'number'
 
+function renderTotalsToCanvas(
+    ctx: CanvasRenderingContext2D,
+    barTotals: BarTotalsData[],
+    theme: CompleteTheme
+) {
+    ctx.fillStyle = theme.text.fill
+    ctx.font = `bold ${theme.labels.text.fontSize}px ${theme.labels.text.fontFamily}`
+    ctx.textBaseline = 'middle'
+    ctx.textAlign = 'center'
+
+    barTotals.forEach(barTotal => {
+        ctx.fillText(String(barTotal.value), barTotal.x, barTotal.y)
+    })
+}
+
 const InnerBarCanvas = <RawDatum extends BarDatum>({
     data,
     indexBy,
@@ -366,30 +382,21 @@ const InnerBarCanvas = <RawDatum extends BarDatum>({
                 })
             } else if (layer === 'annotations') {
                 renderAnnotationsToCanvas(ctx, { annotations: boundAnnotations, theme })
+            } else if (layer === 'totals' && enableTotals) {
+                const barTotals = computeBarTotals(
+                    bars,
+                    xScale,
+                    yScale,
+                    layout,
+                    groupMode,
+                    totalsOffset
+                )
+                renderTotalsToCanvas(ctx, barTotals, theme)
             } else if (typeof layer === 'function') {
                 layer(ctx, layerContext)
             }
         })
 
-        const barTotals = computeBarTotals(
-            enableTotals,
-            bars,
-            xScale,
-            yScale,
-            layout,
-            groupMode,
-            totalsOffset
-        )
-
-        ctx.fillStyle = theme.text.fill
-        ctx.font = `bold ${theme.text.fontSize}px sans-serif`
-        ctx.textBaseline = 'middle'
-        ctx.textAlign = 'center'
-
-        barTotals.forEach(barTotal => {
-            ctx.fillText(String(barTotal.value), barTotal.x, barTotal.y)
-        })
-
         ctx.save()
     }, [
         axisBottom,

packages/bar/src/BarTotals.tsx

@@ -0,0 +1,29 @@
+import { useTheme } from '@nivo/core'
+import { BarTotalsData } from './compute/totals'
+
+interface Props {
+    barTotals: BarTotalsData[]
+}
+
+export const BarTotals = ({ barTotals }: Props) => {
+    const theme = useTheme()
+    return (
+        <>
+            {barTotals.map(barTotal => (
+                <text
+                    key={barTotal.key}
+                    x={barTotal.x}
+                    y={barTotal.y}
+                    fill={theme.text.fill}
+                    fontSize={theme.labels.text.fontSize}
+                    fontFamily={theme.labels.text.fontFamily}
+                    fontWeight="bold"
+                    textAnchor="middle"
+                    alignmentBaseline="middle"
+                >
+                    {barTotal.value}
+                </text>
+            ))}
+        </>
+    )
+}

packages/bar/src/compute/totals.ts

@@ -2,15 +2,14 @@ import { AnyScale, ScaleBand } from '@nivo/scales'
 import { defaultProps } from '../props'
 import { BarCommonProps, BarDatum, ComputedBarDatum } from '../types'
 
-interface BarTotalsData {
+export interface BarTotalsData {
     key: string
     x: number
     y: number
     value: number
 }
 
 export const computeBarTotals = <RawDatum extends BarDatum>(
-    enableTotals: boolean,
     bars: ComputedBarDatum<RawDatum>[],
     xScale: ScaleBand<string> | AnyScale,
     yScale: ScaleBand<string> | AnyScale,
@@ -20,7 +19,7 @@ export const computeBarTotals = <RawDatum extends BarDatum>(
 ) => {
     const totals = [] as BarTotalsData[]
 
-    if (!enableTotals || bars.length === 0) return totals
+    if (bars.length === 0) return totals
 
     const totalsByIndex = new Map<string | number, number>()
 

packages/bar/src/index.ts

@@ -2,6 +2,7 @@ export * from './Bar'
 export * from './BarItem'
 export * from './BarTooltip'
 export * from './BarCanvas'
+export * from './BarTotals'
 export * from './ResponsiveBar'
 export * from './ResponsiveBarCanvas'
 export * from './props'

packages/bar/src/props.ts

@@ -54,7 +54,7 @@ export const defaultProps = {
 
 export const svgDefaultProps = {
     ...defaultProps,
-    layers: ['grid', 'axes', 'bars', 'markers', 'legends', 'annotations'] as BarLayerId[],
+    layers: ['grid', 'axes', 'bars', 'markers', 'legends', 'annotations', 'totals'] as BarLayerId[],
     barComponent: BarItem,
 
     defs: [],
@@ -69,7 +69,7 @@ export const svgDefaultProps = {
 
 export const canvasDefaultProps = {
     ...defaultProps,
-    layers: ['grid', 'axes', 'bars', 'legends', 'annotations'] as BarCanvasLayerId[],
+    layers: ['grid', 'axes', 'bars', 'legends', 'annotations', 'totals'] as BarCanvasLayerId[],
 
     pixelRatio: typeof window !== 'undefined' ? window.devicePixelRatio ?? 1 : 1,
 }

packages/bar/src/types.ts

@@ -95,7 +95,7 @@ export interface BarLegendProps extends LegendProps {
 export type LabelFormatter = (label: string | number) => string | number
 export type ValueFormatter = (value: number) => string | number
 
-export type BarLayerId = 'grid' | 'axes' | 'bars' | 'markers' | 'legends' | 'annotations'
+export type BarLayerId = 'grid' | 'axes' | 'bars' | 'markers' | 'legends' | 'annotations' | 'totals'
 export type BarCanvasLayerId = Exclude<BarLayerId, 'markers'>
 
 interface BarCustomLayerBaseProps<RawDatum>

packages/bar/tests/Bar.test.tsx

@@ -1,7 +1,7 @@
 import { mount } from 'enzyme'
 import { create, act, ReactTestRenderer, type ReactTestInstance } from 'react-test-renderer'
 import { LegendSvg, LegendSvgItem } from '@nivo/legends'
-import { Bar, BarDatum, BarItemProps, ComputedDatum, BarItem, BarTooltip } from '../'
+import { Bar, BarDatum, BarItemProps, ComputedDatum, BarItem, BarTooltip, BarTotals } from '../'
 
 type IdValue = {
     id: string
@@ -631,12 +631,9 @@ describe('totals layer', () => {
             />
         ).root
 
-        const totals = instance.findAllByType('text').filter(text => {
-            return text.props['data-test'] === 'bar-total'
-        })
-
-        expect(totals).toHaveLength(3)
-        totals.forEach((total, index) => {
+        const totals = instance.findByType(BarTotals)
+        expect(totals.children).toHaveLength(3)
+        ;(totals.children as ReactTestInstance[]).forEach((total, index) => {
             if (index === 0) {
                 expect(total.children[0]).toBe(`2`)
             } else if (index === 1) {
@@ -663,12 +660,9 @@ describe('totals layer', () => {
             />
         ).root
 
-        const totals = instance.findAllByType('text').filter(text => {
-            return text.props['data-test'] === 'bar-total'
-        })
-
-        expect(totals).toHaveLength(3)
-        totals.forEach((total, index) => {
+        const totals = instance.findByType(BarTotals)
+        expect(totals.children).toHaveLength(3)
+        ;(totals.children as ReactTestInstance[]).forEach((total, index) => {
             if (index === 0) {
                 expect(total.children[0]).toBe(`2`)
             } else if (index === 1) {
@@ -694,12 +688,9 @@ describe('totals layer', () => {
             />
         ).root
 
-        const totals = instance.findAllByType('text').filter(text => {
-            return text.props['data-test'] === 'bar-total'
-        })
-
-        expect(totals).toHaveLength(2)
-        totals.forEach((total, index) => {
+        const totals = instance.findByType(BarTotals)
+        expect(totals.children).toHaveLength(2)
+        ;(totals.children as ReactTestInstance[]).forEach((total, index) => {
             if (index === 0) {
                 expect(total.children[0]).toBe(`-2`)
             } else {
@@ -725,13 +716,9 @@ describe('totals layer', () => {
             />
         ).root
 
-        const totals = instance.findAllByType('text').filter(text => {
-            return text.props['data-test'] === 'bar-total'
-        })
-
-        expect(totals).toHaveLength(3)
-
-        totals.forEach((total, index) => {
+        const totals = instance.findByType(BarTotals)
+        expect(totals.children).toHaveLength(3)
+        ;(totals.children as ReactTestInstance[]).forEach((total, index) => {
             if (index === 0) {
                 expect(total.children[0]).toBe(`0`)
             } else if (index === 1) {
@@ -751,6 +738,7 @@ describe('totals layer', () => {
                     text: {
                         fontSize: 14,
                         fill: 'red',
+                        fontFamily: 'serif',
                     },
                 }}
                 keys={['value1', 'value2']}
@@ -763,15 +751,13 @@ describe('totals layer', () => {
             />
         ).root
 
-        const totals = instance.findAllByType('text').filter(text => {
-            return text.props['data-test'] === 'bar-total'
-        })
-
-        expect(totals).toHaveLength(3)
-        totals.forEach((total, index) => {
+        const totals = instance.findByType(BarTotals)
+        expect(totals.children).toHaveLength(3)
+        ;(totals.children as ReactTestInstance[]).forEach((total, index) => {
             const props = total.props
             expect(props.fill).toBe('red')
             expect(props.fontSize).toBe(14)
+            expect(props.fontFamily).toBe('serif')
         })
     })
 })