Feat/add caption for date to cards (#195)

* feat(stats): add paper equivalence to carbon footprint

* feat(stats): add and modify infos to data volume

* feat(stats): add caption for date to cards

src/components/statistics/statistic-multiple.tsx

+import Box from "@material-ui/core/Box";
+import IconButton from "@material-ui/core/IconButton";
+import makeStyles from "@material-ui/core/styles/makeStyles";
+import Tooltip from "@material-ui/core/Tooltip";
+import Typography from "@material-ui/core/Typography";
+import InfoOutlinedIcon from "@material-ui/icons/InfoOutlined";
+import React, { FC, ReactNode } from "react";
+
+import { RenderMultipleStatisticConfig } from "../../types/statistic-types";
+import { spaceNumberForAnyValue } from "../../utils/number-util";
+import StatisticTooltip from "./statistic-tooltip";
+
+type StatisticMultipleProps = {
+  statistic: RenderMultipleStatisticConfig;
+};
+
+const THEME_LIGHT = "light";
+
+const useDataStyle = makeStyles(({ palette: { type } }) => ({
+  root: {
+    color: type === THEME_LIGHT ? "#000" : "#fff",
+    fontSize: "30px",
+    lineHeight: "47px",
+  },
+}));
+
+const useLabelStyle = makeStyles({
+  root: {
+    "& .label-inner": {
+      display: "table",
+    },
+    fontSize: "15px",
+    lineHeight: "22px",
+    marginTop: "8px",
+  },
+});
+
+const spaceNumber = spaceNumberForAnyValue<ReactNode>({
+  minDigits: 5,
+});
+
+const StatisticsMultiple: FC<StatisticMultipleProps> = ({ statistic }) => {
+  return (
+    <Box width={1} paddingTop={3}>
+      <Typography classes={useDataStyle()} color="textPrimary">
+        {spaceNumber(statistic.value.firstValue)}{" "}
+        {statistic.unit && (
+          <Typography component="span">{statistic.unit}</Typography>
+        )}
+      </Typography>
+      <Box display="flex" flexWrap="wrap">
+        <Typography classes={useLabelStyle()} color="textSecondary">
+          <Typography className="label-inner">{statistic.label}</Typography>
+          <Typography className="label-inner">
+            {statistic.sublabel} {statistic.value.secondValue}{" "}
+          </Typography>
+          {statistic.tooltip && (
+            <StatisticTooltip tooltip={statistic.tooltip} />
+          )}
+        </Typography>
+      </Box>
+    </Box>
+  );
+};
+
+export default StatisticsMultiple;

src/components/statistics/statistic-raw.tsx

@@ -8,6 +8,7 @@ import React, { FC, ReactNode } from "react";
 
 import { RawStatisticConfig } from "../../types/statistic-types";
 import { spaceNumberForAnyValue } from "../../utils/number-util";
+import StatisticTooltip from "./statistic-tooltip";
 
 type StatisticRawProps = {
   statistic: RawStatisticConfig;
@@ -48,15 +49,7 @@ const StatisticRaw: FC<StatisticRawProps> = ({ statistic }) => {
         <Typography classes={useLabelStyle()} color="textSecondary">
           {statistic.label}{" "}
           {statistic.tooltip && (
-            <Tooltip title={statistic.tooltip}>
-              <IconButton size="small" aria-label="info">
-                <InfoOutlinedIcon
-                  fontSize="small"
-                  color="secondary"
-                  titleAccess="info"
-                />
-              </IconButton>
-            </Tooltip>
+            <StatisticTooltip tooltip={statistic.tooltip} />
           )}
         </Typography>
       </Box>

src/components/statistics/statistic-tooltip.tsx

+import IconButton from "@material-ui/core/IconButton";
+import Tooltip from "@material-ui/core/Tooltip";
+import InfoOutlinedIcon from "@material-ui/icons/InfoOutlined";
+import React, { FC } from "react";
+
+type StatisticTooltipProps = {
+  tooltip: string;
+};
+
+const StatisticTooltip: FC<StatisticTooltipProps> = ({ tooltip }) => (
+  <Tooltip title={tooltip}>
+    <IconButton size="small" aria-label="info">
+      <InfoOutlinedIcon fontSize="small" color="secondary" titleAccess="info" />
+    </IconButton>
+  </Tooltip>
+);
+export default StatisticTooltip;

src/components/statistics/statistic.tsx

@@ -3,11 +3,13 @@ import React, { FC } from "react";
 import {
   isConnectedDots,
   isMapChart,
+  isMultiple,
   isPiechart,
   RenderingStatisticConfig,
 } from "../../types/statistic-types";
 import StatisticsConnectedDots from "./statistic-connected-dots";
 import StatisticMapChart from "./statistic-mapchart";
+import StatisticsMultiple from "./statistic-multiple";
 import StatisticPiechart from "./statistic-piecharts";
 import StatisticRaw from "./statistic-raw";
 import StatisticsSwitcher from "./statistic-switcher";
@@ -27,6 +29,10 @@ const getContent = (statistic: RenderingStatisticConfig) => {
     return <StatisticsConnectedDots statistic={statistic} />;
   }
 
+  if (isMultiple(statistic)) {
+    return <StatisticsMultiple statistic={statistic} />;
+  }
+
   return <StatisticRaw statistic={statistic} />;
 };
 

src/components/statistics/statistics-block.tsx

@@ -2,7 +2,6 @@ import Box from "@material-ui/core/Box";
 import Card from "@material-ui/core/Card";
 import CardContent from "@material-ui/core/CardContent";
 import makeStyles from "@material-ui/core/styles/makeStyles";
-import Typography from "@material-ui/core/Typography";
 import React, { FC } from "react";
 
 import {

src/components/statistics/statistics-group.tsx

@@ -28,6 +28,15 @@ const getItemStyle = makeStyles({
   },
 });
 
+const getCaptionStyle = makeStyles({
+  root: {
+    color: "#888",
+    fontSize: "10px",
+    fontStyle: "italic",
+    lineHeight: "25px",
+  },
+});
+
 const StatisticsGroup: FC<StatisticsGroupProps> = ({ group }) => (
   <Box display="flex" width="1" flexDirection="column">
     <Box paddingBottom={2}>
@@ -43,6 +52,14 @@ const StatisticsGroup: FC<StatisticsGroupProps> = ({ group }) => (
           </Grid>
         ))}
       </Grid>
+      <Typography
+        component="small"
+        display="block"
+        align="right"
+        classes={getCaptionStyle()}
+      >
+        {group.date}
+      </Typography>
     </Box>
   </Box>
 );

