From 1794bb8bd1e2691d638b263091108b2d5c1f4bc1 Mon Sep 17 00:00:00 2001 From: Arnaud Ambroselli <31724752+arnaudambro@users.noreply.github.com> Date: Mon, 6 Nov 2023 11:59:55 +0100 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=20(#1733)?= 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} />