(feat)Line: add support for hiding line charts by default

packages/line/index.d.ts

@@ -193,6 +193,7 @@ export interface LineProps {
     debugMesh?: boolean
 
     enableSlices?: 'x' | 'y' | false
+    initialHiddenIds?: string[]
     debugSlices?: boolean
     sliceTooltip?: SliceTooltip
 

packages/line/src/Line.js

@@ -107,6 +107,7 @@ const Line = props => {
         enableTouchCrosshair = false,
 
         role = 'img',
+        initialHiddenIds = [],
     } = props
 
     const { margin, innerWidth, innerHeight, outerWidth, outerHeight } = useDimensions(
@@ -139,6 +140,7 @@ const Line = props => {
         pointColor,
         pointBorderColor,
         enableSlices,
+        initialHiddenIds,
     })
 
     const theme = useTheme()

packages/line/src/hooks.js

@@ -148,6 +148,7 @@ export const useLine = ({
     pointColor = LineDefaultProps.pointColor,
     pointBorderColor = LineDefaultProps.pointBorderColor,
     enableSlices = LineDefaultProps.enableSlicesTooltip,
+    initialHiddenIds = LineDefaultProps.initialHiddenIds,
 }) => {
     const [componentId] = useState(uniqueId(LINE_UNIQUE_ID_PREFIX))
     const formatX = useValueFormatter(xFormat)
@@ -156,7 +157,7 @@ export const useLine = ({
     const theme = useTheme()
     const getPointColor = useInheritedColor(pointColor, theme)
     const getPointBorderColor = useInheritedColor(pointBorderColor, theme)
-    const [hiddenIds, setHiddenIds] = useState([])
+    const [hiddenIds, setHiddenIds] = useState(initialHiddenIds ?? [])
 
     const {
         xScale,

packages/line/src/props.js

@@ -67,6 +67,7 @@ export const LineDefaultProps = {
     defs: [],
     fill: [],
     role: 'img',
+    initialHiddenIds: [],
 }
 
 export const LineCanvasDefaultProps = {

packages/line/tests/Line.test.js

@@ -1,6 +1,7 @@
 import { mount } from 'enzyme'
 import { Axis } from '@nivo/axes'
 import Line from '../src/Line'
+import Lines from '../src/Lines'
 import { LINE_UNIQUE_ID_PREFIX } from '../src/hooks'
 import SlicesItem from '../src/SlicesItem'
 import renderer from 'react-test-renderer'
@@ -89,6 +90,102 @@ it('should create slice for each x value', () => {
     expect(slices.at(4).prop('slice').x).toBe(500)
 })
 
+it('should hide single line charts by default given their id', () => {
+    const data = [
+        {
+            id: 'A',
+            data: [
+                { x: 0, y: 3 },
+                { x: 1, y: 7 },
+                { x: 2, y: 11 },
+                { x: 3, y: 9 },
+                { x: 4, y: 8 },
+            ],
+        },
+        {
+            id: 'B',
+            data: [
+                { x: 0, y: 4 },
+                { x: 2, y: 8 },
+                { x: 3, y: 12 },
+                { x: 4, y: 10 },
+                { x: 5, y: 9 },
+            ],
+        },
+        {
+            id: 'C',
+            data: [
+                { x: 0, y: 5 },
+                { x: 2, y: 9 },
+                { x: 3, y: 13 },
+                { x: 4, y: 11 },
+                { x: 5, y: 10 },
+            ],
+        },
+    ]
+    const wrapper = mount(
+        <Line
+            width={500}
+            height={300}
+            data={data}
+            enableSlices="x"
+            animate={false}
+            initialHiddenIds={['B']}
+        />
+    )
+
+    const lines = wrapper.find(Lines)
+    expect(lines).toHaveLength(1)
+})
+
+it('should hide multiple line charts by default given their ids', () => {
+    const data = [
+        {
+            id: 'A',
+            data: [
+                { x: 0, y: 3 },
+                { x: 1, y: 7 },
+                { x: 2, y: 11 },
+                { x: 3, y: 9 },
+                { x: 4, y: 8 },
+            ],
+        },
+        {
+            id: 'B',
+            data: [
+                { x: 0, y: 4 },
+                { x: 2, y: 8 },
+                { x: 3, y: 12 },
+                { x: 4, y: 10 },
+                { x: 5, y: 9 },
+            ],
+        },
+        {
+            id: 'C',
+            data: [
+                { x: 0, y: 5 },
+                { x: 2, y: 9 },
+                { x: 3, y: 13 },
+                { x: 4, y: 11 },
+                { x: 5, y: 10 },
+            ],
+        },
+    ]
+    const wrapper = mount(
+        <Line
+            width={500}
+            height={300}
+            data={data}
+            enableSlices="x"
+            animate={false}
+            initialHiddenIds={['B', 'C']}
+        />
+    )
+
+    const lines = wrapper.find(Lines)
+    expect(lines).toHaveLength(1)
+})
+
 it('should have left and bottom axis by default', () => {
     const data = [
         {

storybook/stories/line/Line.stories.tsx

@@ -36,6 +36,7 @@ const commonProperties = {
     animate: true,
     enableTouchCrosshair: true,
     enableSlices: 'x',
+    initialHiddenIds: ['cognac'],
 }
 
 const CustomSymbol = ({ size, color, borderWidth, borderColor }) => (
@@ -64,6 +65,16 @@ export const StackedLines: Story = {
                 stacked: true,
             }}
             curve={args.curve}
+            legends={[
+                {
+                    anchor: 'bottom',
+                    direction: 'row',
+                    itemHeight: 20,
+                    itemWidth: 80,
+                    toggleSerie: true,
+                    translateY: 50,
+                },
+            ]}
         />
     ),
 }

website/src/data/components/line/props.ts

@@ -541,6 +541,14 @@ const props: ChartProperty[] = [
         defaultValue: defaults.enableTouchCrosshair,
         control: { type: 'switch' },
     },
+    {
+        key: 'initialHiddenIds',
+        flavors: allFlavors,
+        group: 'Interactivity',
+        help: `Hides certain series by default given their ids`,
+        type: 'string[]',
+        defaultValue: defaults.initialHiddenIds,
+    },
     {
         key: 'crosshairType',
         flavors: ['svg'],