Sorting of map legend items

app/charts/map/chart-map.tsx

@@ -82,6 +82,7 @@ export const ChartMapVisualization = ({
         dimensionIri: symbolDimensionIri,
         locale,
       },
+      pause: !symbolDimensionIri || symbolDimensionIri === "",
     });
 
   const geoCoordinatesDimension =
@@ -90,15 +91,18 @@ export const ChartMapVisualization = ({
       ? fetchedGeoCoordinates.dataCubeByIri.dimensionByIri.geoCoordinates
       : undefined;
 
-  const [{ data: fetchedGeoShapes }] = useGeoShapesByDimensionIriQuery({
-    variables: {
-      dataCubeIri: dataSetIri,
-      sourceType: dataSource.type,
-      sourceUrl: dataSource.url,
-      dimensionIri: areaDimensionIri || symbolDimensionIri,
-      locale,
-    },
-  });
+  const geoShapesIri = areaDimensionIri || symbolDimensionIri;
+  const [{ data: fetchedGeoShapes, error: geoShapesError }] =
+    useGeoShapesByDimensionIriQuery({
+      variables: {
+        dataCubeIri: dataSetIri,
+        sourceType: dataSource.type,
+        sourceUrl: dataSource.url,
+        dimensionIri: geoShapesIri,
+        locale,
+      },
+      pause: !geoShapesIri || geoShapesIri === "",
+    });
 
   const geoShapesDimension =
     fetchedGeoShapes?.dataCubeByIri?.dimensionByIri?.__typename ===
@@ -216,7 +220,7 @@ export const ChartMapVisualization = ({
       ready
         ? observationsQueryResp["data"]
         : undefined,
-    error: observationsQueryError || geoCoordinatesError,
+    error: observationsQueryError || geoCoordinatesError || geoShapesError,
   };
   return (
     <ChartLoadingWrapper

app/charts/shared/legend-color.tsx

@@ -1,6 +1,7 @@
 import { Theme, Typography } from "@mui/material";
 import { makeStyles } from "@mui/styles";
 import clsx from "clsx";
+import orderBy from "lodash/orderBy";
 import React, { memo, useMemo } from "react";
 
 import {
@@ -25,6 +26,7 @@ import {
 import SvgIcChevronRight from "@/icons/components/IcChevronRight";
 import { useLocale } from "@/src";
 import { interlace } from "@/utils/interlace";
+import { makeDimensionValueSorters } from "@/utils/sorting-values";
 import useEvent from "@/utils/use-event";
 
 import { rgbArrayToHex } from "./colors";
@@ -228,9 +230,18 @@ export const MapLegendColor = memo(function LegendColor({
   getColor: (d: Observation) => number[];
   useAbbreviations: boolean;
 }) {
-  const sortedValues = component.values.sort((a, b) =>
-    a.label.localeCompare(b.label)
-  );
+  const sortedValues = useMemo(() => {
+    const sorters = makeDimensionValueSorters(component, {
+      sorting: {
+        sortingType: "byAuto",
+        sortingOrder: "asc",
+      },
+    });
+    return orderBy(
+      component.values,
+      sorters.map((s) => (dv) => s(dv.label))
+    ) as typeof component.values;
+  }, [component]);
   const getLabel = useAbbreviations
     ? (d: string) => {
         const v = component.values.find((v) => v.value === d);

e2e/sorting.spec.ts

@@ -130,3 +130,25 @@ test("Segment sorting with hierarchy", async ({
     "Jura",
   ]);
 });
+
+test("Map legend categorical values sorting", async ({
+  actions,
+  selectors,
+}) => {
+  await actions.chart.createFrom(
+    "https://environment.ld.admin.ch/foen/gefahren-waldbrand-warnung/1",
+    "Int"
+  );
+  await actions.editor.changeChartType("Map");
+  await selectors.chart.loaded();
+
+  const legendItems = await selectors.chart.colorLegendItems();
+
+  expect(await legendItems.allInnerTexts()).toEqual([
+    "low danger",
+    "moderate danger",
+    "considerable danger",
+    "high danger",
+    "very high danger",
+  ]);
+});