feat(bar): support initialHiddeIds prop

plouc · Jun 28, 2021 · 29a80c6 · 29a80c6
1 parent 33a0cdb
commit 29a80c6
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 1 deletion.
diff --git a/packages/bar/src/Bar.tsx b/packages/bar/src/Bar.tsx
@@ -83,9 +83,11 @@ export const Bar = <RawDatum extends BarDatum>({
     renderWrapper,
     role = svgDefaultProps.role,
 
+    initialHiddenIds,
+
     ...props
 }: BarSvgProps<RawDatum>) => {
-    const [hiddenIds, setHiddenIds] = useState<string[]>([])
+    const [hiddenIds, setHiddenIds] = useState(initialHiddenIds ?? [])
     const toggleSerie = useCallback(id => {
         setHiddenIds(state =>
             state.indexOf(id) > -1 ? state.filter(item => item !== id) : [...state, id]

diff --git a/packages/bar/src/types.ts b/packages/bar/src/types.ts
@@ -211,6 +211,7 @@ export type BarSvgProps<RawDatum extends BarDatum> = Partial<BarCommonProps<RawD
     Dimensions &
     ModernMotionProps &
     Partial<{
+        initialHiddenIds: string[]
         layers: BarLayer<RawDatum>[]
         role: string
     }>

diff --git a/packages/bar/stories/bar.stories.js b/packages/bar/stories/bar.stories.js
@@ -402,3 +402,21 @@ const RaceChart = () => {
 }
 
 stories.add('race chart', () => <RaceChart />)
+
+stories.add('initial hidden ids', () => (
+    <Bar
+        {...commonProps}
+        initialHiddenIds={keys.slice(2, 4)}
+        legends={[
+            {
+                anchor: 'bottom',
+                dataFrom: 'keys',
+                direction: 'row',
+                itemHeight: 20,
+                itemWidth: 80,
+                toggleSerie: true,
+                translateY: 50,
+            },
+        ]}
+    />
+))