feat(legends): add support for both color and fill

plouc · Aug 25, 2018 · 4cb33e2 · 4cb33e2
1 parent a60b34e
commit 4cb33e2
Show file tree

Hide file tree

Showing 12 changed files with 34 additions and 26 deletions.
diff --git a/packages/bar/src/Bar.js b/packages/bar/src/Bar.js
@@ -158,14 +158,16 @@ const Bar = ({
         .map(bar => ({
             id: bar.data.id,
             label: bar.data.id,
-            fill: bar.data.fill ? bar.data.fill : bar.color,
+            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,
-        fill: bar.data.fill ? bar.data.fill : bar.color,
+        color: bar.color,
+        fill: bar.data.fill,
     }))
 
     return (

diff --git a/packages/bar/src/BarCanvas.js b/packages/bar/src/BarCanvas.js
@@ -8,10 +8,13 @@
  */
 import React, { Component } from 'react'
 import { generateGroupedBars, generateStackedBars } from './compute'
-import { renderAxesToCanvas } from '@nivo/core'
-import { getRelativeCursor, isCursorInRect } from '@nivo/core'
-import { Container } from '@nivo/core'
-import { BasicTooltip } from '@nivo/core'
+import {
+    renderAxesToCanvas,
+    getRelativeCursor,
+    isCursorInRect,
+    Container,
+    BasicTooltip,
+} from '@nivo/core'
 import { BarPropTypes } from './props'
 import enhance from './enhance'
 import setDisplayName from 'recompose/setDisplayName'

diff --git a/packages/calendar/src/Calendar.js b/packages/calendar/src/Calendar.js
@@ -150,7 +150,7 @@ const Calendar = ({
                         const legendData = colorScale.ticks(legend.itemCount).map(value => ({
                             id: value,
                             label: value,
-                            fill: colorScale(value),
+                            color: colorScale(value),
                         }))
 
                         return (

diff --git a/packages/chord/src/Chord.js b/packages/chord/src/Chord.js
@@ -76,7 +76,7 @@ const Chord = ({
     const legendData = arcs.map(arc => ({
         id: arc.id,
         label: arc.id,
-        fill: arc.color,
+        color: arc.color,
     }))
 
     return (

diff --git a/packages/line/src/Line.js b/packages/line/src/Line.js
@@ -172,7 +172,7 @@ const Line = ({
                             .map(line => ({
                                 id: line.id,
                                 label: line.id,
-                                fill: line.color,
+                                color: line.color,
                             }))
                             .reverse()
 

diff --git a/packages/pie/src/PieCanvasRenderer.js b/packages/pie/src/PieCanvasRenderer.js
@@ -209,8 +209,9 @@ class PieCanvasRenderer extends Component {
             renderLegendToCanvas(this.ctx, {
                 ...legend,
                 data: arcs.map(arc => ({
+                    id: arc.data.id,
                     label: arc.data.id,
-                    fill: arc.color,
+                    color: arc.color,
                 })),
                 containerWidth: width,
                 containerHeight: height,

diff --git a/packages/pie/src/PieLegends.js b/packages/pie/src/PieLegends.js
@@ -20,12 +20,7 @@ class PieLegends extends Component {
         width: PropTypes.number.isRequired,
         height: PropTypes.number.isRequired,
         arcs: PropTypes.arrayOf(arcPropType).isRequired,
-        data: PropTypes.arrayOf(
-            PropTypes.shape({
-                label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
-                fill: PropTypes.string.isRequired,
-            })
-        ).isRequired,
+        data: PropTypes.arrayOf(PropTypes.object).isRequired,
         legends: PropTypes.arrayOf(PropTypes.shape(LegendPropShape)).isRequired,
     }
 
@@ -50,7 +45,8 @@ export const enhance = Component =>
             data: arcs.map(arc => ({
                 id: arc.data.id,
                 label: arc.data.id,
-                fill: arc.color,
+                color: arc.color,
+                fill: arc.fill,
             })),
         })),
         pure

diff --git a/packages/radar/src/Radar.js b/packages/radar/src/Radar.js
@@ -98,7 +98,7 @@ const Radar = ({
     const legendData = keys.map(key => ({
         id: key,
         label: key,
-        fill: colorByKey[key],
+        color: colorByKey[key],
     }))
 
     return (

diff --git a/packages/sankey/src/Sankey.js b/packages/sankey/src/Sankey.js
@@ -110,7 +110,7 @@ const Sankey = ({
     const legendData = data.nodes.map(node => ({
         id: node.id,
         label: node.label,
-        fill: node.color,
+        color: node.color,
     }))
 
     const motionProps = {

diff --git a/packages/scatterplot/src/ScatterPlot.js b/packages/scatterplot/src/ScatterPlot.js
@@ -70,7 +70,7 @@ const ScatterPlot = ({
     const legendData = data.map(serie => ({
         id: serie.id,
         label: serie.id,
-        fill: getColor(serie),
+        color: getColor(serie),
     }))
 
     const symbols = data.reduce(

diff --git a/packages/scatterplot/src/ScatterPlotCanvas.js b/packages/scatterplot/src/ScatterPlotCanvas.js
@@ -7,10 +7,14 @@
  * file that was distributed with this source code.
  */
 import React, { Component } from 'react'
-import { renderAxesToCanvas, renderGridLinesToCanvas } from '@nivo/core'
-import { getRelativeCursor, isCursorInRect } from '@nivo/core'
-import { Container } from '@nivo/core'
-import { BasicTooltip } from '@nivo/core'
+import {
+    renderAxesToCanvas,
+    renderGridLinesToCanvas,
+    getRelativeCursor,
+    isCursorInRect,
+    Container,
+    BasicTooltip,
+} from '@nivo/core'
 import { renderLegendToCanvas } from '@nivo/legends'
 import { ScatterPlotPropTypes } from './props'
 import enhance from './enhance'
@@ -143,8 +147,9 @@ class ScatterPlotCanvas extends Component {
         this.items = items
 
         const legendData = data.map(serie => ({
+            id: serie.id,
             label: serie.id,
-            fill: getColor(serie),
+            color: getColor(serie),
         }))
 
         legends.forEach(legend => {

diff --git a/packages/stream/src/Stream.js b/packages/stream/src/Stream.js
@@ -157,7 +157,8 @@ const Stream = ({
                             .map(l => ({
                                 id: l.id,
                                 label: l.id,
-                                fill: l.color,
+                                color: l.color,
+                                fill: l.fill,
                             }))
                             .reverse()