Merge pull request #290 from dataforgoodfr/feat/D4G-289-show-most-imp…

…actful-actions

feat(SynthesisPage): Implement most impactful actions

packages/client/src/lib/array.ts

@@ -50,7 +50,7 @@ const indexArrayBy = <
 >(
   arr: T[],
   key: U
-): Record<T[U], T> => {
+): Record<KeyUnknownGuard<T[U]>, T> => {
   return Object.fromEntries(arr.map((item) => [get(item, key), item]));
 };
 
@@ -83,10 +83,12 @@ type DeepPathRecursive<
 
 type TemplatableTypes = string | number | bigint | boolean | null | undefined;
 
-type Head<T extends any[]> = T extends [infer THead, ...infer _]
+type Head<T extends unknown[]> = T extends [infer THead, ...infer _]
   ? THead
   : never;
 
-type Tail<T extends any[]> = T extends [infer _, ...infer TTail]
+type Tail<T extends unknown[]> = T extends [infer _, ...infer TTail]
   ? TTail
   : never;
+
+type KeyUnknownGuard<T> = T extends string | number | symbol ? T : any;

packages/client/src/lib/formatter.ts

@@ -3,6 +3,8 @@ import { userLocale } from "../modules/translations";
 export {
   formatBudget,
   formatCarbonFootprint,
+  formatConsumption,
+  formatPercentage,
   formatPoints,
   formatProduction,
   formatProductionGw,
@@ -26,6 +28,26 @@ function formatProductionGw(value?: number) {
   return value?.toFixed(1) || "";
 }
 
+function formatConsumption(
+  value: number,
+  { fractionDigits = 0 }: { fractionDigits?: number } = {}
+) {
+  return formatNumber(value, {
+    minimumFractionDigits: fractionDigits,
+    maximumFractionDigits: fractionDigits,
+  });
+}
+
+function formatPercentage(
+  value?: number,
+  { fractionDigits = 1 }: { fractionDigits?: number } = {}
+) {
+  return formatNumber(value, {
+    minimumFractionDigits: fractionDigits,
+    maximumFractionDigits: fractionDigits,
+  });
+}
+
 function formatProduction({
   fractionDigits = 2,
 }: { fractionDigits?: number } = {}) {

packages/client/src/modules/common/components/Card/Card.tsx

@@ -0,0 +1,12 @@
+import { Box, styled } from "@mui/material";
+
+export { Card };
+
+const Card = styled(Box)(({ theme }) => ({
+  borderRadius: "10px",
+  border: "2px solid",
+  borderColor: "#ffffff",
+  backgroundColor: theme.palette.primary.main,
+  color: "#ffffff",
+  overflow: "hidden",
+}));

packages/client/src/modules/common/components/Card/index.ts

@@ -0,0 +1 @@
+export { Card } from "./Card";

packages/client/src/modules/common/components/Icon/Icon.tsx

@@ -28,11 +28,13 @@ import { SvgIconProps } from "@mui/material";
 import PersonPinRounded from "@mui/icons-material/PersonPinRounded";
 import {
   Badge,
+  Bolt,
   Close,
   Computer,
   ConnectingAirports,
   ContentCopy,
   DirectionsCar,
+  DoNotDisturb,
   DryCleaning,
   HistoryEdu,
   Home,
@@ -41,10 +43,13 @@ import {
   LockOpen,
   LunchDining,
   Microwave,
+  North,
   PieChart,
   Shield,
+  South,
   TipsAndUpdates,
   Train,
+  Whatshot,
 } from "@mui/icons-material";
 
 export { Icon };
@@ -70,19 +75,24 @@ const ICONS = {
   consumption: ShoppingCart,
   copy: ContentCopy,
   draft: HistoryEdu,
+  energy: Bolt,
   "form-draft": HistoryEdu,
   "form-pending-validation": SettingsSuggestIcon,
   "form-unfilled": Cancel,
   "form-validated": CheckCircle,
   food: LunchDining,
   helper: HelpIcon,
   house: Home,
+  impactful: Whatshot,
   information: Info,
   "info-card": IconImgFactory({ asset: "info_icon.svg" }),
   lock: Lock,
   "lock-open": LockOpen,
   "mark-circle": Cancel,
   microwave: Microwave,
+  missed: DoNotDisturb,
+  "number-increase": North,
+  "number-decrease": South,
   "open-in-new-tab": OpenInNew,
   plane: ConnectingAirports,
   "player-finished": HowToReg,

packages/client/src/modules/common/components/Tag/Tag.tsx

@@ -0,0 +1,47 @@
+import { styled } from "@mui/material";
+import { ReactNode } from "react";
+
+export { Tag };
+
+function Tag({
+  type,
+  color,
+  icon,
+  children,
+}: {
+  type?: "success" | "error" | "secondary";
+  color?: string;
+  icon?: ReactNode;
+  children: ReactNode;
+}) {
+  const className = type || "";
+
+  return (
+    <TagStyled className={className} sx={{ backgroundColor: color }}>
+      {icon}
+      {children}
+    </TagStyled>
+  );
+}
+
+const TagStyled = styled("span")(({ theme }) => {
+  return {
+    display: "flex",
+    alignItems: "center",
+    gap: theme.spacing(0.5),
+    flexGrow: 0,
+    flexShrink: 0,
+    padding: theme.spacing(0.5),
+    borderRadius: "10px",
+    color: "#ffffff",
+    "&.success": {
+      backgroundColor: theme.palette.status.success,
+    },
+    "&.error": {
+      backgroundColor: theme.palette.status.error,
+    },
+    "&.secondary": {
+      backgroundColor: "hsl(0, 50%, 100%)",
+    },
+  };
+});

packages/client/src/modules/common/components/Tag/index.ts

@@ -0,0 +1 @@
+export { Tag } from "./Tag";

packages/client/src/modules/common/components/TagNumber/TagNumber.tsx

@@ -0,0 +1,60 @@
+import { useMemo } from "react";
+import { Icon } from "../Icon";
+import { Tag } from "../Tag";
+import { Typography } from "../Typography";
+
+export { TagNumber };
+
+function TagNumber({
+  value,
+  successDirection = "increase",
+  formatter,
+}: {
+  value: number;
+  successDirection?: "increase" | "decrease";
+  formatter: (nb: number) => string;
+}) {
+  const tagType = useMemo(() => {
+    const directionFactor = successDirection === "increase" ? 1 : -1;
+    if (value * directionFactor > 0) {
+      return "success";
+    }
+    if (value * directionFactor < 0) {
+      return "error";
+    }
+    return "secondary";
+  }, [successDirection, value]);
+
+  const icon = useMemo(() => {
+    if (value > 0) {
+      return (
+        <Icon name="number-increase" sx={{ width: "1rem", height: "1rem" }} />
+      );
+    }
+    if (value < 0) {
+      return (
+        <Icon name="number-decrease" sx={{ width: "1rem", height: "1rem" }} />
+      );
+    }
+    return "•";
+  }, [value]);
+
+  const sign = useMemo(() => {
+    if (value > 0) {
+      return "+";
+    }
+    if (value < 0) {
+      return "-";
+    }
+    return "";
+  }, [value]);
+
+  return (
+    <Tag type={tagType} icon={icon}>
+      <Typography as="span">
+        {sign}
+        {formatter(Math.abs(value))}
+      </Typography>
+    </Tag>
+  );
+}

packages/client/src/modules/common/components/TagNumber/index.ts

@@ -0,0 +1 @@
+export { TagNumber } from "./TagNumber";

packages/client/src/modules/common/components/Typography/Typography.tsx

@@ -17,7 +17,7 @@ const Typography = styled(TypographyMui)(({ theme }) => ({
     "&:is(h6)": {
       fontSize: 16,
     },
-    "&:is(p)": {
+    "&:is(p), &:is(span)": {
       marginRight: 0,
       fontSize: 14,
     },

packages/client/src/modules/play/context/hooks/player/index.ts

@@ -1,2 +1,3 @@
 export * from "./useCurrentPlayer";
+export * from "./useMostImpactfulActions";
 export * from "./usePersona";

packages/client/src/modules/play/context/hooks/player/useCurrentPlayer.ts

@@ -33,6 +33,7 @@ function useCurrentPlayer() {
   return {
     player,
     profile: player.profile,
+    personalization: player.profile.personalization,
     playerActions: player.actions,
     actionPointsAvailableAtCurrentStep: STEPS[game.step].availableActionPoints,
     teamActions: team.actions,

packages/client/src/modules/play/context/hooks/player/useMostImpactfulActions.ts

@@ -0,0 +1,135 @@
+import { sumBy } from "lodash";
+import { computeNewConsumptionData } from "../../../utils/consumption";
+import { sumFor } from "../../../../persona";
+import {
+  ConsumptionDatum,
+  ConsumptionType,
+} from "../../../../persona/consumption";
+import { indexArrayBy } from "../../../../../lib/array";
+import { fromEntries } from "../../../../../lib/object";
+import { useMemo } from "react";
+import { Action } from "../../../../../utils/types";
+import { useCurrentPlayer } from "./useCurrentPlayer";
+import { usePersona } from "./usePersona";
+import { usePlay } from "../../playContext";
+
+export { useMostImpactfulActions };
+export type { ImpactfulAction };
+
+type ImpactfulAction = {
+  action: Action;
+  isPerformed: boolean;
+  consumptionImpacts: {
+    type: ConsumptionType;
+    initial: number;
+    final: number;
+    absolute: number;
+    relative: number;
+  }[];
+};
+
+function useMostImpactfulActions({ limit = 5 }: { limit?: number } = {}) {
+  const { consumptionActionById } = usePlay();
+  const { personalization, playerActions } = useCurrentPlayer();
+  const { personaBySteps } = usePersona();
+
+  const mostImpactfulActions = useMemo(() => {
+    const initialPersona = personaBySteps[0];
+    const actions = playerActions.map(
+      (playerAction) => consumptionActionById[playerAction.actionId]
+    );
+    const PlayerActionByActionId = indexArrayBy(playerActions, "actionId");
+
+    const initialConsumptionByType = computeConsumptionByType(
+      initialPersona.consumption
+    );
+
+    const mostImpactfulActions: ImpactfulAction[] = actions
+      .map((action) => {
+        const consumptionData = computeNewConsumptionData(
+          [action.name],
+          personalization
+        );
+
+        return {
+          action,
+          consumptionData,
+          totalConsumptionKwh: sumBy(consumptionData, "value"),
+        };
+      })
+      .sort(
+        (consoA, consoB) =>
+          consoA.totalConsumptionKwh - consoB.totalConsumptionKwh
+      )
+      .slice(0, limit)
+      .map(({ action, consumptionData }) => {
+        const consumptionByType = computeConsumptionByType(consumptionData);
+        const consumptionImpacts = computeConsumptionDifference(
+          consumptionByType,
+          initialConsumptionByType
+        );
+
+        return {
+          action,
+          isPerformed: PlayerActionByActionId[action.id].isPerformed,
+          consumptionImpacts,
+        };
+      });
+
+    return mostImpactfulActions;
+  }, [
+    consumptionActionById,
+    limit,
+    personaBySteps,
+    personalization,
+    playerActions,
+  ]);
+
+  return {
+    mostImpactfulActions,
+  };
+}
+
+function computeConsumptionByType(
+  consumptionData: readonly ConsumptionDatum[]
+): Record<ConsumptionType, number> {
+  const consumptionTypes = consumptionData.map((c) => c.type);
+
+  const consumptionByType = fromEntries(
+    consumptionTypes.map((type) => [type, sumFor(consumptionData, type)])
+  );
+
+  return consumptionByType;
+}
+
+function computeConsumptionDifference(
+  consumptionByType: Record<ConsumptionType, number>,
+  refConsumptionByType: Record<ConsumptionType, number>
+): {
+  type: ConsumptionType;
+  initial: number;
+  final: number;
+  absolute: number;
+  relative: number;
+}[] {
+  const consumptionTypes = Object.keys(
+    refConsumptionByType
+  ) as ConsumptionType[];
+
+  const consumptionImpacts = consumptionTypes
+    .map((type) => {
+      const absoluteDifference =
+        consumptionByType[type] - refConsumptionByType[type];
+
+      return {
+        type,
+        initial: refConsumptionByType[type],
+        final: consumptionByType[type],
+        absolute: absoluteDifference,
+        relative: absoluteDifference / refConsumptionByType[type],
+      };
+    })
+    .filter((difference) => difference.absolute !== 0);
+
+  return consumptionImpacts;
+}