Merge pull request #127 from bento-platform/features/show_all_button

Added show all and hide all functionality to Chart manager
bento-platform · Nov 29, 2023 · 6049fb3 · 6049fb3
2 parents 64ee085 + bffd70b
commit 6049fb3
Show file tree

Hide file tree

Showing 3 changed files with 76 additions and 6 deletions.
diff --git a/package.json b/package.json
@@ -9,7 +9,8 @@
     "watch": "npx webpack --mode=development --watch",
     "gobuild": "./buildandrun.sh",
     "lint": "npx eslint src/js",
-    "lint-fix": "npx eslint --fix src/js"
+    "lint-fix": "npx eslint --fix src/js",
+    "prettier": "npx prettier --write src/js"
   },
   "keywords": [],
   "author": "",

diff --git a/src/js/components/Overview/Drawer/ManageChartsDrawer.tsx b/src/js/components/Overview/Drawer/ManageChartsDrawer.tsx
@@ -1,24 +1,64 @@
 import React from 'react';
 
-import { Drawer, DrawerProps, Typography } from 'antd';
+import { Button, Drawer, DrawerProps, Flex, Space, Typography } from 'antd';
 const { Title } = Typography;
 
 import ChartTree from './ChartTree';
 
 import { ChartDataField } from '@/types/data';
-import { useAppSelector, useTranslationCustom, useTranslationDefault } from '@/hooks';
+import { useAppSelector, useAppDispatch, useTranslationCustom, useTranslationDefault } from '@/hooks';
+import { hideAllSectionCharts, setAllDisplayedCharts } from '@/features/data/data.store';
 
 const ManageChartsDrawer = ({ onManageDrawerClose, manageDrawerVisible }: ManageChartsDrawerProps) => {
   const t = useTranslationCustom();
   const td = useTranslationDefault();
 
+  const dispatch = useAppDispatch();
+
   const sections = useAppSelector((state) => state.data.sections);
 
   return (
-    <Drawer title={td('Manage Charts')} placement="right" onClose={onManageDrawerClose} open={manageDrawerVisible}>
+    <Drawer
+      title={td('Manage Charts')}
+      placement="right"
+      onClose={onManageDrawerClose}
+      open={manageDrawerVisible}
+      extra={
+        <Button
+          size="small"
+          onClick={() => {
+            dispatch(setAllDisplayedCharts({}));
+          }}
+        >
+          Show All
+        </Button>
+      }
+    >
       {sections.map(({ sectionTitle, charts }: { sectionTitle: string; charts: ChartDataField[] }, i: number) => (
         <div key={i}>
-          <Title level={5}>{t(sectionTitle)}</Title>
+          <Flex justify="space-between" align="center" style={{ padding: '10px 0' }}>
+            <Title level={5} style={{ margin: '0' }}>
+              {t(sectionTitle)}
+            </Title>
+            <Space>
+              <Button
+                size="small"
+                onClick={() => {
+                  dispatch(setAllDisplayedCharts({ section: sectionTitle }));
+                }}
+              >
+                Show All
+              </Button>
+              <Button
+                size="small"
+                onClick={() => {
+                  dispatch(hideAllSectionCharts({ section: sectionTitle }));
+                }}
+              >
+                Hide All
+              </Button>
+            </Space>
+          </Flex>
           <ChartTree charts={charts} section={sectionTitle} />
         </div>
       ))}

diff --git a/src/js/features/data/data.store.ts b/src/js/features/data/data.store.ts
@@ -47,6 +47,28 @@ const data = createSlice({
       const chartObj = state.sections.find((e) => e.sectionTitle === section)!.charts.find((c) => c.id === chart)!;
       chartObj.width = width;
     },
+    setAllDisplayedCharts: (state, { payload }: PayloadAction<{ section?: string }>) => {
+      if (payload.section) {
+        state.sections
+          .find((e) => e.sectionTitle === payload.section)!
+          .charts.forEach((_, ind, arr) => {
+            arr[ind].isDisplayed = true;
+          });
+      } else {
+        state.sections.forEach((section) => {
+          section.charts.forEach((val, ind, arr) => {
+            arr[ind].isDisplayed = true;
+          });
+        });
+      }
+    },
+    hideAllSectionCharts: (state, { payload }: PayloadAction<{ section: string }>) => {
+      state.sections
+        .find((e) => e.sectionTitle === payload.section)!
+        .charts.forEach((_, ind, arr) => {
+          arr[ind].isDisplayed = false;
+        });
+    },
   },
   extraReducers: (builder) => {
     builder
@@ -64,6 +86,13 @@ const data = createSlice({
   },
 });
 
-export const { rearrange, disableChart, setDisplayedCharts, setChartWidth } = data.actions;
+export const {
+  rearrange,
+  disableChart,
+  setDisplayedCharts,
+  setChartWidth,
+  setAllDisplayedCharts,
+  hideAllSectionCharts,
+} = data.actions;
 export { makeGetDataRequestThunk };
 export default data.reducer;