Merge branch 'master' into radar_onClick_handler

.github/workflows/ci.yml

@@ -13,9 +13,8 @@ jobs:
       - name: Checkout
         uses: actions/checkout@v3
       - name: Install pnpm
-        uses: pnpm/action-setup@v2
+        uses: pnpm/action-setup@v4
         with:
-          version: 8
           run_install: false
       - name: Setup Node
         uses: actions/setup-node@v3
@@ -38,9 +37,8 @@ jobs:
       - name: Checkout
         uses: actions/checkout@v3
       - name: Install pnpm
-        uses: pnpm/action-setup@v2
+        uses: pnpm/action-setup@v4
         with:
-          version: 8
           run_install: false
       - name: Setup Node
         uses: actions/setup-node@v3

packages/bar/src/Bar.tsx

@@ -17,12 +17,14 @@ import { svgDefaultProps } from './props'
 import {
     BarCustomLayerProps,
     BarDatum,
+    BarItemProps,
     BarLayer,
     BarLayerId,
     BarSvgProps,
     ComputedBarDatumWithValue,
 } from './types'
 import { BarTotals } from './BarTotals'
+import { useComputeLabelLayout } from './compute/common'
 
 type InnerBarProps<RawDatum extends BarDatum> = Omit<
     BarSvgProps<RawDatum>,
