Unverified Commit e840b5fd authored by mehdilouraoui's avatar mehdilouraoui Committed by GitHub
Browse files

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

parent b90ba3e4
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 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} />
)}
......
......@@ -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} />;
}
......
......@@ -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",
},
......
......@@ -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
......
// 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;
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment