feat(pie): rename slices to arcs

plouc · Dec 18, 2020 · 39f0644 · 39f0644
1 parent f2223d7
commit 39f0644
Show file tree

Hide file tree

Showing 7 changed files with 27 additions and 20 deletions.
diff --git a/packages/arcs/src/ArcShape.tsx b/packages/arcs/src/ArcShape.tsx
@@ -8,7 +8,7 @@ export type ArcMouseHandler<Datum extends DatumWithArcAndColor> = (
 ) => void
 
 export interface ArcShapeProps<Datum extends DatumWithArcAndColor> {
-    data: Datum
+    datum: Datum
     style: {
         opacity: SpringValue<number>
         color: SpringValue<string>
@@ -29,27 +29,32 @@ export interface ArcShapeProps<Datum extends DatumWithArcAndColor> {
  * regular values to support animations.
  */
 export const ArcShape = <Datum extends DatumWithArcAndColor>({
-    data,
+    datum,
     style,
     onClick,
     onMouseEnter,
     onMouseMove,
     onMouseLeave,
 }: ArcShapeProps<Datum>) => {
-    const handleClick = useCallback(event => onClick?.(data, event), [onClick, data])
+    const handleClick = useCallback(event => onClick?.(datum, event), [onClick, datum])
 
-    const handleMouseEnter = useCallback(event => onMouseEnter?.(data, event), [onMouseEnter, data])
+    const handleMouseEnter = useCallback(event => onMouseEnter?.(datum, event), [
+        onMouseEnter,
+        datum,
+    ])
 
-    const handleMouseMove = useCallback(event => onMouseMove?.(data, event), [onMouseMove, data])
+    const handleMouseMove = useCallback(event => onMouseMove?.(datum, event), [onMouseMove, datum])
 
-    const handleMouseLeave = useCallback(event => onMouseLeave?.(data, event), [onMouseLeave, data])
+    const handleMouseLeave = useCallback(event => onMouseLeave?.(datum, event), [
+        onMouseLeave,
+        datum,
+    ])
 
     return (
         <animated.path
             d={style.path}
             opacity={style.opacity}
-            // fill={datum.fill || color}
-            fill={style.color}
+            fill={datum.fill || style.color}
             stroke={style.borderColor}
             strokeWidth={style.borderWidth}
             onClick={onClick ? handleClick : undefined}

diff --git a/packages/arcs/src/ArcsLayer.tsx b/packages/arcs/src/ArcsLayer.tsx
@@ -70,7 +70,7 @@ export const ArcsLayer = <Datum extends DatumWithArcAndColor>({
             {transition((transitionProps, datum) => {
                 return createElement(Arc, {
                     key: datum.id,
-                    data: datum,
+                    datum,
                     style: {
                         ...transitionProps,
                         borderWidth,

diff --git a/packages/arcs/src/types.ts b/packages/arcs/src/types.ts
@@ -23,6 +23,8 @@ export interface DatumWithArc {
 
 export interface DatumWithArcAndColor extends DatumWithArc {
     color: string
+    // when using patterns/gradients
+    fill?: string
 }
 
 export type ArcGenerator = D3Arc<any, Arc>
diff --git a/packages/pie/src/Slices.tsx → packages/pie/src/Arcs.tsx b/packages/pie/src/Slices.tsx → packages/pie/src/Arcs.tsx
@@ -3,7 +3,7 @@ import { ArcGenerator, ArcsLayer } from '@nivo/arcs'
 import { useTooltip } from '@nivo/tooltip'
 import { ComputedDatum, CompletePieSvgProps } from './types'
 
-interface SlicesProps<RawDatum> {
+interface ArcsProps<RawDatum> {
     center: [number, number]
     data: ComputedDatum<RawDatum>[]
     arcGenerator: ArcGenerator
@@ -19,7 +19,7 @@ interface SlicesProps<RawDatum> {
     transitionMode: CompletePieSvgProps<RawDatum>['transitionMode']
 }
 
-export const Slices = <RawDatum,>({
+export const Arcs = <RawDatum,>({
     center,
     data,
     arcGenerator,
@@ -33,7 +33,7 @@ export const Slices = <RawDatum,>({
     setActiveId,
     tooltip,
     transitionMode,
-}: SlicesProps<RawDatum>) => {
+}: ArcsProps<RawDatum>) => {
     const { showTooltipFromEvent, hideTooltip } = useTooltip()
 
     const handleClick = useMemo(() => {

diff --git a/packages/pie/src/Pie.tsx b/packages/pie/src/Pie.tsx
@@ -13,7 +13,7 @@ import PieLegends from './PieLegends'
 import { useNormalizedData, usePieFromBox, usePieLayerContext } from './hooks'
 import { ComputedDatum, PieLayer, PieSvgProps, PieLayerId } from './types'
 import { defaultProps } from './props'
-import { Slices } from './Slices'
+import { Arcs } from './Arcs'
 
 const InnerPie = <RawDatum,>({
     data,
@@ -119,16 +119,16 @@ const InnerPie = <RawDatum,>({
     const boundDefs = bindDefs(defs, dataWithArc, fill)
 
     const layerById: Record<PieLayerId, ReactNode> = {
-        slices: null,
+        arcs: null,
         radialLabels: null,
         sliceLabels: null,
         legends: null,
     }
 
-    if (layers.includes('slices')) {
-        layerById.slices = (
-            <Slices<RawDatum>
-                key="slices"
+    if (layers.includes('arcs')) {
+        layerById.arcs = (
+            <Arcs<RawDatum>
+                key="arcs"
                 center={[centerX, centerY]}
                 data={dataWithArc}
                 arcGenerator={arcGenerator}

diff --git a/packages/pie/src/props.ts b/packages/pie/src/props.ts
@@ -10,7 +10,7 @@ export const defaultProps = {
     padAngle: 0,
     cornerRadius: 0,
 
-    layers: ['radialLabels', 'slices', 'sliceLabels', 'legends'],
+    layers: ['radialLabels', 'arcs', 'sliceLabels', 'legends'],
 
     // layout
     startAngle: 0,

diff --git a/packages/pie/src/types.ts b/packages/pie/src/types.ts
@@ -58,7 +58,7 @@ export type MouseEventHandler<RawDatum, ElementType = HTMLCanvasElement> = (
     event: React.MouseEvent<ElementType>
 ) => void
 
-export type PieLayerId = 'radialLabels' | 'slices' | 'sliceLabels' | 'legends'
+export type PieLayerId = 'radialLabels' | 'arcs' | 'sliceLabels' | 'legends'
 
 export interface PieCustomLayerProps<RawDatum> {
     dataWithArc: ComputedDatum<RawDatum>[]