feat(Bar): add bar totals

packages/bar/src/Bar.tsx

@@ -22,6 +22,7 @@ import { Fragment, ReactNode, createElement, useMemo } from 'react'
 import { svgDefaultProps } from './props'
 import { useTransition } from '@react-spring/web'
 import { useBar } from './hooks'
+import { BarTotals } from './BarTotals'
 
 type InnerBarProps<RawDatum extends BarDatum> = Omit<
     BarSvgProps<RawDatum>,
@@ -283,6 +284,7 @@ const InnerBar = <RawDatum extends BarDatum>({
         grid: null,
         legends: null,
         markers: null,
+        totals: null,
     }
 
     if (layers.includes('annotations')) {
@@ -362,6 +364,19 @@ const InnerBar = <RawDatum extends BarDatum>({
         )
     }
 
+    if (layers.includes('totals')) {
+        layerById.totals = (
+            <BarTotals
+                key={'totals'}
+                layout={layout}
+                groupMode={groupMode}
+                bars={bars}
+                xScale={xScale}
+                yScale={yScale}
+            />
+        )
+    }
+
     const layerContext: BarCustomLayerProps<RawDatum> = useMemo(
         () => ({
             ...commonProps,

packages/bar/src/BarCanvas.tsx

@@ -2,6 +2,7 @@ import {
     BarCanvasCustomLayerProps,
     BarCanvasLayer,
     BarCanvasProps,
+    BarCommonProps,
     BarDatum,
     ComputedBarDatum,
 } from './types'
@@ -22,7 +23,7 @@ import {
     useMemo,
     useRef,
 } from 'react'
-import { canvasDefaultProps } from './props'
+import { canvasDefaultProps, defaultProps } from './props'
 import {
     renderAnnotationsToCanvas,
     useAnnotations,
@@ -32,6 +33,13 @@ import { renderAxesToCanvas, renderGridLinesToCanvas } from '@nivo/axes'
 import { renderLegendToCanvas } from '@nivo/legends'
 import { useTooltip } from '@nivo/tooltip'
 import { useBar } from './hooks'
+import {
+    updateGreatestValueByIndex,
+    updateNumberOfBarsByIndex,
+    updateTotalsByIndex,
+    updateTotalsPositivesByIndex,
+} from './BarTotals'
+import { AnyScale, ScaleBand } from '@nivo/scales'
 
 type InnerBarCanvasProps<RawDatum extends BarDatum> = Omit<
     BarCanvasProps<RawDatum>,
@@ -52,6 +60,93 @@ const findBarUnderCursor = <RawDatum,>(
 
 const isNumber = (value: unknown): value is number => typeof value === 'number'
 
+function renderTotalsToCanvas<RawDatum extends BarDatum>(
+    ctx: CanvasRenderingContext2D,
+    bars: ComputedBarDatum<RawDatum>[],
+    xScale: ScaleBand<string> | AnyScale,
+    yScale: ScaleBand<string> | AnyScale,
+    layout: BarCommonProps<RawDatum>['layout'] = defaultProps.layout,
+    groupMode: BarCommonProps<RawDatum>['groupMode'] = defaultProps.groupMode
+) {
+    if (bars.length === 0) return
+
+    const totalsByIndex = new Map<string | number, number>()
+
+    const barWidth = bars[0].width
+    const barHeight = bars[0].height
+    const yOffsetVertically = -10
+    const xOffsetHorizontally = 20
+    const fontSize = 12
+
+    ctx.fillStyle = '#222222'
+    ctx.font = `${fontSize}px sans-serif`
+    ctx.textBaseline = 'middle'
+    ctx.textAlign = 'center'
+
+    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) => {
+            let xPosition: number
+            let yPosition: number
+
+            if (layout === 'vertical') {
+                xPosition = xScale(indexValue)
+                yPosition = yScale(totalsPositive)
+            } else {
+                xPosition = xScale(totalsPositive)
+                yPosition = yScale(indexValue)
+            }
+
+            ctx.fillText(
+                String(totalsByIndex.get(indexValue)),
+                xPosition + (layout === 'vertical' ? barWidth / 2 : xOffsetHorizontally),
+                yPosition + (layout === 'vertical' ? yOffsetVertically : barHeight / 2)
+            )
+        })
+    }
+
+    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) => {
+            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
+
+            ctx.fillText(
+                String(totalsByIndex.get(indexValue)),
+                xPosition + (layout === 'vertical' ? indexBarsWidth / 2 : xOffsetHorizontally),
+                yPosition + (layout === 'vertical' ? yOffsetVertically : indexBarsHeight / 2)
+            )
+        })
+    }
+}
+
 const InnerBarCanvas = <RawDatum extends BarDatum>({
     data,
     indexBy,
@@ -362,6 +457,8 @@ const InnerBarCanvas = <RawDatum extends BarDatum>({
                 })
             } else if (layer === 'annotations') {
                 renderAnnotationsToCanvas(ctx, { annotations: boundAnnotations, theme })
+            } else if (layer === 'totals') {
+                renderTotalsToCanvas(ctx, bars, xScale, yScale, layout, groupMode)
             } else if (typeof layer === 'function') {
                 layer(ctx, layerContext)
             }
@@ -404,6 +501,7 @@ const InnerBarCanvas = <RawDatum extends BarDatum>({
         shouldRenderBarLabel,
         theme,
         width,
+        bars,
     ])
 
     const handleMouseHover = useCallback(

packages/bar/src/BarTotals.tsx

@@ -0,0 +1,154 @@
+import { AnyScale, ScaleBand } from '@nivo/scales'
+import { defaultProps } from './props'
+import { BarCommonProps, BarDatum, ComputedBarDatum } from './types'
+
+interface BarTotalsProps<RawDatum extends BarDatum> {
+    bars: ComputedBarDatum<RawDatum>[]
+    xScale: ScaleBand<string> | AnyScale
+    yScale: ScaleBand<string> | AnyScale
+    layout?: BarCommonProps<RawDatum>['layout']
+    groupMode?: BarCommonProps<RawDatum>['groupMode']
+}
+
+export const BarTotals = <RawDatum extends BarDatum>({
+    bars,
+    xScale,
+    yScale,
+    layout = defaultProps.layout,
+    groupMode = defaultProps.groupMode,
+}: BarTotalsProps<RawDatum>) => {
+    if (bars.length === 0) return <></>
+    const totals: JSX.Element[] = []
+
+    const totalsByIndex = new Map<string | number, number>()
+
+    const barWidth = bars[0].width
+    const barHeight = bars[0].height
+    const yOffsetVertically = -10
+    const xOffsetHorizontally = 20
+    const fontSize = 12
+
+    const commonProps = {
+        fill: '#222222',
+        fontWeight: 'bold',
+        fontSize,
+        textAnchor: 'middle',
+        alignmentBaseline: 'middle',
+    } as const
+
+    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) => {
+            let xPosition: number
+            let yPosition: number
+
+            if (layout === 'vertical') {
+                xPosition = xScale(indexValue)
+                yPosition = yScale(totalsPositive)
+            } else {
+                xPosition = xScale(totalsPositive)
+                yPosition = yScale(indexValue)
+            }
+
+            totals.push(
+                <text
+                    key={'total_' + indexValue}
+                    x={xPosition + (layout === 'vertical' ? barWidth / 2 : xOffsetHorizontally)}
+                    y={yPosition + (layout === 'vertical' ? yOffsetVertically : barHeight / 2)}
+                    {...commonProps}
+                >
+                    {totalsByIndex.get(indexValue)}
+                </text>
+            )
+        })
+    }
+
+    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) => {
+            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
+
+            totals.push(
+                <text
+                    key={'total_' + indexValue}
+                    x={
+                        xPosition +
+                        (layout === 'vertical' ? indexBarsWidth / 2 : xOffsetHorizontally)
+                    }
+                    y={
+                        yPosition +
+                        (layout === 'vertical' ? yOffsetVertically : indexBarsHeight / 2)
+                    }
+                    {...commonProps}
+                >
+                    {totalsByIndex.get(indexValue)}
+                </text>
+            )
+        })
+    }
+
+    return <>{totals}</>
+}
+
+export const updateTotalsByIndex = (
+    totalsByIndex: Map<string | number, number>,
+    indexValue: string | number,
+    value: number
+) => {
+    const currentIndexValue = totalsByIndex.get(indexValue) || 0
+    totalsByIndex.set(indexValue, currentIndexValue + value)
+}
+
+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))
+}
+
+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)))
+}
+
+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/index.ts

@@ -4,5 +4,6 @@ export * from './BarTooltip'
 export * from './BarCanvas'
 export * from './ResponsiveBar'
 export * from './ResponsiveBarCanvas'
+export * from './BarTotals'
 export * from './props'
 export * from './types'

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'
 
@@ -51,7 +51,7 @@ export const defaultProps = {
 
 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 +66,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

@@ -95,7 +95,8 @@ 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>
     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>