feat(indicator/biodiversity): Create popup content for biodiversity indicators

webapp/src/app/styles/all4trees.css

@@ -40,6 +40,8 @@
   --custom-color-green-main: #007a55;
   --custom-color-green-pastel: #d0fae5;
   --custom-color-grey-light: #f2e5e5;
+  --custom-color-blue-dark: #192637;
+  --custom-color-blue-light: #52a4ff;
 
   /* ========================================================================
      TYPOGRAPHIE - CHARTE ALL4TREES

webapp/src/app/styles/globals.css

@@ -33,4 +33,9 @@
     border-color: var(--border);
     outline-color: rgba(var(--a4t-rgb-vert-kelly), 0.5);
   }
+
+  .custom-scrollbar {
+    scrollbar-width: thin;
+    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
+  }
 }

webapp/src/app/styles/index.css

@@ -26,6 +26,7 @@
 
 :root {
   --radius: 0.625rem;
+  --spacing-base: 0.25rem;
 
   /* LIGHT MODE SHADCN */
   --background: var(--a4t-color-alabaster);
@@ -47,6 +48,8 @@
   --accent: var(--a4t-color-jaune-vert);
   --accent-foreground: var(--a4t-color-nuit);
   --destructive: #dc2626;
+  --info: var(--custom-color-blue-light);
+  --info-foreground: var(--custom-color-blue-dark);
 
   --border: #e5e7ebaa;
   --input: #ffffff;
@@ -88,6 +91,8 @@
   --accent: var(--custom-color-green-main);
   --accent-foreground: var(--custom-color-green-pastel);
   --destructive: #ef4444;
+  --info: var(--custom-color-blue-dark);
+  --info-foreground: var(--custom-color-blue-light);
 
   --border: rgba(255, 255, 255, 0.15);
   --input: rgba(255, 255, 255, 0.05);
