Merge pull request #1 from Seesy/feat/add-axisFormat-bullet

Feat/add axis format bullet

Author: MedliPlays

CHANGELOG.md

@@ -1,6 +1,6 @@
 {
   "name": "@nivo/api",
-  "version": "0.73.1",
+  "version": "0.74.0",
   "description": "Rendering API for nivo dataviz React/d3 components",
   "main": "src/app.js",
   "licenses": [
@@ -22,26 +22,26 @@
     "nodemon": "^1.18.10"
   },
   "dependencies": {
-    "@nivo/bar": "0.73.1",
-    "@nivo/bullet": "0.73.0",
-    "@nivo/calendar": "0.73.0",
-    "@nivo/chord": "0.73.0",
-    "@nivo/circle-packing": "0.73.0",
-    "@nivo/core": "0.73.0",
-    "@nivo/generators": "0.73.0",
-    "@nivo/heatmap": "0.73.0",
-    "@nivo/legends": "0.73.0",
-    "@nivo/line": "0.73.0",
-    "@nivo/parallel-coordinates": "0.73.0",
-    "@nivo/pie": "0.73.0",
-    "@nivo/radar": "0.73.0",
-    "@nivo/sankey": "0.73.0",
-    "@nivo/scatterplot": "0.73.0",
-    "@nivo/stream": "0.73.0",
-    "@nivo/sunburst": "0.73.0",
-    "@nivo/treemap": "0.73.0",
-    "@nivo/voronoi": "0.73.0",
-    "@nivo/waffle": "0.73.0",
+    "@nivo/bar": "0.74.0",
+    "@nivo/bullet": "0.74.0",
+    "@nivo/calendar": "0.74.0",
+    "@nivo/chord": "0.74.0",
+    "@nivo/circle-packing": "0.74.0",
+    "@nivo/core": "0.74.0",
+    "@nivo/generators": "0.74.0",
+    "@nivo/heatmap": "0.74.0",
+    "@nivo/legends": "0.74.0",
+    "@nivo/line": "0.74.0",
+    "@nivo/parallel-coordinates": "0.74.0",
+    "@nivo/pie": "0.74.0",
+    "@nivo/radar": "0.74.0",
+    "@nivo/sankey": "0.74.0",
+    "@nivo/scatterplot": "0.74.0",
+    "@nivo/stream": "0.74.0",
+    "@nivo/sunburst": "0.74.0",
+    "@nivo/treemap": "0.74.0",
+    "@nivo/voronoi": "0.74.0",
+    "@nivo/waffle": "0.74.0",
     "body-parser": "^1.17.2",
     "compression": "^1.7.0",
     "cors": "^2.8.4",

api/package.json

@@ -108,6 +108,10 @@ capture:
       #   selector: '#chart'
       #   output: ./packages/radar/doc/radar.png
 
+      # - path: /radial-bar
+      #   selector: '#chart'
+      #   output: ./packages/radial-bar/doc/radial-bar.png
+
       # - path: /sankey
       #   selector: '#chart'
       #   output: ./packages/sankey/doc/sankey.png
@@ -517,15 +521,28 @@ capture:
       #   selector: '#marimekko-darkColored'
       #   output: ./website/src/assets/icons/marimekko-dark-colored.png
 
+      # - path: /internal/icons/
+      #   selector: '#time-range-lightNeutral'
+      #   output: ./website/src/assets/icons/time-range-light-neutral.png
+      # - path: /internal/icons/
+      #   selector: '#time-range-lightColored'
+      #   output: ./website/src/assets/icons/time-range-light-colored.png
+      # - path: /internal/icons/
+      #   selector: '#time-range-darkNeutral'
+      #   output: ./website/src/assets/icons/time-range-dark-neutral.png
+      # - path: /internal/icons/
+      #   selector: '#time-range-darkColored'
+      #   output: ./website/src/assets/icons/time-range-dark-colored.png
+
       - path: /internal/icons/
-        selector: '#time-range-lightNeutral'
-        output: ./website/src/assets/icons/time-range-light-neutral.png
+        selector: '#radial-bar-lightNeutral'
+        output: ./website/src/assets/icons/radial-bar-light-neutral.png
       - path: /internal/icons/
-        selector: '#time-range-lightColored'
-        output: ./website/src/assets/icons/time-range-light-colored.png
+        selector: '#radial-bar-lightColored'
+        output: ./website/src/assets/icons/radial-bar-light-colored.png
       - path: /internal/icons/
-        selector: '#time-range-darkNeutral'
-        output: ./website/src/assets/icons/time-range-dark-neutral.png
+        selector: '#radial-bar-darkNeutral'
+        output: ./website/src/assets/icons/radial-bar-dark-neutral.png
       - path: /internal/icons/
-        selector: '#time-range-darkColored'
-        output: ./website/src/assets/icons/time-range-dark-colored.png
+        selector: '#radial-bar-darkColored'
+        output: ./website/src/assets/icons/radial-bar-dark-colored.png

conf/base.yaml

@@ -3,7 +3,7 @@
     "packages/*",
     "api"
   ],
-  "version": "0.73.1",
+  "version": "0.74.0",
   "npmClient": "yarn",
   "useWorkspaces": true
 }

lerna.json

