feat(stats): interpolate stats values (#200)

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";

src/components/statistics/statistic-raw.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 { RawStatisticConfig } from "../../types/statistic-types";
@@ -26,6 +23,9 @@ const useDataStyle = makeStyles(({ palette: { type } }) => ({
 
 const useLabelStyle = makeStyles({
   root: {
+    "& .label-inner": {
+      display: "table",
+    },
     fontSize: "15px",
     lineHeight: "22px",
     marginTop: "8px",
@@ -48,6 +48,11 @@ const StatisticRaw: FC<StatisticRawProps> = ({ statistic }) => {
       <Box display="flex" flexWrap="wrap">
         <Typography classes={useLabelStyle()} color="textSecondary">
           {statistic.label}{" "}
+          {statistic.sublabel && (
+            <Typography className="label-inner">
+              {statistic.sublabel}
+            </Typography>
+          )}
           {statistic.tooltip && (
             <StatisticTooltip tooltip={statistic.tooltip} />
           )}

src/components/statistics/statistic.tsx

@@ -2,8 +2,8 @@ import React, { FC } from "react";
 
 import {
   isConnectedDots,
+  isInterpolate,
   isMapChart,
-  isMultiple,
   isPiechart,
   RenderingStatisticConfig,
 } from "../../types/statistic-types";
@@ -29,7 +29,7 @@ const getContent = (statistic: RenderingStatisticConfig) => {
     return <StatisticsConnectedDots statistic={statistic} />;
   }
 
-  if (isMultiple(statistic)) {
+  if (isInterpolate(statistic)) {
     return <StatisticsMultiple statistic={statistic} />;
   }
 

src/display-data/statistics.ts

@@ -52,7 +52,7 @@ export const statisticsLayout: StatisticsGroup[] = [
             fields: ["totalDropVolume"],
             label: "de données analysées",
             type: "aggregated",
-            unit: "Go",
+            unit: "To",
           },
         ],
         title: "Total",
@@ -73,16 +73,14 @@ export const statisticsLayout: StatisticsGroup[] = [
         size: 4,
         statistics: [
           {
-            fields: [
-              "carbonFootprintInGrams",
-              "carbonFootprintPaperEquivalence",
-            ],
             label: "",
-            sublabel: "Équivalence en feuilles A4 : ",
+            sublabel:
+              "Équivalence en feuilles A4 (en millions) : <%= carbonFootprintPaperEquivalence %>",
             tooltip:
               "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",
+            type: "interpolate",
+            unit: "tonnes CO2eq économisées",
+            value: "<%= carbonFootprintInKilo %>",
           },
         ],
         title: "Donnée écologique",
@@ -112,7 +110,7 @@ export const statisticsLayout: StatisticsGroup[] = [
             label: "de l'outil",
             type: "raw",
             unit: "présentations",
-            value: 101,
+            value: 102,
           },
         ],
         title: "Présentations",
@@ -124,7 +122,7 @@ export const statisticsLayout: StatisticsGroup[] = [
             label: "par une session de présentation",
             type: "raw",
             unit: "personnes touchées",
-            value: 1965,
+            value: 2315,
           },
         ],
         title: "Personnes touchées",
@@ -152,7 +150,7 @@ export const statisticsLayout: StatisticsGroup[] = [
         statistics: [
           {
             field: "visitsCount",
-            label: "sur le site web depuis le 1 janvier 2020",
+            label: "sur le site web",
             type: "simple",
             unit: "visiteurs uniques",
           },

src/types/statistic-types.ts

@@ -31,13 +31,14 @@ export type SimpleStatisticConfig = BaseStatisticConfig & {
 export type RawStatisticConfig = BaseStatisticConfig & {
   value: ReactNode;
   type: "raw";
+  sublabel?: string;
   formatting?: Formatting;
   unit?: string;
 };
 
-export type MultipleStatisticConfig = BaseStatisticConfig & {
-  type: "multiple";
-  fields?: string[];
+export type InterpolateStatisticConfig = BaseStatisticConfig & {
+  type: "interpolate";
+  value: string;
   unit?: string;
   sublabel?: string;
 };
@@ -46,7 +47,7 @@ export type StatisticConfig = (
   | SimpleStatisticConfig
   | AggregatedStatisticConfig
   | RawStatisticConfig
-  | MultipleStatisticConfig
+  | InterpolateStatisticConfig
 ) & {
   switchDisplayConfig?: StatisticConfig;
 };
@@ -66,7 +67,7 @@ export type ConnectedDotsStatisticsConfig = RawStatisticConfig & {
   value: Record<string, number>;
 };
 
-export type RenderMultipleStatisticConfig = MultipleStatisticConfig & {
+export type RenderMultipleStatisticConfig = InterpolateStatisticConfig & {
   value: Record<string, number>;
 };
 
@@ -84,9 +85,9 @@ export const isRawStatistic = (
   stat: StatisticConfig
 ): stat is RawStatisticConfig => stat.type === "raw";
 
-export const isMultiple = (
+export const isInterpolate = (
   stat: StatisticConfig
-): stat is MultipleStatisticConfig => stat.type === "multiple";
+): stat is InterpolateStatisticConfig => stat.type === "interpolate";
 
 export const isPiechart = (
   stat: RenderingStatisticConfig

src/utils/statistics-util.ts

 // eslint-disable-next-line import/named
-import { groupBy, mapValues, sumBy } from "lodash";
+import { keyBy, mapValues, template } from "lodash";
 // eslint-disable-next-line import/named
 import { compose } from "lodash/fp";
 
 import {
   AggregatedStatisticConfig,
-  isMultiple,
+  InterpolateStatisticConfig,
+  isInterpolate,
   isRawStatistic,
-  MultipleStatisticConfig,
   RenderingStatisticConfig,
   SimpleStatisticConfig,
   Statistic,
@@ -37,21 +37,6 @@ const extractSimpleStatisticProps = (
   configItem: SimpleStatisticConfig
 ) => findValueByLabel(statistics, configItem.field);
 
-const extractMultipleStatisticProps = (
-  statistics: Statistic[],
-  configItem: MultipleStatisticConfig
-) => {
-  const filteredStatistics = statistics.filter((statistic) =>
-    configItem?.fields?.includes(statistic.label)
-  );
-  const groupedByStats = groupBy(filteredStatistics, "label");
-  const mappedValues = mapValues(groupedByStats, (statistic) =>
-    sumBy(statistic, "value")
-  );
-  const [firstValue, secondValue] = Object.values(mappedValues);
-  return { firstValue, secondValue };
-};
-
 const isAggregatedStatistic = (
   configItem: StatisticConfig
 ): configItem is AggregatedStatisticConfig => configItem.type === "aggregated";
@@ -76,14 +61,17 @@ const formatAggregatedStatistic = (statistic: AggregatedStatisticConfig) => (
   value: extractAggregatedStatisticProps(data, statistic),
 });
 
-const formatMultipleStatistic = (statistic: MultipleStatisticConfig) => (
+const formatInterpolateData = (data: Statistic[]): Record<string, number> =>
+  mapValues(keyBy(data, "label"), ({ value }) => value);
+
+const formatInterpolateStatistic = (statistic: InterpolateStatisticConfig) => (
   data: Statistic[]
 ): RenderingStatisticConfig => {
   return {
     ...extractCommonProps(statistic),
-    sublabel: statistic.sublabel,
-    type: "multiple",
-    value: extractMultipleStatisticProps(data, statistic),
+    sublabel: template(statistic.sublabel || "")(formatInterpolateData(data)),
+    type: "raw",
+    value: template(statistic.value)(formatInterpolateData(data)),
   };
 };
 const formatSimpleStatistic = (statistic: SimpleStatisticConfig) => (
@@ -99,8 +87,8 @@ const baseFormatStatistic = (statistic: StatisticConfig) => {
     return formatAggregatedStatistic(statistic);
   }
 
-  if (isMultiple(statistic)) {
-    return formatMultipleStatistic(statistic);
+  if (isInterpolate(statistic)) {
+    return formatInterpolateStatistic(statistic);
   }
   if (isRawStatistic(statistic)) {
     return () => statistic;