feat(bar): add custom renderer support

plouc · Jun 28, 2021 · 459e74c · 459e74c
1 parent c39e91f
commit 459e74c
Show file tree

Hide file tree

Showing 3 changed files with 111 additions and 44 deletions.
diff --git a/packages/bar/src/BarCanvas.tsx b/packages/bar/src/BarCanvas.tsx
@@ -1,4 +1,10 @@
-import { BarCanvasLayer, BarCanvasProps, BarDatum, ComputedBarDatum } from './types'
+import {
+    BarCanvasLayer,
+    BarCanvasProps,
+    BarDatum,
+    ComputedBarDatum,
+    ComputedBarDatumWithValue,
+} from './types'
 import {
     Container,
     Margin,
@@ -87,7 +93,61 @@ const InnerBarCanvas = <RawDatum extends BarDatum>({
     gridYValues,
 
     layers = canvasDefaultProps.layers as BarCanvasLayer<RawDatum>[],
-    // barComponent = svgDefaultProps.barComponent,
+    renderBar = (
+        ctx,
+        {
+            borderColor,
+            borderRadius,
+            borderWidth,
+            color,
+            height,
+            label,
+            labelColor,
+            shouldRenderLabel,
+            width,
+            x,
+            y,
+        }
+    ) => {
+        ctx.fillStyle = color
+
+        if (borderWidth > 0) {
+            ctx.strokeStyle = borderColor
+            ctx.lineWidth = borderWidth
+        }
+
+        ctx.beginPath()
+
+        if (borderRadius > 0) {
+            const radius = Math.min(borderRadius, height)
+
+            ctx.moveTo(x + radius, y)
+            ctx.lineTo(x + width - radius, y)
+            ctx.quadraticCurveTo(x + width, y, x + width, y + radius)
+            ctx.lineTo(x + width, y + height - radius)
+            ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height)
+            ctx.lineTo(x + radius, y + height)
+            ctx.quadraticCurveTo(x, y + height, x, y + height - radius)
+            ctx.lineTo(x, y + radius)
+            ctx.quadraticCurveTo(x, y, x + radius, y)
+            ctx.closePath()
+        } else {
+            ctx.rect(x, y, width, height)
+        }
+
+        ctx.fill()
+
+        if (borderWidth > 0) {
+            ctx.stroke()
+        }
+
+        if (shouldRenderLabel) {
+            ctx.textBaseline = 'middle'
+            ctx.textAlign = 'center'
+            ctx.fillStyle = labelColor
+            ctx.fillText(label, x + width / 2, y + height / 2)
+        }
+    },
 
     enableLabel = canvasDefaultProps.enableLabel,
     label = canvasDefaultProps.label,
@@ -171,6 +231,14 @@ const InnerBarCanvas = <RawDatum extends BarDatum>({
         [keys, result.bars]
     )
 
+    const barsWithValue = useMemo(
+        () =>
+            result.bars.filter(
+                (bar): bar is ComputedBarDatumWithValue<RawDatum> => bar.data.value !== null
+            ),
+        [result.bars]
+    )
+
     const shouldRenderLabel = useCallback(
         ({ width, height }: { height: number; width: number }) => {
             if (!enableLabel) return false
@@ -294,47 +362,16 @@ const InnerBarCanvas = <RawDatum extends BarDatum>({
                     theme,
                 })
             } else if (layer === 'bars') {
-                result.bars.forEach(bar => {
-                    const { x, y, color, width, height } = bar
-
-                    ctx.fillStyle = color
-
-                    if (borderWidth > 0) {
-                        ctx.strokeStyle = getBorderColor(bar)
-                        ctx.lineWidth = borderWidth
-                    }
-
-                    ctx.beginPath()
-
-                    if (borderRadius > 0) {
-                        const radius = Math.min(borderRadius, height)
-
-                        ctx.moveTo(x + radius, y)
-                        ctx.lineTo(x + width - radius, y)
-                        ctx.quadraticCurveTo(x + width, y, x + width, y + radius)
-                        ctx.lineTo(x + width, y + height - radius)
-                        ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height)
-                        ctx.lineTo(x + radius, y + height)
-                        ctx.quadraticCurveTo(x, y + height, x, y + height - radius)
-                        ctx.lineTo(x, y + radius)
-                        ctx.quadraticCurveTo(x, y, x + radius, y)
-                        ctx.closePath()
-                    } else {
-                        ctx.rect(x, y, width, height)
-                    }
-
-                    ctx.fill()
-
-                    if (borderWidth > 0) {
-                        ctx.stroke()
-                    }
-
-                    if (shouldRenderLabel({ height, width })) {
-                        ctx.textBaseline = 'middle'
-                        ctx.textAlign = 'center'
-                        ctx.fillStyle = getLabelColor(bar)
-                        ctx.fillText(getLabel(bar.data), x + width / 2, y + height / 2)
-                    }
+                barsWithValue.forEach(bar => {
+                    renderBar(ctx, {
+                        ...bar,
+                        borderColor: getBorderColor(bar),
+                        borderRadius,
+                        borderWidth,
+                        label: getLabel(bar.data),
+                        labelColor: getLabelColor(bar),
+                        shouldRenderLabel: shouldRenderLabel(bar),
+                    })
                 })
             } else if (layer === 'legends') {
                 legends.forEach(legend => {
@@ -369,6 +406,7 @@ const InnerBarCanvas = <RawDatum extends BarDatum>({
         axisLeft,
         axisRight,
         axisTop,
+        barsWithValue,
         borderRadius,
         borderWidth,
         boundAnnotations,
@@ -394,7 +432,7 @@ const InnerBarCanvas = <RawDatum extends BarDatum>({
         outerHeight,
         outerWidth,
         pixelRatio,
-        result.bars,
+        renderBar,
         result.xScale,
         result.yScale,
         reverse,

diff --git a/packages/bar/src/types.ts b/packages/bar/src/types.ts
@@ -156,6 +156,11 @@ export interface BarItemProps<RawDatum>
     data: ComputedBarDatum<RawDatum>['data'] & { value: number }
 }
 
+export type RenderBarProps<RawDatum> = Omit<
+    BarItemProps<RawDatum>,
+    'style' | 'getTooltipLabel' | 'isInteractive' | 'tooltip'
+>
+
 export interface BarTooltipProps<RawDatum> extends ComputedDatum<RawDatum> {
     color: string
     getTooltipLabel: (datum: ComputedDatum<RawDatum>) => string | number
@@ -255,6 +260,8 @@ export type BarCanvasProps<RawDatum extends BarDatum> = Partial<BarCommonProps<R
         axisRight: CanvasAxisProp<any>
         axisTop: CanvasAxisProp<any>
 
+        renderBar: (context: CanvasRenderingContext2D, props: RenderBarProps<RawDatum>) => void
+
         layers: BarCanvasLayer<RawDatum>[]
         pixelRatio: number
     }>

diff --git a/packages/bar/stories/barCanvas.stories.tsx b/packages/bar/stories/barCanvas.stories.tsx
@@ -64,6 +64,28 @@ stories.add('custom layer', () => {
     )
 })
 
+stories.add('custom bar renderer', () => (
+    <BarCanvas
+        {...commonProps}
+        innerPadding={4}
+        renderBar={(ctx, { x, y, width, height, color }) => {
+            ctx.beginPath()
+
+            ctx.fillStyle = color
+
+            ctx.arc(
+                x + width / 2,
+                y + height / 2,
+                Math.abs(Math.min(width, height) / 2),
+                0,
+                2 * Math.PI
+            )
+
+            ctx.fill()
+        }}
+    />
+))
+
 stories.add('custom tooltip', () => (
     <BarCanvas
         {...commonProps}