fix(bar): remove inconsistencies with legends

plouc · Jun 28, 2021 · 2a0dabf · 2a0dabf
1 parent 1362929
commit 2a0dabf
Show file tree

Hide file tree

Showing 8 changed files with 74 additions and 10 deletions.
diff --git a/packages/bar/src/Bar.tsx b/packages/bar/src/Bar.tsx
@@ -297,7 +297,7 @@ const InnerBar = <RawDatum extends BarDatum>({
         const data = ([] as LegendData[]).concat(
             ...legends.map(legend =>
                 getLegendData({
-                    bars: legendData,
+                    bars: legend.dataFrom === 'keys' ? legendData : result.bars,
                     direction: legend.direction,
                     from: legend.dataFrom,
                     groupMode,

diff --git a/packages/bar/src/BarLegends.tsx b/packages/bar/src/BarLegends.tsx
@@ -25,7 +25,9 @@ export const BarLegends = <RawDatum,>({
                     containerWidth={width}
                     containerHeight={height}
                     data={legend.data ?? data}
-                    toggleSerie={legend.toggleSerie ? toggleSerie : undefined}
+                    toggleSerie={
+                        legend.toggleSerie && legend.dataFrom === 'keys' ? toggleSerie : undefined
+                    }
                 />
             ))}
         </>

diff --git a/packages/bar/src/compute/grouped.ts b/packages/bar/src/compute/grouped.ts
@@ -62,6 +62,7 @@ const generateVerticalGroupedBars = <RawDatum extends Record<string, unknown>>(
                     id: key,
                     value: rawValue === null ? rawValue : value,
                     formattedValue: formatValue(value),
+                    hidden: false,
                     index,
                     indexValue,
                     data: cleanedData[index],
@@ -120,6 +121,7 @@ const generateHorizontalGroupedBars = <RawDatum extends Record<string, unknown>>
                     id: key,
                     value: rawValue === null ? rawValue : value,
                     formattedValue: formatValue(value),
+                    hidden: false,
                     index,
                     indexValue,
                     data: cleanedData[index],

diff --git a/packages/bar/src/compute/legends.ts b/packages/bar/src/compute/legends.ts
@@ -35,9 +35,10 @@ export const getLegendDataForKeys = <RawDatum>(
 
 export const getLegendDataForIndexes = <RawDatum>(
     bars: BarsWithHidden<RawDatum>,
+    layout: 'horizontal' | 'vertical',
     getLegendLabel: (datum: LegendLabelDatum<RawDatum>) => string
 ) => {
-    return uniqBy(
+    const data = uniqBy(
         bars.map(bar => ({
             id: bar.data.indexValue ?? '',
             label: getLegendLabel(bar.data),
@@ -46,6 +47,12 @@ export const getLegendDataForIndexes = <RawDatum>(
         })),
         ({ id }) => id
     )
+
+    if (layout === 'horizontal') {
+        data.reverse()
+    }
+
+    return data
 }
 
 export const getLegendData = <RawDatum extends BarDatum>({
@@ -67,7 +74,7 @@ export const getLegendData = <RawDatum extends BarDatum>({
     )
 
     if (from === 'indexes') {
-        return getLegendDataForIndexes(bars, getLegendLabel)
+        return getLegendDataForIndexes(bars, layout, getLegendLabel)
     }
 
     return getLegendDataForKeys(bars, layout, direction, groupMode, reverse, getLegendLabel)

diff --git a/packages/bar/src/compute/stacked.ts b/packages/bar/src/compute/stacked.ts
@@ -56,6 +56,7 @@ const generateVerticalStackedBars = <RawDatum extends Record<string, unknown>>(
                     id: stackedDataItem.key,
                     value: rawValue === null ? rawValue : value,
                     formattedValue: formatValue(value),
+                    hidden: false,
                     index: i,
                     indexValue: index,
                     data: filterNullValues(d.data),
@@ -111,6 +112,7 @@ const generateHorizontalStackedBars = <RawDatum extends Record<string, unknown>>
                     id: stackedDataItem.key,
                     value: rawValue === null ? rawValue : value,
                     formattedValue: formatValue(value),
+                    hidden: false,
                     index: i,
                     indexValue: index,
                     data: filterNullValues(d.data),

diff --git a/packages/bar/src/types.ts b/packages/bar/src/types.ts
@@ -33,6 +33,7 @@ export type ComputedDatum<RawDatum> = {
     id: string | number
     value: number | null
     formattedValue: string
+    hidden: boolean
     index: number
     indexValue: string | number
     data: Exclude<RawDatum, null | undefined | false | '' | 0>

diff --git a/packages/bar/stories/bar.stories.tsx b/packages/bar/stories/bar.stories.tsx
@@ -1,7 +1,7 @@
 import { useState, useEffect } from 'react'
 import { storiesOf } from '@storybook/react'
 import { action } from '@storybook/addon-actions'
-import { withKnobs, select } from '@storybook/addon-knobs'
+import { withKnobs, boolean, select } from '@storybook/addon-knobs'
 import { generateCountriesData, sets } from '@nivo/generators'
 import { random, range } from 'lodash'
 import { useTheme } from '@nivo/core'
@@ -12,7 +12,7 @@ const keys = ['hot dogs', 'burgers', 'sandwich', 'kebab', 'fries', 'donut']
 const commonProps = {
     width: 900,
     height: 500,
-    margin: { top: 60, right: 80, bottom: 60, left: 80 },
+    margin: { top: 60, right: 110, bottom: 60, left: 80 },
     data: generateCountriesData(keys, { size: 7 }) as BarDatum[],
     indexBy: 'country',
     keys,
@@ -397,7 +397,7 @@ stories.add('initial hidden ids', () => (
         legends={[
             {
                 anchor: 'bottom',
-                dataFrom: 'keys',
+                dataFrom: select('legend.dataFrom', ['indexes', 'keys'], 'keys'),
                 direction: 'row',
                 itemHeight: 20,
                 itemWidth: 80,
@@ -408,19 +408,63 @@ stories.add('initial hidden ids', () => (
     />
 ))
 
+stories.add('legends correct with different layout modes', () => {
+    const dataFrom = select('legend.dataFrom', ['keys', 'indexes'], 'indexes')
+    const direction = select('legend.direction', ['column', 'row'], 'column')
+    const layout = select('layout', ['horizontal', 'vertical'], 'horizontal')
+
+    return (
+        <Bar
+            {...commonProps}
+            data={[
+                { quarter: 1, earnings: 13000, losses: 10000 },
+                { quarter: 2, earnings: 16500, losses: 13000 },
+                { quarter: 3, earnings: 14250, losses: 11000 },
+                { quarter: 4, earnings: 19000, losses: 16000 },
+            ]}
+            colorBy={select('colorBy', ['indexValue', 'id'], 'indexValue')}
+            keys={['earnings', 'losses']}
+            indexBy="quarter"
+            layout={layout}
+            groupMode={select('groupMode', ['grouped', 'stacked'], 'stacked')}
+            reverse={boolean('reverse', false)}
+            legends={[
+                {
+                    ...(layout === 'horizontal' || direction === 'column'
+                        ? {
+                              anchor: 'bottom-right',
+                              itemWidth: 110,
+                              itemsSpacing: 2,
+                              translateX: 120,
+                          }
+                        : {
+                              anchor: 'bottom',
+                              itemWidth: dataFrom === 'keys' ? 80 : 40,
+                              translateY: 50,
+                          }),
+                    dataFrom,
+                    direction,
+                    itemHeight: 20,
+                    symbolSize: 20,
+                },
+            ]}
+        />
+    )
+})
+
 stories.add('custom legend labels', () => (
     <Bar
         {...commonProps}
         legendLabel={datum => `${datum.id} (${datum.value})`}
         legends={[
             {
-                anchor: 'bottom',
+                anchor: 'bottom-right',
                 dataFrom: 'keys',
-                direction: 'row',
+                direction: 'column',
                 itemHeight: 20,
                 itemWidth: 110,
                 toggleSerie: true,
-                translateY: 50,
+                translateX: 120,
             },
         ]}
     />

diff --git a/packages/bar/tests/Bar.test.tsx b/packages/bar/tests/Bar.test.tsx
@@ -385,6 +385,7 @@ it(`should generate grouped bars correctly when keys are mismatched`, () => {
         data: {
             data: { A: 10, C: 3, id: 'one' },
             formattedValue: '10',
+            hidden: false,
             id: 'A',
             index: 0,
             indexValue: 'one',
@@ -403,6 +404,7 @@ it(`should generate grouped bars correctly when keys are mismatched`, () => {
         data: {
             data: { B: 9, id: 'two' },
             formattedValue: '9',
+            hidden: false,
             id: 'B',
             index: 1,
             indexValue: 'two',
@@ -421,6 +423,7 @@ it(`should generate grouped bars correctly when keys are mismatched`, () => {
         data: {
             data: { A: 10, C: 3, id: 'one' },
             formattedValue: '3',
+            hidden: false,
             id: 'C',
             index: 0,
             indexValue: 'one',
@@ -458,6 +461,7 @@ it(`should generate stacked bars correctly when keys are mismatched`, () => {
         data: {
             data: { A: 10, C: 3, id: 'one' },
             formattedValue: '10',
+            hidden: false,
             id: 'A',
             index: 0,
             indexValue: 'one',
@@ -476,6 +480,7 @@ it(`should generate stacked bars correctly when keys are mismatched`, () => {
         data: {
             data: { B: 9, id: 'two' },
             formattedValue: '9',
+            hidden: false,
             id: 'B',
             index: 1,
             indexValue: 'two',
@@ -494,6 +499,7 @@ it(`should generate stacked bars correctly when keys are mismatched`, () => {
         data: {
             data: { A: 10, C: 3, id: 'one' },
             formattedValue: '3',
+            hidden: false,
             id: 'C',
             index: 0,
             indexValue: 'one',