fix: print stats (#1860)

SocialGouv · Feb 13, 2024 · 1933a24 · 1933a24
1 parent 8ac000c
commit 1933a24
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 58 deletions.
diff --git a/dashboard/src/index.scss b/dashboard/src/index.scss
@@ -324,11 +324,6 @@ hr {
     page-break-before: auto;
     display: none;
   }
-  @page {
-    margin: 1cm;
-    margin-top: 50px;
-    margin-bottom: 30mm !important;
-  }
 }
 @media screen {
   .printonly {

diff --git a/dashboard/src/scenes/stats/CustomFieldsStats.js b/dashboard/src/scenes/stats/CustomFieldsStats.js
@@ -29,54 +29,54 @@ const CustomFieldsStats = ({ customFields, data, additionalCols = [], dataTestId
             />
           </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>
-            );
-          }
-          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>
-            );
-          }
-          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>
+      {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>
+          );
+        }
+        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>
+          );
+        }
+        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;
+      })}
     </>
   );
 };

diff --git a/dashboard/src/scenes/stats/PersonsStats.js b/dashboard/src/scenes/stats/PersonsStats.js
@@ -74,7 +74,6 @@ export default function PersonStats({
   return (
     <>
       {!evolutivesStatsActivated && <h3 className="tw-my-5 tw-text-xl">Statistiques des {title}</h3>}
-      <h3 className="tw-my-5 tw-text-xl">Statistiques des {title}</h3>
       <Filters base={filterBase} filters={filterPersons} onChange={setFilterPersons} />
       {evolutivesStatsActivated ? (
         <>
@@ -185,6 +184,7 @@ export default function PersonStats({
             return (
               <details
                 key={section.name}
+                className="print:tw-break-before-page"
                 open={
                   process.env.REACT_APP_TEST_PLAYWRIGHT === 'true' ||
                   window.localStorage.getItem(`person-stats-${section.name.replace(' ', '-').toLocaleLowerCase()}-open`) === 'true'

diff --git a/dashboard/src/scenes/stats/charts.js b/dashboard/src/scenes/stats/charts.js
@@ -12,7 +12,7 @@ export const CustomResponsivePie = ({ data = [], title, onItemClick, help }) =>
   };
 
   return (
-    <div className="tw-my-4 tw-mx-0 tw-flex tw-w-full tw-break-inside-avoid tw-flex-wrap tw-items-center tw-justify-between tw-rounded-2xl tw-border tw-border-main25 tw-bg-white tw-p-4">
+    <div className="tw-my-4 tw-mx-0 tw-flex tw-w-full tw-flex-wrap  tw-items-center tw-justify-between tw-rounded-2xl tw-border tw-border-main25 tw-bg-white tw-p-4 print:tw-break-before-all print:tw-break-inside-avoid print:tw-flex-col">
       <div
         className={[
           'tw-relative tw-mt-4 tw-mb-12 tw-flex tw-basis-full tw-justify-center',
@@ -51,7 +51,7 @@ export const CustomResponsivePie = ({ data = [], title, onItemClick, help }) =>
       </div>
       <div
         className={[
-          'tw-flex tw-h-80 tw-max-w-[50%] tw-basis-1/2 tw-items-center tw-justify-center tw-font-bold print:tw-w-[600px] print:tw-max-w-[55%] print:!tw-grow print:!tw-basis-0',
+          'tw-flex tw-h-80 tw-max-w-[50%] tw-basis-1/2 tw-items-center tw-justify-center tw-font-bold print:tw-order-2 print:tw-mt-4 print:tw-max-w-none print:!tw-grow print:!tw-basis-0',
           onItemClick ? '[&_path]:tw-cursor-pointer' : '',
         ].join(' ')}>
         <ResponsivePie
@@ -122,8 +122,8 @@ export const CustomResponsiveBar = ({
   };
 
   return (
-    <div className="tw-my-4 tw-mx-0 tw-flex tw-w-full tw-break-inside-avoid tw-flex-wrap tw-items-center tw-justify-between tw-rounded-2xl tw-border tw-border-main25 tw-bg-white tw-p-4">
-      <div className="avoid tw-relative tw-mt-4 tw-mb-12 tw-flex tw-basis-full tw-justify-center">
+    <div className="tw-my-4 tw-mx-0 tw-flex tw-w-full tw-flex-wrap tw-items-center tw-justify-between tw-rounded-2xl tw-border tw-border-main25 tw-bg-white tw-p-4  print:tw-break-before-all print:tw-break-inside-avoid print:tw-flex-col">
+      <div className="tw-relative tw-mt-4 tw-mb-12 tw-flex tw-basis-full tw-justify-center print:tw-basis-0">
         <p className="tw-m-0 tw-inline-block tw-text-center tw-text-lg tw-font-medium tw-text-black">
           {title} {!!help && <HelpButtonAndModal title={title} help={help} />}
         </p>
@@ -159,7 +159,7 @@ export const CustomResponsiveBar = ({
       </div>
       <div
         className={[
-          'tw-relative tw-flex tw-h-80 tw-max-w-[50%] tw-basis-1/2 tw-items-center tw-justify-center tw-font-bold print:tw-w-[600px] print:tw-max-w-[60%] print:!tw-grow print:!tw-basis-0',
+          'tw-relative tw-flex tw-h-80 tw-max-w-[50%] tw-basis-1/2 tw-items-center tw-justify-center tw-font-bold print:tw-order-2 print:tw-mt-4 print:!tw-max-w-none print:!tw-basis-0',
           !!onItemClick ? '[&_rect]:tw-cursor-pointer' : '',
         ].join(' ')}>
         {!!showWarning && (