From b9ae884b713153bab9b580580a4e794a167cc46c Mon Sep 17 00:00:00 2001 From: Carlos Catalan Date: Wed, 13 Mar 2024 23:25:25 +0800 Subject: [PATCH 1/6] (feat)Line: add support for hiding line charts by default --- packages/line/src/Line.js | 2 ++ packages/line/src/hooks.js | 3 ++- packages/line/src/props.js | 1 + storybook/stories/line/Line.stories.tsx | 11 +++++++++++ 4 files changed, 16 insertions(+), 1 deletion(-) diff --git a/packages/line/src/Line.js b/packages/line/src/Line.js index 36424bd130..2a7079556f 100644 --- a/packages/line/src/Line.js +++ b/packages/line/src/Line.js @@ -116,6 +116,7 @@ const Line = props => { enableTouchCrosshair = false, role = 'img', + initialHiddenIds = [], } = props const { margin, innerWidth, innerHeight, outerWidth, outerHeight } = useDimensions( @@ -148,6 +149,7 @@ const Line = props => { pointColor, pointBorderColor, enableSlices, + initialHiddenIds, }) const theme = useTheme() diff --git a/packages/line/src/hooks.js b/packages/line/src/hooks.js index 22280bebe3..bdcf36c812 100644 --- a/packages/line/src/hooks.js +++ b/packages/line/src/hooks.js @@ -153,6 +153,7 @@ export const useLine = ({ pointColor = LineDefaultProps.pointColor, pointBorderColor = LineDefaultProps.pointBorderColor, enableSlices = LineDefaultProps.enableSlicesTooltip, + initialHiddenIds = LineDefaultProps.initialHiddenIds, }) => { const componentId = useId() const formatX = useValueFormatter(xFormat) @@ -161,7 +162,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, diff --git a/packages/line/src/props.js b/packages/line/src/props.js index e9215e8139..8609fb47f6 100644 --- a/packages/line/src/props.js +++ b/packages/line/src/props.js @@ -209,6 +209,7 @@ export const LineDefaultProps = { defs: [], fill: [], role: 'img', + initialHiddenIds: [], } export const LineCanvasDefaultProps = { diff --git a/storybook/stories/line/Line.stories.tsx b/storybook/stories/line/Line.stories.tsx index 41fbedefed..27d8cb3550 100644 --- a/storybook/stories/line/Line.stories.tsx +++ b/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, + }, + ]} /> ), } From 12b10ce875c8bd7036a8b4981acb7d919d7080f9 Mon Sep 17 00:00:00 2001 From: Carlos Catalan Date: Mon, 17 Jun 2024 13:28:21 +0800 Subject: [PATCH 2/6] add unit test --- packages/line/tests/Line.test.js | 40 ++++++++++++++++++++++++++++++++ 1 file changed, 40 insertions(+) diff --git a/packages/line/tests/Line.test.js b/packages/line/tests/Line.test.js index 4e729aaa1a..014c25d7f0 100644 --- a/packages/line/tests/Line.test.js +++ b/packages/line/tests/Line.test.js @@ -1,6 +1,8 @@ import { mount } from 'enzyme' import { Axis } from '@nivo/axes' import Line from '../src/Line' +import Lines from '../src/Lines' +import LinesItem from '../src/LinesItem' import SlicesItem from '../src/SlicesItem' import renderer from 'react-test-renderer' @@ -90,6 +92,44 @@ it('should create slice for each x value', () => { expect(slices.at(4).prop('slice').x).toBe(500) }) +it('should hide certain 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 }, + ], + }, + ] + const wrapper = mount( + + ) + + const lines = wrapper.find(Lines) + expect(lines).toHaveLength(1) +}) + it('should have left and bottom axis by default', () => { const data = [ { From 18d55e21518f999a6f0bed942b9afd672e2ec41e Mon Sep 17 00:00:00 2001 From: Carlos Catalan Date: Mon, 8 Jul 2024 13:07:58 +0800 Subject: [PATCH 3/6] add unit test for testing hiding multiple series by default --- packages/line/tests/Line.test.js | 60 +++++++++++++++++++++++++++++++- 1 file changed, 59 insertions(+), 1 deletion(-) diff --git a/packages/line/tests/Line.test.js b/packages/line/tests/Line.test.js index 86399023d9..2c47425ad7 100644 --- a/packages/line/tests/Line.test.js +++ b/packages/line/tests/Line.test.js @@ -90,7 +90,7 @@ it('should create slice for each x value', () => { expect(slices.at(4).prop('slice').x).toBe(500) }) -it('should hide certain line charts by default given their ids', () => { +it('should hide single line charts by default given their id', () => { const data = [ { id: 'A', @@ -112,6 +112,16 @@ it('should hide certain line charts by default given their ids', () => { { 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( { 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( + + ) + + const lines = wrapper.find(Lines) + expect(lines).toHaveLength(1) +}) + it('should have left and bottom axis by default', () => { const data = [ { From d75f70ad6491ed90b84e65e32c6df1234345d047 Mon Sep 17 00:00:00 2001 From: Carlos Catalan Date: Thu, 11 Jul 2024 23:34:11 +0800 Subject: [PATCH 4/6] add to documentation --- website/src/data/components/line/props.ts | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/website/src/data/components/line/props.ts b/website/src/data/components/line/props.ts index 1b4d8dc58d..5c37ff7dfa 100644 --- a/website/src/data/components/line/props.ts +++ b/website/src/data/components/line/props.ts @@ -541,6 +541,15 @@ 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: 'boolean', + defaultValue: defaults.initialHiddenIds, + control: { type: 'switch' }, + }, { key: 'crosshairType', flavors: ['svg'], From 8557380d853eac791a9052e3851c0583d23e7915 Mon Sep 17 00:00:00 2001 From: Carlos Catalan Date: Fri, 19 Jul 2024 21:49:08 +0800 Subject: [PATCH 5/6] add to types and update props --- packages/line/index.d.ts | 1 + website/src/data/components/line/props.ts | 3 +-- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/line/index.d.ts b/packages/line/index.d.ts index fd9b157d56..aed145da8f 100644 --- a/packages/line/index.d.ts +++ b/packages/line/index.d.ts @@ -193,6 +193,7 @@ export interface LineProps { debugMesh?: boolean enableSlices?: 'x' | 'y' | false + initialHiddenIds?: string[] debugSlices?: boolean sliceTooltip?: SliceTooltip diff --git a/website/src/data/components/line/props.ts b/website/src/data/components/line/props.ts index 5c37ff7dfa..2462e1b65f 100644 --- a/website/src/data/components/line/props.ts +++ b/website/src/data/components/line/props.ts @@ -546,9 +546,8 @@ const props: ChartProperty[] = [ flavors: allFlavors, group: 'Interactivity', help: `Hides certain series by default given their ids`, - type: 'boolean', + type: 'string[]', defaultValue: defaults.initialHiddenIds, - control: { type: 'switch' }, }, { key: 'crosshairType', From fe7df17d70aac28f160289f61cc08793aabbf573 Mon Sep 17 00:00:00 2001 From: Carlos Catalan Date: Tue, 23 Jul 2024 09:21:04 +0800 Subject: [PATCH 6/6] use make fmt --- packages/line/tests/Line.test.js | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/packages/line/tests/Line.test.js b/packages/line/tests/Line.test.js index 2c47425ad7..b6c133d7ad 100644 --- a/packages/line/tests/Line.test.js +++ b/packages/line/tests/Line.test.js @@ -124,12 +124,12 @@ it('should hide single line charts by default given their id', () => { }, ] const wrapper = mount( - ) @@ -172,12 +172,12 @@ it('should hide multiple line charts by default given their ids', () => { }, ] const wrapper = mount( - )