feat(pie): restore border for PieCanvas

plouc · Nov 4, 2020 · eab1311 · eab1311
1 parent 789d52a
commit eab1311
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 24 deletions.
diff --git a/packages/pie/src/Pie.js b/packages/pie/src/Pie.js
@@ -15,7 +15,7 @@ import {
     useTheme,
     useDimensions,
 } from '@nivo/core'
-import { getInheritedColorGenerator } from '@nivo/colors'
+import { getInheritedColorGenerator, useInheritedColor } from '@nivo/colors'
 import { PieSvgDefaultProps, PieSvgPropTypes } from './props'
 import PieSlice from './PieSlice'
 import PieRadialLabels from './PieRadialLabels'
@@ -113,7 +113,7 @@ const Pie = ({
 
     const getSliceLabel = useMemo(() => getLabelGenerator(sliceLabel), [sliceLabel])
 
-    const borderColor = getInheritedColorGenerator(_borderColor, theme)
+    const borderColor = useInheritedColor(_borderColor, theme)
 
     const boundDefs = bindDefs(defs, dataWithArc, fill)
 

diff --git a/packages/pie/src/PieCanvas.js b/packages/pie/src/PieCanvas.js
@@ -9,8 +9,10 @@
 import React, { useEffect, useRef } from 'react'
 import { useDimensions, useTheme, withContainer } from '@nivo/core'
 import { renderLegendToCanvas } from '@nivo/legends'
+import { useInheritedColor } from '@nivo/colors'
 import { PieSvgDefaultProps, PieSvgPropTypes } from './props'
 import { useNormalizedData, usePieFromBox } from './hooks'
+import { drawSliceLabels, drawRadialLabels } from './canvas'
 
 const PieCanvas = ({
     data,
@@ -29,6 +31,8 @@ const PieCanvas = ({
     innerRadius: innerRadiusRatio,
     cornerRadius,
     colors,
+    borderColor,
+    borderWidth,
     legends,
     isInteractive,
 }) => {
@@ -62,6 +66,8 @@ const PieCanvas = ({
         cornerRadius,
     })
 
+    const getBorderColor = useInheritedColor(borderColor, theme)
+
     useEffect(() => {
         canvasEl.current.width = outerWidth * pixelRatio
         canvasEl.current.height = outerHeight * pixelRatio
@@ -84,15 +90,22 @@ const PieCanvas = ({
         dataWithArc.forEach(arc => {
             ctx.beginPath()
             ctx.fillStyle = arc.color
-            //this.ctx.strokeStyle = getBorderColor({ ...arc.data, color: arc.color })
-            //this.ctx.lineWidth = borderWidth
+
+            ctx.strokeStyle = getBorderColor(arc)
+            ctx.lineWidth = borderWidth
+
             arcGenerator(arc.arc)
+
             ctx.fill()
-            //if (borderWidth > 0) this.ctx.stroke()
+
+            if (borderWidth > 0) {
+                ctx.stroke()
+            }
         })
 
+        // legends assume a box rather than a center,
+        // that's why we restore previously saved position here.
         ctx.restore()
-
         legends.forEach(legend => {
             renderLegendToCanvas(ctx, {
                 ...legend,
@@ -117,6 +130,7 @@ const PieCanvas = ({
         dataWithArc,
         legends,
         theme,
+        getBorderColor,
     ])
 
     return (

diff --git a/packages/pie/src/PieCanvasRenderer.js b/packages/pie/src/PieCanvasRenderer.js
@@ -10,7 +10,6 @@ import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import { getHoveredArc, getRelativeCursor, getLabelGenerator, Container } from '@nivo/core'
 import { getInheritedColorGenerator } from '@nivo/colors'
-import { renderLegendToCanvas } from '@nivo/legends'
 import { arcPropType } from './props'
 import { drawSliceLabels, drawRadialLabels } from './canvas'
 import PieTooltip from './PieTooltip'
@@ -198,22 +197,6 @@ class PieCanvasRenderer extends Component {
                 theme,
             })
         }
-
-        this.ctx.restore()
-
-        legends.forEach(legend => {
-            renderLegendToCanvas(this.ctx, {
-                ...legend,
-                data: arcs.map(arc => ({
-                    id: arc.data.id,
-                    label: arc.data.id,
-                    color: arc.color,
-                })),
-                containerWidth: width,
-                containerHeight: height,
-                theme,
-            })
-        })
     }
 
     render() {

diff --git a/packages/pie/src/props.js b/packages/pie/src/props.js
@@ -81,7 +81,6 @@ export const PiePropTypes = {
                 .isRequired,
         })
     ).isRequired,
-    //boundDefs: PropTypes.array.isRequired, // computed
 
     // interactivity
     isInteractive: PropTypes.bool,