chore(bullet): switch from d3-scale to @nivo/scales

plouc · Jun 28, 2021 · dfd0099 · dfd0099
1 parent 0f4271d
commit dfd0099
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 25 deletions.
diff --git a/packages/bullet/package.json b/packages/bullet/package.json
@@ -33,12 +33,10 @@
     "@nivo/colors": "0.71.0",
     "@nivo/legends": "0.71.0",
     "@nivo/tooltip": "0.71.0",
-    "@react-spring/web": "9.2.0",
-    "d3-scale": "^3.2.3"
+    "@react-spring/web": "9.2.0"
   },
   "devDependencies": {
-    "@nivo/core": "0.71.0",
-    "@types/d3-scale": "^3.2.2"
+    "@nivo/core": "0.71.0"
   },
   "peerDependencies": {
     "@nivo/core": "0.71.0",

diff --git a/packages/bullet/src/hooks.ts b/packages/bullet/src/hooks.ts
@@ -1,4 +1,4 @@
-import { ScaleLinear, scaleLinear } from 'd3-scale'
+import { createLinearScale } from '@nivo/scales'
 import { useMemo } from 'react'
 import { Datum, CommonBulletProps } from './types'
 
@@ -15,25 +15,15 @@ export const useEnhancedData = (
         () =>
             data.map(d => {
                 const all = [...d.ranges, ...d.measures, ...(d.markers ?? [])]
-
                 const max = Math.max(...all)
-
                 const min = Math.min(...all, 0)
 
-                const scale = scaleLinear().domain([min, max]) as ScaleLinear<
-                    number,
-                    number,
-                    never
-                > & { type: 'linear' }
-
-                if (layout === 'horizontal') {
-                    scale.range(reverse === true ? [width, 0] : [0, width])
-                } else {
-                    scale.range(reverse === true ? [0, height] : [height, 0])
-                }
-
-                // Add our type property
-                ;(scale as any).type = 'linear'
+                const scale = createLinearScale(
+                    { reverse, type: 'linear' },
+                    { all, max, min },
+                    layout === 'horizontal' ? width : height,
+                    layout === 'horizontal' ? 'x' : 'y'
+                )
 
                 return {
                     ...d,

diff --git a/packages/bullet/src/types.ts b/packages/bullet/src/types.ts
@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { Box, Dimensions, Theme, Colors, ModernMotionProps } from '@nivo/core'
-import { ScaleLinear } from 'd3-scale'
+import { ScaleLinear } from '@nivo/scales'
 import { SpringValues } from '@react-spring/web'
 
 export type DatumId = string | number
@@ -22,7 +22,7 @@ export interface Datum {
 }
 
 export type EnhancedDatum = Datum & {
-    scale: ScaleLinear<number, number, never> & { type: 'linear' }
+    scale: ScaleLinear<number>
 }
 
 export interface ComputedRangeDatum {
@@ -133,7 +133,7 @@ export type BulletRectsProps = Pick<CommonBulletProps, 'layout' | 'reverse'> &
             measuresY: number
             transform: string
         }>
-        scale: ScaleLinear<number, number, never>
+        scale: ScaleLinear<number>
         data: ComputedRangeDatum[]
         component: CommonBulletProps['rangeComponent']
         onMouseEnter: MouseEventWithDatum<ComputedRangeDatum, SVGRectElement>
@@ -160,7 +160,7 @@ export type PositionWithColor = {
 
 export type BulletMarkersProps = Pick<CommonBulletProps, 'layout' | 'reverse'> &
     Pick<Dimensions, 'height'> & {
-        scale: ScaleLinear<number, number, never>
+        scale: ScaleLinear<number>
         markerSize: number
         markers: ComputedMarkersDatum[]
         component: CommonBulletProps['markerComponent']