feat(pie): adapt swarmplot example using usePie hook

plouc · Nov 4, 2020 · d02e1e9 · d02e1e9
1 parent 615e350
commit d02e1e9
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 6 deletions.
diff --git a/packages/pie/src/props.js b/packages/pie/src/props.js
@@ -7,7 +7,6 @@
  * file that was distributed with this source code.
  */
 import PropTypes from 'prop-types'
-import { radiansToDegrees } from '@nivo/core'
 import { ordinalColorsPropType, inheritedColorPropType } from '@nivo/colors'
 import { LegendPropShape } from '@nivo/legends'
 
@@ -118,7 +117,7 @@ export const PieDefaultProps = {
 
     // layout
     startAngle: 0,
-    endAngle: radiansToDegrees(Math.PI * 2),
+    endAngle: 360,
     fit: true,
 
     // border

diff --git a/packages/swarmplot/stories/SwarmPlotRenderNode.js b/packages/swarmplot/stories/SwarmPlotRenderNode.js
@@ -14,8 +14,8 @@ import { SwarmPlot } from '../src'
 
 const CustomNode = d => {
     const getArcColor = useOrdinalColorScale({ scheme: 'purple_orange' }, v => v)
-    const { arcs, arcGenerator } = usePie({
-        data: d.node.data.categories,
+    const { dataWithArc, arcGenerator } = usePie({
+        data: d.node.data.categories.map((value, id) => ({ id, value })),
         radius: d.size / 2,
         innerRadius: (d.size / 2) * 0.7,
         sortByValue: true,
@@ -25,8 +25,8 @@ const CustomNode = d => {
         <g transform={`translate(${d.x},${d.y})`}>
             <circle r={d.size / 2} stroke="rgb(216, 218, 235)" strokeWidth={12} />
             <circle r={d.size / 2} fill="rgb(45, 0, 75)" stroke="rgb(45, 0, 75)" strokeWidth={6} />
-            {arcs.map((arc, i) => {
-                return <path key={i} d={arcGenerator(arc)} fill={getArcColor(i)} />
+            {dataWithArc.map((datum, i) => {
+                return <path key={i} d={arcGenerator(datum.arc)} fill={getArcColor(i)} />
             })}
             {d.size > 52 && (
                 <text