feat(Bar): add bar totals

packages/bar/src/Bar.tsx

@@ -17,11 +17,13 @@ import {
     bindDefs,
     useDimensions,
     useMotionConfig,
+    useTheme,
 } from '@nivo/core'
 import { Fragment, ReactNode, createElement, useMemo } from 'react'
 import { svgDefaultProps } from './props'
 import { useTransition } from '@react-spring/web'
 import { useBar } from './hooks'
+import { computeBarTotals } from './compute/totals'
 
 type InnerBarProps<RawDatum extends BarDatum> = Omit<
     BarSvgProps<RawDatum>,
@@ -102,7 +104,11 @@ const InnerBar = <RawDatum extends BarDatum>({
     barAriaDescribedBy,
 
     initialHiddenIds,
+
+    enableTotals = svgDefaultProps.enableTotals,
+    totalsOffset = svgDefaultProps.totalsOffset,
 }: InnerBarProps<RawDatum>) => {
+    const theme = useTheme()
     const { animate, config: springConfig } = useMotionConfig()
     const { outerWidth, outerHeight, margin, innerWidth, innerHeight } = useDimensions(
         width,
@@ -401,6 +407,16 @@ const InnerBar = <RawDatum extends BarDatum>({
         ]
     )
 
+    const barTotals = computeBarTotals(
+        enableTotals,
+        bars,
+        xScale,
+        yScale,
+        layout,
+        groupMode,
+        totalsOffset
+    )
+
     return (
         <SvgWrapper
             width={outerWidth}
@@ -420,6 +436,21 @@ 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

@@ -32,6 +32,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'
 
 type InnerBarCanvasProps<RawDatum extends BarDatum> = Omit<
     BarCanvasProps<RawDatum>,
@@ -166,6 +167,9 @@ const InnerBarCanvas = <RawDatum extends BarDatum>({
     pixelRatio = canvasDefaultProps.pixelRatio,
 
     canvasRef,
+
+    enableTotals = canvasDefaultProps.enableTotals,
+    totalsOffset = canvasDefaultProps.totalsOffset,
 }: InnerBarCanvasProps<RawDatum>) => {
     const canvasEl = useRef<HTMLCanvasElement | null>(null)
 
@@ -367,6 +371,25 @@ const InnerBarCanvas = <RawDatum extends BarDatum>({
             }
         })
 
+        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,
@@ -404,6 +427,9 @@ const InnerBarCanvas = <RawDatum extends BarDatum>({
         shouldRenderBarLabel,
         theme,
         width,
+        bars,
+        enableTotals,
+        totalsOffset,
     ])
 
     const handleMouseHover = useCallback(

packages/bar/src/compute/totals.ts

@@ -0,0 +1,142 @@
+import { AnyScale, ScaleBand } from '@nivo/scales'
+import { defaultProps } from '../props'
+import { BarCommonProps, BarDatum, ComputedBarDatum } from '../types'
+
+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,
+    layout: BarCommonProps<RawDatum>['layout'] = defaultProps.layout,
+    groupMode: BarCommonProps<RawDatum>['groupMode'] = defaultProps.groupMode,
+    totalsOffset: number
+) => {
+    const totals = [] as BarTotalsData[]
+
+    if (!enableTotals || bars.length === 0) return totals
+
+    const totalsByIndex = new Map<string | number, number>()
+
+    const barWidth = bars[0].width
+    const barHeight = bars[0].height
+
+    if (groupMode === 'stacked') {
+        const totalsPositivesByIndex = new Map<string | number, number>()
+
+        bars.forEach(bar => {
+            const { indexValue, value } = bar.data
+            updateTotalsByIndex(totalsByIndex, indexValue, Number(value))
+            updateTotalsPositivesByIndex(totalsPositivesByIndex, indexValue, Number(value))
+        })
+
+        totalsPositivesByIndex.forEach((totalsPositive, indexValue) => {
+            const indexTotal = totalsByIndex.get(indexValue) || 0
+
+            let xPosition: number
+            let yPosition: number
+
+            if (layout === 'vertical') {
+                xPosition = xScale(indexValue)
+                yPosition = yScale(totalsPositive)
+            } else {
+                xPosition = xScale(totalsPositive)
+                yPosition = yScale(indexValue)
+            }
+
+            xPosition += layout === 'vertical' ? barWidth / 2 : totalsOffset
+            yPosition += layout === 'vertical' ? -totalsOffset : barHeight / 2
+
+            totals.push({
+                key: 'total_' + indexValue,
+                x: xPosition,
+                y: yPosition,
+                value: indexTotal,
+            })
+        })
+    } else if (groupMode === 'grouped') {
+        const greatestValueByIndex = new Map<string | number, number>()
+        const numberOfBarsByIndex = new Map()
+
+        bars.forEach(bar => {
+            const { indexValue, value } = bar.data
+            updateTotalsByIndex(totalsByIndex, indexValue, Number(value))
+            updateGreatestValueByIndex(greatestValueByIndex, indexValue, Number(value))
+            updateNumberOfBarsByIndex(numberOfBarsByIndex, indexValue)
+        })
+
+        greatestValueByIndex.forEach((greatestValue, indexValue) => {
+            const indexTotal = totalsByIndex.get(indexValue) || 0
+
+            let xPosition: number
+            let yPosition: number
+
+            if (layout === 'vertical') {
+                xPosition = xScale(indexValue)
+                yPosition = yScale(greatestValue)
+            } else {
+                xPosition = xScale(greatestValue)
+                yPosition = yScale(indexValue)
+            }
+
+            const indexBarsWidth = numberOfBarsByIndex.get(indexValue) * barWidth
+            const indexBarsHeight = numberOfBarsByIndex.get(indexValue) * barHeight
+
+            xPosition += layout === 'vertical' ? indexBarsWidth / 2 : totalsOffset
+            yPosition += layout === 'vertical' ? -totalsOffset : indexBarsHeight / 2
+
+            totals.push({
+                key: 'total_' + indexValue,
+                x: xPosition,
+                y: yPosition,
+                value: indexTotal,
+            })
+        })
+    }
+    return totals
+}
+
+// this function is used to compute the total value for the indexes. The total value is later rendered on the chart
+export const updateTotalsByIndex = (
+    totalsByIndex: Map<string | number, number>,
+    indexValue: string | number,
+    value: number
+) => {
+    const currentIndexValue = totalsByIndex.get(indexValue) || 0
+    totalsByIndex.set(indexValue, currentIndexValue + value)
+}
+
+// this function is used to compute only the positive values of the indexes. Useful to position the text right above the last stacked bar. It prevents overlapping in case of negative values
+export const updateTotalsPositivesByIndex = (
+    totalsPositivesByIndex: Map<string | number, number>,
+    indexValue: string | number,
+    value: number
+) => {
+    const currentIndexValue = totalsPositivesByIndex.get(indexValue) || 0
+    totalsPositivesByIndex.set(indexValue, currentIndexValue + (value > 0 ? value : 0))
+}
+
+// this function is used to keep track of the highest value for the indexes. Useful to position the text above the longest grouped bar
+export const updateGreatestValueByIndex = (
+    greatestValueByIndex: Map<string | number, number>,
+    indexValue: string | number,
+    value: number
+) => {
+    const currentGreatestValue = greatestValueByIndex.get(indexValue) || 0
+    greatestValueByIndex.set(indexValue, Math.max(currentGreatestValue, Number(value)))
+}
+
+// this function is used to save the number of bars for the indexes. Useful to position the text in the middle of the grouped bars
+export const updateNumberOfBarsByIndex = (
+    numberOfBarsByIndex: Map<string | number, number>,
+    indexValue: string | number
+) => {
+    const currentNumberOfBars = numberOfBarsByIndex.get(indexValue) || 0
+    numberOfBarsByIndex.set(indexValue, currentNumberOfBars + 1)
+}

packages/bar/src/props.ts

@@ -1,6 +1,6 @@
 import { BarItem } from './BarItem'
 import { BarTooltip } from './BarTooltip'
-import { ComputedDatum } from './types'
+import { BarCanvasLayerId, BarLayerId, ComputedDatum } from './types'
 import { InheritedColorConfig, OrdinalColorScaleConfig } from '@nivo/colors'
 import { ScaleBandSpec, ScaleSpec } from '@nivo/scales'
 
@@ -47,11 +47,14 @@ export const defaultProps = {
     initialHiddenIds: [],
     annotations: [],
     markers: [],
+
+    enableTotals: false,
+    totalsOffset: 10,
 }
 
 export const svgDefaultProps = {
     ...defaultProps,
-    layers: ['grid', 'axes', 'bars', 'markers', 'legends', 'annotations'],
+    layers: ['grid', 'axes', 'bars', 'markers', 'legends', 'annotations'] as BarLayerId[],
     barComponent: BarItem,
 
     defs: [],
@@ -66,7 +69,7 @@ export const svgDefaultProps = {
 
 export const canvasDefaultProps = {
     ...defaultProps,
-    layers: ['grid', 'axes', 'bars', 'legends', 'annotations'],
+    layers: ['grid', 'axes', 'bars', 'legends', 'annotations'] as BarCanvasLayerId[],
 
     pixelRatio: typeof window !== 'undefined' ? window.devicePixelRatio ?? 1 : 1,
 }

packages/bar/src/types.ts

@@ -96,6 +96,7 @@ 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 BarCanvasLayerId = Exclude<BarLayerId, 'markers'>
 
 interface BarCustomLayerBaseProps<RawDatum>
     extends Pick<
@@ -138,9 +139,7 @@ export type BarCanvasCustomLayer<RawDatum> = (
 ) => void
 export type BarCustomLayer<RawDatum> = React.FC<BarCustomLayerProps<RawDatum>>
 
-export type BarCanvasLayer<RawDatum> =
-    | Exclude<BarLayerId, 'markers'>
-    | BarCanvasCustomLayer<RawDatum>
+export type BarCanvasLayer<RawDatum> = BarCanvasLayerId | BarCanvasCustomLayer<RawDatum>
 export type BarLayer<RawDatum> = BarLayerId | BarCustomLayer<RawDatum>
 
 export interface BarItemProps<RawDatum extends BarDatum>
@@ -259,6 +258,9 @@ export type BarCommonProps<RawDatum> = {
     renderWrapper?: boolean
 
     initialHiddenIds: readonly (string | number)[]
+
+    enableTotals?: boolean
+    totalsOffset?: number
 }
 
 export type BarSvgProps<RawDatum extends BarDatum> = Partial<BarCommonProps<RawDatum>> &