From 76819ec8921298c21076e3fbf7abcd45053f40db Mon Sep 17 00:00:00 2001
From: Arnaud AMBROSELLI <arnaud.ambroselli@yahoo.fr>
Date: Tue, 17 Oct 2023 16:27:36 +0200
Subject: [PATCH] =?UTF-8?q?fix(dashboard):=20l'ordre=20d'affichage=20de=20?=
 =?UTF-8?q?chaque=20champ=20dans=20les=20stats=20suit=20l'ordre=20avec=20l?=
 =?UTF-8?q?equel=20on=20a=20fait=20le=20param=C3=A9trage?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/scenes/stats/CustomFieldsStats.js     | 115 ++++++++----------
 dashboard/src/scenes/stats/General.js         |   2 +-
 dashboard/src/scenes/stats/Persons.js         |   2 +-
 3 files changed, 53 insertions(+), 66 deletions(-)

diff --git a/dashboard/src/scenes/stats/CustomFieldsStats.js b/dashboard/src/scenes/stats/CustomFieldsStats.js
index a93371bd6..a235fb98c 100644
--- a/dashboard/src/scenes/stats/CustomFieldsStats.js
+++ b/dashboard/src/scenes/stats/CustomFieldsStats.js
@@ -5,13 +5,6 @@ import { BlockDateWithTime, BlockTotal } from './Blocks';
 import Card from '../../components/Card';
 import { getMultichoiceBarData, getPieData } from './utils';
 
