Merge branch 'master' into fix-invalid-core-types

plouc · Apr 23, 2021 · 351d7b0 · 351d7b0
2 parents a376a61 + 1d94b5f
commit 351d7b0
Show file tree

Hide file tree

Showing 45 changed files with 330 additions and 296 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
diff --git a/Makefile b/Makefile
@@ -119,6 +119,10 @@ packages-lint: ##@1 packages run eslint on all packages
 	@echo "${YELLOW}Running eslint on all packages${RESET}"
 	@./node_modules/.bin/eslint "./packages/*/{src,tests}/**/*.{js,ts,tsx}"
 
+packages-lint-fix: ##@1 packages run eslint on all packages with a fix option
+	@echo "${YELLOW}Running eslint on all packages${RESET}"
+	@./node_modules/.bin/eslint "./packages/*/{src,tests}/**/*.{js,ts,tsx}" --fix
+
 package-test-cover-%: ##@1 packages run tests for a package with code coverage
 	@yarn jest -c ./packages/jest.config.js --rootDir . --coverage ./packages/${*}/tests
 
@@ -207,7 +211,6 @@ website: ##@2 website start website in dev mode
 
 website-build: ##@2 website build website
 	@echo "${YELLOW}Building website${RESET}"
-	@node scripts/patch-react-spring.js
 	@cd website && yarn build
 
 website-serve: ##@2 website build & serve website

