fix(bar): fix missing legend in Bar chart #362

* Remove unnecessary filter from legend data generation in Bar/ BarCanvas component * Fix fmt: Bar & BarCanvas
plouc · Dec 2, 2018 · aa12d9d · aa12d9d
1 parent 8358014
commit aa12d9d
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 27 deletions.
diff --git a/packages/bar/src/Bar.js b/packages/bar/src/Bar.js
@@ -7,6 +7,7 @@
  * file that was distributed with this source code.
  */
 import React, { Fragment } from 'react'
+import uniqBy from 'lodash/uniqBy'
 import { TransitionMotion, spring } from 'react-motion'
 import { bindDefs, Container, SvgWrapper, Grid, CartesianMarkers } from '@nivo/core'
 import { Axes } from '@nivo/axes'
@@ -152,22 +153,27 @@ const Bar = props => {
         targetKey: 'data.fill',
     })
 
-    const legendDataForKeys = result.bars
-        .filter(bar => bar.data.index === 0)
-        .map(bar => ({
-            id: bar.data.id,
-            label: bar.data.id,
+    const legendDataForKeys = uniqBy(
+        result.bars
+            .map(bar => ({
+                id: bar.data.id,
+                label: bar.data.id,
+                color: bar.color,
+                fill: bar.data.fill,
+            }))
+            .reverse(),
+        ({ id }) => id
+    )
+
+    const legendDataForIndexes = uniqBy(
+        result.bars.map(bar => ({
+            id: bar.data.indexValue,
+            label: bar.data.indexValue,
             color: bar.color,
             fill: bar.data.fill,
-        }))
-        .reverse()
-
-    const legendDataForIndexes = result.bars.filter(bar => bar.data.id === keys[0]).map(bar => ({
-        id: bar.data.indexValue,
-        label: bar.data.indexValue,
-        color: bar.color,
-        fill: bar.data.fill,
-    }))
+        })),
+        ({ id }) => id
+    )
 
     return (
         <Container isInteractive={isInteractive} theme={theme}>

diff --git a/packages/bar/src/BarCanvas.js b/packages/bar/src/BarCanvas.js
@@ -7,6 +7,7 @@
  * file that was distributed with this source code.
  */
 import React, { Component } from 'react'
+import uniqBy from 'lodash/uniqBy'
 import setDisplayName from 'recompose/setDisplayName'
 import {
     renderAxesToCanvas,
@@ -132,23 +133,27 @@ class BarCanvas extends Component {
             })
 
         this.ctx.strokeStyle = '#dddddd'
-        const legendDataForKeys = result.bars
-            .filter(bar => bar.data.index === 0)
-            .map(bar => ({
-                id: bar.data.id,
-                label: bar.data.id,
-                color: bar.color,
-                fill: bar.data.fill,
-            }))
-            .reverse()
-        const legendDataForIndexes = result.bars
-            .filter(bar => bar.data.id === keys[0])
-            .map(bar => ({
+
+        const legendDataForKeys = uniqBy(
+            result.bars
+                .map(bar => ({
+                    id: bar.data.id,
+                    label: bar.data.id,
+                    color: bar.color,
+                    fill: bar.data.fill,
+                }))
+                .reverse(),
+            ({ id }) => id
+        )
+        const legendDataForIndexes = uniqBy(
+            result.bars.map(bar => ({
                 id: bar.data.indexValue,
                 label: bar.data.indexValue,
                 color: bar.color,
                 fill: bar.data.fill,
-            }))
+            })),
+            ({ id }) => id
+        )
 
         legends.forEach(legend => {
             let legendData