[Feat] add kpis to regions

src/components/maps/MapLegend.tsx

@@ -1,14 +1,16 @@
 import { t } from "i18next";
-import { MUNICIPALITY_MAP_COLORS } from "./constants";
-import { KPIValue } from "@/types/entity-rankings";
+import { DEFAULT_STATISTICAL_GRADIENT_COLORS } from "@/utils/ui/colorGradients";
+import { KPIValue, MapEntityType } from "@/types/entity-rankings";
 
 export function MapLegend({
+  entityType,
   unit,
   leftValue,
   rightValue,
   selectedKPI,
   hasNullValues,
 }: {
+  entityType: MapEntityType;
   unit: string;
   leftValue: number;
   rightValue: number;
@@ -24,9 +26,7 @@ export function MapLegend({
         }}
       />
       <span className="text-gray-500 text-xs">
-        {t(
-          `municipalities.list.kpis.${selectedKPI.key}.booleanLabels.${label}`,
-        )}
+        {t(`${entityType}.list.kpis.${selectedKPI.key}.booleanLabels.${label}`)}
       </span>
     </div>
   );
@@ -37,8 +37,14 @@ export function MapLegend({
         <div className="flex items-center w-full md:w-auto gap-2">
           {selectedKPI.isBoolean ? (
             <>
-              {booleanItem(MUNICIPALITY_MAP_COLORS.gradientEnd, "true")}
-              {booleanItem(MUNICIPALITY_MAP_COLORS.gradientMidLow, "false")}
+              {booleanItem(
+                DEFAULT_STATISTICAL_GRADIENT_COLORS.gradientEnd,
+                "true",
+              )}
+              {booleanItem(
+                DEFAULT_STATISTICAL_GRADIENT_COLORS.gradientMidLow,
+                "false",
+              )}
             </>
           ) : (
             <>
@@ -51,11 +57,11 @@ export function MapLegend({
                   className="absolute inset-0 rounded-full"
                   style={{
                     background: `linear-gradient(to right, 
-                      ${MUNICIPALITY_MAP_COLORS.gradientStart} 0%,
-                      ${MUNICIPALITY_MAP_COLORS.gradientMidLow} 33%,
-                      ${MUNICIPALITY_MAP_COLORS.gradientMidHigh} 66%,
-                      ${MUNICIPALITY_MAP_COLORS.gradientEnd} 100%
-                    )`,
+                        ${DEFAULT_STATISTICAL_GRADIENT_COLORS.gradientStart} 0%,
+                        ${DEFAULT_STATISTICAL_GRADIENT_COLORS.gradientMidLow} 33%,
+                        ${DEFAULT_STATISTICAL_GRADIENT_COLORS.gradientMidHigh} 66%,
+                        ${DEFAULT_STATISTICAL_GRADIENT_COLORS.gradientEnd} 100%
+                      )`,
                   }}
                 />
               </div>
@@ -70,7 +76,7 @@ export function MapLegend({
           <div className="flex items-center mb-2 md:mb-0 md:ml-6">
             <div className="w-3 h-3 rounded-full bg-gray-600 mr-1" />
             <span className="text-gray-500 text-xs italic">
-              {t("municipalities.map.legend.null")}
+              {t(`${entityType}.map.legend.null`)}
             </span>
           </div>
         )}

src/components/maps/MapTooltip.tsx

@@ -1,7 +1,8 @@
 import { t } from "i18next";
-import { KPIValue } from "@/types/entity-rankings";
+import { KPIValue, MapEntityType } from "@/types/entity-rankings";
 
 export function MapTooltip({
+  entityType,
   name,
   value,
   rank,
@@ -10,6 +11,7 @@ export function MapTooltip({
   nullValue,
   selectedKPI,
 }: {
+  entityType: MapEntityType;
   name: string;
   value: number | boolean | null | undefined;
   rank: number | null;
@@ -23,10 +25,10 @@ export function MapTooltip({
       ? typeof value === "boolean"
         ? value
           ? t(
-              `municipalities.list.kpis.${selectedKPI?.key}.booleanLabels.true`,
+              `${entityType}.list.kpis.${selectedKPI?.key}.booleanLabels.true`,
             ) || t("yes")
           : t(
-              `municipalities.list.kpis.${selectedKPI?.key}.booleanLabels.false`,
+              `${entityType}.list.kpis.${selectedKPI?.key}.booleanLabels.false`,
             ) || t("no")
         : `${(value as number).toFixed(1)}${unit}`
       : nullValue;

src/components/maps/SwedenMap.tsx

@@ -15,13 +15,13 @@ import {
   Geometry,
   GeoJsonProperties,
 } from "geojson";
-import { MUNICIPALITY_MAP_COLORS } from "./constants";
+import { createStatisticalGradient } from "@/utils/ui/colorGradients";
 import { calculateGeoBounds } from "./utils/geoBounds";
 import { isMobile } from "react-device-detect";
 import { t } from "i18next";
 import "leaflet/dist/leaflet.css";
 import L from "leaflet";
-import { KPIValue } from "@/types/entity-rankings";
+import { KPIValue, MapEntityType } from "@/types/entity-rankings";
 
 export interface DataKPI {
   key: string;
@@ -38,6 +38,7 @@ export interface DataItem {
 }
 
 interface SwedenMapProps {
+  entityType: MapEntityType;
   geoData: FeatureCollection;
   data: DataItem[];
   selectedKPI: DataKPI;
@@ -81,14 +82,21 @@ function MapController({
 }
 
 function MapOfSweden({
+  entityType,
   geoData,
   data,
   selectedKPI,
   onAreaClick = () => {},
   defaultCenter = [63, 17],
   defaultZoom,
   propertyNameField = "name",
-  colors = MUNICIPALITY_MAP_COLORS,
+  colors = {
+    null: "var(--grey)",
+    gradientStart: "var(--pink-5)",
+    gradientMidLow: "var(--pink-4)",
+    gradientMidHigh: "var(--pink-3)",
+    gradientEnd: "var(--blue-3)",
+  },
 }: SwedenMapProps) {
   const [hoveredArea, setHoveredArea] = React.useState<string | null>(null);
   const [hoveredValue, setHoveredValue] = useState<number | boolean | null>(
@@ -221,50 +229,27 @@ function MapOfSweden({
   );
 
   const getColorByValue = (value: number | boolean | null): string => {
-    if (value === null || value === undefined) {
+    if (
+      value === null ||
+      value === undefined ||
+      values.length === 0 ||
+      Number.isNaN(value)
+    ) {
       return colors.null;
     }
 
-    const { gradientStart, gradientMidLow, gradientMidHigh, gradientEnd } =
-      colors;
+    const { gradientMidLow, gradientEnd } = colors;
 
     if (typeof value === "boolean") {
       return value === true ? gradientEnd : gradientMidLow;
     }
 
-    const mean = values.reduce((sum, val) => sum + val, 0) / values.length;
-    const stdDev = Math.sqrt(
-      values.reduce((sum, val) => sum + Math.pow(val - mean, 2), 0) /
-        values.length,
+    return createStatisticalGradient(
+      values,
+      value,
+      selectedKPI.higherIsBetter ?? false,
+      colors,
     );
-
-    const zScore = (value - mean) / stdDev;
-
-    if (selectedKPI.higherIsBetter) {
-      if (zScore <= -1) {
-        const t = Math.max(0, (zScore + 2) / 1);
-        return `color-mix(in srgb, ${gradientStart} ${(1 - t) * 100}%, ${gradientMidLow} ${t * 100}%)`;
-      } else if (zScore <= 0) {
-        const t = Math.max(0, zScore + 1);
-        return `color-mix(in srgb, ${gradientMidLow} ${(1 - t) * 100}%, ${gradientMidHigh} ${t * 100}%)`;
-      } else if (zScore <= 1) {
-        const t = Math.max(0, zScore);
-        return `color-mix(in srgb, ${gradientMidHigh} ${(1 - t) * 100}%, ${gradientEnd} ${t * 100}%)`;
-      } else {
-        return gradientEnd;
-      }
-    } else if (zScore >= 1) {
-      const t = Math.max(0, (2 - zScore) / 1);
-      return `color-mix(in srgb, ${gradientStart} ${(1 - t) * 100}%, ${gradientMidLow} ${t * 100}%)`;
-    } else if (zScore >= 0) {
-      const t = Math.max(0, 1 - zScore);
-      return `color-mix(in srgb, ${gradientMidLow} ${(1 - t) * 100}%, ${gradientMidHigh} ${t * 100}%)`;
-    } else if (zScore >= -1) {
-      const t = Math.max(0, -zScore);
-      return `color-mix(in srgb, ${gradientMidHigh} ${(1 - t) * 100}%, ${gradientEnd} ${t * 100}%)`;
-    } else {
-      return gradientEnd;
-    }
   };
 
   const renderGradientLegend = () => {
@@ -275,6 +260,7 @@ function MapOfSweden({
 
     return (
       <MapLegend
+        entityType={entityType}
         leftValue={leftValue}
         rightValue={rightValue}
         unit={selectedKPI.unit ?? ""}
@@ -303,13 +289,10 @@ function MapOfSweden({
   ) => {
     if (feature?.properties?.[propertyNameField]) {
       const areaName = feature.properties[propertyNameField];
-      const { value, rank } = getAreaData(areaName);
 
       (layer as L.Path).on({
         mouseover: () => {
           setHoveredArea(areaName);
-          setHoveredValue(value);
-          setHoveredRank(rank);
         },
         mouseout: () => {
           setHoveredArea(null);
@@ -346,12 +329,16 @@ function MapOfSweden({
   };
 
   useEffect(() => {
-    if (hoveredArea) {
-      const { value, rank } = getAreaData(hoveredArea);
-      setHoveredValue(value);
-      setHoveredRank(rank);
+    if (!hoveredArea) {
+      setHoveredValue(null);
+      setHoveredRank(null);
+      return;
     }
-  }, [selectedKPI, hoveredArea, getAreaData]);
+
+    const { value, rank } = getAreaData(hoveredArea);
+    setHoveredValue(value);
+    setHoveredRank(rank);
+  }, [hoveredArea, getAreaData]);
 
   return (
     <div className="relative flex-1 h-full max-w-screen-lg">
@@ -382,14 +369,15 @@ function MapOfSweden({
 
       {hoveredArea && (
         <MapTooltip
+          entityType={entityType}
           name={hoveredArea}
           value={hoveredValue}
           rank={hoveredRank}
           unit={selectedKPI.unit ?? ""}
           total={data.length}
           nullValue={
             selectedKPI.key && t
-              ? t(`municipalities.list.kpis.${selectedKPI.key}.nullValues`)
+              ? t(`${entityType}.list.kpis.${selectedKPI.key}.nullValues`)
               : "No data"
           }
           selectedKPI={selectedKPI as KPIValue}

src/components/regions/RegionalInsightsPanel.tsx

@@ -11,7 +11,7 @@ import {
 
 interface InsightsPanelProps {
   regionData: Region[];
-  selectedKPI: KPIValue;
+  selectedKPI: KPIValue<Region>;
 }
 
 function RegionalInsightsPanel({

src/components/regions/RegionalRankedList.tsx

@@ -0,0 +1,54 @@
+import { useTranslation } from "react-i18next";
+import RankedList from "@/components/ranked/RankedList";
+import { DataPoint, KPIValue } from "@/types/entity-rankings";
+import { Region, RegionListItem } from "@/types/region";
+
+interface RegionalRankedListProps {
+  regionEntities: RegionListItem[];
+  selectedKPI: KPIValue<Region>;
+}
+
+export function RegionalRankedList({ regionEntities, selectedKPI }: RegionalRankedListProps) {
+  const { t } = useTranslation();
+
+  const asDataPoint = (kpi: unknown): DataPoint<RegionListItem> =>
+    kpi as DataPoint<RegionListItem>;
+
+  return (
+    <RankedList
+      data={regionEntities}
+      selectedDataPoint={asDataPoint({
+        label: selectedKPI.label,
+        key: selectedKPI.key as keyof RegionListItem,
+        unit: selectedKPI.unit,
+        description: selectedKPI.description,
+        higherIsBetter: selectedKPI.higherIsBetter,
+        nullValues: selectedKPI.nullValues,
+        isBoolean: selectedKPI.isBoolean,
+        booleanLabels: selectedKPI.booleanLabels,
+        formatter: (value: unknown) => {
+          if (value === null || value === undefined) {
+            return selectedKPI.nullValues
+              ? t(selectedKPI.nullValues)
+              : t("noData");
+          }
+
+          if (typeof value === "boolean") {
+            return value
+              ? t(`regions.list.kpis.${selectedKPI.key}.booleanLabels.true`)
+              : t(`regions.list.kpis.${selectedKPI.key}.booleanLabels.false`);
+          }
+
+          if (typeof value === "number") {
+            return value.toFixed(1);
+          }
+
+          return String(value);
+        },
+      })}
+      onItemClick={() => {}}
+      searchKey="displayName"
+      searchPlaceholder={t("rankedList.search.placeholder")}
+    />
+  );
+}