diff --git a/packages/annotations/package.json b/packages/annotations/package.json
@@ -29,7 +29,7 @@
   "dependencies": {
     "@nivo/colors": "0.67.0",
     "lodash": "^4.17.11",
-    "react-spring": "9.0.0-rc.3"
+    "react-spring": "9.1.2"
   },
   "devDependencies": {
     "@nivo/core": "0.67.0"

diff --git a/packages/arcs/package.json b/packages/arcs/package.json
@@ -30,7 +30,7 @@
   "dependencies": {
     "@nivo/colors": "0.67.0",
     "d3-shape": "^1.3.5",
-    "react-spring": "9.0.0-rc.3"
+    "react-spring": "9.1.2"
   },
   "devDependencies": {
     "@nivo/core": "0.67.0",

diff --git a/packages/arcs/src/arc_link_labels/useArcLinkLabelsTransition.ts b/packages/arcs/src/arc_link_labels/useArcLinkLabelsTransition.ts
@@ -244,7 +244,7 @@ export const useArcLinkLabelsTransition = <Datum extends DatumWithArcAndColor>({
     })
 
     const transition = useTransition<Datum, AnimatedProps>(filteredData, {
-        key: datum => datum.id,
+        keys: datum => datum.id,
         initial: transitionPhases.update,
         from: transitionPhases.enter,
         enter: transitionPhases.update,

diff --git a/packages/arcs/src/centers.ts b/packages/arcs/src/centers.ts
@@ -59,7 +59,7 @@ export const useArcCentersTransition = <Datum extends DatumWithArc, ExtraProps =
             outerRadius: number
         } & ExtraProps
     >(data, {
-        key: datum => datum.id,
+        keys: datum => datum.id,
         initial: phases.update,
         from: phases.enter,
         enter: phases.update,

diff --git a/packages/arcs/src/useArcsTransition.ts b/packages/arcs/src/useArcsTransition.ts
@@ -28,7 +28,7 @@ export const useArcsTransition = <Datum extends DatumWithArc, ExtraProps = unkno
             outerRadius: number
         } & ExtraProps
     >(data, {
-        key: datum => datum.id,
+        keys: datum => datum.id,
         initial: phases.update,
         from: phases.enter,
         enter: phases.update,

diff --git a/packages/axes/package.json b/packages/axes/package.json
@@ -30,7 +30,7 @@
     "d3-format": "^1.4.4",
     "d3-time": "^1.0.11",
     "d3-time-format": "^2.1.3",
-    "react-spring": "9.0.0-rc.3"
+    "react-spring": "9.1.2"
   },
   "devDependencies": {
     "@nivo/core": "0.67.0"

diff --git a/packages/axes/src/components/Axis.js b/packages/axes/src/components/Axis.js
@@ -14,8 +14,6 @@ import { computeCartesianTicks, getFormatter } from '../compute'
 import { axisPropTypes } from '../props'
 import AxisTick from './AxisTick'
 
-const defaultTickRenderer = props => <AxisTick {...props} />
-
 const Axis = ({
     axis,
     scale,
@@ -146,7 +144,6 @@ const Axis = ({
                     animatedProps: transitionProps,
                     ...tick,
                     ...(onClick ? { onClick } : {}),
-                    key: tick.key,
                 })
             })}
             <animated.line
@@ -173,7 +170,7 @@ Axis.propTypes = {
     tickPadding: PropTypes.number.isRequired,
     tickRotation: PropTypes.number.isRequired,
     format: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
-    renderTick: PropTypes.func.isRequired,
+    renderTick: PropTypes.elementType,
     legend: PropTypes.node,
     legendPosition: PropTypes.oneOf(['start', 'middle', 'end']).isRequired,
     legendOffset: PropTypes.number.isRequired,
@@ -186,7 +183,7 @@ Axis.defaultProps = {
     tickSize: 5,
     tickPadding: 5,
     tickRotation: 0,
-    renderTick: defaultTickRenderer,
+    renderTick: AxisTick,
     legendPosition: 'end',
     legendOffset: 0,
 }

diff --git a/packages/axes/src/compute.js b/packages/axes/src/compute.js
@@ -184,7 +184,7 @@ export const computeCartesianTicks = ({
     }
 
     const ticks = values.map(value => ({
-        key: value,
+        key: typeof value === 'number' || typeof value === 'string' ? value : `${value}`,
         value,
         ...translate(value),
         ...line,

diff --git a/packages/bar/index.d.ts b/packages/bar/index.d.ts
@@ -51,7 +51,7 @@ declare module '@nivo/bar' {
 
     export type ValueFormatter = (value: number) => string | number
 
-    type GraphicsContainer = HTMLCanvasElement | SVGRectElement
+    type GraphicsContainer = HTMLCanvasElement | SVGElement
 
     export type BarMouseEventHandler<T = GraphicsContainer> = (
         datum: BarExtendedDatum,
@@ -146,9 +146,9 @@ declare module '@nivo/bar' {
         SvgDefsAndFill<BarDatum> &
         Partial<{
             layers: Layer[]
-            onClick: BarMouseEventHandler<SVGRectElement>
-            onMouseEnter: BarMouseEventHandler<SVGRectElement>
-            onMouseLeave: BarMouseEventHandler<SVGRectElement>
+            onClick: BarMouseEventHandler<SVGElement>
+            onMouseEnter: BarMouseEventHandler<SVGElement>
+            onMouseLeave: BarMouseEventHandler<SVGElement>
             role: string
         }>
 

diff --git a/packages/bar/src/compute/common.js b/packages/bar/src/compute/common.js
@@ -28,9 +28,17 @@ export const getIndexScale = (data, getIndex, range, padding, indexScale) => {
 
 export const normalizeData = (data, keys) =>
     data.map(item => ({
-        ...keys.reduce((acc, key) => ({ ...acc, [key]: null }), {}),
+        ...keys.reduce((acc, key) => {
+            acc[key] = null
+            return acc
+        }, {}),
         ...item,
     }))
 
 export const filterNullValues = data =>
-    Object.keys(data).reduce((acc, key) => (data[key] ? { ...acc, [key]: data[key] } : acc), {})
+    Object.keys(data).reduce((acc, key) => {
+        if (data[key]) {
+            acc[key] = data[key]
+        }
+        return acc
+    }, {})
diff --git a/packages/bar/src/compute/grouped.js b/packages/bar/src/compute/grouped.js
@@ -42,6 +42,7 @@ const generateVerticalGroupedBars = (
     const compare = reverse ? lt : gt
     const getY = d => (compare(d, 0) ? yScale(d) : yRef)
     const getHeight = (d, y) => (compare(d, 0) ? yRef - y : yScale(d) - yRef)
+    const cleanedData = data.map(filterNullValues)
 
     const bars = flatten(
         keys.map((key, i) =>
@@ -54,7 +55,7 @@ const generateVerticalGroupedBars = (
                     value: data[index][key],
                     index,
                     indexValue: getIndex(data[index]),
-                    data: filterNullValues(data[index]),
+                    data: cleanedData[index],
                 }
 
                 return {
@@ -98,6 +99,7 @@ const generateHorizontalGroupedBars = (
     const compare = reverse ? lt : gt
     const getX = d => (compare(d, 0) ? xRef : xScale(d))
     const getWidth = (d, x) => (compare(d, 0) ? xScale(d) - xRef : xRef - x)
+    const cleanedData = data.map(filterNullValues)
 
     const bars = flatten(
         keys.map((key, i) =>
@@ -110,7 +112,7 @@ const generateHorizontalGroupedBars = (
                     value: data[index][key],
                     index,
                     indexValue: getIndex(data[index]),
-                    data: filterNullValues(data[index]),
+                    data: cleanedData[index],
                 }
 
                 return {

diff --git a/packages/bullet/package.json b/packages/bullet/package.json
@@ -34,7 +34,7 @@
     "@nivo/legends": "0.67.0",
     "@nivo/tooltip": "0.67.0",
     "d3-scale": "^3.0.0",
-    "react-spring": "9.0.0-rc.3"
+    "react-spring": "9.1.2"
   },
   "devDependencies": {
     "@nivo/core": "0.67.0",

diff --git a/packages/bullet/src/BulletMarkers.tsx b/packages/bullet/src/BulletMarkers.tsx
@@ -63,7 +63,7 @@ export const BulletMarkers = ({
     const transition = useTransition<MarkerWithPosition, PositionWithColor>(
         markers.map(marker => ({ ...marker, position: getPosition(marker) })),
         {
-            key: marker => `${marker.index}`,
+            keys: marker => `${marker.index}`,
             enter: ({ color, position }: MarkerWithPosition) => ({
                 color,
                 transform: `rotate(${position.rotation}, ${position.x}, ${position.y})`,

diff --git a/packages/bullet/src/BulletRects.tsx b/packages/bullet/src/BulletRects.tsx
@@ -37,7 +37,7 @@ export const BulletRects = ({
 
     const { animate, config: springConfig } = useMotionConfig()
     const transition = useTransition<BulletRectComputedRect, BulletRectAnimatedProps>(rects, {
-        key: rect => `${rect.data.index}`,
+        keys: rect => `${rect.data.index}`,
         enter: rect => ({
             x: rect.x,
             y: rect.y,

diff --git a/packages/bump/package.json b/packages/bump/package.json
@@ -35,7 +35,7 @@
     "@nivo/legends": "0.67.0",
     "@nivo/tooltip": "0.67.0",
     "d3-shape": "^1.3.5",
-    "react-spring": "9.0.0-rc.3"
+    "react-spring": "9.1.2"
   },
   "devDependencies": {
     "@nivo/core": "0.67.0"

diff --git a/packages/core/index.d.ts b/packages/core/index.d.ts
@@ -87,6 +87,7 @@ declare module '@nivo/core' {
             chip: Partial<React.CSSProperties>
             table: Partial<React.CSSProperties>
             tableCell: Partial<React.CSSProperties>
+            tableCellValue: Partial<React.CSSProperties>
         }
         annotations: {
             text: Partial<React.CSSProperties>
@@ -165,8 +166,10 @@ declare module '@nivo/core' {
 
     export interface CartesianMarkerProps {
         axis: 'x' | 'y'
-        value: string | number | Date
+        value: DatumValue
         legend?: string
+        legendOrientation?: 'horizontal' | 'vertical'
+        legendPosition?: BoxAlign
         lineStyle?: Partial<React.CSSProperties>
         textStyle?: Partial<React.CSSProperties>
     }

diff --git a/packages/core/package.json b/packages/core/package.json
@@ -29,7 +29,7 @@
     "d3-shape": "^1.3.5",
     "d3-time-format": "^2.1.3",
     "lodash": "^4.17.11",
-    "react-spring": "9.0.0-rc.3",
+    "react-spring": "9.1.2",
     "recompose": "^0.30.0",
     "resize-observer-polyfill": "^1.5.1"
   },

diff --git a/packages/core/src/theming/defaultTheme.js b/packages/core/src/theming/defaultTheme.js
@@ -72,6 +72,9 @@ export const defaultTheme = {
         tableCell: {
             padding: '3px 5px',
         },
+        tableCellValue: {
+            fontWeight: 'bold',
+        },
     },
     crosshair: {
         line: {

diff --git a/packages/funnel/package.json b/packages/funnel/package.json
@@ -28,18 +28,18 @@
     "dist/"
   ],
   "dependencies": {
+    "@nivo/annotations": "0.67.0",
+    "@nivo/colors": "0.67.0",
+    "@nivo/tooltip": "0.67.0",
     "d3-scale": "^3.0.0",
     "d3-shape": "^1.3.5",
-    "react-spring": "9.0.0-rc.3"
+    "react-spring": "9.1.2"
   },
   "devDependencies": {
     "@nivo/core": "0.67.0"
   },
   "peerDependencies": {
-    "@nivo/annotations": "0.63.1",
-    "@nivo/colors": "0.63.0",
     "@nivo/core": "0.67.0",
-    "@nivo/tooltip": "0.63.0",
     "prop-types": ">= 15.5.10 < 16.0.0",
     "react": ">= 16.8.4 < 18.0.0"
   },

diff --git a/packages/heatmap/package.json b/packages/heatmap/package.json
@@ -32,7 +32,7 @@
     "@nivo/colors": "0.67.0",
     "@nivo/tooltip": "0.67.0",
     "d3-scale": "^3.0.0",
-    "react-spring": "9.0.0-rc.3"
+    "react-spring": "9.1.2"
   },
   "devDependencies": {
     "@nivo/core": "0.67.0"

diff --git a/packages/line/package.json b/packages/line/package.json
@@ -36,7 +36,7 @@
     "@nivo/tooltip": "0.67.0",
     "@nivo/voronoi": "0.67.0",
     "d3-shape": "^1.3.5",
-    "react-spring": "9.0.0-rc.3"
+    "react-spring": "9.1.2"
   },
   "devDependencies": {
     "@nivo/core": "0.67.0"

diff --git a/packages/line/src/SliceTooltip.js b/packages/line/src/SliceTooltip.js
@@ -8,25 +8,21 @@
  */
 import React, { memo } from 'react'
 import PropTypes from 'prop-types'
-import { TableTooltip } from '@nivo/tooltip'
-
-const Chip = ({ color }) => (
-    <span style={{ display: 'block', width: '12px', height: '12px', background: color }} />
-)
-
-Chip.propTypes = {
-    color: PropTypes.string.isRequired,
-}
+import { useTheme } from '@nivo/core'
+import { Chip, TableTooltip } from '@nivo/tooltip'
 
 const SliceTooltip = ({ slice, axis }) => {
+    const theme = useTheme()
     const otherAxis = axis === 'x' ? 'y' : 'x'
 
     return (
         <TableTooltip
             rows={slice.points.map(point => [
-                <Chip key="chip" color={point.serieColor} />,
+                <Chip key="chip" color={point.serieColor} style={theme.tooltip.chip} />,
                 point.serieId,
-                <strong key="value">{point.data[`${otherAxis}Formatted`]}</strong>,
+                <span key="value" style={theme.tooltip.tableCellValue}>
+                    {point.data[`${otherAxis}Formatted`]}
+                </span>,
             ])}
         />
     )

diff --git a/packages/marimekko/package.json b/packages/marimekko/package.json
@@ -27,7 +27,7 @@
     "d3-scale": "^3.0.0",
     "d3-shape": "^1.3.5",
     "lodash": "^4.17.11",
-    "react-spring": "9.0.0-rc.3"
+    "react-spring": "9.1.2"
   },
   "devDependencies": {
     "@nivo/core": "0.67.0",

diff --git a/packages/marimekko/src/Bars.tsx b/packages/marimekko/src/Bars.tsx
@@ -33,7 +33,7 @@ export const Bars = <RawDatum,>({
             borderColor: string
         }
     >(bars, {
-        key: bar => bar.key,
+        keys: bar => bar.key,
         initial: bar => ({
             x: bar.x,
             y: bar.y,

diff --git a/packages/parallel-coordinates/package.json b/packages/parallel-coordinates/package.json
@@ -33,7 +33,7 @@
     "@nivo/tooltip": "0.67.0",
     "d3-scale": "^3.0.0",
     "d3-shape": "^1.3.5",
-    "react-spring": "9.0.0-rc.3"
+    "react-spring": "9.1.2"
   },
   "devDependencies": {
     "@nivo/core": "0.67.0"

diff --git a/packages/pie/package.json b/packages/pie/package.json
@@ -35,7 +35,7 @@
     "@nivo/tooltip": "0.67.0",
     "d3-shape": "^1.3.5",
     "lodash": "^4.17.11",
-    "react-spring": "9.0.0-rc.3"
+    "react-spring": "9.1.2"
   },
   "devDependencies": {
     "@nivo/core": "0.67.0",

diff --git a/packages/radar/package.json b/packages/radar/package.json
@@ -33,7 +33,7 @@
     "@nivo/tooltip": "0.67.0",
     "d3-scale": "^3.0.0",
     "d3-shape": "^1.3.5",
-    "react-spring": "9.0.0-rc.3"
+    "react-spring": "9.1.2"
   },
   "devDependencies": {
     "@nivo/core": "0.67.0"

diff --git a/packages/sankey/package.json b/packages/sankey/package.json
@@ -34,7 +34,7 @@
     "d3-sankey": "^0.12.1",
     "d3-shape": "^1.3.5",
     "lodash": "^4.17.11",
-    "react-spring": "9.0.0-rc.3"
+    "react-spring": "9.1.2"
   },
   "devDependencies": {
     "@nivo/core": "0.67.0"