@@ -67,6 +69,8 @@ const InnerBar = <RawDatum extends BarDatum>({
     labelSkipWidth = svgDefaultProps.labelSkipWidth,
     labelSkipHeight = svgDefaultProps.labelSkipHeight,
     labelTextColor,
+    labelPosition = svgDefaultProps.labelPosition,
+    labelOffset = svgDefaultProps.labelOffset,
 
     markers = svgDefaultProps.markers,
 
@@ -101,6 +105,8 @@ const InnerBar = <RawDatum extends BarDatum>({
     barAriaLabel,
     barAriaLabelledBy,
     barAriaDescribedBy,
+    barAriaHidden,
+    barAriaDisabled,
 
     initialHiddenIds,
 
@@ -159,6 +165,8 @@ const InnerBar = <RawDatum extends BarDatum>({
         totalsOffset,
     })
 
+    const computeLabelLayout = useComputeLabelLayout(layout, reverse, labelPosition, labelOffset)
+
     const transition = useTransition<
         ComputedBarDatumWithValue<RawDatum>,
         {
@@ -172,6 +180,7 @@ const InnerBar = <RawDatum extends BarDatum>({
             opacity: number
             transform: string
             width: number
+            textAnchor: BarItemProps<RawDatum>['style']['textAnchor']
         }
     >(barsWithValue, {
         keys: bar => bar.key,
@@ -181,8 +190,7 @@ const InnerBar = <RawDatum extends BarDatum>({
             height: 0,
             labelColor: getLabelColor(bar) as string,
             labelOpacity: 0,
-            labelX: bar.width / 2,
-            labelY: bar.height / 2,
+            ...computeLabelLayout(bar.width, bar.height),
             transform: `translate(${bar.x}, ${bar.y + bar.height})`,
             width: bar.width,
             ...(layout === 'vertical'
@@ -199,8 +207,7 @@ const InnerBar = <RawDatum extends BarDatum>({
             height: bar.height,
             labelColor: getLabelColor(bar) as string,
             labelOpacity: 1,
-            labelX: bar.width / 2,
-            labelY: bar.height / 2,
+            ...computeLabelLayout(bar.width, bar.height),
             transform: `translate(${bar.x}, ${bar.y})`,
             width: bar.width,
         }),
@@ -210,8 +217,7 @@ const InnerBar = <RawDatum extends BarDatum>({
             height: bar.height,
             labelColor: getLabelColor(bar) as string,
             labelOpacity: 1,
-            labelX: bar.width / 2,
-            labelY: bar.height / 2,
+            ...computeLabelLayout(bar.width, bar.height),
             transform: `translate(${bar.x}, ${bar.y})`,
             width: bar.width,
         }),
@@ -221,15 +227,15 @@ const InnerBar = <RawDatum extends BarDatum>({
             height: 0,
             labelColor: getLabelColor(bar) as string,
             labelOpacity: 0,
-            labelX: bar.width / 2,
+            ...computeLabelLayout(bar.width, bar.height),
             labelY: 0,
             transform: `translate(${bar.x}, ${bar.y + bar.height})`,
             width: bar.width,
             ...(layout === 'vertical'
                 ? {}
                 : {
+                      ...computeLabelLayout(bar.width, bar.height),
                       labelX: 0,
-                      labelY: bar.height / 2,
                       height: bar.height,
                       transform: `translate(${bar.x}, ${bar.y})`,
                       width: 0,
@@ -257,6 +263,8 @@ const InnerBar = <RawDatum extends BarDatum>({
             ariaLabel: barAriaLabel,
             ariaLabelledBy: barAriaLabelledBy,
             ariaDescribedBy: barAriaDescribedBy,
+            ariaHidden: barAriaHidden,
+            ariaDisabled: barAriaDisabled,
         }),
         [
             borderRadius,
@@ -274,6 +282,8 @@ const InnerBar = <RawDatum extends BarDatum>({
             barAriaLabel,
             barAriaLabelledBy,
             barAriaDescribedBy,
+            barAriaHidden,
+            barAriaDisabled,
         ]
     )
 

packages/bar/src/BarCanvas.tsx

@@ -36,6 +36,7 @@ import { renderLegendToCanvas } from '@nivo/legends'
 import { useTooltip } from '@nivo/tooltip'
 import { useBar } from './hooks'
 import { BarTotalsData } from './compute/totals'
+import { useComputeLabelLayout } from './compute/common'
 
 type InnerBarCanvasProps<RawDatum extends BarDatum> = Omit<
     BarCanvasProps<RawDatum>,
@@ -102,6 +103,9 @@ const InnerBarCanvas = <RawDatum extends BarDatum>({
     gridXValues,
     gridYValues,
 
+    labelPosition = canvasDefaultProps.labelPosition,
+    labelOffset = canvasDefaultProps.labelOffset,
+
     layers = canvasDefaultProps.layers as BarCanvasLayer<RawDatum>[],
     renderBar = (
         ctx,
@@ -114,6 +118,9 @@ const InnerBarCanvas = <RawDatum extends BarDatum>({
             label,
             labelColor,
             shouldRenderLabel,
+            labelX,
+            labelY,
+            textAnchor,
         }
     ) => {
         ctx.fillStyle = color
@@ -150,9 +157,9 @@ const InnerBarCanvas = <RawDatum extends BarDatum>({
 
         if (shouldRenderLabel) {
             ctx.textBaseline = 'middle'
-            ctx.textAlign = 'center'
+            ctx.textAlign = textAnchor === 'middle' ? 'center' : textAnchor
             ctx.fillStyle = labelColor
-            ctx.fillText(label, x + width / 2, y + height / 2)
+            ctx.fillText(label, x + labelX, y + labelY)
         }
     },
 
@@ -311,6 +318,7 @@ const InnerBarCanvas = <RawDatum extends BarDatum>({
     )
 
     const formatValue = useValueFormatter(valueFormat)
+    const computeLabelLayout = useComputeLabelLayout(layout, reverse, labelPosition, labelOffset)
 
     useEffect(() => {
         const ctx = canvasEl.current?.getContext('2d')
@@ -375,6 +383,7 @@ const InnerBarCanvas = <RawDatum extends BarDatum>({
                         label: getLabel(bar.data),
                         labelColor: getLabelColor(bar) as string,
                         shouldRenderLabel: shouldRenderBarLabel(bar),
+                        ...computeLabelLayout(bar.width, bar.height),
                     })
                 })
             } else if (layer === 'legends') {
@@ -436,6 +445,7 @@ const InnerBarCanvas = <RawDatum extends BarDatum>({
         barTotals,
         enableTotals,
         formatValue,
+        computeLabelLayout,
     ])
 
     const handleMouseHover = useCallback(

packages/bar/src/BarItem.tsx

@@ -17,6 +17,7 @@ export const BarItem = <RawDatum extends BarDatum>({
         labelY,
         transform,
         width,
+        textAnchor,
     },
 
     borderRadius,
@@ -36,6 +37,8 @@ export const BarItem = <RawDatum extends BarDatum>({
     ariaLabel,
     ariaLabelledBy,
     ariaDescribedBy,
+    ariaDisabled,
+    ariaHidden,
 }: BarItemProps<RawDatum>) => {
     const theme = useTheme()
     const { showTooltipFromEvent, showTooltipAt, hideTooltip } = useTooltip()
@@ -93,6 +96,8 @@ export const BarItem = <RawDatum extends BarDatum>({
                 aria-label={ariaLabel ? ariaLabel(data) : undefined}
                 aria-labelledby={ariaLabelledBy ? ariaLabelledBy(data) : undefined}
                 aria-describedby={ariaDescribedBy ? ariaDescribedBy(data) : undefined}
+                aria-disabled={ariaDisabled ? ariaDisabled(data) : undefined}
+                aria-hidden={ariaHidden ? ariaHidden(data) : undefined}
                 onMouseEnter={isInteractive ? handleMouseEnter : undefined}
                 onMouseMove={isInteractive ? handleTooltip : undefined}
                 onMouseLeave={isInteractive ? handleMouseLeave : undefined}
@@ -104,7 +109,7 @@ export const BarItem = <RawDatum extends BarDatum>({
                 <animated.text
                     x={labelX}
                     y={labelY}
-                    textAnchor="middle"
+                    textAnchor={textAnchor}
                     dominantBaseline="central"
                     fillOpacity={labelOpacity}
                     style={{

packages/bar/src/compute/common.ts

@@ -1,4 +1,6 @@
 import { ScaleBandSpec, ScaleBand, computeScale } from '@nivo/scales'
+import { defaultProps } from '../props'
+import { BarCommonProps, BarDatum } from '../types'
 
 /**
  * Generates indexed scale.
@@ -45,3 +47,50 @@ export const filterNullValues = <RawDatum extends Record<string, unknown>>(data:
     }, {}) as Exclude<RawDatum, null | undefined | false | '' | 0>
 
 export const coerceValue = <T>(value: T) => [value, Number(value)] as const
+
+export type BarLabelLayout = {
+    labelX: number
+    labelY: number
+    textAnchor: 'start' | 'middle' | 'end'
+}
+
+/**
+ * Compute the label position and alignment based on a given position and offset.
+ */
+export function useComputeLabelLayout<RawDatum extends BarDatum>(
+    layout: BarCommonProps<RawDatum>['layout'] = defaultProps.layout,
+    reverse: BarCommonProps<RawDatum>['reverse'] = defaultProps.reverse,
+    labelPosition: BarCommonProps<RawDatum>['labelPosition'] = defaultProps.labelPosition,
+    labelOffset: BarCommonProps<RawDatum>['labelOffset'] = defaultProps.labelOffset
+): (width: number, height: number) => BarLabelLayout {
+    return (width: number, height: number) => {
+        // If the chart is reversed, we want to make sure the offset is also reversed
+        const computedLabelOffset = labelOffset * (reverse ? -1 : 1)
+
+        if (layout === 'horizontal') {
+            let x = width / 2
+            if (labelPosition === 'start') {
+                x = reverse ? width : 0
+            } else if (labelPosition === 'end') {
+                x = reverse ? 0 : width
+            }
+            return {
+                labelX: x + computedLabelOffset,
+                labelY: height / 2,
+                textAnchor: labelPosition === 'middle' ? 'middle' : reverse ? 'end' : 'start',
+            }
+        } else {
+            let y = height / 2
+            if (labelPosition === 'start') {
+                y = reverse ? 0 : height
+            } else if (labelPosition === 'end') {
+                y = reverse ? height : 0
+            }
+            return {
+                labelX: width / 2,
+                labelY: y - computedLabelOffset,
+                textAnchor: 'middle',
+            }
+        }
+    }
+}

packages/bar/src/props.ts

@@ -28,6 +28,8 @@ export const defaultProps = {
 
     enableLabel: true,
     label: 'formattedValue',
+    labelPosition: 'middle' as const,
+    labelOffset: 0,
     labelSkipWidth: 0,
     labelSkipHeight: 0,
     labelTextColor: { from: 'theme', theme: 'labels.text.fill' },

packages/bar/src/types.ts

@@ -16,6 +16,7 @@ import { InheritedColorConfig, OrdinalColorScaleConfig } from '@nivo/colors'
 import { LegendProps } from '@nivo/legends'
 import { AnyScale, ScaleSpec, ScaleBandSpec } from '@nivo/scales'
 import { SpringValues } from '@react-spring/web'
+import { BarLabelLayout } from './compute/common'
 
 export interface BarDatum {
     [key: string]: string | number
@@ -165,6 +166,7 @@ export interface BarItemProps<RawDatum extends BarDatum>
         opacity: number
         transform: string
         width: number
+        textAnchor: 'start' | 'middle'
     }>
 
     label: string
@@ -174,6 +176,8 @@ export interface BarItemProps<RawDatum extends BarDatum>
     ariaLabel?: BarSvgProps<RawDatum>['barAriaLabel']
     ariaLabelledBy?: BarSvgProps<RawDatum>['barAriaLabelledBy']
     ariaDescribedBy?: BarSvgProps<RawDatum>['barAriaDescribedBy']
+    ariaHidden?: BarSvgProps<RawDatum>['barAriaHidden']
+    ariaDisabled?: BarSvgProps<RawDatum>['barAriaDisabled']
 }
 
 export type RenderBarProps<RawDatum extends BarDatum> = Omit<
@@ -185,10 +189,13 @@ export type RenderBarProps<RawDatum extends BarDatum> = Omit<
     | 'ariaLabel'
     | 'ariaLabelledBy'
     | 'ariaDescribedBy'
-> & {
-    borderColor: string
-    labelColor: string
-}
+    | 'ariaHidden'
+    | 'ariaDisabled'
+> &
+    BarLabelLayout & {
+        borderColor: string
+        labelColor: string
+    }
 
 export interface BarTooltipProps<RawDatum> extends ComputedDatum<RawDatum> {
     color: string
@@ -230,6 +237,8 @@ export type BarCommonProps<RawDatum> = {
 
     enableLabel: boolean
     label: PropertyAccessor<ComputedDatum<RawDatum>, string>
+    labelPosition: 'start' | 'middle' | 'end'
+    labelOffset: number
     labelFormat: string | LabelFormatter
     labelSkipWidth: number
     labelSkipHeight: number
@@ -293,6 +302,8 @@ export type BarSvgProps<RawDatum extends BarDatum> = Partial<BarCommonProps<RawD
         barAriaDescribedBy?: (
             data: ComputedDatum<RawDatum>
         ) => React.AriaAttributes['aria-describedby']
+        barAriaHidden?: (data: ComputedDatum<RawDatum>) => React.AriaAttributes['aria-hidden']
+        barAriaDisabled?: (data: ComputedDatum<RawDatum>) => React.AriaAttributes['aria-disabled']
     }>
 
 export type BarCanvasProps<RawDatum extends BarDatum> = Partial<BarCommonProps<RawDatum>> &