feat: Order segments by position for ordinal dimensions in area chart

app/charts/area/areas-state.tsx

@@ -18,6 +18,7 @@ import {
   stackOrderReverse,
   sum,
 } from "d3";
+import { sortBy } from "lodash";
 import { ReactNode, useMemo } from "react";
 import { AreaFields } from "../../configurator";
 import {
@@ -29,6 +30,7 @@ import { Observation } from "../../domain/data";
 import { sortByIndex } from "../../lib/array";
 import { estimateTextWidth } from "../../lib/estimate-text-width";
 import { useLocale } from "../../locales/use-locale";
+import { makeOrdinalDimensionSorter } from "../../utils/sorting-values";
 import { BRUSH_BOTTOM_SPACE } from "../shared/brush";
 import {
   getLabelWithUnit,
@@ -207,10 +209,27 @@ const useAreasState = ({
         )
         .map((d) => d[0]);
 
+    const getSegmentsOrderedByPosition = () => {
+      const segments = Array.from(
+        new Set(sortedData.map((d) => getSegment(d)))
+      );
+      const sorter = dimension ? makeOrdinalDimensionSorter(dimension) : null;
+      return sorter ? sortBy(segments, sorter) : segments;
+    };
+
+    const dimension = dimensions.find(
+      (dim) => dim.iri === fields.segment?.componentIri
+    );
+    if (dimension?.__typename === "OrdinalDimension") {
+      return getSegmentsOrderedByPosition();
+    }
+
     return segmentSortingType === "byDimensionLabel"
       ? getSegmentsOrderedByName()
       : getSegmentsOrderedByTotalValue();
   }, [
+    dimensions,
+    fields.segment?.componentIri,
     getSegment,
     getY,
     locale,