adds table filters

Vizzuality · Mar 19, 2024 · c54ec52 · c54ec52
1 parent aaf3cbd
commit c54ec52
Show file tree

Hide file tree

Showing 4 changed files with 101 additions and 40 deletions.
diff --git a/client/src/containers/analysis-eudr/category-list/index.tsx b/client/src/containers/analysis-eudr/category-list/index.tsx
@@ -1,4 +1,4 @@
-import { useMemo, useState } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 
 import DeforestationFreeSuppliersBreakdown from './breakdown/deforestation-free-suppliers';
 import SuppliersWithDeforestationAlertsBreakdown from './breakdown/suppliers-with-deforestation-alerts';
@@ -8,10 +8,12 @@ import { Button } from '@/components/button';
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
 import { cn } from '@/lib/utils';
 import { useEUDRData } from '@/hooks/eudr';
-import { useAppSelector } from '@/store/hooks';
-import { eudr } from '@/store/features/eudr';
+import { useAppDispatch, useAppSelector } from '@/store/hooks';
+import { eudr, setTableFilters } from '@/store/features/eudr';
 import { themeColors } from '@/utils/colors';
 
+import type { EUDRState } from '@/store/features/eudr';
+
 export const CATEGORIES = [
   {
     name: 'Deforestation-free suppliers',
@@ -27,6 +29,15 @@ export const CATEGORIES = [
   },
 ] as const;
 
+const CATEGORY_TO_FILTER: Record<
+  (typeof CATEGORIES)[number]['name'],
+  Partial<keyof EUDRState['table']['filters']>
+> = {
+  [CATEGORIES[0].name]: 'dfs',
+  [CATEGORIES[1].name]: 'sda',
+  [CATEGORIES[2].name]: 'tpl',
+} as const;
+
 type CategoryState = Record<(typeof CATEGORIES)[number]['name'], boolean>;
 
 export const CategoryList = (): JSX.Element => {
@@ -43,7 +54,25 @@ export const CategoryList = (): JSX.Element => {
   const {
     viewBy,
     filters: { dates, suppliers, origins, materials, plots },
+    table: { filters: tableFilters },
   } = useAppSelector(eudr);
+  const dispatch = useAppDispatch();
+
+  const onClickCategory = useCallback(
+    (category: (typeof CATEGORIES)[number]) => {
+      toggleCategory((prev) => ({
+        ...prev,
+        [category.name]: !prev[category.name],
+      }));
+
+      dispatch(
+        setTableFilters({
+          [CATEGORY_TO_FILTER[category.name]]: !tableFilters[CATEGORY_TO_FILTER[category.name]],
+        }),
+      );
+    },
+    [dispatch, tableFilters],
+  );
 
   const { data } = useEUDRData(
     {
@@ -75,42 +104,38 @@ export const CategoryList = (): JSX.Element => {
         <Collapsible
           key={category.name}
           className="rounded-xl bg-gray-50 p-5"
-          onOpenChange={() => {
-            toggleCategory((prev) => ({
-              ...prev,
-              [category.name]: !prev[category.name],
-            }));
-          }}
+          onOpenChange={() => onClickCategory(category)}
         >
-          <div className="flex w-full items-center space-x-6">
-            <div className="relative flex flex-1 items-center space-x-2 text-left">
-              <span
-                className="block min-h-4 min-w-4 rounded-full border-2 transition-colors"
-                style={{
-                  borderColor: category.color,
-                  ...(categories[category.name] && {
-                    backgroundColor: category.color,
-                  }),
-                }}
-              />
-              <span>{category.name}</span>
-            </div>
-            <div className="shrink-0 grow-0">
-              <div className="text-center">
-                {`${category.totalPercentage.toFixed(2)}%`}{' '}
-                <span className="text-2xs">of suppliers</span>
-              </div>
-              <div className="h-[2px] w-[340px] bg-gray-200">
-                <div
-                  className="h-[2px]"
+          <CollapsibleTrigger asChild>
+            <div className="flex w-full cursor-pointer items-center space-x-6">
+              <div className="relative flex flex-1 items-center space-x-2 text-left">
+                <span
+                  className="block min-h-4 min-w-4 rounded-full border-2 transition-colors"
                   style={{
-                    width: `${category.totalPercentage}%`,
-                    backgroundColor: category.color,
+                    borderColor: category.color,
+                    ...(categories[category.name] && {
+                      backgroundColor: category.color,
+                    }),
                   }}
                 />
+                <span>{category.name}</span>
               </div>
-            </div>
-            <CollapsibleTrigger asChild>
+              <div className="shrink-0 grow-0">
+                <div className="text-center">
+                  {`${category.totalPercentage.toFixed(2)}%`}{' '}
+                  <span className="text-2xs">of suppliers</span>
+                </div>
+                <div className="h-[2px] w-[340px] bg-gray-200">
+                  <div
+                    className="h-[2px]"
+                    style={{
+                      width: `${category.totalPercentage}%`,
+                      backgroundColor: category.color,
+                    }}
+                  />
+                </div>
+              </div>
+
               <Button
                 type="button"
                 size="xs"
@@ -124,8 +149,8 @@ export const CategoryList = (): JSX.Element => {
               >
                 {categories[category.name] ? 'Close detail' : 'View detail'}
               </Button>
-            </CollapsibleTrigger>
-          </div>
+            </div>
+          </CollapsibleTrigger>
           <CollapsibleContent>
             {category.name === CATEGORIES[0].name && <DeforestationFreeSuppliersBreakdown />}
             {category.name === CATEGORIES[1].name && <SuppliersWithDeforestationAlertsBreakdown />}

diff --git a/client/src/containers/analysis-eudr/supplier-list-table/table/columns.tsx b/client/src/containers/analysis-eudr/supplier-list-table/table/columns.tsx
@@ -8,6 +8,8 @@ import { BIG_NUMBER_FORMAT } from 'utils/number-format';
 import type { Supplier } from '.';
 import type { ColumnDef } from '@tanstack/react-table';
 
+const numberFormat = new Intl.NumberFormat(undefined, { maximumFractionDigits: 3 });
+
 export const columns: ColumnDef<Supplier>[] = [
   {
     accessorKey: 'supplierName',
@@ -49,23 +51,24 @@ export const columns: ColumnDef<Supplier>[] = [
     header: ({ column }) => <DataTableColumnHeader column={column} title="DFS" />,
     cell: ({ row }) => {
       const dfs: number = row.getValue('dfs');
-      return <span>{`${Number.isNaN(dfs) ? '-' : `${dfs.toFixed(2)}%`}`}</span>;
+      return <span>{`${Number.isNaN(dfs) ? '-' : `${numberFormat.format(dfs)}%`}`}</span>;
     },
   },
   {
     accessorKey: 'sda',
     header: ({ column }) => <DataTableColumnHeader column={column} title="SDA" />,
     cell: ({ row }) => {
       const sda: number = row.getValue('sda');
-      return <span>{`${Number.isNaN(sda) ? '-' : `${sda.toFixed(2)}%`}`}</span>;
+      return <span>{`${Number.isNaN(sda) ? '-' : `${numberFormat.format(sda)}%`}`}</span>;
     },
   },
   {
     accessorKey: 'tpl',
     header: ({ column }) => <DataTableColumnHeader column={column} title="TPL" />,
     cell: ({ row }) => {
       const tpl: number = row.getValue('tpl');
-      return <span>{`${Number.isNaN(tpl) ? '-' : `${tpl.toFixed(2)}%`}`}</span>;
+
+      return <span>{`${Number.isNaN(tpl) ? '-' : `${numberFormat.format(tpl)}%`}`}</span>;
     },
   },
   {

diff --git a/client/src/containers/analysis-eudr/supplier-list-table/table/index.tsx b/client/src/containers/analysis-eudr/supplier-list-table/table/index.tsx
@@ -57,6 +57,7 @@ const SuppliersListTable = (): JSX.Element => {
   const [sorting, setSorting] = useState<SortingState>([]);
   const {
     filters: { dates, suppliers, origins, materials, plots },
+    table: { filters: tableFilters },
   } = useAppSelector(eudr);
 
   const { data, isFetching } = useEUDRData(
@@ -69,7 +70,14 @@ const SuppliersListTable = (): JSX.Element => {
       geoRegionIds: plots?.map(({ value }) => value),
     },
     {
-      select: (data) => data?.table,
+      select: (data) =>
+        data?.table.filter((dataRow) => {
+          if (Object.values(tableFilters).every((filter) => !filter)) return true;
+
+          if (tableFilters.dfs && dataRow.dfs > 0) return true;
+          if (tableFilters.sda && dataRow.sda > 0) return true;
+          if (tableFilters.tpl && dataRow.tpl > 0) return true;
+        }),
       onSuccess: (data) => {
         dispatch(setTotalSuppliers(data?.length || 0));
       },

diff --git a/client/src/store/features/eudr/index.ts b/client/src/store/features/eudr/index.ts
@@ -30,6 +30,13 @@ export type EUDRState = {
       to: string;
     };
   };
+  table: {
+    filters: {
+      dfs: boolean;
+      sda: boolean;
+      tpl: boolean;
+    };
+  };
   // map
   basemap: 'light' | 'planet';
   planetLayer: LayerConfiguration;
@@ -51,6 +58,13 @@ export const initialState: EUDRState = {
       to: DATES_RANGE[1],
     },
   },
+  table: {
+    filters: {
+      dfs: false,
+      sda: false,
+      tpl: false,
+    },
+  },
   basemap: 'light',
   supplierLayer: {
     active: true,
@@ -104,6 +118,16 @@ export const EUDRSlice = createSlice({
         ...action.payload,
       },
     }),
+    setTableFilters: (state, action: PayloadAction<Partial<EUDRState['table']['filters']>>) => ({
+      ...state,
+      table: {
+        ...state.table,
+        filters: {
+          ...state.table.filters,
+          ...action.payload,
+        },
+      },
+    }),
     setBasemap: (state, action: PayloadAction<EUDRState['basemap']>) => ({
       ...state,
       basemap: action.payload,
@@ -149,6 +173,7 @@ export const {
   setViewBy,
   setTotalSuppliers,
   setFilters,
+  setTableFilters,
   setBasemap,
   setSupplierLayer,
   setContextualLayer,