feat(bar): add ability to toggle serie via legend item (#1556)

plouc · Jun 2, 2021 · 0def428 · 0def428
1 parent 463d380
commit 0def428
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 6 deletions.
diff --git a/packages/bar/src/Bar.js b/packages/bar/src/Bar.js
@@ -6,7 +6,7 @@
  * For the full copyright and license information, please view the LICENSE
  * file that was distributed with this source code.
  */
-import React, { Fragment } from 'react'
+import React, { Fragment, useCallback, useState } from 'react'
 import { TransitionMotion, spring } from 'react-motion'
 import { bindDefs, LegacyContainer, SvgWrapper, CartesianMarkers } from '@nivo/core'
 import { Axes, Grid } from '@nivo/axes'
@@ -115,6 +115,14 @@ const Bar = props => {
         renderWrapper,
         role,
     } = props
+
+    const [hiddenIds, setHiddenIds] = useState([])
+    const toggleSerie = useCallback(id => {
+        setHiddenIds(state =>
+            state.indexOf(id) > -1 ? state.filter(item => item !== id) : [...state, id]
+        )
+    }, [])
+
     const generateBars = groupMode === 'grouped' ? generateGroupedBars : generateStackedBars
     const result = generateBars({
         layout,
@@ -131,6 +139,7 @@ const Bar = props => {
         innerPadding,
         valueScale,
         indexScale,
+        hiddenIds,
     })
 
     const motionProps = {
@@ -283,7 +292,7 @@ const Bar = props => {
                     legends: legends.map((legend, i) => {
                         const legendData = getLegendData({
                             from: legend.dataFrom,
-                            bars: result.bars,
+                            bars: result.legendData,
                             layout,
                             direction: legend.direction,
                             groupMode,
@@ -300,6 +309,7 @@ const Bar = props => {
                                 containerHeight={height}
                                 data={legendData}
                                 theme={theme}
+                                toggleSerie={legend.toggleSerie ? toggleSerie : undefined}
                             />
                         )
                     }),

diff --git a/packages/bar/src/compute/grouped.js b/packages/bar/src/compute/grouped.js
@@ -139,7 +139,6 @@ const generateHorizontalGroupedBars = (
  */
 export const generateGroupedBars = ({
     layout,
-    keys,
     minValue,
     maxValue,
     reverse,
@@ -149,8 +148,10 @@ export const generateGroupedBars = ({
     innerPadding = 0,
     valueScale,
     indexScale: indexScaleConfig,
+    hiddenIds,
     ...props
 }) => {
+    const keys = props.keys.filter(key => !hiddenIds.includes(key))
     const data = normalizeData(props.data, keys)
     const [axis, range] = layout === 'vertical' ? ['y', [0, width]] : ['x', [height, 0]]
     const indexScale = getIndexScale(data, props.getIndex, range, padding, indexScaleConfig)
@@ -189,5 +190,11 @@ export const generateGroupedBars = ({
                 : generateHorizontalGroupedBars(...params)
             : []
 
-    return { xScale, yScale, bars }
+    const legendData = props.keys.map(key => {
+        const bar = bars.find(bar => bar.data.id === key) || { data: {} }
+
+        return { ...bar, data: { id: key, ...bar.data, hidden: hiddenIds.includes(key) } }
+    })
+
+    return { xScale, yScale, bars, legendData }
 }
diff --git a/packages/bar/src/compute/legends.js b/packages/bar/src/compute/legends.js
@@ -13,6 +13,7 @@ export const getLegendDataForKeys = (bars, layout, direction, groupMode, reverse
         bars.map(bar => ({
             id: bar.data.id,
             label: bar.data.label || bar.data.id,
+            hidden: bar.data.hidden,
             color: bar.color,
             fill: bar.data.fill,
         })),
@@ -37,6 +38,7 @@ export const getLegendDataForIndexes = bars => {
         bars.map(bar => ({
             id: bar.data.indexValue,
             label: bar.data.label || bar.data.indexValue,
+            hidden: bar.data.hidden,
             color: bar.color,
             fill: bar.data.fill,
         })),

diff --git a/packages/bar/src/compute/stacked.js b/packages/bar/src/compute/stacked.js
@@ -140,7 +140,6 @@ const generateHorizontalStackedBars = (
  */
 export const generateStackedBars = ({
     data,
-    keys,
     layout,
     minValue,
     maxValue,
@@ -150,8 +149,10 @@ export const generateStackedBars = ({
     padding = 0,
     valueScale,
     indexScale: indexScaleConfig,
+    hiddenIds,
     ...props
 }) => {
+    const keys = props.keys.filter(key => !hiddenIds.includes(key))
     const stackedData = stack().keys(keys).offset(stackOffsetDiverging)(normalizeData(data, keys))
 
     const [axis, range] = layout === 'vertical' ? ['y', [0, width]] : ['x', [height, 0]]
@@ -188,5 +189,16 @@ export const generateStackedBars = ({
                 : generateHorizontalStackedBars(...params)
             : []
 
-    return { xScale, yScale, bars }
+    const legendData = props.keys.map(key => {
+        const bar = bars.find(bar => bar.data.id === key) || {
+            data: {},
+        }
+
+        return {
+            ...bar,
+            data: { id: key, ...bar.data, hidden: hiddenIds.includes(key) },
+        }
+    })
+
+    return { xScale, yScale, bars, legendData }
 }