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

Refacto/modify data and layout (#189)

* refacto(statistics): change average from daily to monthly

* refacto(stats): remove antartic from map

* refacto(stats): remove last month from utilisations and downloads

* fix(stats): change title color for dark theme
parent b7aaa8de
......@@ -23,15 +23,16 @@ const formatXAxisLabel = compose(format("d MMM yy"), parseISO);
const StatisticsConnectedDots: FC<StatisticsConnectedDotsProps> = ({
statistic,
}) => {
const statisticValueMap = Object.keys(statistic.value).sort();
statisticValueMap.pop();
const data = useMemo(
() =>
Object.keys(statistic.value)
.sort()
.map((key) => ({
label: formatXAxisLabel(key),
value: statistic.value[key],
})),
[statistic.value]
statisticValueMap.map((key) => ({
label: formatXAxisLabel(key),
value: statistic.value[key],
})),
[statistic.value, statisticValueMap]
);
const renderedLabels = useMemo(
......
......@@ -10,7 +10,7 @@ import { MapChartStatisticConfig } from "../../types/statistic-types";
import { getColorGradient } from "../../utils/color-util";
const DEFAULT_COLOR = "#D6D6DA";
const ANTARCTIC_ISO_VALUE = "AQ";
const geoUrl = "/map/world.json";
const findCountryValue = (
......@@ -47,38 +47,42 @@ const StatisticMapChart: FC<StatisticMapChartProps> = ({ statistic }) => {
<ComposableMap height={400} projectionConfig={{ scale: 150 }}>
<Geographies geography={geoUrl}>
{({ geographies }: any) =>
geographies.map((geo: any) => (
<Tooltip title={tooltipContent} key={geo.rsmKey}>
<g>
<Geography
geography={geo}
onMouseEnter={() => {
const { NAME } = geo.properties;
const countryValue = findCountryValue(
countries,
geo.properties.ISO_A2
);
setTooltipContent(
`${NAME} : ${countryValue || 0} utilisation(s)`
);
}}
onMouseLeave={() => {
setTooltipContent("");
}}
style={{
default: {
fill: colorGetter(geo),
outline: "none",
},
hover: {
fill: primary.main,
outline: "none",
},
}}
/>
</g>
</Tooltip>
))
geographies
.filter(
({ properties: { ISO_A2 } }) => ISO_A2 !== ANTARCTIC_ISO_VALUE
)
.map((geo: any) => (
<Tooltip title={tooltipContent} key={geo.rsmKey}>
<g>
<Geography
geography={geo}
onMouseEnter={() => {
const { NAME } = geo.properties;
const countryValue = findCountryValue(
countries,
geo.properties.ISO_A2
);
setTooltipContent(
`${NAME} : ${countryValue || 0} utilisation(s)`
);
}}
onMouseLeave={() => {
setTooltipContent("");
}}
style={{
default: {
fill: colorGetter(geo),
outline: "none",
},
hover: {
fill: primary.main,
outline: "none",
},
}}
/>
</g>
</Tooltip>
))
}
</Geographies>
</ComposableMap>
......
......@@ -13,12 +13,15 @@ type StatisticRawProps = {
statistic: RawStatisticConfig;
};
const useDataStyle = makeStyles({
const THEME_LIGHT = "light";
const useDataStyle = makeStyles(({ palette: { type } }) => ({
root: {
fontSize: "35px",
color: type === THEME_LIGHT ? "#000" : "#fff",
fontSize: "30px",
lineHeight: "47px",
},
});
}));
const useLabelStyle = makeStyles({
root: {
......@@ -35,8 +38,11 @@ const spaceNumber = spaceNumberForAnyValue<ReactNode>({
const StatisticRaw: FC<StatisticRawProps> = ({ statistic }) => {
return (
<Box width={1} paddingTop={3}>
<Typography classes={useDataStyle()} color="textSecondary">
{spaceNumber(statistic.value)}
<Typography classes={useDataStyle()} color="textPrimary">
{spaceNumber(statistic.value)}{" "}
{statistic.unit && (
<Typography component="span">{statistic.unit}</Typography>
)}
</Typography>
<Box display="flex" flexWrap="wrap">
<Typography classes={useLabelStyle()} color="textSecondary">
......
......@@ -30,25 +30,9 @@ const useCardContentStyles = makeStyles({
},
});
const useTitleStyle = makeStyles({
root: {
fontSize: "15px",
fontWeight: "bold",
lineHeight: "22px",
textTransform: "uppercase",
},
});
const StatisticsBlock: FC<StatisticsBlockProps> = ({ block }) => (
<Card classes={useCardStyles()}>
<CardContent classes={useCardContentStyles()}>
<Typography
classes={useTitleStyle()}
color="textSecondary"
align="center"
>
{block.title}
</Typography>
<Box display="flex" justifyContent="space-around">
{block.statistics.map((statistic, index) => (
<Box key={index} width={1}>
......
......@@ -14,7 +14,7 @@ type StatisticsGroupProps = {
group: StatisticsGroupType<RenderingStatisticConfig>;
};
const useTitleStyle = makeStyles({
const getTitleStyle = makeStyles({
root: {
fontSize: "20px",
fontWeight: "bold",
......@@ -22,7 +22,7 @@ const useTitleStyle = makeStyles({
},
});
const useItemStyle = makeStyles({
const getItemStyle = makeStyles({
root: {
width: "100%",
},
......@@ -31,14 +31,14 @@ const useItemStyle = makeStyles({
const StatisticsGroup: FC<StatisticsGroupProps> = ({ group }) => (
<Box display="flex" width="1" flexDirection="column">
<Box paddingBottom={2}>
<Typography classes={useTitleStyle()} variant="h5" component="h2">
<Typography classes={getTitleStyle()} variant="h5" component="h2">
{group.title}
</Typography>
</Box>
<Box>
<Grid container spacing={3}>
{group.blocks.map((block, index) => (
<Grid item key={index} sm={block.size} classes={useItemStyle()}>
<Grid item key={index} sm={block.size} classes={getItemStyle()}>
<StatisticsBlock block={block} />
</Grid>
))}
......
import { Formatting, StatisticsGroup } from "../types/statistic-types";
import { StatisticsGroup } from "../types/statistic-types";
export const statisticsLayout: StatisticsGroup[] = [
{
......@@ -11,11 +11,12 @@ export const statisticsLayout: StatisticsGroup[] = [
label: "toutes versions confondues depuis le 1er janvier 2020",
switchDisplayConfig: {
field: "monthlyDownload",
formatting: Formatting.CONNECTED_DOTS,
formatting: "connected_dots",
label: "",
type: "simple",
},
type: "aggregated",
unit: "téléchargements",
},
],
title: "Téléchargements",
......@@ -24,26 +25,33 @@ export const statisticsLayout: StatisticsGroup[] = [
size: 6,
statistics: [
{
field: "averageDailyVisitors",
label: "au quotidien depuis le 1er janvier 2020",
field: "averageMonthlyVisitors",
label: "au mois depuis le 1er janvier 2020",
switchDisplayConfig: {
field: "totalMonthVisitors",
formatting: Formatting.CONNECTED_DOTS,
formatting: "connected_dots",
label: "utilisateurs",
type: "simple",
},
type: "simple",
unit: "utilisations",
},
],
title: "Utilisateur•rice•s",
title: "Utilisations",
},
],
title: "Usages 🌐",
},
{
blocks: [
{
size: 4,
statistics: [
{
fields: ["totalDropVolume"],
label: "Go de données analysées",
label: "de données analysées depuis le 14 avril 2021",
type: "aggregated",
unit: "Go",
},
],
title: "Total",
......@@ -54,8 +62,9 @@ export const statisticsLayout: StatisticsGroup[] = [
{
fields: ["totalMarkedToDelete"],
label:
"De données identifiées « à supprimer » depuis le 15 avril 2021",
"de données identifiées « à supprimer » depuis le 14 avril 2021",
type: "aggregated",
unit: "Go",
},
],
title: "Gain de stockage",
......@@ -65,43 +74,17 @@ export const statisticsLayout: StatisticsGroup[] = [
statistics: [
{
field: "carbonFootprintInGrams",
label: "g d'équivalent CO2 économisés depuis le 15 avril 2021",
label: "économisés depuis le 14 avril 2021",
tooltip:
"Donnée calculée à partir d'une formule exprimée par Cyber World CleanUp Day",
type: "simple",
unit: "g d'équivalent CO2",
},
],
title: "Donnée écologique",
},
{
size: 6,
statistics: [
{
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: "raw",
value: 4.2,
},
],
title: "note",
},
{
size: 6,
statistics: [
{
label:
"De recommandation par les utilisateurs/utilisatrices à leurs collègues depuis le 01/01/2020",
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: "raw",
value: "90%",
},
],
title: "recommandation",
},
],
title: "En résumé 📌",
title: "Volume de données 🗄️",
},
{
blocks: [
......@@ -110,7 +93,7 @@ export const statisticsLayout: StatisticsGroup[] = [
statistics: [
{
field: "visitorCountries",
formatting: Formatting.MAPCHART,
formatting: "mapchart",
label: "(depuis le 1er janvier 2020)",
type: "simple",
},
......@@ -121,9 +104,10 @@ export const statisticsLayout: StatisticsGroup[] = [
size: 4,
statistics: [
{
label: "sessions de présentation du produit",
label: "de l'outil depuis le 3 avril 2019",
type: "raw",
value: 96,
unit: "présentations",
value: 101,
},
],
title: "Présentations",
......@@ -132,9 +116,10 @@ export const statisticsLayout: StatisticsGroup[] = [
size: 4,
statistics: [
{
label: "personnes ayant assistées à ces présentations",
label: "par une session de présentation depuis le 3 avril 2019",
type: "raw",
value: 1792,
unit: "personnes touchées",
value: 1965,
},
],
title: "Personnes touchées",
......@@ -143,9 +128,10 @@ export const statisticsLayout: StatisticsGroup[] = [
size: 4,
statistics: [
{
label: "personnes nous suivent sur les réseaux sociaux (cumul)",
label: "nous suivent sur les réseaux sociaux (cumul)",
type: "raw",
value: 672,
unit: "personnes",
value: 777,
},
],
title: "Followers",
......@@ -160,8 +146,9 @@ export const statisticsLayout: StatisticsGroup[] = [
statistics: [
{
field: "visitsCount",
label: "visiteurs uniques",
label: "sur le site web depuis le 1 janvier 2020",
type: "simple",
unit: "visiteurs uniques",
},
],
title: "Site web",
......@@ -170,9 +157,10 @@ export const statisticsLayout: StatisticsGroup[] = [
size: 4,
statistics: [
{
label: "Vues par mois en moyenne",
type: "raw",
value: 340,
field: "wikiViews",
label: "en moyenne par mois",
type: "simple",
unit: "vues",
},
],
title: "Wiki",
......@@ -182,8 +170,9 @@ export const statisticsLayout: StatisticsGroup[] = [
statistics: [
{
field: "youtubeViews",
label: "Vues sur nos vidéos (tutoriels, démo produit...)",
label: "de nos vidéos (tutoriels, démo produit...)",
type: "simple",
unit: "vues",
},
],
title: "Youtube",
......@@ -191,4 +180,37 @@ export const statisticsLayout: StatisticsGroup[] = [
],
title: "Vues sur les autres canaux 👀",
},
{
blocks: [
{
size: 6,
statistics: [
{
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: "raw",
value: 4.2,
},
],
title: "note",
},
{
size: 6,
statistics: [
{
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: "raw",
unit: "%",
value: "90",
},
],
title: "recommandation",
},
],
title: "Evalutation auprès d'un panel sondé ✨",
},
];
......@@ -17,6 +17,8 @@ import {
} from "../types/statistic-types";
import { formatStatistics } from "../utils/statistics-util";
const DEFAULT_VISIBLE_BLOCK = 2;
const minutesSinceTimestamp = (lastFetchTimestamp: number) => {
const timeDifference = Date.now() - lastFetchTimestamp;
return Math.floor(timeDifference / (60 * 1000));
......@@ -62,14 +64,17 @@ const Statistiques = () => {
<StatisticsLoading />
) : (
<Box>
{statistics.length > 0 && (
<Box marginBottom={5}>
<StatisticsGroup group={statistics[0]} />
</Box>
)}
{statistics.length > 0 &&
statistics
.slice(0, DEFAULT_VISIBLE_BLOCK)
.map((group, index) => (
<Box marginBottom={5} key={index}>
<StatisticsGroup group={group} />
</Box>
))}
<Collapse in={showMore}>
{statistics.slice(1).map((group, index) => (
{statistics.slice(DEFAULT_VISIBLE_BLOCK).map((group, index) => (
<Box key={index} marginBottom={5}>
<StatisticsGroup group={group} />
</Box>
......
......@@ -6,12 +6,7 @@ export type Statistic = {
value: number;
};
export enum Formatting {
NONE,
PIECHARTS,
CONNECTED_DOTS,
MAPCHART,
}
export type Formatting = "none" | "piecharts" | "connected_dots" | "mapchart";
export type ChartData = { label: string; value: number };
......@@ -24,17 +19,20 @@ type BaseStatisticConfig = {
export type AggregatedStatisticConfig = BaseStatisticConfig & {
fields: string[];
type: "aggregated";
unit?: string;
};
export type SimpleStatisticConfig = BaseStatisticConfig & {
field: string;
type: "simple";
unit?: string;
};
export type RawStatisticConfig = BaseStatisticConfig & {
value: ReactNode;
type: "raw";
formatting?: Formatting;
unit?: string;
};
export type StatisticConfig = (
......@@ -46,17 +44,17 @@ export type StatisticConfig = (
};
export type PiechartStatisticsConfig = RawStatisticConfig & {
formatting: Formatting.PIECHARTS;
formatting: "piecharts";
value: ChartData[];
};
export type MapChartStatisticConfig = RawStatisticConfig & {
value: Record<string, number>;
formatting: Formatting.MAPCHART;
formatting: "mapchart";
};
export type ConnectedDotsStatisticsConfig = RawStatisticConfig & {
formatting: Formatting.CONNECTED_DOTS;
formatting: "connected_dots";
value: Record<string, number>;
};
......@@ -75,16 +73,16 @@ export const isRawStatistic = (
export const isPiechart = (
stat: RenderingStatisticConfig
): stat is PiechartStatisticsConfig => stat.formatting === Formatting.PIECHARTS;
): stat is PiechartStatisticsConfig => stat.formatting === "piecharts";
export const isConnectedDots = (
stat: RenderingStatisticConfig
): stat is ConnectedDotsStatisticsConfig =>
stat.formatting === Formatting.CONNECTED_DOTS;
stat.formatting === "connected_dots";
export const isMapChart = (
stat: StatisticConfig
): stat is MapChartStatisticConfig => stat.formatting === Formatting.MAPCHART;
): stat is MapChartStatisticConfig => stat.formatting === "mapchart";
export type StatisticsBlock<StatType = StatisticConfig> = {
title: string;
......
......@@ -42,10 +42,12 @@ const extractCommonProps = ({
label,
formatting,
tooltip,
unit,
}: StatisticConfig) => ({
formatting,
label,
tooltip,
unit,
});
const formatAggregatedStatistic = (statistic: AggregatedStatisticConfig) => (
......
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