diff --git a/client/src/containers/analysis-eudr/suppliers-stacked-bar/component.tsx b/client/src/containers/analysis-eudr/suppliers-stacked-bar/component.tsx
index 6207e4cd59..d0d35110de 100644
--- a/client/src/containers/analysis-eudr/suppliers-stacked-bar/component.tsx
+++ b/client/src/containers/analysis-eudr/suppliers-stacked-bar/component.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback } from 'react';
import {
BarChart,
Bar,
@@ -13,20 +13,19 @@ import {
import CategoryList from '@/containers/analysis-eudr/category-list';
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
import { Label as RadioLabel } from '@/components/ui/label';
+import { useAppDispatch, useAppSelector } from '@/store/hooks';
+import { eudr, setViewBy } from '@/store/features/eudr';
-const VIEW_BY_OPTIONS = [
+export const VIEW_BY_OPTIONS = [
{
label: 'Commodities',
value: 'commodities',
- defaultChecked: true,
},
{
label: 'Countries',
value: 'countries',
},
-];
-
-const defaultViewBy = VIEW_BY_OPTIONS.find((option) => option.defaultChecked)?.value;
+] as const;
const data = [
{
@@ -74,6 +73,16 @@ const data = [
];
const SuppliersStackedBar = () => {
+ const { viewBy } = useAppSelector(eudr);
+ const dispatch = useAppDispatch();
+
+ const handleViewBy = useCallback(
+ (value: typeof viewBy) => {
+ dispatch(setViewBy(value));
+ },
+ [dispatch],
+ );
+
return (
@@ -84,7 +93,11 @@ const SuppliersStackedBar = () => {
Suppliers by category
View by:
-
+
{VIEW_BY_OPTIONS.map((option) => (
diff --git a/client/src/containers/analysis-eudr/suppliers-stacked-bar/index.ts b/client/src/containers/analysis-eudr/suppliers-stacked-bar/index.ts
index b404d7fd44..661b131e08 100644
--- a/client/src/containers/analysis-eudr/suppliers-stacked-bar/index.ts
+++ b/client/src/containers/analysis-eudr/suppliers-stacked-bar/index.ts
@@ -1 +1,3 @@
export { default } from './component';
+
+export { VIEW_BY_OPTIONS } from './component';
diff --git a/client/src/store/features/eudr/index.ts b/client/src/store/features/eudr/index.ts
new file mode 100644
index 0000000000..5b0a934d06
--- /dev/null
+++ b/client/src/store/features/eudr/index.ts
@@ -0,0 +1,30 @@
+import { createSlice } from '@reduxjs/toolkit';
+
+import type { VIEW_BY_OPTIONS } from 'containers/analysis-eudr/suppliers-stacked-bar';
+import type { PayloadAction } from '@reduxjs/toolkit';
+import type { RootState } from 'store';
+
+export type EUDRState = {
+ viewBy: (typeof VIEW_BY_OPTIONS)[number]['value'];
+};
+
+export const initialState: EUDRState = {
+ viewBy: 'commodities',
+};
+
+export const EUDRSlice = createSlice({
+ name: 'eudr',
+ initialState,
+ reducers: {
+ setViewBy: (state, action: PayloadAction) => ({
+ ...state,
+ viewBy: action.payload,
+ }),
+ },
+});
+
+export const { setViewBy } = EUDRSlice.actions;
+
+export const eudr = (state: RootState) => state['eudr'];
+
+export default EUDRSlice.reducer;
diff --git a/client/src/store/index.ts b/client/src/store/index.ts
index b387669482..d77c384b55 100644
--- a/client/src/store/index.ts
+++ b/client/src/store/index.ts
@@ -16,6 +16,7 @@ import analysisScenarios, {
initialState as analysisScenariosInitialState,
setScenarioToCompare,
} from 'store/features/analysis/scenarios';
+import eudr from 'store/features/eudr';
import type { Action, ReducersMapObject, Middleware } from '@reduxjs/toolkit';
import type { AnalysisState } from './features/analysis';
@@ -26,6 +27,7 @@ const staticReducers = {
'analysis/filters': analysisFilters,
'analysis/map': analysisMap,
'analysis/scenarios': analysisScenarios,
+ eudr,
};
const asyncReducers = {};