@@ -118,6 +123,13 @@
  */
 
 @theme inline {
+  --spacing-2xs: calc(var(--spacing-base) / 2);
+  --spacing-xs: calc(var(--spacing-base));
+  --spacing-sm: calc(var(--spacing-base) * 2);
+  --spacing-md: calc(var(--spacing-base) * 3);
+  --spacing-lg: calc(var(--spacing-base) * 4);
+  --spacing-xl: calc(var(--spacing-base) * 5);
+
   --radius-sm: calc(var(--radius) - 4px);
   --radius-md: calc(var(--radius) - 2px);
   --radius-lg: var(--radius);
@@ -145,6 +157,8 @@
   --color-accent: var(--accent);
   --color-accent-foreground: var(--accent-foreground);
   --color-destructive: var(--destructive);
+  --color-info: var(--info);
+  --color-info-foreground: var(--info-foreground);
 
   --color-border: var(--border);
   --color-input: var(--input);

webapp/src/features/indicators/biodiversity/biodiversity-indicator.tsx

@@ -0,0 +1,37 @@
+import type { FC } from "react";
+import { IndicatorContainer } from "../components/indicator-container";
+import { TreesIcon } from "lucide-react";
+import { useTranslation } from "@i18n";
+import { useBiodiversityIndicatorElements } from "./use-biodiversity-indicator-elements";
+import { ICON_SIZE_HEADER } from "../components/constants";
+import {
+  useFormatBiodiversityData,
+  type BiodiversityData,
+} from "./format-data";
+
+type BiodiversityIndicatorProps = {
+  onClose: () => void;
+  data: BiodiversityData;
+  className?: string;
+};
+
+export const BiodiversityIndicator: FC<BiodiversityIndicatorProps> = ({
+  onClose,
+  data,
+  className,
+}) => {
+  const { t } = useTranslation("translations");
+  const formattedData = useFormatBiodiversityData(data);
+  const elements = useBiodiversityIndicatorElements(formattedData);
+
+  return (
+    <IndicatorContainer
+      onCrossClick={onClose}
+      title={formattedData.title}
+      subtitle={t("indicators.biodiversity.title")}
+      icon={<TreesIcon size={ICON_SIZE_HEADER} />}
+      elements={elements}
+      className={className}
+    />
+  );
+};

webapp/src/features/indicators/biodiversity/chart-forest-potential.tsx

@@ -0,0 +1,136 @@
+import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts";
+
+import { Card, CardContent } from "@ui/card";
+import {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  type ChartConfig,
+} from "@ui/chart";
+import type { FC } from "react";
+import { useTranslation } from "@i18n";
+import type { FormattedData } from "./format-data";
+
+const radarConfig = {
+  fillOpacity: 0.5,
+  strokeWidth: 2,
+  dot: {
+    r: 2,
+    fillOpacity: 1,
+  },
+} as const;
+
+type ChartForestPotentialProps = {
+  data: FormattedData["forestPotentialLevel"];
+};
+
+export const ChartForestPotential: FC<ChartForestPotentialProps> = ({
+  data,
+}) => {
+  const { t } = useTranslation("translations");
+  const { benef, temoin } = data;
+
+  const chartConfig: ChartConfig = {
+    benef: {
+      label: "Benef.", // todo: i18n
+      color: "var(--chart-1)",
+    },
+    temoin: {
+      // todo: change name
+      label: "Temoin", // todo: i18n
+      color: "var(--chart-2)",
+    },
+  };
+
+  const chartData: Array<{ indicator: string; benef: number; temoin: number }> =
+    [
+      {
+        indicator: t(
+          "indicators.biodiversity.sections.forestPotentialLevel.density",
+        ),
+        benef: benef.density,
+        temoin: temoin.density,
+      },
+      {
+        indicator: t(
+          "indicators.biodiversity.sections.forestPotentialLevel.diversity",
+        ),
+        benef: benef.diversity,
+        temoin: temoin.diversity,
+      },
+      {
+        indicator: t(
+          "indicators.biodiversity.sections.forestPotentialLevel.diameterDistribution",
+        ),
+        benef: benef.diameterDistribution,
+        temoin: temoin.diameterDistribution,
+      },
+      {
+        indicator: t(
+          "indicators.biodiversity.sections.forestPotentialLevel.masterHeight",
+        ),
+        benef: benef.masterHeight,
+        temoin: temoin.masterHeight,
+      },
+      {
+        indicator: t(
+          "indicators.biodiversity.sections.forestPotentialLevel.microhabitat",
+        ),
+        benef: benef.microhabitat,
+        temoin: temoin.microhabitat,
+      },
+      {
+        indicator: t(
+          "indicators.biodiversity.sections.forestPotentialLevel.ratioDeathmassBiomass",
+        ),
+        benef: benef.ratioDeathmassBiomass,
+        temoin: temoin.ratioDeathmassBiomass,
+      },
+      {
+        indicator: t(
+          "indicators.biodiversity.sections.forestPotentialLevel.spatialDistribution",
+        ),
+        benef: benef.spatialDistribution,
+        temoin: temoin.spatialDistribution,
+      },
+      {
+        indicator: t(
+          "indicators.biodiversity.sections.forestPotentialLevel.verticalDistribution",
+        ),
+        benef: benef.verticalDistribution,
+        temoin: temoin.verticalDistribution,
+      },
+    ];
+
+  return (
+    <Card>
+      <CardContent className="p-2 mx-2">
+        <ChartContainer
+          config={chartConfig}
+          className="mx-auto aspect-square max-h-[250px]"
+        >
+          <RadarChart data={chartData}>
+            <ChartTooltip
+              cursor={true}
+              content={<ChartTooltipContent indicator="line" />}
+            />
+            <PolarAngleAxis dataKey="indicator" />
+            <PolarGrid radialLines={true} />
+            <Radar
+              dataKey="benef"
+              fill="var(--color-benef)"
+              stroke="var(--color-benef)"
+              {...radarConfig}
+            />
+            <Radar
+              dataKey="temoin"
+              fill="var(--color-temoin)"
+              stroke="var(--color-temoin)"
+              {...radarConfig}
+            />
+          </RadarChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  );
+};

webapp/src/features/indicators/biodiversity/format-data.ts

@@ -0,0 +1,65 @@
+import { i18nInstance } from "@shared/i18n";
+
+import { UNITS, useFormatterWithUnit } from "../utils";
+
+export type BiodiversityData = {
+  for: string;
+  richness: number;
+  dominant_height: number;
+};
+
+/**
+ * Return data in a convenient way for UI rendering, handling units and fixing
+ */
+export const useFormatBiodiversityData = (data: BiodiversityData) => {
+  const { formatWithUnit } = useFormatterWithUnit();
+
+  return {
+    title: "Point #se-4", // to replace
+    date: Intl.DateTimeFormat(i18nInstance.language, {
+      dateStyle: "short",
+    }).format(new Date()), // to replace
+    biomass: {
+      volume: formatWithUnit(5, UNITS.tonPerHectare), // replace hardcoded value
+      density: formatWithUnit(120, UNITS.individualPerHectare), // replace hardcoded value
+    },
+    treeDiversity: {
+      speciesRichness: formatWithUnit(1257, UNITS.speciesCount), // replace hardcoded value
+      shannon: 1.1, // replace hardcoded value
+    },
+    // replace hardcoded value
+    indicatorSpecies: {
+      abundanceTaxon1: 43,
+      speciesRichnessTaxon1: 47,
+      abundanceTaxon2: 56,
+      speciesRichnessTaxon2: 23,
+      abundanceTaxon3: 33,
+      speciesRichnessTaxon3: 24,
+    },
+    // replace hardcoded value
+    forestPotentialLevel: {
+      benef: {
+        density: 70,
+        ratioDeathmassBiomass: 85,
+        diversity: data.richness,
+        spatialDistribution: 43,
+        diameterDistribution: 22,
+        verticalDistribution: 67,
+        masterHeight: data.dominant_height,
+        microhabitat: 2,
+      },
+      temoin: {
+        density: 80,
+        ratioDeathmassBiomass: 45,
+        diversity: 47,
+        spatialDistribution: 39,
+        diameterDistribution: 32,
+        verticalDistribution: 67,
+        masterHeight: 98,
+        microhabitat: 22,
+      },
+    },
+  };
+};
+
+export type FormattedData = ReturnType<typeof useFormatBiodiversityData>;

webapp/src/features/indicators/biodiversity/index.ts

@@ -0,0 +1,2 @@
+export { BiodiversityIndicator } from "./biodiversity-indicator";
+export type { BiodiversityData } from "./format-data";