(PC-32278)[PRO] feat: use real data in stats V2 + add a11y support

pass-culture · Nov 22, 2024 · 28ca7ee · 28ca7ee
1 parent 11e28e2
commit 28ca7ee
Show file tree

Hide file tree

Showing 18 changed files with 671 additions and 368 deletions.
diff --git a/pro/src/app/App/layout/Layout.module.scss b/pro/src/app/App/layout/Layout.module.scss
@@ -81,7 +81,7 @@ $connect-as-header-height: rem.torem(52px);
 .content-container {
   width: 100%;
   flex-grow: 1;
-  padding: rem.torem(24px) rem.torem(24px) 0;
+  padding: size.$main-content-padding-xs size.$main-content-padding-xs 0;
   background-color: var(--color-white);
   display: flex;
   flex-direction: column;

diff --git a/pro/src/commons/config/swrQueryKeys.ts b/pro/src/commons/config/swrQueryKeys.ts
@@ -57,3 +57,4 @@ export const GET_VENUE_TYPES_QUERY_KEY = 'getVenueTypes'
 export const GET_VENUES_QUERY_KEY = 'getVenues'
 export const LOG_CATALOG_VIEW_QUERY_KEY = 'logCatalogView'
 export const LOG_TRACKING_FILTER_QUERY_KEY = 'logTrackingFilter'
+export const GET_STATISTICS_QUERY_KEY = 'getStatistics'
diff --git a/pro/src/commons/utils/factories/statisticsFactories.ts b/pro/src/commons/utils/factories/statisticsFactories.ts
@@ -0,0 +1,46 @@
+import { StatisticsModel } from "apiClient/v1";
+
+export const statisticsFactory = ({
+  emptyYear = '',
+  individualRevenueOnlyYear = '',
+  collectiveRevenueOnlyYear = '',
+  collectiveAndIndividualRevenueYear = '2024',
+}): StatisticsModel => {
+  const incomeByYear = {
+    ...(emptyYear && {[emptyYear]: {}}),
+    ...(individualRevenueOnlyYear && {
+      [individualRevenueOnlyYear]: {
+        revenue: {
+          individual: 1000,
+        },
+        expectedRevenue: {
+          individual: 2000,
+        }
+      }
+    }),
+    ...(collectiveRevenueOnlyYear && {
+      [collectiveRevenueOnlyYear]: {
+        revenue: {
+          collective: 3000,
+        },
+        expectedRevenue: {
+          collective: 4000,
+        },
+      }
+    }),
+    [collectiveAndIndividualRevenueYear]: {
+      revenue: {
+        total: 11_000,
+        individual: 5000,
+        collective: 6000,
+      },
+      expectedRevenue: {
+        total: 15_000,
+        individual: 7000,
+        collective: 8000,
+      },
+    },
+  }
+
+  return { incomeByYear }
+}
diff --git a/pro/src/pages/Reimbursements/Income/Income.module.scss b/pro/src/pages/Reimbursements/Income/Income.module.scss
@@ -25,6 +25,29 @@
       }
     }
 
+    &-by-venue {
+      max-width: rem.torem(300px);
+
+      // Selected tags must be displayed to occupy available width.
+      // Width must be calculated based on the viewport width minus
+      // various padding values since they belong to a component that
+      // is not a direct child of the main content container and
+      // has a restricted width.
+      &-selected-tags {
+        width: calc(100vw - size.$main-content-padding-xs * 2);
+
+        @media (min-width: size.$mobile) {
+          width: calc(100vw - (size.$main-content-padding) * 2)
+        }
+
+        @media (min-width: size.$laptop) {
+          // On very large screens the layout does not exceed 90rem.
+          width: calc(100vw - (size.$main-content-padding * 2) - size.$side-nav-width);
+          max-width: calc(size.$desktop - (size.$main-content-padding * 2) - size.$side-nav-width);
+        }
+      }
+    }
+
     &-by-year {
       display: flex;
       flex-flow: row wrap;
@@ -37,6 +60,7 @@
         align-items: end;
 
         &-is-only-filter {
+          height: auto;
           margin-left: 0;
         }
       }