feat(stream): add ability to customize legend label

plouc · Jun 3, 2021 · 780954a · 780954a
1 parent 5e9efe2
commit 780954a
Show file tree

Hide file tree

Showing 7 changed files with 77 additions and 7 deletions.
diff --git a/packages/stream/index.d.ts b/packages/stream/index.d.ts
@@ -16,6 +16,7 @@ import {
     StackOffset,
     AreaCurve,
     SvgDefsAndFill,
+    PropertyAccessor,
 } from '@nivo/core'
 import { OrdinalColorScaleConfig, InheritedColorConfig } from '@nivo/colors'
 import { LegendProps } from '@nivo/legends'
@@ -55,6 +56,8 @@ declare module '@nivo/stream' {
         offsetType: StackOffset
         curve: AreaCurve
 
+        legendLabel: PropertyAccessor<T, string>
+
         margin: Box
 
         axisTop: AxisProps | null
@@ -68,15 +71,15 @@ declare module '@nivo/stream' {
         fillOpacity: number
 
         borderWidth: number
-        borderColor: InheritedColorConfig
+        borderColor: InheritedColorConfig<T>
 
         enableDots: boolean
         renderDot: StreamDotsItem
         dotPosition: 'start' | 'center' | 'end'
         dotSize: DatumToNumber | number
-        dotColor: InheritedColorConfig
+        dotColor: InheritedColorConfig<T>
         dotBorderWidth: DatumToNumber | number
-        dotBorderColor: InheritedColorConfig
+        dotBorderColor: InheritedColorConfig<T>
 
         isInteractive: boolean
         tooltipLabel: TooltipLabel<T>

diff --git a/packages/stream/src/Stream.js b/packages/stream/src/Stream.js
@@ -23,6 +23,8 @@ const Stream = ({
     order,
     curve,
 
+    legendLabel,
+
     width,
     height,
     margin: partialMargin,
@@ -91,6 +93,7 @@ const Stream = ({
         dotBorderColor,
         tooltipLabel,
         tooltipFormat,
+        legendLabel,
     })
 
     const boundDefs = bindDefs(defs, layers, fill)
@@ -154,7 +157,7 @@ const Stream = ({
                 const legendData = layers
                     .map(l => ({
                         id: l.id,
-                        label: l.id,
+                        label: l.label,
                         color: l.color,
                         fill: l.fill,
                     }))

diff --git a/packages/stream/src/hooks.js b/packages/stream/src/hooks.js
@@ -6,6 +6,7 @@ import {
     useTheme,
     stackOrderFromProp,
     stackOffsetFromProp,
+    usePropertyAccessor,
     useValueFormatter,
 } from '@nivo/core'
 import { useInheritedColor, useOrdinalColorScale } from '@nivo/colors'
@@ -31,6 +32,7 @@ export const useStream = ({
     dotBorderColor,
     tooltipLabel,
     tooltipFormat,
+    legendLabel,
 }) => {
     const areaGenerator = useMemo(
         () =>
@@ -84,6 +86,7 @@ export const useStream = ({
         [dotBorderWidth]
     )
     const getDotBorderColor = useInheritedColor(dotBorderColor, theme)
+    const getLegendLabel = usePropertyAccessor(legendLabel)
 
     const enhancedLayers = useMemo(
         () =>
@@ -96,14 +99,17 @@ export const useStream = ({
                     y2: yScale(point[1]),
                 }))
 
+                const id = keys[layerIndex]
+
                 return {
-                    id: keys[layerIndex],
+                    id,
                     layer,
+                    label: getLegendLabel({ id }),
                     path: areaGenerator(layer),
                     color: getColor({ index: layerIndex }),
                 }
             }),
-        [layers, keys, areaGenerator, getColor]
+        [layers, keys, getLegendLabel, areaGenerator, getColor, xScale, yScale]
     )
 
     const slices = useMemo(

diff --git a/packages/stream/src/props.js b/packages/stream/src/props.js
@@ -65,6 +65,8 @@ export const StreamDefaultProps = {
     offsetType: 'wiggle',
     curve: 'catmullRom',
 
+    legendLabel: 'id',
+
     axisBottom: {},
     enableGridX: true,
     enableGridY: false,

diff --git a/packages/stream/stories/stream.stories.js b/packages/stream/stories/stream.stories.js
@@ -28,6 +28,48 @@ stories.addDecorator(withKnobs)
 
 stories.add('default', () => <Stream {...commonProperties} />)
 
+const labelLookup = {
+    al: 'Alabama',
+    az: 'Arizona',
+    nv: 'Nevada',
+}
+
+stories.add('custom legend label', () => (
+    <Stream
+        {...commonProperties}
+        data={range(16).map(() =>
+            Object.keys(labelLookup).reduce((layer, key) => {
+                layer[key] = random(10, 200)
+                return layer
+            }, {})
+        )}
+        keys={Object.keys(labelLookup)}
+        margin={{ top: 50, right: 110, bottom: 50, left: 60 }}
+        legendLabel={d => labelLookup[d.id]}
+        tooltipLabel={d => labelLookup[d.id]}
+        legends={[
+            {
+                anchor: 'bottom-right',
+                direction: 'column',
+                translateX: 100,
+                itemWidth: 80,
+                itemHeight: 20,
+                itemTextColor: '#999999',
+                symbolSize: 12,
+                symbolShape: 'circle',
+                effects: [
+                    {
+                        on: 'hover',
+                        style: {
+                            itemTextColor: '#000000',
+                        },
+                    },
+                ],
+            },
+        ]}
+    />
+))
+
 stories.add('full height (expand offset)', () => (
     <Stream
         {...commonProperties}

diff --git a/website/src/data/components/stream/meta.yml b/website/src/data/components/stream/meta.yml
@@ -8,7 +8,9 @@ Stream:
     - stacked
     - svg
     - isomorphic
-  stories: []
+  stories:
+    - label: Use custom legend label
+      link: stream--custom-legend-label
   description: |
     Stream chart.
 

diff --git a/website/src/data/components/stream/props.js b/website/src/data/components/stream/props.js
@@ -233,6 +233,18 @@ const props = [
         controlType: 'inheritedColor',
         group: 'Dots',
     },
+    {
+        key: 'legendLabel',
+        help: 'Legend label accessor',
+        description: `
+            Define how to access the legend label of each datum,
+            by default, nivo will look for the \`id\` property.
+        `,
+        type: 'string | (datum: RawDatum): string',
+        required: false,
+        defaultValue: defaults.legendLabel,
+        group: 'Customization',
+    },
     {
         key: 'isInteractive',
         flavors: ['svg'],