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

fix(stats): arrange layout and add datas (#206)

parent 9f14115c
......@@ -54,7 +54,7 @@ const StatisticsConnectedDots: FC<StatisticsConnectedDotsProps> = ({
}, [renderedLabels]);
return (
<Box>
<Box margin="10% 0">
<Chart data={data} height={100}>
<EventTracker />
<ArgumentAxis
......
......@@ -17,7 +17,8 @@ const useDataStyle = makeStyles(({ palette: { type } }) => ({
root: {
color: type === THEME_LIGHT ? "#000" : "#fff",
fontSize: "30px",
lineHeight: "47px",
lineHeight: "20px",
margin: "25px 0",
},
}));
......
......@@ -2,6 +2,7 @@ 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 {
......@@ -22,6 +23,13 @@ const useCardStyles = makeStyles({
const useCardContentStyles = makeStyles({
root: {
"& .card-title": {
fontSize: "14px",
fontWeight: "600",
margin: "0 10px",
textAlign: "center",
textTransform: "uppercase",
},
paddingBottom: "15px",
paddingLeft: "20px",
paddingRight: "20px",
......@@ -34,7 +42,8 @@ const StatisticsBlock: FC<StatisticsBlockProps> = ({ block }) => (
<CardContent classes={useCardContentStyles()}>
<Box display="flex" justifyContent="space-around">
{block.statistics.map((statistic, index) => (
<Box key={index} width={1}>
<Box key={index} width={1} position="relative">
<Typography className="card-title">{block.title}</Typography>
<Statistic statistic={statistic} />
</Box>
))}
......
......@@ -4,44 +4,82 @@ export const statisticsLayout: StatisticsGroup[] = [
{
blocks: [
{
size: 6,
size: 4,
statistics: [
{
fields: ["appDownload", "download"],
label: "toutes versions confondues",
switchDisplayConfig: {
field: "monthlyDownload",
formatting: "connected_dots",
label: "",
type: "simple",
},
type: "aggregated",
unit: "téléchargements",
field: "totalMonthVisitors",
formatting: "connected_dots",
label: "",
type: "simple",
unit: "utilisations",
},
],
title: "Téléchargements",
title: "Nombre d'utilisations par mois",
},
{
size: 6,
size: 4,
statistics: [
{
label: "",
sublabel:
"Équivalence en feuilles A4 : <%= carbonFootprintPaperEquivalence %>",
tooltip:
'Volume cumulé calculé à partir du volume de fichiers tagués "à supprimer". Données calculées à partir des formules exprimées par le Cyber World CleanUp Day et par monconvertisseurco2.fr',
type: "interpolate",
unit: "tonnes d'équivalent CO2 économisées",
value: "<%= carbonFootprintInKilo %>",
},
],
title: "Economies de CO2 identifiées",
},
{
size: 4,
statistics: [
{
field: "rating",
label: "note donnée par un panel de 150 utilisateurs",
tooltip:
"En réponse à la question : « Et si vous deviez donner une note à Archifiltre ? »",
type: "simple",
unit: "sur 5",
},
],
title: "Note donnée par les utilisateurs",
},
],
date: "",
title: "En résumé 📄",
},
{
blocks: [
{
size: 4,
statistics: [
{
field: "averageMonthlyVisitors",
label: "au mois ",
switchDisplayConfig: {
field: "totalMonthVisitors",
formatting: "connected_dots",
label: "utilisateurs",
type: "simple",
},
label: "Nombre moyen à partir des utilisations",
tooltip: "",
type: "simple",
unit: "utilisations par mois",
},
],
title: "",
},
{
size: 8,
statistics: [
{
field: "totalMonthVisitors",
formatting: "connected_dots",
label: "toutes versions confondues",
type: "simple",
unit: "utilisations",
},
],
title: "Utilisations",
title: "Evolution du nombre de utlisations par mois",
},
],
date: "depuis 1er janvier 2020",
title: "Usages 🌐",
title: "Utilisations 🌐",
},
{
blocks: [
......@@ -50,12 +88,14 @@ export const statisticsLayout: StatisticsGroup[] = [
statistics: [
{
fields: ["totalDropVolume"],
label: "de données analysées",
label: "Fichiers bureautiques: tableurs, pdf, multimédia",
tooltip:
"Volume de fichiers (cumulé) analysés par dépôt dans Archifiltre ",
type: "aggregated",
unit: "To",
unit: "To de fichiers analysés",
},
],
title: "Total",
title: "",
},
{
size: 4,
......@@ -63,11 +103,12 @@ export const statisticsLayout: StatisticsGroup[] = [
{
fields: ["totalMarkedToDelete"],
label: "de données identifiées « à supprimer »",
tooltip: `Fichiers identifiés par le tag "à supprimer" dans l'interface Archifiltre`,
type: "aggregated",
unit: "Go",
unit: "Go de fichiers supprimés",
},
],
title: "Gain de stockage",
title: "",
},
{
size: 4,
......@@ -77,18 +118,84 @@ export const statisticsLayout: StatisticsGroup[] = [
sublabel:
"Équivalence en feuilles A4 : <%= carbonFootprintPaperEquivalence %>",
tooltip:
"Données calculées à partir des formules exprimées par le Cyber World CleanUp Day et par monconvertisseurco2.fr",
'Volume cumulé calculé à partir du volume de fichiers tagués "à supprimer". Données calculées à partir des formules exprimées par le Cyber World CleanUp Day et par monconvertisseurco2.fr',
type: "interpolate",
unit: "tonnes d'équivalent CO2 économisées",
value: "<%= carbonFootprintInKilo %>",
},
],
title: "Donnée écologique",
title: "",
},
],
date: "depuis le 14 avril 2021",
title: "Volume de données 🗄️",
},
{
blocks: [
{
size: 6,
statistics: [
{
field: "rating",
label: "Note donnée par un panel de 150 utilisateurs",
tooltip:
"En réponse à la question : « Et si vous deviez donner une note à Archifiltre ? »",
type: "simple",
unit: "sur 5",
},
],
title: "",
},
{
size: 6,
statistics: [
{
field: "recommendation",
label:
"de recommandation par les utilisateurs/utilisatrices à leurs collègues",
tooltip:
"Question posée : « A quel point recommanderiez-vous Archifiltre à des collègues ? » Réponse sur une échelle de 1 à 10.",
type: "simple",
unit: "%",
},
],
title: "",
},
],
title: "Évaluation ✨",
},
{
blocks: [
{
size: 4,
statistics: [
{
fields: ["appDownload", "download"],
label: "",
tooltip:
"Archifiltre est un exécutable à télécharger sur le site. Le nombre correspond aux téléchargements cumulés (toutes versions confondues).",
type: "aggregated",
unit: "téléchargements d'Archifiltre",
},
],
title: "",
},
{
size: 8,
statistics: [
{
field: "monthlyDownload",
formatting: "connected_dots",
label: "Evolution du nombre de téléchargements par mois",
type: "simple",
},
],
title: "Evolution du nombre de téléchargements par mois",
},
],
date: "depuis 1er janvier 2020",
title: "Téléchargements 🌐",
},
{
blocks: [
{
......@@ -101,7 +208,7 @@ export const statisticsLayout: StatisticsGroup[] = [
type: "simple",
},
],
title: "Localisation",
title: "",
},
{
size: 4,
......@@ -113,7 +220,7 @@ export const statisticsLayout: StatisticsGroup[] = [
value: 102,
},
],
title: "Présentations",
title: "",
},
{
size: 4,
......@@ -125,7 +232,7 @@ export const statisticsLayout: StatisticsGroup[] = [
value: 2315,
},
],
title: "Personnes touchées",
title: "",
},
{
size: 4,
......@@ -137,7 +244,7 @@ export const statisticsLayout: StatisticsGroup[] = [
value: 777,
},
],
title: "Followers",
title: "",
},
],
date: "depuis le 3 avril 2019",
......@@ -155,7 +262,7 @@ export const statisticsLayout: StatisticsGroup[] = [
unit: "visiteurs uniques",
},
],
title: "Site web",
title: "",
},
{
size: 4,
......@@ -164,7 +271,7 @@ export const statisticsLayout: StatisticsGroup[] = [
field: "wikiViews",
label: "en moyenne par mois",
type: "simple",
unit: "vues sur le Wiki",
unit: "",
},
],
title: "Wiki",
......@@ -179,43 +286,10 @@ export const statisticsLayout: StatisticsGroup[] = [
unit: "vues",
},
],
title: "Youtube",
title: "",
},
],
date: "depuis le 1er janvier 2020",
title: "Vues sur les autres canaux 👀",
},
{
blocks: [
{
size: 6,
statistics: [
{
field: "rating",
label: "note donnée par les utilisateurs/utilisatrices, sur 5",
tooltip:
"Question posée : « Et si vous deviez donner une note à Archifiltre ? » (49 répondants)",
type: "simple",
},
],
title: "note",
},
{
size: 6,
statistics: [
{
field: "recommendation",
label:
"de recommandation par les utilisateurs/utilisatrices à leurs collègues",
tooltip:
"Question posée : « A quel point recommanderiez-vous Archifiltre à des collègues ? » Réponse sur une échelle de 1 à 10. (49 répondants)",
type: "simple",
unit: "%",
},
],
title: "recommandation",
},
],
title: "Evalutation auprès d'un panel sondé ✨",
},
];
......@@ -17,7 +17,7 @@ import {
} from "../types/statistic-types";
import { formatStatistics } from "../utils/statistics-util";
const DEFAULT_VISIBLE_BLOCK = 2;
const DEFAULT_VISIBLE_BLOCK = 1;
const minutesSinceTimestamp = (lastFetchTimestamp: number) => {
const timeDifference = Date.now() - lastFetchTimestamp;
......
......@@ -55,13 +55,13 @@ const extractCommonProps = ({
unit,
});
const formatAggregatedStatistic =
(statistic: AggregatedStatisticConfig) =>
(data: Statistic[]): RenderingStatisticConfig => ({
...extractCommonProps(statistic),
type: "raw",
value: extractAggregatedStatisticProps(data, statistic),
});
const formatAggregatedStatistic = (statistic: AggregatedStatisticConfig) => (
data: Statistic[]
): RenderingStatisticConfig => ({
...extractCommonProps(statistic),
type: "raw",
value: extractAggregatedStatisticProps(data, statistic),
});
const formatInterpolateData = (data: Statistic[]): Record<string, number> =>
mapValues(keyBy(data, "label"), ({ value }) => value);
......@@ -71,23 +71,23 @@ const kiloToTons = (elementToRounded: string): number => {
return round(+roundedElement, 1);
};
const formatInterpolateStatistic =
(statistic: InterpolateStatisticConfig) =>
(data: Statistic[]): RenderingStatisticConfig => {
return {
...extractCommonProps(statistic),
sublabel: template(statistic.sublabel || "")(formatInterpolateData(data)),
type: "raw",
value: kiloToTons(template(statistic.value)(formatInterpolateData(data))),
};
};
const formatSimpleStatistic =
(statistic: SimpleStatisticConfig) =>
(data: Statistic[]): RenderingStatisticConfig => ({
const formatInterpolateStatistic = (statistic: InterpolateStatisticConfig) => (
data: Statistic[]
): RenderingStatisticConfig => {
return {
...extractCommonProps(statistic),
sublabel: template(statistic.sublabel || "")(formatInterpolateData(data)),
type: "raw",
value: extractSimpleStatisticProps(data, statistic),
});
value: kiloToTons(template(statistic.value)(formatInterpolateData(data))),
};
};
const formatSimpleStatistic = (statistic: SimpleStatisticConfig) => (
data: Statistic[]
): RenderingStatisticConfig => ({
...extractCommonProps(statistic),
type: "raw",
value: extractSimpleStatisticProps(data, statistic),
});
const baseFormatStatistic = (statistic: StatisticConfig) => {
if (isAggregatedStatistic(statistic)) {
......@@ -104,34 +104,34 @@ const baseFormatStatistic = (statistic: StatisticConfig) => {
return formatSimpleStatistic(statistic);
};
const formatStatistic =
(statistic: StatisticConfig) =>
(data: Statistic[]): RenderingStatisticConfig => {
return {
...baseFormatStatistic(statistic)(data),
switchDisplayConfig: statistic.switchDisplayConfig
? formatStatistic(statistic.switchDisplayConfig)(data)
: undefined,
};
const formatStatistic = (statistic: StatisticConfig) => (
data: Statistic[]
): RenderingStatisticConfig => {
return {
...baseFormatStatistic(statistic)(data),
switchDisplayConfig: statistic.switchDisplayConfig
? formatStatistic(statistic.switchDisplayConfig)(data)
: undefined,
};
};
const formatBlock = (block: StatisticsBlock) => (
data: Statistic[]
): StatisticsBlock<RenderingStatisticConfig> => ({
size: block.size,
statistics: block.statistics.map((stat) => formatStatistic(stat)(data)),
title: block.title,
});
const formatGroup = (group: StatisticsGroup) => (
data: Statistic[]
): StatisticsGroup<RenderingStatisticConfig> => ({
blocks: group.blocks.map((block) => formatBlock(block)(data)),
date: group.date,
title: group.title,
});
const formatBlock =
(block: StatisticsBlock) =>
(data: Statistic[]): StatisticsBlock<RenderingStatisticConfig> => ({
size: block.size,
statistics: block.statistics.map((stat) => formatStatistic(stat)(data)),
title: block.title,
});
const formatGroup =
(group: StatisticsGroup) =>
(data: Statistic[]): StatisticsGroup<RenderingStatisticConfig> => ({
blocks: group.blocks.map((block) => formatBlock(block)(data)),
date: group.date,
title: group.title,
});
export const formatStatistics =
(statisticsLayout: StatisticsGroup[]) =>
(data: Statistic[]): StatisticsGroup<RenderingStatisticConfig>[] =>
statisticsLayout.map((group) => formatGroup(group)(data));
export const formatStatistics = (statisticsLayout: StatisticsGroup[]) => (
data: Statistic[]
): StatisticsGroup<RenderingStatisticConfig>[] =>
statisticsLayout.map((group) => formatGroup(group)(data));
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