From b9ae884b713153bab9b580580a4e794a167cc46c Mon Sep 17 00:00:00 2001
From: Carlos Catalan <ccatalan6@gatech.edu>
Date: Wed, 13 Mar 2024 23:25:25 +0800
Subject: [PATCH] (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 36424bd13..2a7079556 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 22280bebe..bdcf36c81 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 e9215e813..8609fb47f 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 41fbedefe..27d8cb355 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,
+                },
+            ]}
         />
     ),
 }