@@ -1,6 +1,6 @@
 {
   "name": "@nivo/annotations",
-  "version": "0.73.0",
+  "version": "0.74.0",
   "license": "MIT",
   "author": {
     "name": "Raphaël Benitte",
@@ -28,15 +28,15 @@
     "!dist/tsconfig.tsbuildinfo"
   ],
   "dependencies": {
-    "@nivo/colors": "0.73.0",
-    "@react-spring/web": "9.2.4",
+    "@nivo/colors": "0.74.0",
+    "@react-spring/web": "9.2.6",
     "lodash": "^4.17.21"
   },
   "devDependencies": {
-    "@nivo/core": "0.73.0"
+    "@nivo/core": "0.74.0"
   },
   "peerDependencies": {
-    "@nivo/core": "0.73.0",
+    "@nivo/core": "0.74.0",
     "react": ">= 16.14.0 < 18.0.0"
   },
   "publishConfig": {

packages/annotations/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nivo/arcs",
-  "version": "0.73.0",
+  "version": "0.74.0",
   "license": "MIT",
   "author": {
     "name": "Raphaël Benitte",
@@ -28,16 +28,16 @@
     "!dist/tsconfig.tsbuildinfo"
   ],
   "dependencies": {
-    "@nivo/colors": "0.73.0",
-    "@react-spring/web": "9.2.4",
+    "@nivo/colors": "0.74.0",
+    "@react-spring/web": "9.2.6",
     "d3-shape": "^1.3.5"
   },
   "devDependencies": {
-    "@nivo/core": "0.73.0",
+    "@nivo/core": "0.74.0",
     "@types/d3-shape": "^2.0.0"
   },
   "peerDependencies": {
-    "@nivo/core": "0.73.0",
+    "@nivo/core": "0.74.0",
     "react": ">= 16.14.0 < 18.0.0"
   },
   "publishConfig": {

packages/arcs/package.json

@@ -0,0 +1,22 @@
+import { animated, to, AnimatedProps } from '@react-spring/web'
+import { ExtractProps } from '@nivo/core'
+import { generateSvgArc } from './utils'
+
+type ArcLineProps = {
+    animated: AnimatedProps<{
+        radius: number
+        startAngle: number
+        endAngle: number
+        opacity: number
+    }>
+} & ExtractProps<typeof animated.path>
+
+export const ArcLine = ({ animated: animatedProps, ...rest }: ArcLineProps) => (
+    <animated.path
+        d={to(
+            [animatedProps.radius, animatedProps.startAngle, animatedProps.endAngle],
+            (radius, start, end) => generateSvgArc(radius, start, end)
+        )}
+        {...rest}
+    />
+)

packages/arcs/src/ArcLine.tsx

@@ -44,7 +44,7 @@ export const computeArcBoundingBox = (
     }
 
     points = points.map(([x, y]) => [centerX + x, centerY + y])
-    if (includeCenter === true) {
+    if (includeCenter) {
         points.push([centerX, centerY])
     }
 

packages/arcs/src/boundingBox.ts

@@ -1,5 +1,6 @@
 export * from './arc_labels'
 export * from './arc_link_labels'
+export * from './ArcLine'
 export * from './ArcShape'
 export * from './ArcsLayer'
 export * from './arcTransitionMode'

packages/arcs/src/index.ts

@@ -1,5 +1,5 @@
 import { useMemo } from 'react'
-import { radiansToDegrees } from '@nivo/core'
+import { radiansToDegrees, positionFromAngle, degreesToRadians } from '@nivo/core'
 import { DatumWithArc } from './types'
 
 /**
@@ -33,3 +33,53 @@ export const useFilteredDataBySkipAngle = <Datum extends DatumWithArc>(
     data: Datum[],
     skipAngle: number
 ) => useMemo(() => filterDataBySkipAngle(data, skipAngle), [data, skipAngle])
+
+export const svgEllipticalArcCommand = (
+    radius: number,
+    largeArcFlag: 0 | 1,
+    sweepFlag: 0 | 1,
+    x: number,
+    y: number
+) =>
+    [
+        'A',
+        radius,
+        radius,
+        0, // x-axis-rotation
+        largeArcFlag,
+        sweepFlag,
+        x,
+        y,
+    ].join(' ')
+
+export const generateSvgArc = (
+    radius: number,
+    originalStartAngle: number,
+    originalEndAngle: number
+): string => {
+    const startAngle = Math.min(originalStartAngle, originalEndAngle)
+    const endAngle = Math.max(originalStartAngle, originalEndAngle)
+
+    const start = positionFromAngle(degreesToRadians(endAngle), radius)
+    const end = positionFromAngle(degreesToRadians(startAngle), radius)
+
+    // we have a full circle, we cannot use a single elliptical arc
+    // to draw it, so we use 2 in that case.
+    if (endAngle - startAngle >= 360) {
+        const mid = positionFromAngle(degreesToRadians(startAngle + 180), radius)
+
+        return [
+            `M ${start.x} ${start.y}`,
+            svgEllipticalArcCommand(radius, 1, 1, mid.x, mid.y),
+            `M ${start.x} ${start.y}`,
+            svgEllipticalArcCommand(radius, 1, 0, mid.x, mid.y),
+        ].join(' ')
+    }
+
+    const largeArcFlag = endAngle - startAngle <= 180 ? 0 : 1
+
+    return [
+        `M ${start.x} ${start.y}`,
+        svgEllipticalArcCommand(radius, largeArcFlag, 0, end.x, end.y),
+    ].join(' ')
+}