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

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
parent 8b42e5e2
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;
......@@ -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>
......
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;
......@@ -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} />;
};
......
......@@ -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 {
......
......@@ -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>
);
......
......@@ -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 👀",
},
{
......
......@@ -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;
};
......@@ -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,
});
......
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