Merge pull request #153 from bento-platform/features/reset-chart-layout

feat: reset button for chart layout
bento-platform · Mar 4, 2024 · 52cc57a · 52cc57a
2 parents 3fc731c + b26b081
commit 52cc57a
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 11 deletions.
diff --git a/src/js/components/Overview/Drawer/ManageChartsDrawer.tsx b/src/js/components/Overview/Drawer/ManageChartsDrawer.tsx
@@ -7,7 +7,7 @@ import ChartTree from './ChartTree';
 
 import { ChartDataField } from '@/types/data';
 import { useAppSelector, useAppDispatch, useTranslationCustom, useTranslationDefault } from '@/hooks';
-import { hideAllSectionCharts, setAllDisplayedCharts } from '@/features/data/data.store';
+import { hideAllSectionCharts, setAllDisplayedCharts, resetLayout } from '@/features/data/data.store';
 
 const ManageChartsDrawer = ({ onManageDrawerClose, manageDrawerVisible }: ManageChartsDrawerProps) => {
   const t = useTranslationCustom();
@@ -24,14 +24,24 @@ const ManageChartsDrawer = ({ onManageDrawerClose, manageDrawerVisible }: Manage
       onClose={onManageDrawerClose}
       open={manageDrawerVisible}
       extra={
-        <Button
-          size="small"
-          onClick={() => {
-            dispatch(setAllDisplayedCharts({}));
-          }}
-        >
-          Show All
-        </Button>
+        <Space>
+          <Button
+            size="small"
+            onClick={() => {
+              dispatch(setAllDisplayedCharts({}));
+            }}
+          >
+            Show All
+          </Button>
+          <Button
+            size="small"
+            onClick={() => {
+              dispatch(resetLayout());
+            }}
+          >
+            Reset
+          </Button>
+        </Space>
       }
     >
       {sections.map(({ sectionTitle, charts }: { sectionTitle: string; charts: ChartDataField[] }, i: number) => (

diff --git a/src/js/features/data/data.store.ts b/src/js/features/data/data.store.ts
@@ -6,12 +6,14 @@ import { Counts } from '@/types/overviewResponse';
 
 interface DataState {
   isFetchingData: boolean;
+  defaultLayout: Sections;
   sections: Sections;
   counts: Counts;
 }
 
 const initialState: DataState = {
   isFetchingData: true,
+  defaultLayout: [],
   sections: [],
   counts: {
     individuals: 0,
@@ -69,6 +71,9 @@ const data = createSlice({
           arr[ind].isDisplayed = false;
         });
     },
+    resetLayout: (state) => {
+      state.sections = state.defaultLayout;
+    },
   },
   extraReducers: (builder) => {
     builder
@@ -77,6 +82,7 @@ const data = createSlice({
       })
       .addCase(makeGetDataRequestThunk.fulfilled, (state, { payload }) => {
         state.sections = payload.sectionData;
+        state.defaultLayout = payload.defaultData;
         state.counts = payload.counts;
         state.isFetchingData = false;
       })
@@ -93,6 +99,7 @@ export const {
   setChartWidth,
   setAllDisplayedCharts,
   hideAllSectionCharts,
+  resetLayout,
 } = data.actions;
 export { makeGetDataRequestThunk };
 export default data.reducer;
diff --git a/src/js/features/data/makeGetDataRequest.thunk.ts b/src/js/features/data/makeGetDataRequest.thunk.ts
@@ -12,7 +12,7 @@ import { Counts, OverviewResponse } from '@/types/overviewResponse';
 import { printAPIError } from '@/utils/error.util';
 
 export const makeGetDataRequestThunk = createAsyncThunk<
-  { sectionData: Sections; counts: Counts },
+  { sectionData: Sections; counts: Counts; defaultData: Sections },
   void,
   { rejectValue: string }
 >('data/makeGetDataRequest', async (_, { rejectWithValue }) => {
@@ -46,6 +46,8 @@ export const makeGetDataRequestThunk = createAsyncThunk<
     charts: charts.map(normalizeChart),
   }));
 
+  const defaultSectionData = JSON.parse(JSON.stringify(sectionData));
+
   // comparing to the local store and updating itself
   let convertedData = convertSequenceAndDisplayData(sectionData);
   const localValue = getValue(LOCALSTORAGE_CHARTS_KEY, convertedData, (val: LocalStorageData) =>
@@ -63,5 +65,5 @@ export const makeGetDataRequestThunk = createAsyncThunk<
   convertedData = convertSequenceAndDisplayData(sectionData);
   saveValue(LOCALSTORAGE_CHARTS_KEY, convertedData);
 
-  return { sectionData, counts: overviewResponse.counts };
+  return { sectionData, counts: overviewResponse.counts, defaultData: defaultSectionData };
 });