feat(bump): add support for missing data to Bump component

plouc · Dec 13, 2019 · 7275fa8 · 7275fa8
1 parent ee906f4
commit 7275fa8
Show file tree

Hide file tree

Showing 4 changed files with 81 additions and 16 deletions.
diff --git a/packages/bump/src/bump/compute.js b/packages/bump/src/bump/compute.js
@@ -17,9 +17,10 @@ export const computeSeries = ({ width, height, data, xPadding, xOuterPadding, yO
             }
         })
     })
+    xValues = Array.from(xValues)
 
     const xScale = scalePoint()
-        .domain(Array.from(xValues))
+        .domain(xValues)
         .range([0, width])
         .padding(xOuterPadding)
 
@@ -38,26 +39,43 @@ export const computeSeries = ({ width, height, data, xPadding, xOuterPadding, yO
         }
 
         rawSerie.data.forEach((datum, i) => {
+            let x = null
+            let y = null
+            if (datum.y !== null && datum.y !== undefined) {
+                x = xScale(datum.x)
+                y = yScale(datum.y)
+            }
             const point = {
                 id: `${rawSerie.id}.${datum.x}`,
-                x: xScale(datum.x),
-                y: yScale(datum.y),
                 serie: rawSerie,
                 data: datum,
+                x,
+                y,
             }
             serie.points.push(point)
 
-            if (i === 0) {
-                serie.linePoints.push([0, point.y])
-            } else {
-                serie.linePoints.push([point.x - linePointPadding, point.y])
+            // only add pre transition point if the datum is not empty
+            if (x !== null) {
+                if (i === 0) {
+                    serie.linePoints.push([0, point.y])
+                } else {
+                    serie.linePoints.push([point.x - linePointPadding, point.y])
+                }
             }
+
             serie.linePoints.push([point.x, point.y])
-            if (i === rawSerie.data.length - 1) {
-                serie.linePoints.push([width, point.y])
-            } else {
-                serie.linePoints.push([point.x + linePointPadding, point.y])
+
+            // only add post transition point if the datum is not empty
+            if (x !== null) {
+                if (i === rawSerie.data.length - 1 && x) {
+                    serie.linePoints.push([width, point.y])
+                } else {
+                    serie.linePoints.push([point.x + linePointPadding, point.y])
+                }
             }
+
+            // remove points having null coordinates
+            serie.points = serie.points.filter(point => point.x !== null)
         })
 
         return serie

diff --git a/packages/bump/src/bump/hooks.js b/packages/bump/src/bump/hooks.js
@@ -14,9 +14,14 @@ import { useTooltip } from '@nivo/tooltip'
 import { computeSeries } from './compute'
 
 export const useLineGenerator = interpolation =>
-    useMemo(() => d3Line().curve(interpolation === 'smooth' ? curveBasis : curveLinear), [
-        interpolation,
-    ])
+    useMemo(
+        () =>
+            d3Line()
+                .curve(interpolation === 'smooth' ? curveBasis : curveLinear)
+                .defined(d => d[0] !== null && d[1] !== null),
+
+        [interpolation]
+    )
 
 export const useSerieDerivedProp = instruction =>
     useMemo(() => {

diff --git a/packages/bump/src/bump/props.js b/packages/bump/src/bump/props.js
@@ -20,7 +20,7 @@ const commonPropTypes = {
             data: PropTypes.arrayOf(
                 PropTypes.shape({
                     x: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
-                    y: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+                    y: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
                 })
             ).isRequired,
         })

diff --git a/packages/bump/stories/bump.stories.js b/packages/bump/stories/bump.stories.js
@@ -89,4 +89,46 @@ stories.add('Custom points', () => (
     />
 ))
 
-stories.add('Missing data', () => <Bump {...commonProps} />)
+stories.add('Missing data', () => (
+    <Bump
+        {...commonProps}
+        pointSize={12}
+        activePointSize={16}
+        inactivePointSize={8}
+        data={[
+            {
+                id: 'Serie A',
+                data: [
+                    // missing data at the beginning
+                    { x: 0, y: null },
+                    { x: 1, y: 1 },
+                    { x: 2, y: 1 },
+                    { x: 3, y: 2 },
+                    { x: 4, y: 2 },
+                ],
+            },
+            {
+                id: 'Serie B',
+                data: [
+                    { x: 0, y: 1 },
+                    { x: 1, y: 2 },
+                    // missing data in the middle
+                    { x: 2, y: null },
+                    { x: 3, y: 3 },
+                    { x: 4, y: 3 },
+                ],
+            },
+            {
+                id: 'Serie C',
+                data: [
+                    { x: 0, y: 3 },
+                    { x: 1, y: 3 },
+                    { x: 2, y: 3 },
+                    { x: 3, y: 1 },
+                    // missing data at the end
+                    { x: 4, y: null },
+                ],
+            },
+        ]}
+    />
+))