src/display-data/statistics.ts

@@ -8,7 +8,7 @@ export const statisticsLayout: StatisticsGroup[] = [
         statistics: [
           {
             fields: ["appDownload", "download"],
-            label: "toutes versions confondues depuis le 1er janvier 2020",
+            label: "toutes versions confondues",
             switchDisplayConfig: {
               field: "monthlyDownload",
               formatting: "connected_dots",
@@ -26,7 +26,7 @@ export const statisticsLayout: StatisticsGroup[] = [
         statistics: [
           {
             field: "averageMonthlyVisitors",
-            label: "au mois depuis le 1er janvier 2020",
+            label: "au mois ",
             switchDisplayConfig: {
               field: "totalMonthVisitors",
               formatting: "connected_dots",
@@ -40,6 +40,7 @@ export const statisticsLayout: StatisticsGroup[] = [
         title: "Utilisations",
       },
     ],
+    date: "depuis 1er janvier 2020",
     title: "Usages 🌐",
   },
   {
@@ -49,7 +50,7 @@ export const statisticsLayout: StatisticsGroup[] = [
         statistics: [
           {
             fields: ["totalDropVolume"],
-            label: "de données analysées depuis le 14 avril 2021",
+            label: "de données analysées",
             type: "aggregated",
             unit: "Go",
           },
@@ -61,8 +62,7 @@ export const statisticsLayout: StatisticsGroup[] = [
         statistics: [
           {
             fields: ["totalMarkedToDelete"],
-            label:
-              "de données identifiées « à supprimer » depuis le 14 avril 2021",
+            label: "de données identifiées « à supprimer »",
             type: "aggregated",
             unit: "Go",
           },
@@ -73,17 +73,22 @@ export const statisticsLayout: StatisticsGroup[] = [
         size: 4,
         statistics: [
           {
-            field: "carbonFootprintInGrams",
-            label: "économisés depuis le 14 avril 2021",
+            fields: [
+              "carbonFootprintInGrams",
+              "carbonFootprintPaperEquivalence",
+            ],
+            label: "",
+            sublabel: "Équivalence en feuilles A4 : ",
             tooltip:
-              "Donnée calculée à partir d'une formule exprimée par Cyber World CleanUp Day",
-            type: "simple",
-            unit: "g d'équivalent CO2",
+              "Données calculées à partir des formules exprimées par le Cyber World CleanUp Day et par monconvertisseurco2.fr",
+            type: "multiple",
+            unit: "gCO2e économisés",
           },
         ],
         title: "Donnée écologique",
       },
     ],
+    date: "depuis le 14 avril 2021",
     title: "Volume de données 🗄️",
   },
   {
@@ -94,7 +99,7 @@ export const statisticsLayout: StatisticsGroup[] = [
           {
             field: "visitorCountries",
             formatting: "mapchart",
-            label: "(depuis le 1er janvier 2020)",
+            label: "depuis le 1er janvier 2020",
             type: "simple",
           },
         ],
@@ -104,7 +109,7 @@ export const statisticsLayout: StatisticsGroup[] = [
         size: 4,
         statistics: [
           {
-            label: "de l'outil depuis le 3 avril 2019",
+            label: "de l'outil",
             type: "raw",
             unit: "présentations",
             value: 101,
@@ -116,7 +121,7 @@ export const statisticsLayout: StatisticsGroup[] = [
         size: 4,
         statistics: [
           {
-            label: "par une session de présentation depuis le 3 avril 2019",
+            label: "par une session de présentation",
             type: "raw",
             unit: "personnes touchées",
             value: 1965,
@@ -137,6 +142,7 @@ export const statisticsLayout: StatisticsGroup[] = [
         title: "Followers",
       },
     ],
+    date: "depuis le 3 avril 2019",
     title: "Communauté 👩🏾 👨‍🦰 🧓🏿",
   },
   {
@@ -170,7 +176,7 @@ export const statisticsLayout: StatisticsGroup[] = [
         statistics: [
           {
             field: "youtubeViews",
-            label: "de nos vidéos (tutoriels, démo produit...) ",
+            label: "de nos vidéos (tutoriels, démo produit...)",
             type: "simple",
             unit: "vues",
           },
@@ -178,6 +184,7 @@ export const statisticsLayout: StatisticsGroup[] = [
         title: "Youtube",
       },
     ],
+    date: "depuis le 1er janvier 2020",
     title: "Vues sur les autres canaux 👀",
   },
   {

src/types/statistic-types.ts

@@ -35,10 +35,18 @@ export type RawStatisticConfig = BaseStatisticConfig & {
   unit?: string;
 };
 
+export type MultipleStatisticConfig = BaseStatisticConfig & {
+  type: "multiple";
+  fields?: string[];
+  unit?: string;
+  sublabel?: string;
+};
+
 export type StatisticConfig = (
   | SimpleStatisticConfig
   | AggregatedStatisticConfig
   | RawStatisticConfig
+  | MultipleStatisticConfig
 ) & {
   switchDisplayConfig?: StatisticConfig;
 };
@@ -58,11 +66,16 @@ export type ConnectedDotsStatisticsConfig = RawStatisticConfig & {
   value: Record<string, number>;
 };
 
+export type RenderMultipleStatisticConfig = MultipleStatisticConfig & {
+  value: Record<string, number>;
+};
+
 export type RenderingStatisticConfig = (
   | RawStatisticConfig
   | PiechartStatisticsConfig
   | ConnectedDotsStatisticsConfig
   | MapChartStatisticConfig
+  | RenderMultipleStatisticConfig
 ) & {
   switchDisplayConfig?: RenderingStatisticConfig;
 };
@@ -71,6 +84,10 @@ export const isRawStatistic = (
   stat: StatisticConfig
 ): stat is RawStatisticConfig => stat.type === "raw";
 
+export const isMultiple = (
+  stat: StatisticConfig
+): stat is MultipleStatisticConfig => stat.type === "multiple";
+
 export const isPiechart = (
   stat: RenderingStatisticConfig
 ): stat is PiechartStatisticsConfig => stat.formatting === "piecharts";
@@ -93,4 +110,5 @@ export type StatisticsBlock<StatType = StatisticConfig> = {
 export type StatisticsGroup<StatType = StatisticConfig> = {
   title: string;
   blocks: StatisticsBlock<StatType>[];
+  date?: string;
 };

src/utils/statistics-util.ts

@@ -3,7 +3,9 @@ import { compose, map, sum } from "lodash/fp";
 
 import {
   AggregatedStatisticConfig,
+  isMultiple,
   isRawStatistic,
+  MultipleStatisticConfig,
   RenderingStatisticConfig,
   SimpleStatisticConfig,
   Statistic,
@@ -23,7 +25,7 @@ const findValueByLabel = compose(getValue, findElementByLabel);
 export const extractAggregatedStatisticProps = (
   statistics: Statistic[],
   configItem: AggregatedStatisticConfig
-) =>
+): number =>
   compose(
     sum,
     map((field) => findValueByLabel(statistics, field))
@@ -34,6 +36,16 @@ const extractSimpleStatisticProps = (
   configItem: SimpleStatisticConfig
 ) => findValueByLabel(statistics, configItem.field);
 
+const extractMultipleStatisticProps = (
+  statistics: Statistic[],
+  configItem: MultipleStatisticConfig
+) => {
+  const [firstValue, secondValue] = map((field) =>
+    findValueByLabel(statistics, field)
+  )(configItem.fields);
+  return { firstValue, secondValue };
+};
+
 const isAggregatedStatistic = (
   configItem: StatisticConfig
 ): configItem is AggregatedStatisticConfig => configItem.type === "aggregated";
@@ -58,6 +70,16 @@ const formatAggregatedStatistic = (statistic: AggregatedStatisticConfig) => (
   value: extractAggregatedStatisticProps(data, statistic),
 });
 
+const formatMultipleStatistic = (statistic: MultipleStatisticConfig) => (
+  data: Statistic[]
+): RenderingStatisticConfig => {
+  return {
+    ...extractCommonProps(statistic),
+    sublabel: statistic.sublabel,
+    type: "multiple",
+    value: extractMultipleStatisticProps(data, statistic),
+  };
+};
 const formatSimpleStatistic = (statistic: SimpleStatisticConfig) => (
   data: Statistic[]
 ): RenderingStatisticConfig => ({
@@ -71,6 +93,9 @@ const baseFormatStatistic = (statistic: StatisticConfig) => {
     return formatAggregatedStatistic(statistic);
   }
 
+  if (isMultiple(statistic)) {
+    return formatMultipleStatistic(statistic);
+  }
   if (isRawStatistic(statistic)) {
     return () => statistic;
   }
@@ -101,6 +126,7 @@ const formatGroup = (group: StatisticsGroup) => (
   data: Statistic[]
 ): StatisticsGroup<RenderingStatisticConfig> => ({
   blocks: group.blocks.map((block) => formatBlock(block)(data)),
+  date: group.date,
   title: group.title,
 });