feat(arcs): introduce @nivo/arcs package

packages/arcs/LICENSE.md

@@ -0,0 +1,19 @@
+Copyright (c) Raphaël Benitte
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
+of the Software, and to permit persons to whom the Software is furnished to do
+so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

packages/arcs/README.md

@@ -0,0 +1,3 @@
+# `@nivo/arcs`
+
+[![version](https://img.shields.io/npm/v/@nivo/arcs.svg?style=flat-square)](https://www.npmjs.com/package/@nivo/arcs)

packages/arcs/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@nivo/arcs",
+  "version": "0.66.0",
+  "license": "MIT",
+  "author": {
+    "name": "Raphaël Benitte",
+    "url": "https://github.com/plouc"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/plouc/nivo.git",
+    "directory": "packages/arcs"
+  },
+  "keywords": [
+    "nivo",
+    "dataviz",
+    "react",
+    "d3",
+    "arcs"
+  ],
+  "main": "./dist/nivo-arcs.cjs.js",
+  "module": "./dist/nivo-arcs.es.js",
+  "typings": "./dist/types/index.d.ts",
+  "files": [
+    "README.md",
+    "LICENSE.md",
+    "dist/",
+    "!dist/tsconfig.tsbuildinfo"
+  ],
+  "dependencies": {
+    "d3-shape": "^1.3.5",
+    "react-spring": "9.0.0-rc.3"
+  },
+  "devDependencies": {
+    "@nivo/core": "0.66.0",
+    "@types/d3-shape": "^2.0.0"
+  },
+  "peerDependencies": {
+    "@nivo/core": "0.66.0",
+    "react": ">= 16.8.4 < 18.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

packages/arcs/src/index.ts

@@ -0,0 +1,3 @@
+export * from './types'
+export * from './useAnimatedArc'
+export * from './useArcGenerator'

packages/arcs/src/types.ts

@@ -0,0 +1,18 @@
+import { Arc as D3Arc } from 'd3-shape'
+
+export interface Arc {
+    // start angle in radians
+    startAngle: number
+    // end angle in radians
+    endAngle: number
+    // inner radius in pixels
+    innerRadius: number
+    // outer radius in pixels
+    outerRadius: number
+}
+
+export interface DatumWithArc {
+    arc: Arc
+}
+
+export type ArcGenerator = D3Arc<any, Arc>

packages/arcs/src/useAnimatedArc.ts

@@ -0,0 +1,35 @@
+import { to, useSpring } from 'react-spring'
+import { useMotionConfig } from '@nivo/core'
+import { Arc, ArcGenerator } from './types'
+
+export const useAnimatedArc = (datumWithArc: { arc: Arc }, arcGenerator: ArcGenerator) => {
+    const { animate, config: springConfig } = useMotionConfig()
+
+    const animatedValues = useSpring({
+        startAngle: datumWithArc.arc.startAngle,
+        endAngle: datumWithArc.arc.endAngle,
+        innerRadius: datumWithArc.arc.innerRadius,
+        outerRadius: datumWithArc.arc.outerRadius,
+        config: springConfig,
+        immediate: !animate,
+    })
+
+    return {
+        ...animatedValues,
+        path: to(
+            [
+                animatedValues.startAngle,
+                animatedValues.endAngle,
+                animatedValues.innerRadius,
+                animatedValues.outerRadius,
+            ],
+            (startAngle, endAngle, innerRadius, outerRadius) =>
+                arcGenerator({
+                    startAngle,
+                    endAngle,
+                    innerRadius,
+                    outerRadius,
+                })
+        ),
+    }
+}

packages/arcs/src/useArcGenerator.ts

@@ -0,0 +1,13 @@
+import { useMemo } from 'react'
+import { arc as d3Arc } from 'd3-shape'
+import { ArcGenerator, Arc } from './types'
+
+export const useArcGenerator = ({ cornerRadius = 0 }: { cornerRadius: number }): ArcGenerator =>
+    useMemo(
+        () =>
+            d3Arc<Arc>()
+                .innerRadius(arc => arc.innerRadius)
+                .outerRadius(arc => arc.outerRadius)
+                .cornerRadius(cornerRadius),
+        [cornerRadius]
+    )

packages/arcs/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "../../tsconfig.types.json",
+  "compilerOptions": {
+    "outDir": "./dist/types",
+    "rootDir": "./src"
+  },
+  "include": ["src/**/*"]
+}

packages/pie/package.json

@@ -29,11 +29,13 @@
     "!dist/tsconfig.tsbuildinfo"
   ],
   "dependencies": {
+    "@nivo/arcs": "0.66.0",
     "@nivo/colors": "0.67.0",
     "@nivo/legends": "0.67.0",
     "@nivo/tooltip": "0.67.0",
     "d3-shape": "^1.3.5",
-    "lodash": "^4.17.11"
+    "lodash": "^4.17.11",
+    "react-spring": "9.0.0-rc.3"
   },
   "devDependencies": {
     "@nivo/core": "0.67.0",

packages/pie/src/Pie.tsx

@@ -95,9 +95,15 @@ const Pie = <RawDatum,>({
         colors,
     })
 
-    const { dataWithArc, arcGenerator, centerX, centerY, radius, innerRadius } = usePieFromBox<
-        RawDatum
-    >({
+    const {
+        dataWithArc,
+        arcGenerator,
+        centerX,
+        centerY,
+        radius,
+        innerRadius,
+        setActiveId,
+    } = usePieFromBox<RawDatum>({
         data: normalizedData,
         width: innerWidth,
         height: innerHeight,
@@ -128,7 +134,7 @@ const Pie = <RawDatum,>({
                     <PieSlice<RawDatum>
                         key={datumWithArc.id}
                         datum={datumWithArc}
-                        path={arcGenerator(datumWithArc.arc) ?? undefined}
+                        arcGenerator={arcGenerator}
                         borderWidth={borderWidth}
                         borderColor={borderColor(datumWithArc)}
                         tooltip={tooltip}
@@ -137,6 +143,7 @@ const Pie = <RawDatum,>({
                         onMouseEnter={onMouseEnter}
                         onMouseMove={onMouseMove}
                         onMouseLeave={onMouseLeave}
+                        setActiveId={setActiveId}
                     />
                 ))}
             </g>

packages/pie/src/PieSlice.tsx

@@ -1,10 +1,12 @@
 import React, { createElement, useCallback } from 'react'
-// @ts-ignore
+import { animated } from 'react-spring'
 import { useTooltip } from '@nivo/tooltip'
+import { useAnimatedArc, ArcGenerator } from '@nivo/arcs'
 import { ComputedDatum, CompletePieSvgProps } from './types'
 
 interface PieSliceProps<RawDatum> {
     datum: ComputedDatum<RawDatum>
+    arcGenerator: ArcGenerator
     path?: string
     borderWidth: CompletePieSvgProps<RawDatum>['borderWidth']
     borderColor: string
@@ -14,11 +16,12 @@ interface PieSliceProps<RawDatum> {
     onMouseEnter: CompletePieSvgProps<RawDatum>['onMouseEnter']
     onMouseMove: CompletePieSvgProps<RawDatum>['onMouseMove']
     onMouseLeave: CompletePieSvgProps<RawDatum>['onMouseLeave']
+    setActiveId: (id: null | string | number) => void
 }
 
 export const PieSlice = <RawDatum,>({
     datum,
-    path,
+    arcGenerator,
     borderWidth,
     borderColor,
     isInteractive,
@@ -27,6 +30,7 @@ export const PieSlice = <RawDatum,>({
     onMouseMove,
     onMouseLeave,
     tooltip,
+    setActiveId,
 }: PieSliceProps<RawDatum>) => {
     const { showTooltipFromEvent, hideTooltip } = useTooltip()
 
@@ -38,9 +42,10 @@ export const PieSlice = <RawDatum,>({
     const handleMouseEnter = useCallback(
         event => {
             onMouseEnter?.(datum, event)
+            setActiveId(datum.id)
             handleTooltip(event)
         },
-        [onMouseEnter, handleTooltip, datum]
+        [onMouseEnter, setActiveId, handleTooltip, datum]
     )
 
     const handleMouseMove = useCallback(
@@ -54,6 +59,7 @@ export const PieSlice = <RawDatum,>({
     const handleMouseLeave = useCallback(
         event => {
             onMouseLeave?.(datum, event)
+            setActiveId(null)
             hideTooltip()
         },
         [onMouseLeave, hideTooltip, datum]
@@ -66,9 +72,11 @@ export const PieSlice = <RawDatum,>({
         [onClick, datum]
     )
 
+    const animatedArc = useAnimatedArc(datum, arcGenerator)
+
     return (
-        <path
-            d={path ?? undefined}
+        <animated.path
+            d={animatedArc.path}
             fill={datum.fill || datum.color}
             strokeWidth={borderWidth}
             stroke={borderColor}