feat(line): part of a line with missing data was hidden (#81)

plouc · Nov 1, 2017 · 60e4774 · 60e4774
1 parent 0dfafff
commit 60e4774
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 10 deletions.
diff --git a/src/components/charts/line/Line.js b/src/components/charts/line/Line.js
@@ -173,6 +173,7 @@ const enhance = compose(
     withMotion(),
     withPropsOnChange(['curve'], ({ curve }) => ({
         lineGenerator: line()
+            .defined(d => d.value !== null)
             .x(d => d.x)
             .y(d => d.y)
             .curve(curveFromProp(curve)),

diff --git a/src/components/charts/line/LineDots.js b/src/components/charts/line/LineDots.js
@@ -43,7 +43,7 @@ const LineDots = ({
 
         return [
             ...acc,
-            ...points.map(point => {
+            ...points.filter(point => point.value !== null).map(point => {
                 const pointData = {
                     serie: { id },
                     x: point.key,

diff --git a/src/components/charts/line/LineSlices.js b/src/components/charts/line/LineSlices.js
@@ -35,7 +35,7 @@ LineSlices.propTypes = {
             points: PropTypes.arrayOf(
                 PropTypes.shape({
                     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
-                    value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+                    value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
                     color: PropTypes.string.isRequired,
                 })
             ).isRequired,

diff --git a/src/components/charts/line/LineSlicesItem.js b/src/components/charts/line/LineSlicesItem.js
@@ -61,18 +61,21 @@ const enhance = compose(
     withPropsOnChange(['slice', 'theme', 'tooltipFormat'], ({ slice, theme, tooltipFormat }) => {
         const format =
             !tooltipFormat || isFunction(tooltipFormat) ? tooltipFormat : d3Format(tooltipFormat)
+        const hasValues = slice.points.some(p => p.value !== null)
 
         return {
-            tooltip: (
+            tooltip: hasValues ? (
                 <TableTooltip
                     theme={theme}
-                    rows={slice.points.map(p => [
-                        <Chip color={p.color} />,
-                        p.id,
-                        format ? format(p.value) : p.value,
-                    ])}
+                    rows={slice.points
+                        .filter(p => p.value !== null)
+                        .map(p => [
+                            <Chip color={p.color} />,
+                            p.id,
+                            format ? format(p.value) : p.value,
+                        ])}
                 />
-            ),
+            ) : null,
         }
     }),
     withHandlers({

diff --git a/src/components/charts/line/props.js b/src/components/charts/line/props.js
@@ -17,7 +17,7 @@ export const LinePropTypes = {
             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/stories/charts/line.stories.js b/stories/charts/line.stories.js
@@ -121,6 +121,26 @@ stories.add('with markers', () => (
     />
 ))
 
+stories.add('with missing data', () => (
+    <Line
+        {...commonProperties}
+        curve="monotoneX"
+        data={[
+            {
+                id: 'fake corp. A',
+                data: [4, 8, 5, null, 2, 1, 4, null, 8, 9, 5].map((y, i) => ({ x: `#${i}`, y })),
+            },
+            {
+                id: 'fake corp. B',
+                data: [5, 9, 8, 6, 3, 1, 2, null, 5, 8, 4].map((y, i) => ({ x: `#${i}`, y })),
+            },
+        ]}
+        dotSize={8}
+        dotBorderColor="#fff"
+        dotBorderWidth={2}
+    />
+))
+
 stories.add('with custom min/max Y', () => (
     <Line
         {...commonProperties}