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

plouc · Mar 13, 2024 · b9ae884 · b9ae884
1 parent 154056b
commit b9ae884
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 1 deletion.
diff --git 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
@@ -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
@@ -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
@@ -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,
+                },
+            ]}
         />
     ),
 }