-function getColsSize(totalCols) {
-  if (totalCols === 1) return 'full';
-  if (totalCols === 2) return '1/2';
-  if (totalCols % 4 === 0) return '1/3';
-  return '1/4';
-}
-
 const CustomFieldsStats = ({ customFields, data, additionalCols = [], dataTestId = '', help, onSliceClick, totalTitleForMultiChoice }) => {
   const team = useRecoilValue(currentTeamState);
 
@@ -20,69 +13,63 @@ const CustomFieldsStats = ({ customFields, data, additionalCols = [], dataTestId
     .filter((f) => f.enabled || f.enabledTeams?.includes(team._id))
     .filter((f) => f.showInStats);
 
-  const customFieldsNumber = customFieldsInStats.filter((field) => ['number'].includes(field.type));
-  const customFieldsDate = customFieldsInStats.filter((field) => ['date', 'date-with-time'].includes(field.type));
-  const customFieldsResponsivePie = customFieldsInStats.filter((field) => ['boolean', 'yes-no', 'enum'].includes(field.type));
-  const customFieldsResponsiveBar = customFieldsInStats.filter((field) => ['multi-choice'].includes(field.type));
-
-  const totalCols = customFieldsNumber.length + customFieldsDate.length + additionalCols.length;
-
-  const colSize = getColsSize(totalCols);
-
   return (
     <>
-      {totalCols > 0 && (
-        <>
-          {/* tailwind doesn't comile dynamic classes, so we need to declare them */}
-          <div className="tw-hidden tw-basis-1/4 tw-basis-1/2 tw-basis-1/3 tw-basis-full" />
-          <div className="-tw-mx-4 tw-flex tw-flex-wrap">
-            {additionalCols.map((col) => (
-              <div className={`tw-px-4 tw-py-2 tw-basis-${colSize}`} key={col.title}>
-                {/* TODO: fix alignment. */}
-                <Card title={col.title} count={col.value} children={<div></div>} dataTestId={dataTestId} help={help?.(col.title.capitalize())} />
-              </div>
-            ))}
-            {customFieldsNumber.map((field) => (
-              <div className={`tw-px-4 tw-py-2 tw-basis-${colSize}`} key={field.name}>
+      <div className="-tw-mx-4 tw-flex tw-flex-wrap tw-justify-around">
+        {additionalCols.map((col) => (
+          <div className="tw-basis-1/4 tw-px-4 tw-py-2" key={col.title}>
+            {/* TODO: fix alignment. */}
+            <Card title={col.title} count={col.value} children={<div></div>} dataTestId={dataTestId} help={help?.(col.title.capitalize())} />
+          </div>
+        ))}
+        {customFieldsInStats.map((field) => {
+          if (['number'].includes(field.type)) {
+            return (
+              <div className="tw-basis-1/4 tw-px-4 tw-py-2" key={field.name}>
                 <BlockTotal title={field.label} data={data} field={field.name} help={help?.(field.label.capitalize())} />
               </div>
-            ))}
-            {customFieldsDate.map((field) => (
-              <div className={`tw-px-4 tw-py-2 tw-basis-${colSize}`} key={field.name}>
+            );
+          }
+          if (['date', 'date-with-time'].includes(field.type)) {
+            return (
+              <div className="tw-basis-1/4 tw-px-4 tw-py-2" key={field.name}>
                 <BlockDateWithTime data={data} field={field} help={help?.(field.label.capitalize())} />
               </div>
-            ))}
-          </div>
-        </>
-      )}
-      {customFieldsResponsivePie.map((field) => (
-        <CustomResponsivePie
-          title={field.label}
-          help={help?.(field.label.capitalize())}
-          onItemClick={onSliceClick ? (newSlice) => onSliceClick?.(newSlice, field.name) : undefined}
-          key={field.name}
-          data={getPieData(data, field.name, {
-            options: field.options,
-            isBoolean: field.type === 'boolean',
-          })}
-        />
-      ))}
-      {customFieldsResponsiveBar.map((field) => {
-        return (
-          <CustomResponsiveBar
-            title={field.label}
-            help={help?.(field.label.capitalize())}
-            onItemClick={onSliceClick ? (newSlice) => onSliceClick?.(newSlice, field.name) : undefined}
-            key={field.name}
-            isMultiChoice
-            axisTitleY="File active"
-            axisTitleX={field.name}
-            totalForMultiChoice={data.length}
-            totalTitleForMultiChoice={totalTitleForMultiChoice}
-            data={getMultichoiceBarData(data, field.name, { options: field.options })}
-          />
-        );
-      })}
+            );
+          }
+          if (['boolean', 'yes-no', 'enum'].includes(field.type)) {
+            return (
+              <CustomResponsivePie
+                title={field.label}
+                help={help?.(field.label.capitalize())}
+                onItemClick={onSliceClick ? (newSlice) => onSliceClick?.(newSlice, field.name) : undefined}
+                key={field.name}
+                data={getPieData(data, field.name, {
+                  options: field.options,
+                  isBoolean: field.type === 'boolean',
+                })}
+              />
+            );
+          }
+          if (['multi-choice'].includes(field.type)) {
+            return (
+              <CustomResponsiveBar
+                title={field.label}
+                help={help?.(field.label.capitalize())}
+                onItemClick={onSliceClick ? (newSlice) => onSliceClick?.(newSlice, field.name) : undefined}
+                key={field.name}
+                isMultiChoice
+                axisTitleY="File active"
+                axisTitleX={field.name}
+                totalForMultiChoice={data.length}
+                totalTitleForMultiChoice={totalTitleForMultiChoice}
+                data={getMultichoiceBarData(data, field.name, { options: field.options })}
+              />
+            );
+          }
+          return null;
+        })}
+      </div>
     </>
   );
 };
diff --git a/dashboard/src/scenes/stats/General.js b/dashboard/src/scenes/stats/General.js
index 39407955b..0b08f3971 100644
--- a/dashboard/src/scenes/stats/General.js
+++ b/dashboard/src/scenes/stats/General.js
@@ -19,7 +19,7 @@ const GeneralStats = ({
       <div className="tw-flex tw-basis-full tw-items-center">
         <Filters title="Filtrer par personnes suivies:" base={filterBase} filters={filterPersons} onChange={setFilterPersons} />
       </div>
-      <div className="-tw-mx-4 tw-flex tw-flex-wrap">
+      <div className="-tw-mx-4 tw-flex tw-flex-wrap tw-justify-around">
         <Block
           data={personsCreated}
           title="Nombre de personnes créées"
diff --git a/dashboard/src/scenes/stats/Persons.js b/dashboard/src/scenes/stats/Persons.js
index 887922d92..ac5dcdcd5 100644
--- a/dashboard/src/scenes/stats/Persons.js
+++ b/dashboard/src/scenes/stats/Persons.js
@@ -65,7 +65,7 @@ const PersonStats = ({
     <>
       <h3 className="tw-my-5 tw-text-xl">Statistiques des {title}</h3>
       <Filters base={filterBase} filters={filterPersons} onChange={setFilterPersons} />
-      <div className="-tw-mx-4 tw-flex tw-flex-wrap">
+      <div className="-tw-mx-4 tw-flex tw-flex-wrap tw-justify-around">
         <Block data={personsForStats} title={`Nombre de ${title}`} help={firstBlockHelp} />
         <BlockCreatedAt persons={personsForStats} />
         <BlockWanderingAt persons={personsForStats} />