From 80ce1bea85a926abb27ff920af8b7e3e23264659 Mon Sep 17 00:00:00 2001
From: Patrick Browne <pt.browne@gmail.com>
Date: Tue, 18 Oct 2022 10:23:41 +0200
Subject: [PATCH 01/28] refactor: Function name

---
 app/rdf/queries.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/rdf/queries.ts b/app/rdf/queries.ts
index 1eef9fd73..34b976564 100644
--- a/app/rdf/queries.ts
+++ b/app/rdf/queries.ts
@@ -234,7 +234,7 @@ export const getCubeDimensionValues = async (
     return [];
   }
 
-  return await getCubeDimensionValuesWithLabels({
+  return await getCubeDimensionValuesWithMetadata({
     dimension,
     cube,
     sparqlClient,
@@ -246,7 +246,7 @@ export const getCubeDimensionValues = async (
 export const dimensionIsVersioned = (dimension: CubeDimension) =>
   dimension.out(ns.schema.version)?.value ? true : false;
 
-const getCubeDimensionValuesWithLabels = async ({
+const getCubeDimensionValuesWithMetadata = async ({
   dimension,
   cube,
   sparqlClient,

From a349f387b369acbde1c3503f66bfe47ecb4d6d64 Mon Sep 17 00:00:00 2001
From: Patrick Browne <pt.browne@gmail.com>
Date: Tue, 18 Oct 2022 11:16:41 +0200
Subject: [PATCH 02/28] feat: Add loading of identifiers for dimension values

---
 app/domain/data.ts |  1 +
 app/rdf/queries.ts | 55 +++++++++++++++++++++++++++++-----------------
 2 files changed, 36 insertions(+), 20 deletions(-)

diff --git a/app/domain/data.ts b/app/domain/data.ts
index b174ad550..f70929a1c 100644
--- a/app/domain/data.ts
+++ b/app/domain/data.ts
@@ -24,6 +24,7 @@ export type DimensionValue = {
   label: string;
   position?: number;
   color?: string;
+  identifier?: string;
 };
 
 export type Observation = Record<string, ObservationValue>;
diff --git a/app/rdf/queries.ts b/app/rdf/queries.ts
index 34b976564..ab774fa19 100644
--- a/app/rdf/queries.ts
+++ b/app/rdf/queries.ts
@@ -318,26 +318,40 @@ const getCubeDimensionValuesWithMetadata = async ({
 
   if (namedNodes.length > 0) {
     const scaleType = getScaleType(dimension);
-    const [labels, positions, colors, unversioned] = await Promise.all([
-      loadResourceLabels({ ids: namedNodes, locale, sparqlClient }),
-      scaleType === "Ordinal"
-        ? loadResourceLiterals({
-            ids: namedNodes,
-            sparqlClient,
-            predicate: schema.position,
-          })
-        : [],
-      scaleType === "Ordinal"
-        ? loadResourceLiterals({
-            ids: namedNodes,
-            sparqlClient,
-            predicate: schema.color,
-          })
-        : [],
-      dimensionIsVersioned(dimension)
-        ? loadUnversionedResources({ ids: namedNodes, sparqlClient })
-        : [],
-    ]);
+    const [labels, positions, identifiers, colors, unversioned] =
+      await Promise.all([
+        loadResourceLabels({ ids: namedNodes, locale, sparqlClient }),
+        scaleType === "Ordinal"
+          ? loadResourceLiterals({
+              ids: namedNodes,
+              sparqlClient,
+              predicate: schema.position,
+            })
+          : [],
+        scaleType === "Ordinal" || scaleType === "Nominal"
+          ? loadResourceLiterals({
+              ids: namedNodes,
+              sparqlClient,
+              predicate: schema.identifier,
+            })
+          : [],
+        scaleType === "Ordinal"
+          ? loadResourceLiterals({
+              ids: namedNodes,
+              sparqlClient,
+              predicate: schema.color,
+            })
+          : [],
+        dimensionIsVersioned(dimension)
+          ? loadUnversionedResources({ ids: namedNodes, sparqlClient })
+          : [],
+      ]);
+
+    const identifiersLookup = new Map(
+      identifiers.map(({ iri, value }) => [iri.value, value?.value])
+    );
+
+    console.log({ identifiers });
 
     const labelsLookup = new Map(
       labels.map(({ iri, label }) => [iri.value, label?.value])
@@ -362,6 +376,7 @@ const getCubeDimensionValuesWithMetadata = async ({
         value: unversionedLookup.get(iri.value) ?? iri.value,
         label: labelsLookup.get(iri.value) ?? "",
         position: position !== undefined ? parseInt(position, 10) : undefined,
+        identifier: identifiersLookup.get(iri.value) ?? undefined,
         color: colorsLookup.get(iri.value) ?? undefined,
       });
     });

From fbd42900b2284b8ca7172e823985d976e075fb91 Mon Sep 17 00:00:00 2001
From: Patrick Browne <pt.browne@gmail.com>
Date: Wed, 19 Oct 2022 14:40:21 +0200
Subject: [PATCH 03/28] refactor: Use classes for ControlSectionContent

---
 .../components/chart-controls/section.tsx     | 55 +++++++++++--------
 1 file changed, 33 insertions(+), 22 deletions(-)

diff --git a/app/configurator/components/chart-controls/section.tsx b/app/configurator/components/chart-controls/section.tsx
index 8f2b26d1d..a2933b6c8 100644
--- a/app/configurator/components/chart-controls/section.tsx
+++ b/app/configurator/components/chart-controls/section.tsx
@@ -13,7 +13,7 @@ import { ElementType, forwardRef, HTMLProps, ReactNode } from "react";
 import { Icon, IconName } from "@/icons";
 import { useTheme } from "@/themes";
 
-const useStyles = makeStyles((theme: Theme) => ({
+const useControlSectionStyles = makeStyles<Theme>((theme) => ({
   controlSection: {
     borderTopColor: theme.palette.grey[500],
     borderTopWidth: "1px",
@@ -35,12 +35,12 @@ export const ControlSection = forwardRef<
     sx?: BoxProps["sx"];
   } & Omit<HTMLProps<HTMLDivElement>, "ref">
 >(({ role, children, isHighlighted, sx, ...props }, ref) => {
-  const classes = useStyles();
+  const classes = useControlSectionStyles();
   return (
     <Box
       ref={ref}
       role={role}
-      data-testid='controlSection'
+      data-testid="controlSection"
       sx={{
         backgroundColor: isHighlighted ? "primaryLight" : "grey.100",
         ...sx,
@@ -53,16 +53,7 @@ export const ControlSection = forwardRef<
   );
 });
 
-export const ControlSectionContent = ({
-  component,
-  role,
-  ariaLabelledBy,
-  children,
-  gap = "default",
-  px,
-  sx,
-  ...props
-}: {
+type ControlSectionContentProps = {
   component?: ElementType;
   role?: string;
   ariaLabelledBy?: string;
@@ -73,21 +64,41 @@ export const ControlSectionContent = ({
   gap?: "large" | "default" | "none";
   px?: "small" | "default";
   sx?: BoxProps["sx"];
-} & BoxProps) => {
+} & BoxProps;
+
+const useControlSectionContentStyles = makeStyles<
+  Theme,
+  Pick<ControlSectionContentProps, "gap" | "px">
+>((theme) => ({
+  controlSectionContent: {
+    display: "flex",
+    flexDirection: "column",
+    gap: ({ gap }) =>
+      theme.spacing(gap === "large" ? 3 : gap === "default" ? 2 : 0),
+    padding: ({ px }) =>
+      `0 ${theme.spacing(px === "small" ? 2 : 4)} ${theme.spacing(4)}`,
+  },
+}));
+
+export const ControlSectionContent = ({
+  component,
+  role,
+  ariaLabelledBy,
+  children,
+  gap = "default",
+  px,
+  sx,
+  ...props
+}: ControlSectionContentProps) => {
+  const classes = useControlSectionContentStyles({ gap, px });
   return (
     <Box
       component={component}
       role={role}
       aria-labelledby={ariaLabelledBy}
       {...props}
-      sx={{
-        display: "flex",
-        flexDirection: "column",
-        gap: gap === "large" ? 3 : gap === "default" ? 2 : 0,
-        px: px === "small" ? 2 : 4,
-        pb: 4,
-        ...sx,
-      }}
+      className={classes.controlSectionContent}
+      sx={sx}
     >
       {children}
     </Box>

From a704a306b32d385dd97e7076e2eb225f85beb5f8 Mon Sep 17 00:00:00 2001
From: Patrick Browne <pt.browne@gmail.com>
Date: Wed, 19 Oct 2022 14:40:40 +0200
Subject: [PATCH 04/28] fix: Increase gap between sort type select and sort
 order radio

---
 app/configurator/components/chart-options-selector.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/configurator/components/chart-options-selector.tsx b/app/configurator/components/chart-options-selector.tsx
index eafacacd2..19eb75def 100644
--- a/app/configurator/components/chart-options-selector.tsx
+++ b/app/configurator/components/chart-options-selector.tsx
@@ -549,7 +549,7 @@ const ChartFieldSorting = ({
       <SectionTitle disabled={disabled} iconName="sort">
         <Trans id="controls.section.sorting">Sort</Trans>
       </SectionTitle>
-      <ControlSectionContent component="fieldset" gap="none">
+      <ControlSectionContent component="fieldset">
         <Box>
           <Select
             id="sort-by"

From 1a37b81c5ae2635a7eb98b6053dba57fb82a86d1 Mon Sep 17 00:00:00 2001
From: Patrick Browne <pt.browne@gmail.com>
Date: Wed, 19 Oct 2022 16:05:46 +0200
Subject: [PATCH 05/28] fix: Do not make columns if there is only 1 group

---
 app/charts/shared/legend-color.tsx | 22 ++++++++++++++++++----
 1 file changed, 18 insertions(+), 4 deletions(-)

diff --git a/app/charts/shared/legend-color.tsx b/app/charts/shared/legend-color.tsx
index 34fa17369..3c76ad52b 100644
--- a/app/charts/shared/legend-color.tsx
+++ b/app/charts/shared/legend-color.tsx
@@ -1,5 +1,6 @@
 import { Theme, Typography } from "@mui/material";
 import { makeStyles } from "@mui/styles";
+import clsx from "clsx";
 import React, { memo, useMemo } from "react";
 
 import {
@@ -43,6 +44,9 @@ const useStyles = makeStyles<Theme>(() => ({
     gridTemplateRows: "repeat(4, auto)",
     gridAutoFlow: "row dense",
   },
+  legendContainerNoGroups: {
+    gridTemplateColumns: "1fr",
+  },
   legendGroup: {
     display: "flex",
     flexWrap: "wrap",
@@ -107,7 +111,12 @@ export const InteractiveLegendColor = () => {
   }, [colors]);
   const classes = useStyles();
   return (
-    <Flex className={classes.legendContainer}>
+    <Flex
+      className={clsx(
+        classes.legendContainer,
+        groups.length === 1 ? classes.legendContainerNoGroups : undefined
+      )}
+    >
       {groups.map((group) => {
         return (
           <div key={group.value}>
@@ -269,11 +278,16 @@ const LegendColorContent = ({
   symbol: LegendSymbol;
 }) => {
   const classes = useStyles();
-
+  const groupList = Array.from(groups.entries());
   return (
-    <Flex className={classes.legendContainer}>
+    <Flex
+      className={clsx(
+        classes.legendContainer,
+        groupList.length === 1 ? classes.legendContainerNoGroups : undefined
+      )}
+    >
       {groups
-        ? Array.from(groups.entries()).map(([g, colorValues]) => {
+        ? groupList.map(([g, colorValues]) => {
             const headerLabelsArray = g.map((n) => n.label);
 
             return (

From 685a84eba84e9b800c2e7d291b2d1c2880df7e04 Mon Sep 17 00:00:00 2001
From: Patrick Browne <pt.browne@gmail.com>
Date: Wed, 19 Oct 2022 11:22:42 +0200
Subject: [PATCH 06/28] feat: Add automatic segment sorting for columns stacked

---
 app/charts/chart-config-ui-options.ts         |  2 +
 app/charts/column/columns-stacked-state.tsx   | 88 +++++++------------
 .../components/chart-options-selector.tsx     |  4 +
 app/configurator/components/ui-helpers.ts     | 24 +++++
 app/configurator/config-types.ts              |  1 +
 app/utils/sorting-values.ts                   | 83 +++++++++++++++--
 6 files changed, 139 insertions(+), 63 deletions(-)

diff --git a/app/charts/chart-config-ui-options.ts b/app/charts/chart-config-ui-options.ts
index c5ea2e0f3..932733763 100644
--- a/app/charts/chart-config-ui-options.ts
+++ b/app/charts/chart-config-ui-options.ts
@@ -76,6 +76,7 @@ const SEGMENT_COMPONENT_TYPES: ComponentType[] = [
 ];
 
 export const AREA_SEGMENT_SORTING: EncodingSortingOption[] = [
+  { sortingType: "byAuto", sortingOrder: ["asc", "desc"] },
   { sortingType: "byDimensionLabel", sortingOrder: ["asc", "desc"] },
   { sortingType: "byTotalSize", sortingOrder: ["asc", "desc"] },
 ];
@@ -84,6 +85,7 @@ export const COLUMN_SEGMENT_SORTING: EncodingSortingOption[] =
   AREA_SEGMENT_SORTING;
 
 export const PIE_SEGMENT_SORTING: EncodingSortingOption[] = [
+  { sortingType: "byAuto", sortingOrder: ["asc", "desc"] },
   { sortingType: "byMeasure", sortingOrder: ["asc", "desc"] },
   { sortingType: "byDimensionLabel", sortingOrder: ["asc", "desc"] },
 ];
diff --git a/app/charts/column/columns-stacked-state.tsx b/app/charts/column/columns-stacked-state.tsx
index a538eb27f..d69d246d3 100644
--- a/app/charts/column/columns-stacked-state.tsx
+++ b/app/charts/column/columns-stacked-state.tsx
@@ -22,7 +22,7 @@ import {
   sum,
 } from "d3";
 import keyBy from "lodash/keyBy";
-import sortBy from "lodash/sortBy";
+import orderBy from "lodash/orderBy";
 import React, { ReactNode, useCallback, useMemo } from "react";
 
 import {
@@ -57,7 +57,7 @@ import {
 import { Observation } from "@/domain/data";
 import { useLocale } from "@/locales/use-locale";
 import { sortByIndex } from "@/utils/array";
-import { makeOrdinalDimensionSorter } from "@/utils/sorting-values";
+import { makeDimensionValueSorters } from "@/utils/sorting-values";
 
 export interface StackedColumnsState {
   chartType: "column";
@@ -185,64 +185,39 @@ const useColumnsStackedState = (
     getSegment,
   });
 
-  //Ordered segments
-  const segmentSortingType = fields.segment?.sorting?.sortingType;
-  const segmentSortingOrder = fields.segment?.sorting?.sortingOrder;
-
-  const segments = useMemo(() => {
-    const getSegmentsOrderedByName = () =>
-      Array.from(new Set(plottableSortedData.map((d) => getSegment(d)))).sort(
-        (a, b) =>
-          segmentSortingOrder === "asc"
-            ? a.localeCompare(b, locale)
-            : b.localeCompare(a, locale)
-      );
-
-    const dimension = dimensions.find(
-      (d) => d.iri === fields.segment?.componentIri
-    );
-    const getSegmentsOrderedByPosition = () => {
-      const segments = Array.from(
-        new Set(plottableSortedData.map((d) => getSegment(d)))
-      );
-      if (!dimension) {
-        return segments;
-      }
-      const sorter = makeOrdinalDimensionSorter(dimension);
-      return sortBy(segments, sorter);
-    };
-
-    const getSegmentsOrderedByTotalValue = () =>
-      [
+  const sumsBySegment = useMemo(
+    () =>
+      Object.fromEntries([
         ...rollup(
           plottableSortedData,
           (v) => sum(v, (x) => getY(x)),
           (x) => getSegment(x)
         ),
-      ]
-        .sort((a, b) =>
-          segmentSortingOrder === "asc"
-            ? ascending(a[1], b[1])
-            : descending(a[1], b[1])
-        )
-        .map((d) => d[0]);
+      ]),
+    [getSegment, getY, plottableSortedData]
+  );
 
-    if (dimension?.__typename === "OrdinalDimension") {
-      return getSegmentsOrderedByPosition();
-    }
+  const segments = useMemo(() => {
+    const uniqueSegments = Array.from(
+      new Set(plottableSortedData.map((d) => getSegment(d)))
+    );
+    const dimension = dimensions.find(
+      (d) => d.iri === fields.segment?.componentIri
+    );
 
-    return segmentSortingType === "byDimensionLabel"
-      ? getSegmentsOrderedByName()
-      : getSegmentsOrderedByTotalValue();
+    const sorters = makeDimensionValueSorters(dimension, {
+      sorting: fields?.segment?.sorting,
+      sumsBySegment,
+    });
+    return orderBy(uniqueSegments, sorters, sortingOrder);
   }, [
-    dimensions,
-    segmentSortingType,
     plottableSortedData,
-    getSegment,
-    segmentSortingOrder,
-    locale,
+    dimensions,
+    fields.segment?.sorting,
     fields.segment?.componentIri,
-    getY,
+    sumsBySegment,
+    sortingOrder,
+    getSegment,
   ]);
 
   const { segmentValuesByLabel, segmentValuesByValue } = useMemo(() => {
@@ -359,11 +334,14 @@ const useColumnsStackedState = (
 
   // stack order
   const series = useMemo(() => {
+    const sorting = fields.segment?.sorting;
+    const sortingType = sorting?.sortingType;
+    const sortingOrder = sorting?.sortingOrder;
     const stackOrder =
-      segmentSortingType === "byTotalSize" && segmentSortingOrder === "asc"
-        ? stackOrderAscending
-        : segmentSortingType === "byTotalSize" && segmentSortingOrder === "desc"
-        ? stackOrderDescending
+      sortingType === "byTotalSize"
+        ? sortingOrder === "asc"
+          ? stackOrderAscending
+          : stackOrderDescending
         : // Reverse segments here, so they're sorted from top to bottom
           stackOrderReverse;
 
@@ -378,7 +356,7 @@ const useColumnsStackedState = (
       }[]
     );
     return series;
-  }, [chartWideData, segmentSortingOrder, segmentSortingType, segments]);
+  }, [chartWideData, fields.segment?.sorting, segments]);
 
   /** Chart dimensions */
   const { left, bottom } = useChartPadding(
diff --git a/app/configurator/components/chart-options-selector.tsx b/app/configurator/components/chart-options-selector.tsx
index 19eb75def..6e92d4cf6 100644
--- a/app/configurator/components/chart-options-selector.tsx
+++ b/app/configurator/components/chart-options-selector.tsx
@@ -502,7 +502,11 @@ const ChartFieldSorting = ({
         return t({ id: "controls.sorting.byMeasure", message: `Measure` });
       case "byTotalSize":
         return t({ id: "controls.sorting.byTotalSize", message: `Total size` });
+      case "byAuto":
+        return t({ id: "controls.sorting.byAuto", message: `Automatic` });
       default:
+        const _sanityCheck: never = type;
+        console.warn(`Sorting type label is ${_sanityCheck}`);
         return t({ id: "controls.sorting.byDimensionLabel", message: `Name` });
     }
   };
diff --git a/app/configurator/components/ui-helpers.ts b/app/configurator/components/ui-helpers.ts
index 52c010e9f..2462d26be 100644
--- a/app/configurator/components/ui-helpers.ts
+++ b/app/configurator/components/ui-helpers.ts
@@ -633,6 +633,14 @@ const fieldLabels = {
     id: "controls.sorting.byDimensionLabel.ascending",
     message: "A → Z",
   }),
+  "controls.sorting.byAuto.ascending": defineMessage({
+    id: "controls.sorting.byDimensionLabel.ascending",
+    message: "A → Z",
+  }),
+  "controls.sorting.byAuto.descending": defineMessage({
+    id: "controls.sorting.byDimensionLabel.descending",
+    message: "Z → A",
+  }),
   "controls.sorting.byDimensionLabel.descending": defineMessage({
     id: "controls.sorting.byDimensionLabel.descending",
     message: "Z → A",
@@ -790,6 +798,22 @@ export function getFieldLabel(field: string): string {
     case "pie..byDimensionLabel.asc":
     case "sorting.byDimensionLabel.asc":
       return i18n._(fieldLabels["controls.sorting.byDimensionLabel.ascending"]);
+    case "bar.stacked.byAuto.asc":
+    case "bar.grouped.byAuto.asc":
+    case "column..byAuto.asc":
+    case "column.stacked.byAuto.asc":
+    case "column.grouped.byAuto.asc":
+    case "pie..byAuto.asc":
+    case "area..byAuto.asc":
+      return i18n._(fieldLabels["controls.sorting.byAuto.ascending"]);
+    case "bar.stacked.byAuto.desc":
+    case "bar.grouped.byAuto.desc":
+    case "column..byAuto.desc":
+    case "column.stacked.byAuto.desc":
+    case "column.grouped.byAuto.desc":
+    case "pie..byAuto.desc":
+    case "area..byAuto.desc":
+      return i18n._(fieldLabels["controls.sorting.byAuto.descending"]);
     case "bar.stacked.byDimensionLabel.desc":
     case "bar.grouped.byDimensionLabel.desc":
     case "column..byDimensionLabel.desc":
diff --git a/app/configurator/config-types.ts b/app/configurator/config-types.ts
index 0fa2734cc..a13dee283 100644
--- a/app/configurator/config-types.ts
+++ b/app/configurator/config-types.ts
@@ -128,6 +128,7 @@ const SortingType = t.union([
   t.literal("byDimensionLabel"),
   t.literal("byMeasure"),
   t.literal("byTotalSize"),
+  t.literal("byAuto"),
 ]);
 export type SortingType = t.TypeOf<typeof SortingType>;
 
diff --git a/app/utils/sorting-values.ts b/app/utils/sorting-values.ts
index ae40cb227..c6cbe574c 100644
--- a/app/utils/sorting-values.ts
+++ b/app/utils/sorting-values.ts
@@ -1,14 +1,81 @@
+import { SortingField } from "@/configurator";
+import { DimensionValue } from "@/domain/data";
+
 import { DataCubeObservationsQuery } from "../graphql/query-hooks";
 
-export const makeOrdinalDimensionSorter = (
-  dimension: NonNullable<
-    DataCubeObservationsQuery["dataCubeByIri"]
-  >["dimensions"][number]
-) => {
-  const positionsByLabel = new Map<string, number | undefined>(
-    dimension.values.map((v) => [v.label, v.position])
+const maybeInt = (s?: string) => {
+  if (!s) {
+    return Infinity;
+  }
+  try {
+    return parseInt(s, 10);
+  } catch {
+    return s;
+  }
+};
+
+export const makeDimensionValueSorters = (
+  dimension:
+    | NonNullable<
+        DataCubeObservationsQuery["dataCubeByIri"]
+      >["dimensions"][number]
+    | undefined,
+  options: {
+    sorting?: NonNullable<SortingField["sorting"]> | undefined;
+    sumsBySegment?: Record<string, number | null>;
+    measureBySegment?: Record<string, number | null>;
+  } = {}
+): ((label: DimensionValue["label"]) => string | undefined | number)[] => {
+  const { sorting, sumsBySegment, measureBySegment } = options;
+  const sortingType = sorting?.sortingType;
+
+  if (!dimension) {
+    return [];
+  }
+  const valuesByLabel = new Map<string, DimensionValue>(
+    dimension.values.map((v) => [v.label, v])
   );
-  return (label?: string) => (label ? positionsByLabel.get(label) ?? -1 : -1);
+
+  const getLabel = (label?: string) => label;
+  const getIdentifier = (label?: string) => {
+    const identifier = label
+      ? maybeInt(valuesByLabel.get(label)?.identifier) ?? Infinity
+      : Infinity;
+    return identifier;
+  };
+  const getPosition = (label?: string) =>
+    label ? valuesByLabel.get(label)?.position ?? Infinity : Infinity;
+
+  const getSum = (label?: string) =>
+    label ? sumsBySegment?.[label] ?? Infinity : Infinity;
+
+  const getMeasure = (label?: string) =>
+    label ? measureBySegment?.[label] ?? Infinity : Infinity;
+
+  let sorters: ((
+    dv: DimensionValue["label"]
+  ) => string | undefined | number)[] = [];
+
+  const defaultSorters = [getIdentifier, getPosition];
+
+  switch (sortingType) {
+    case "byDimensionLabel":
+      sorters = [getLabel];
+      break;
+    case "byTotalSize":
+      sorters = [getSum];
+      break;
+    case "byMeasure":
+      sorters = [getMeasure];
+      break;
+    case "byAuto":
+      sorters = [getIdentifier, getPosition];
+      break;
+    default:
+      sorters = defaultSorters;
+  }
+
+  return sorters;
 };
 
 interface Value {

From 8a823a943b4acd96f381092d4b32d333561173c9 Mon Sep 17 00:00:00 2001
From: Patrick Browne <pt.browne@gmail.com>
Date: Wed, 19 Oct 2022 14:19:29 +0200
Subject: [PATCH 07/28] feat: Add automatic sorting for column grouped

---
 app/charts/column/columns-grouped-state.tsx | 87 ++++++++-------------
 1 file changed, 32 insertions(+), 55 deletions(-)

diff --git a/app/charts/column/columns-grouped-state.tsx b/app/charts/column/columns-grouped-state.tsx
index 0e9b769b2..9268be4bd 100644
--- a/app/charts/column/columns-grouped-state.tsx
+++ b/app/charts/column/columns-grouped-state.tsx
@@ -1,6 +1,4 @@
 import {
-  ascending,
-  descending,
   extent,
   group,
   max,
@@ -18,7 +16,7 @@ import {
 } from "d3";
 import get from "lodash/get";
 import keyBy from "lodash/keyBy";
-import sortBy from "lodash/sortBy";
+import orderBy from "lodash/orderBy";
 import React, { ReactNode, useCallback, useMemo } from "react";
 
 import {
@@ -44,7 +42,7 @@ import { ChartContext, ChartProps } from "@/charts/shared/use-chart-state";
 import { InteractionProvider } from "@/charts/shared/use-interaction";
 import { useInteractiveFilters } from "@/charts/shared/use-interactive-filters";
 import { Bounds, Observer, useWidth } from "@/charts/shared/use-width";
-import { ColumnFields, SortingOrder, SortingType } from "@/configurator";
+import { ColumnFields } from "@/configurator";
 import {
   formatNumberWithUnit,
   getPalette,
@@ -56,7 +54,7 @@ import {
 import { Observation } from "@/domain/data";
 import { useLocale } from "@/locales/use-locale";
 import { sortByIndex } from "@/utils/array";
-import { makeOrdinalDimensionSorter } from "@/utils/sorting-values";
+import { makeDimensionValueSorters } from "@/utils/sorting-values";
 
 export interface GroupedColumnsState {
   chartType: "column";
@@ -146,7 +144,7 @@ const useGroupedColumnsState = (
   const xSortingType = fields.x.sorting?.sortingType;
   const xSortingOrder = fields.x.sorting?.sortingOrder;
 
-  // All data
+  // Group by X
   const sortedData = useMemo(() => {
     const xOrder = [
       ...rollup(
@@ -185,59 +183,37 @@ const useGroupedColumnsState = (
   const segmentSortingType = fields.segment?.sorting?.sortingType;
   const segmentSortingOrder = fields.segment?.sorting?.sortingOrder;
 
-  const segments = useMemo(() => {
-    const getSegmentsOrderedByName = () =>
-      Array.from(new Set(plottableSortedData.map((d) => getSegment(d)))).sort(
-        (a, b) =>
-          segmentSortingOrder === "asc"
-            ? a.localeCompare(b, locale)
-            : b.localeCompare(a, locale)
-      );
+  const sumsBySegment = useMemo(() => {
+    return Object.fromEntries([
+      ...rollup(
+        plottableSortedData,
+        (v) => sum(v, (x) => getY(x)),
+        (x) => getSegment(x)
+      ),
+    ]);
+  }, [plottableSortedData, getY, getSegment]);
 
+  const segments = useMemo(() => {
+    const uniqueSegments = Array.from(
+      new Set(plottableSortedData.map((d) => getSegment(d)))
+    );
     const dimension = dimensions.find(
       (d) => d.iri === fields.segment?.componentIri
     );
+    const sorters = makeDimensionValueSorters(dimension, {
+      sorting: fields?.segment?.sorting,
+      sumsBySegment,
+    });
 
-    const getSegmentsOrderedByPosition = () => {
-      const segments = Array.from(
-        new Set(plottableSortedData.map((d) => getSegment(d)))
-      );
-      if (!dimension) {
-        return segments;
-      }
-      const sorter = makeOrdinalDimensionSorter(dimension);
-      return sortBy(segments, sorter);
-    };
-
-    const getSegmentsOrderedByTotalValue = () =>
-      [
-        ...rollup(
-          plottableSortedData,
-          (v) => sum(v, (x) => getY(x)),
-          (x) => getSegment(x)
-        ),
-      ]
-        .sort((a, b) =>
-          segmentSortingOrder === "asc"
-            ? ascending(a[1], b[1])
-            : descending(a[1], b[1])
-        )
-        .map((d) => d[0]);
-    if (dimension?.__typename === "OrdinalDimension") {
-      return getSegmentsOrderedByPosition();
-    }
-    return segmentSortingType === "byDimensionLabel"
-      ? getSegmentsOrderedByName()
-      : getSegmentsOrderedByTotalValue();
+    return orderBy(uniqueSegments, sorters, xSortingOrder || "asc");
   }, [
+    plottableSortedData,
     dimensions,
+    fields.segment?.sorting,
     fields.segment?.componentIri,
+    sumsBySegment,
+    xSortingOrder,
     getSegment,
-    getY,
-    locale,
-    segmentSortingOrder,
-    segmentSortingType,
-    plottableSortedData,
   ]);
 
   /* Scales */
@@ -287,9 +263,10 @@ const useGroupedColumnsState = (
     const xScaleIn = scaleBand().domain(segments).padding(PADDING_WITHIN);
 
     // x as time, needs to be memoized!
-    const xEntireDomainAsTime = extent(plottableSortedData, (d) =>
-      getXAsDate(d)
-    ) as [Date, Date];
+    const xEntireDomainAsTime = extent(sortedData, (d) => getXAsDate(d)) as [
+      Date,
+      Date
+    ];
     const xEntireScale = scaleTime().domain(xEntireDomainAsTime);
 
     // y
@@ -328,7 +305,7 @@ const useGroupedColumnsState = (
     getXAsDate,
     getY,
     getYErrorRange,
-    plottableSortedData,
+    sortedData,
     preparedData,
     segments,
   ]);
@@ -466,7 +443,7 @@ const useGroupedColumnsState = (
   return {
     chartType: "column",
     preparedData,
-    allData: plottableSortedData,
+    allData: sortedData,
     bounds,
     getX,
     getXAsDate,

From 81d81267e88606451b3272df9ec424f76d646cb4 Mon Sep 17 00:00:00 2001
From: Patrick Browne <pt.browne@gmail.com>
Date: Wed, 19 Oct 2022 14:42:16 +0200
Subject: [PATCH 08/28] refactor: Use orderBy for group sorting

---
 app/charts/column/columns-grouped-state.tsx | 29 +++++++++------------
 1 file changed, 13 insertions(+), 16 deletions(-)

diff --git a/app/charts/column/columns-grouped-state.tsx b/app/charts/column/columns-grouped-state.tsx
index 9268be4bd..d5770a548 100644
--- a/app/charts/column/columns-grouped-state.tsx
+++ b/app/charts/column/columns-grouped-state.tsx
@@ -1,4 +1,5 @@
 import {
+  ascending,
   extent,
   group,
   max,
@@ -42,7 +43,7 @@ import { ChartContext, ChartProps } from "@/charts/shared/use-chart-state";
 import { InteractionProvider } from "@/charts/shared/use-interaction";
 import { useInteractiveFilters } from "@/charts/shared/use-interactive-filters";
 import { Bounds, Observer, useWidth } from "@/charts/shared/use-width";
-import { ColumnFields } from "@/configurator";
+import { ColumnFields, SortingField } from "@/configurator";
 import {
   formatNumberWithUnit,
   getPalette,
@@ -141,7 +142,7 @@ const useGroupedColumnsState = (
   );
 
   // Sort
-  const xSortingType = fields.x.sorting?.sortingType;
+  const xSorting = fields.x.sorting;
   const xSortingOrder = fields.x.sorting?.sortingOrder;
 
   // Group by X
@@ -158,11 +159,10 @@ const useGroupedColumnsState = (
     return sortData({
       data,
       getX,
-      xSortingType,
-      xSortingOrder,
+      xSorting,
       xOrder,
     });
-  }, [data, getX, xSortingType, xSortingOrder, getY]);
+  }, [data, getX, xSorting, getY]);
 
   const plottableSortedData = usePlottableData({
     data: sortedData,
@@ -533,30 +533,27 @@ export const GroupedColumnChart = ({
 const sortData = ({
   data,
   getX,
-  xSortingType,
-  xSortingOrder,
   xOrder,
+  xSorting,
 }: {
   data: Observation[];
   getX: (d: Observation) => string;
-  xSortingType: SortingType | undefined;
-  xSortingOrder: SortingOrder | undefined;
   xOrder: string[];
+  xSorting: SortingField["sorting"];
 }) => {
-  if (xSortingOrder === "desc" && xSortingType === "byDimensionLabel") {
-    return [...data].sort((a, b) => descending(getX(a), getX(b)));
-  } else if (xSortingOrder === "asc" && xSortingType === "byDimensionLabel") {
-    return [...data].sort((a, b) => ascending(getX(a), getX(b)));
-  } else if (xSortingType === "byMeasure") {
+  const { sortingType, sortingOrder } = xSorting || {};
+  if (sortingType === "byDimensionLabel") {
+    return orderBy(data, getX, sortingOrder);
+  } else if (sortingType === "byMeasure") {
     const sd = sortByIndex({
       data,
       order: xOrder,
       getCategory: getX,
-      sortOrder: xSortingOrder,
+      sortOrder: sortingOrder,
     });
     return sd;
   } else {
     // default to scending alphabetical
-    return [...data].sort((a, b) => ascending(getX(a), getX(b)));
+    return orderBy(data, getX, "asc");
   }
 };

From 9a1f0b232e1339f8492aa9d2b68e2cadaa0b24e4 Mon Sep 17 00:00:00 2001
From: Patrick Browne <pt.browne@gmail.com>
Date: Wed, 19 Oct 2022 15:09:08 +0200
Subject: [PATCH 09/28] feat: Add automatic segment ordering for line chart

---
 app/charts/line/lines-state.tsx | 15 +++++----------
 1 file changed, 5 insertions(+), 10 deletions(-)

diff --git a/app/charts/line/lines-state.tsx b/app/charts/line/lines-state.tsx
index 427d9837b..0922644f3 100644
--- a/app/charts/line/lines-state.tsx
+++ b/app/charts/line/lines-state.tsx
@@ -12,7 +12,7 @@ import {
   scaleTime,
 } from "d3";
 import keyBy from "lodash/keyBy";
-import sortBy from "lodash/sortBy";
+import orderBy from "lodash/orderBy";
 import { ReactNode, useCallback, useMemo } from "react";
 
 import { LEFT_MARGIN_OFFSET } from "@/charts/line/constants";
@@ -44,7 +44,7 @@ import { Observation } from "@/domain/data";
 import { useTheme } from "@/themes";
 import { sortByIndex } from "@/utils/array";
 import { estimateTextWidth } from "@/utils/estimate-text-width";
-import { makeOrdinalDimensionSorter } from "@/utils/sorting-values";
+import { makeDimensionValueSorters } from "@/utils/sorting-values";
 
 export interface LinesState {
   chartType: "line";
@@ -214,17 +214,12 @@ const useLinesState = (
 
   // segments
   const segments = useMemo(() => {
-    const segments = [...new Set(plottableSortedData.map(getSegment))].sort(
-      (a, b) => ascending(a, b)
-    );
+    const uniqueSegments = [...new Set(plottableSortedData.map(getSegment))];
     const dimension = dimensions.find(
       (d) => d.iri === fields?.segment?.componentIri
     );
-    if (dimension?.__typename === "OrdinalDimension") {
-      const sorter = makeOrdinalDimensionSorter(dimension);
-      return sortBy(segments, sorter);
-    }
-    return segments;
+    const sorters = makeDimensionValueSorters(dimension);
+    return orderBy(uniqueSegments, sorters, "asc");
   }, [
     dimensions,
     fields?.segment?.componentIri,

From b2b23fc6db2e9d46c5ee9b77152f9a8bfc500a3f Mon Sep 17 00:00:00 2001
From: Patrick Browne <pt.browne@gmail.com>
Date: Wed, 19 Oct 2022 15:09:14 +0200
Subject: [PATCH 10/28] feat: Add automatic ordering for areas

---
 app/charts/area/areas-state.tsx | 79 +++++++++++++--------------------
 1 file changed, 30 insertions(+), 49 deletions(-)

diff --git a/app/charts/area/areas-state.tsx b/app/charts/area/areas-state.tsx
index f80ab4dcd..abce4dc4e 100644
--- a/app/charts/area/areas-state.tsx
+++ b/app/charts/area/areas-state.tsx
@@ -1,6 +1,5 @@
 import {
   ascending,
-  descending,
   extent,
   group,
   max,
@@ -19,7 +18,7 @@ import {
   sum,
 } from "d3";
 import keyBy from "lodash/keyBy";
-import sortBy from "lodash/sortBy";
+import orderBy from "lodash/orderBy";
 import { ReactNode, useCallback, useMemo } from "react";
 
 import { LEFT_MARGIN_OFFSET } from "@/charts/area/constants";
@@ -52,7 +51,7 @@ import { Observation } from "@/domain/data";
 import { useLocale } from "@/locales/use-locale";
 import { sortByIndex } from "@/utils/array";
 import { estimateTextWidth } from "@/utils/estimate-text-width";
-import { makeOrdinalDimensionSorter } from "@/utils/sorting-values";
+import { makeDimensionValueSorters } from "@/utils/sorting-values";
 
 export interface AreasState {
   chartType: "area";
@@ -211,60 +210,42 @@ const useAreasState = (
   const yAxisDescription = yMeasure.description || undefined;
 
   /** Ordered segments */
-  const segmentSortingType = fields.segment?.sorting?.sortingType;
-  const segmentSortingOrder = fields.segment?.sorting?.sortingOrder;
+  const segmentSorting = fields.segment?.sorting;
+  const segmentSortingType = segmentSorting?.sortingType;
+  const segmentSortingOrder = segmentSorting?.sortingOrder;
 
   const segments = useMemo(() => {
-    const getSegmentsOrderedByName = () =>
-      Array.from(new Set(plottableSortedData.map((d) => getSegment(d)))).sort(
-        (a, b) =>
-          segmentSortingOrder === "asc"
-            ? a.localeCompare(b, locale)
-            : b.localeCompare(a, locale)
-      );
-
-    const getSegmentsOrderedByTotalValue = () =>
-      [
-        ...rollup(
-          plottableSortedData,
-          (v) => sum(v, (x) => getY(x)),
-          (x) => getSegment(x)
-        ),
-      ]
-        .sort((a, b) =>
-          segmentSortingOrder === "asc"
-            ? ascending(a[1], b[1])
-            : descending(a[1], b[1])
-        )
-        .map((d) => d[0]);
-
-    const getSegmentsOrderedByPosition = () => {
-      const segments = Array.from(
-        new Set(plottableSortedData.map((d) => getSegment(d)))
-      );
-      const sorter = dimension ? makeOrdinalDimensionSorter(dimension) : null;
-      return sorter ? sortBy(segments, sorter) : segments;
-    };
-
+    const totalValueBySegment = Object.fromEntries([
+      ...rollup(
+        plottableSortedData,
+        (v) => sum(v, (x) => getY(x)),
+        (x) => getSegment(x)
+      ),
+    ]);
+
+    const uniqueSegments = Array.from(
+      new Set(plottableSortedData.map((d) => getSegment(d)))
+    );
     const dimension = dimensions.find(
       (dim) => dim.iri === fields.segment?.componentIri
     );
-    if (dimension?.__typename === "OrdinalDimension") {
-      return getSegmentsOrderedByPosition();
-    }
-
-    return segmentSortingType === "byDimensionLabel"
-      ? getSegmentsOrderedByName()
-      : getSegmentsOrderedByTotalValue();
+    const sorters = makeDimensionValueSorters(dimension, {
+      sorting: segmentSorting,
+      sumsBySegment: totalValueBySegment,
+    });
+    return orderBy(
+      uniqueSegments,
+      sorters,
+      segmentSortingOrder === "desc" ? "desc" : "asc"
+    );
   }, [
+    plottableSortedData,
     dimensions,
-    fields.segment?.componentIri,
-    getSegment,
-    getY,
-    locale,
+    segmentSorting,
     segmentSortingOrder,
-    segmentSortingType,
-    plottableSortedData,
+    getY,
+    getSegment,
+    fields.segment?.componentIri,
   ]);
 
   /** Transform data  */

From bc780a6227ecc339356c480bfa54e8eb9f4ba810 Mon Sep 17 00:00:00 2001
From: Patrick Browne <pt.browne@gmail.com>
Date: Wed, 19 Oct 2022 15:19:00 +0200
Subject: [PATCH 11/28] feat: Add automatic ordering for pie state

---
 app/charts/pie/pie-state.tsx | 137 +++++++++++++++++------------------
 1 file changed, 67 insertions(+), 70 deletions(-)

diff --git a/app/charts/pie/pie-state.tsx b/app/charts/pie/pie-state.tsx
index 6f09182dd..8465a7d41 100644
--- a/app/charts/pie/pie-state.tsx
+++ b/app/charts/pie/pie-state.tsx
@@ -1,7 +1,6 @@
 import {
   arc,
   ascending,
-  descending,
   pie,
   Pie,
   PieArcDatum,
@@ -9,6 +8,7 @@ import {
   scaleOrdinal,
 } from "d3";
 import keyBy from "lodash/keyBy";
+import orderBy from "lodash/orderBy";
 import React, { ReactNode, useMemo, useCallback } from "react";
 
 import {
@@ -23,41 +23,14 @@ import { ChartContext, ChartProps } from "@/charts/shared/use-chart-state";
 import { InteractionProvider } from "@/charts/shared/use-interaction";
 import { useInteractiveFilters } from "@/charts/shared/use-interactive-filters";
 import { Bounds, Observer, useWidth } from "@/charts/shared/use-width";
-import { PieFields, SortingOrder, SortingType } from "@/configurator";
+import { PieFields } from "@/configurator";
 import {
   formatNumberWithUnit,
   getPalette,
   useFormatNumber,
 } from "@/configurator/components/ui-helpers";
-import { Observation } from "@/domain/data";
-
-const sortData = ({
-  data,
-  getX,
-  getY,
-  sortingType,
-  sortingOrder,
-}: {
-  data: Observation[];
-  getX: (d: Observation) => string;
-  getY: (d: Observation) => number | null;
-  sortingType?: SortingType;
-  sortingOrder?: SortingOrder;
-}) => {
-  if (sortingOrder === "desc" && sortingType === "byDimensionLabel") {
-    return [...data].sort((a, b) => descending(getX(a), getX(b)));
-  } else if (sortingOrder === "asc" && sortingType === "byDimensionLabel") {
-    return [...data].sort((a, b) => ascending(getX(a), getX(b)));
-  } else if (sortingOrder === "desc" && sortingType === "byMeasure") {
-    return [...data].sort((a, b) => descending(getY(a) ?? -1, getY(b) ?? -1));
-  } else if (sortingOrder === "asc" && sortingType === "byMeasure") {
-    return [...data].sort((a, b) => ascending(getY(a) ?? -1, getY(b) ?? -1));
-  } else {
-    // default to ascending byDimensionLabel
-    return [...data].sort((a, b) => ascending(getX(a), getX(b)));
-  }
-};
-
+import { DimensionValue, Observation } from "@/domain/data";
+import { makeDimensionValueSorters } from "@/utils/sorting-values";
 export interface PieState {
   bounds: Bounds;
   data: Observation[];
@@ -100,51 +73,64 @@ const usePieState = (
   const getX = useSegment(fields.segment.componentIri);
 
   // Sort data
-  const sortingType = fields.segment.sorting?.sortingType;
   const sortingOrder = fields.segment.sorting?.sortingOrder;
 
   // Data actually sorted in pie(),
-  // Sorting here only useful to legend items.
-  const sortedData = useMemo(() => {
-    return sortData({ data, sortingType, sortingOrder, getX, getY });
-  }, [data, getX, getY, sortingType, sortingOrder]);
-
-  const plottableSortedData = usePlottableData({
-    data: sortedData,
+  const plottableData = usePlottableData({
+    data: data,
     plotters: [getY],
   });
 
   // Apply end-user-activated interactive filters to the stack
   const preparedData = usePreparedData({
     legendFilterActive: interactiveFiltersConfig?.legend.active,
-    sortedData: plottableSortedData,
+    sortedData: data,
     interactiveFilters,
     getSegment: getX,
   });
 
-  const { segmentValuesByValue, segmentDimension } = useMemo(() => {
-    const segmentDimension = dimensions.find(
-      (d) => d.iri === fields.segment?.componentIri
-    ) as $FixMe;
-    return {
-      segmentDimension,
-      segmentValuesByValue: keyBy(segmentDimension.values, (x) => x.value),
-      segmentValuesByLabel: keyBy(segmentDimension.values, (x) => x.label),
-    };
-  }, [dimensions, fields.segment?.componentIri]);
+  const { segmentValuesByValue, segmentDimension, segmentValuesByLabel } =
+    useMemo(() => {
+      const segmentDimension = dimensions.find(
+        (d) => d.iri === fields.segment?.componentIri
+      ) as $FixMe;
+      return {
+        segmentDimension,
+        segmentValuesByValue: keyBy(
+          segmentDimension.values as DimensionValue[] as DimensionValue[],
+          (x) => x.value
+        ),
+        segmentValuesByLabel: keyBy(
+          segmentDimension.values as DimensionValue[],
+          (x) => x.label
+        ),
+      };
+    }, [dimensions, fields.segment?.componentIri]);
 
   // Map ordered segments to colors
   const colors = useMemo(() => {
     const colors = scaleOrdinal<string, string>();
-    const segments = Array.from(
-      new Set(plottableSortedData.map((d) => getX(d)))
+    const measureBySegment = Object.fromEntries(
+      plottableData.map((d) => [getX(d), getY(d)])
+    );
+    const uniqueSegments = Object.entries(measureBySegment)
+      .filter((x) => x[1])
+      .map((x) => x[0]);
+
+    const sorters = makeDimensionValueSorters(segmentDimension, {
+      sorting: fields.segment.sorting,
+      measureBySegment,
+    });
+
+    const segments = orderBy(
+      uniqueSegments,
+      sorters,
+      sortingOrder === "desc" ? "desc" : "asc"
     );
 
     if (fields.segment && segmentDimension && fields.segment.colorMapping) {
       const orderedSegmentLabelsAndColors = segments.map((segment) => {
-        const dvIri = segmentDimension.values.find(
-          (s: $FixMe) => s.label === segment
-        ).value;
+        const dvIri = segmentValuesByLabel[segment]?.value;
 
         return {
           label: segment,
@@ -158,8 +144,19 @@ const usePieState = (
       colors.domain(segments);
       colors.range(getPalette(fields.segment?.palette));
     }
+    // Do not let the scale be implicitly extended by children calling it
+    // on unknown values
+    colors.unknown(() => undefined);
     return colors;
-  }, [fields.segment, getX, plottableSortedData, segmentDimension]);
+  }, [
+    fields.segment,
+    getX,
+    getY,
+    plottableData,
+    segmentDimension,
+    segmentValuesByLabel,
+    sortingOrder,
+  ]);
 
   const getSegmentLabel = useCallback(
     (segment: string): string => {
@@ -196,22 +193,22 @@ const usePieState = (
     .outerRadius(outerRadius);
 
   // Pie data
+  // Sort the pie according to the segments
+  const pieSorter = useMemo(() => {
+    const segments = colors.domain();
+    const segmentIndex = Object.fromEntries(segments.map((s, i) => [s, i]));
+    return (a: Observation, b: Observation) => {
+      // We do not actually use segment sort order here, because the ascending/descending
+      // has already been done when segments where sorted
+      return ascending(
+        segmentIndex[getX(a)] ?? -1,
+        segmentIndex[getX(b)] ?? -1
+      );
+    };
+  }, [colors, getX]);
   const getPieData = pie<Observation>()
     .value((d) => getY(d) ?? NaN)
-    .sort((a, b) => {
-      if (sortingOrder === "desc" && sortingType === "byDimensionLabel") {
-        return descending(getX(a), getX(b));
-      } else if (sortingOrder === "asc" && sortingType === "byDimensionLabel") {
-        return ascending(getX(a), getX(b));
-      } else if (sortingOrder === "desc" && sortingType === "byMeasure") {
-        return descending(getY(a) ?? -1, getY(b) ?? -1);
-      } else if (sortingOrder === "asc" && sortingType === "byMeasure") {
-        return ascending(getY(a) ?? -1, getY(b) ?? -1);
-      } else {
-        // default to ascending byDimensionLabel
-        return ascending(getX(a), getX(b));
-      }
-    });
+    .sort(pieSorter);
 
   const formatters = useChartFormatters(chartProps);
   const valueFormatter = (value: number | null) =>

From 393efe408185e2a4d13900bfdbfd13e6e5b48465 Mon Sep 17 00:00:00 2001
From: Patrick Browne <pt.browne@gmail.com>
Date: Wed, 19 Oct 2022 17:10:29 +0200
Subject: [PATCH 12/28] feat: Use new sorters for columns state

---
 app/charts/area/areas-state.tsx             |  2 --
 app/charts/column/columns-grouped-state.tsx |  3 ---
 app/charts/column/columns-stacked-state.tsx |  2 --
 app/charts/column/columns-state.tsx         | 22 +++++++++++++--------
 4 files changed, 14 insertions(+), 15 deletions(-)

diff --git a/app/charts/area/areas-state.tsx b/app/charts/area/areas-state.tsx
index abce4dc4e..ce6c44eb5 100644
--- a/app/charts/area/areas-state.tsx
+++ b/app/charts/area/areas-state.tsx
@@ -48,7 +48,6 @@ import {
   useTimeFormatUnit,
 } from "@/configurator/components/ui-helpers";
 import { Observation } from "@/domain/data";
-import { useLocale } from "@/locales/use-locale";
 import { sortByIndex } from "@/utils/array";
 import { estimateTextWidth } from "@/utils/estimate-text-width";
 import { makeDimensionValueSorters } from "@/utils/sorting-values";
@@ -91,7 +90,6 @@ const useAreasState = (
     interactiveFiltersConfig,
     aspectRatio,
   } = chartProps;
-  const locale = useLocale();
   const width = useWidth();
   const formatNumber = useFormatNumber();
   const timeFormatUnit = useTimeFormatUnit();
diff --git a/app/charts/column/columns-grouped-state.tsx b/app/charts/column/columns-grouped-state.tsx
index d5770a548..04801afac 100644
--- a/app/charts/column/columns-grouped-state.tsx
+++ b/app/charts/column/columns-grouped-state.tsx
@@ -53,7 +53,6 @@ import {
   useFormatNumber,
 } from "@/configurator/components/ui-helpers";
 import { Observation } from "@/domain/data";
-import { useLocale } from "@/locales/use-locale";
 import { sortByIndex } from "@/utils/array";
 import { makeDimensionValueSorters } from "@/utils/sorting-values";
 
@@ -100,7 +99,6 @@ const useGroupedColumnsState = (
     interactiveFiltersConfig,
     aspectRatio,
   } = chartProps;
-  const locale = useLocale();
   const width = useWidth();
   const formatNumber = useFormatNumber();
 
@@ -180,7 +178,6 @@ const useGroupedColumnsState = (
   });
 
   // segments
-  const segmentSortingType = fields.segment?.sorting?.sortingType;
   const segmentSortingOrder = fields.segment?.sorting?.sortingOrder;
 
   const sumsBySegment = useMemo(() => {
diff --git a/app/charts/column/columns-stacked-state.tsx b/app/charts/column/columns-stacked-state.tsx
index d69d246d3..09a513ad3 100644
--- a/app/charts/column/columns-stacked-state.tsx
+++ b/app/charts/column/columns-stacked-state.tsx
@@ -55,7 +55,6 @@ import {
   useFormatNumber,
 } from "@/configurator/components/ui-helpers";
 import { Observation } from "@/domain/data";
-import { useLocale } from "@/locales/use-locale";
 import { sortByIndex } from "@/utils/array";
 import { makeDimensionValueSorters } from "@/utils/sorting-values";
 
@@ -102,7 +101,6 @@ const useColumnsStackedState = (
     interactiveFiltersConfig,
     aspectRatio,
   } = chartProps;
-  const locale = useLocale();
   const width = useWidth();
   const formatNumber = useFormatNumber();
   const [interactiveFilters] = useInteractiveFilters();
diff --git a/app/charts/column/columns-state.tsx b/app/charts/column/columns-state.tsx
index 0346f000a..771b08419 100644
--- a/app/charts/column/columns-state.tsx
+++ b/app/charts/column/columns-state.tsx
@@ -15,7 +15,7 @@ import {
 } from "d3";
 import get from "lodash/get";
 import keyBy from "lodash/keyBy";
-import sortBy from "lodash/sortBy";
+import orderBy from "lodash/orderBy";
 import { ReactNode, useCallback, useMemo } from "react";
 
 import {
@@ -53,7 +53,7 @@ import {
 } from "@/configurator/components/ui-helpers";
 import { Observation } from "@/domain/data";
 import { TimeUnit } from "@/graphql/query-hooks";
-import { makeOrdinalDimensionSorter } from "@/utils/sorting-values";
+import { makeDimensionValueSorters } from "@/utils/sorting-values";
 
 export interface ColumnsState {
   chartType: "column";
@@ -263,12 +263,18 @@ const useColumnsState = (
     const segmentDimension = dimensions.find(
       (d) => d.iri === fields.segment?.componentIri
     );
-    const sorter =
-      segmentDimension?.__typename === "OrdinalDimension"
-        ? makeOrdinalDimensionSorter(segmentDimension)
-        : null;
-    return sorter ? sortBy(rawSegments, sorter) : rawSegments;
-  }, [fields.segment?.palette, fields.segment?.componentIri, dimensions]);
+    const sorters = makeDimensionValueSorters(segmentDimension);
+    return orderBy(
+      rawSegments,
+      sorters,
+      fields.segment?.sorting?.sortingOrder === "desc" ? "desc" : "asc"
+    );
+  }, [
+    fields.segment?.palette,
+    fields.segment?.sorting?.sortingOrder,
+    fields.segment?.componentIri,
+    dimensions,
+  ]);
   const colors = scaleOrdinal(sortedSegments).domain(segments);
 
   // Tooltip

From 09e9589644aaffb89c58ebc1b8a8f2248584fd6d Mon Sep 17 00:00:00 2001
From: Patrick Browne <pt.browne@gmail.com>
Date: Thu, 20 Oct 2022 08:50:06 +0200
Subject: [PATCH 13/28] fix: Could not change sort order on columns state

Mistake between x sorting and segment sorting
---
 app/charts/column/columns-grouped-state.tsx | 12 ++++++++----
 app/charts/column/columns-stacked-state.tsx | 20 ++++++++++++--------
 2 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/app/charts/column/columns-grouped-state.tsx b/app/charts/column/columns-grouped-state.tsx
index 04801afac..990ca71f7 100644
--- a/app/charts/column/columns-grouped-state.tsx
+++ b/app/charts/column/columns-grouped-state.tsx
@@ -141,7 +141,6 @@ const useGroupedColumnsState = (
 
   // Sort
   const xSorting = fields.x.sorting;
-  const xSortingOrder = fields.x.sorting?.sortingOrder;
 
   // Group by X
   const sortedData = useMemo(() => {
@@ -197,19 +196,24 @@ const useGroupedColumnsState = (
     const dimension = dimensions.find(
       (d) => d.iri === fields.segment?.componentIri
     );
+
+    const sorting = fields?.segment?.sorting;
     const sorters = makeDimensionValueSorters(dimension, {
-      sorting: fields?.segment?.sorting,
+      sorting,
       sumsBySegment,
     });
 
-    return orderBy(uniqueSegments, sorters, xSortingOrder || "asc");
+    return orderBy(
+      uniqueSegments,
+      sorters,
+      sorting?.sortingOrder === "desc" ? "desc" : "asc"
+    );
   }, [
     plottableSortedData,
     dimensions,
     fields.segment?.sorting,
     fields.segment?.componentIri,
     sumsBySegment,
-    xSortingOrder,
     getSegment,
   ]);
 
diff --git a/app/charts/column/columns-stacked-state.tsx b/app/charts/column/columns-stacked-state.tsx
index 09a513ad3..31dbee920 100644
--- a/app/charts/column/columns-stacked-state.tsx
+++ b/app/charts/column/columns-stacked-state.tsx
@@ -121,8 +121,8 @@ const useColumnsStackedState = (
   const xKey = fields.x.componentIri;
 
   // All Data
-  const sortingType = fields.x.sorting?.sortingType;
-  const sortingOrder = fields.x.sorting?.sortingOrder;
+  const xSortingType = fields.x.sorting?.sortingType;
+  const xSortingOrder = fields.x.sorting?.sortingOrder;
 
   const allDataGroupedByX = useMemo(() => group(data, getX), [data, getX]);
   const allDataWide = useMemo(
@@ -149,11 +149,11 @@ const useColumnsStackedState = (
       sortData({
         data,
         getX,
-        sortingType,
-        sortingOrder,
+        sortingType: xSortingType,
+        sortingOrder: xSortingOrder,
         xOrder,
       }),
-    [data, getX, sortingType, sortingOrder, xOrder]
+    [data, getX, xSortingType, xSortingOrder, xOrder]
   );
 
   const plottableSortedData = usePlottableData({
@@ -203,18 +203,22 @@ const useColumnsStackedState = (
       (d) => d.iri === fields.segment?.componentIri
     );
 
+    const sorting = fields?.segment?.sorting;
     const sorters = makeDimensionValueSorters(dimension, {
-      sorting: fields?.segment?.sorting,
+      sorting,
       sumsBySegment,
     });
-    return orderBy(uniqueSegments, sorters, sortingOrder);
+    return orderBy(
+      uniqueSegments,
+      sorters,
+      sorting?.sortingOrder === "desc" ? "desc" : "asc"
+    );
   }, [
     plottableSortedData,
     dimensions,
     fields.segment?.sorting,
     fields.segment?.componentIri,
     sumsBySegment,
-    sortingOrder,
     getSegment,
   ]);
 

From 43c58730d65447fc98d622f762b407c6e012627b Mon Sep 17 00:00:00 2001
From: Patrick Browne <pt.browne@gmail.com>
Date: Thu, 20 Oct 2022 09:38:28 +0200
Subject: [PATCH 14/28] fix: Do not let getting values extend the scale

---
 app/charts/area/areas-state.tsx             | 2 ++
 app/charts/column/columns-grouped-state.tsx | 2 ++
 app/charts/column/columns-stacked-state.tsx | 2 ++
 3 files changed, 6 insertions(+)

diff --git a/app/charts/area/areas-state.tsx b/app/charts/area/areas-state.tsx
index ce6c44eb5..23d843f76 100644
--- a/app/charts/area/areas-state.tsx
+++ b/app/charts/area/areas-state.tsx
@@ -300,9 +300,11 @@ const useAreasState = (
 
       colors.domain(orderedSegmentLabelsAndColors.map((s) => s.label));
       colors.range(orderedSegmentLabelsAndColors.map((s) => s.color));
+      colors.unknown(() => undefined);
     } else {
       colors.domain(segments);
       colors.range(getPalette(fields.segment?.palette));
+      colors.unknown(() => undefined);
     }
     return { colors, xScale, yScale, xEntireScale };
   }, [
diff --git a/app/charts/column/columns-grouped-state.tsx b/app/charts/column/columns-grouped-state.tsx
index 990ca71f7..05d0b632e 100644
--- a/app/charts/column/columns-grouped-state.tsx
+++ b/app/charts/column/columns-grouped-state.tsx
@@ -247,9 +247,11 @@ const useGroupedColumnsState = (
 
       colors.domain(orderedSegmentLabelsAndColors.map((s) => s.label));
       colors.range(orderedSegmentLabelsAndColors.map((s) => s.color));
+      colors.unknown(() => undefined);
     } else {
       colors.domain(segments);
       colors.range(getPalette(fields.segment?.palette));
+      colors.unknown(() => undefined);
     }
 
     const bandDomain = [...new Set(preparedData.map((d) => getX(d) as string))];
diff --git a/app/charts/column/columns-stacked-state.tsx b/app/charts/column/columns-stacked-state.tsx
index 31dbee920..fa12adf6e 100644
--- a/app/charts/column/columns-stacked-state.tsx
+++ b/app/charts/column/columns-stacked-state.tsx
@@ -266,9 +266,11 @@ const useColumnsStackedState = (
 
       colors.domain(orderedSegmentLabelsAndColors.map((s) => s.label));
       colors.range(orderedSegmentLabelsAndColors.map((s) => s.color));
+      colors.unknown(() => undefined);
     } else {
       colors.domain(segments);
       colors.range(getPalette(fields.segment?.palette));
+      colors.unknown(() => undefined);
     }
 
     // x

From 2b294cfed749958e994d5fffa28d3f59f0fded91 Mon Sep 17 00:00:00 2001
From: Patrick Browne <pt.browne@gmail.com>
Date: Thu, 20 Oct 2022 09:38:57 +0200
Subject: [PATCH 15/28] test: Add sorting test spec

---
 e2e/selectors.ts    |  5 +++-
 e2e/sorting.spec.ts | 71 +++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 75 insertions(+), 1 deletion(-)
 create mode 100644 e2e/sorting.spec.ts

diff --git a/e2e/selectors.ts b/e2e/selectors.ts
index b5166dea3..e038e9826 100644
--- a/e2e/selectors.ts
+++ b/e2e/selectors.ts
@@ -43,13 +43,16 @@ export const createSelectors = ({ screen, page, within }: Ctx) => {
       filterCheckbox: (value: string) =>
         page.locator(`[data-value="${value}"]`),
       chartTypeSelector: () => screen.findByTestId("chart-type-selector"),
+      filtersLoaded: () =>
+        screen.findByText("Selected filters", undefined, { timeout: 5000 }),
       controlSection: (title: string) =>
         page.locator("[data-testid=controlSection]", {
           has: page.locator(`h5:text-is("${title}")`),
         }),
     },
     chart: {
-      colorLegend: () => screen.findByTestId("colorLegend"),
+      colorLegend: (options?, waitForOptions?) =>
+        screen.findByTestId("colorLegend", options, waitForOptions),
       colorLegendItems: async () =>
         (await selectors.chart.colorLegend()).locator("div"),
       loaded: (options: { timeout?: number } = {}) =>
diff --git a/e2e/sorting.spec.ts b/e2e/sorting.spec.ts
new file mode 100644
index 000000000..76330c6ee
--- /dev/null
+++ b/e2e/sorting.spec.ts
@@ -0,0 +1,71 @@
+import { test, expect } from "./common";
+
+/**
+ * - Creates a chart from the photovoltaik dataset
+ * - For each type of chart, changes the sorting between Name and Automatic
+ * - Checks that the legend item order is coherent.
+ */
+test("Segment sorting", async ({ selectors, actions, within, screen }) => {
+  test.setTimeout(60_000);
+
+  await actions.chart.createFrom(
+    "https://energy.ld.admin.ch/sfoe/bfe_ogd84_einmalverguetung_fuer_photovoltaikanlagen/13",
+    "Int"
+  );
+
+  for (const chartType of ["Columns", "Lines", "Areas", "Pie"] as const) {
+    await actions.editor.changeChartType(chartType);
+    await actions.editor.selectActiveField("Color");
+
+    // Wait for color section to be ready
+    await selectors.edition.controlSection("Color").waitFor();
+
+    // Switch color on the first chart
+    if (chartType === "Columns") {
+      await within(selectors.edition.controlSection("Color"))
+        .getByText("None")
+        .click();
+
+      await actions.mui.selectOption("Standort der Anlage");
+    }
+
+    // Wait for chart to be loaded
+    await selectors.chart.loaded();
+    await selectors.edition.filtersLoaded();
+    await selectors.chart.colorLegend(undefined, { setTimeout: 5_000 });
+
+    const legendItems = await selectors.chart.colorLegendItems();
+    const defaultExpected = chartType === "Lines" ? "Zurich" : "Aargau";
+    const legendTexts = await legendItems.allInnerTexts();
+    expect(legendTexts[0]).toEqual(defaultExpected);
+
+    if (chartType !== "Lines") {
+      await within(selectors.edition.controlSection("Sort"))
+        .getByText("Name")
+        .click();
+
+      await actions.mui.selectOption("Automatic");
+
+      await selectors.chart.loaded();
+      await selectors.edition.filtersLoaded();
+
+      const legendTexts = await legendItems.allInnerTexts();
+      expect(legendTexts[0]).toBe("Zurich");
+      await screen.getByText("Z → A").click();
+
+      const legendTexts2 = await legendItems.allInnerTexts();
+      expect(legendTexts2[0]).toEqual(
+        chartType === "Pie" ? "Neuchâtel" : "Jura"
+      );
+
+      // Re-initialize for future tests
+      await screen.getByText("A → Z").click();
+
+      await within(selectors.edition.controlSection("Sort"))
+        .getByText("Automatic")
+        .click();
+
+      await actions.mui.selectOption("Name");
+    }
+  }
+});

From 763ee6e2e6eeafd137811abaeef81f1a5a19e972 Mon Sep 17 00:00:00 2001
From: Patrick Browne <pt.browne@gmail.com>
Date: Thu, 20 Oct 2022 10:21:55 +0200
Subject: [PATCH 16/28] refactor: Simplify

---
 e2e/filter-position.spec.ts | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/e2e/filter-position.spec.ts b/e2e/filter-position.spec.ts
index 1dfab180c..a2d367ae6 100644
--- a/e2e/filter-position.spec.ts
+++ b/e2e/filter-position.spec.ts
@@ -20,9 +20,7 @@ test("Filters should be sorted by position", async ({
     .findByText("None");
   await selectorLocator.click();
 
-  const menuLocator = await selectors.mui.popover();
-  const statusLocator = await menuLocator.findByText("Status");
-  await statusLocator.click();
+  await actions.mui.selectOption("Status");
 
   const panelRight = await selectors.panels.right().within();
   await panelRight.findByText("Selected filters", undefined, {

From e860f99880c21a398b85dc45c499797813a8cb32 Mon Sep 17 00:00:00 2001
From: Patrick Browne <pt.browne@gmail.com>
Date: Tue, 18 Oct 2022 11:32:19 +0200
Subject: [PATCH 17/28] refactor: Make only 1 query to load resource literals

---
 app/rdf/queries.ts        | 54 +++++++++++++++------------------------
 app/rdf/query-literals.ts | 38 +++++++++++++++++----------
 2 files changed, 45 insertions(+), 47 deletions(-)

diff --git a/app/rdf/queries.ts b/app/rdf/queries.ts
index ab774fa19..0049ab071 100644
--- a/app/rdf/queries.ts
+++ b/app/rdf/queries.ts
@@ -318,51 +318,39 @@ const getCubeDimensionValuesWithMetadata = async ({
 
   if (namedNodes.length > 0) {
     const scaleType = getScaleType(dimension);
-    const [labels, positions, identifiers, colors, unversioned] =
-      await Promise.all([
-        loadResourceLabels({ ids: namedNodes, locale, sparqlClient }),
-        scaleType === "Ordinal"
-          ? loadResourceLiterals({
-              ids: namedNodes,
-              sparqlClient,
-              predicate: schema.position,
-            })
-          : [],
-        scaleType === "Ordinal" || scaleType === "Nominal"
-          ? loadResourceLiterals({
-              ids: namedNodes,
-              sparqlClient,
-              predicate: schema.identifier,
-            })
-          : [],
-        scaleType === "Ordinal"
-          ? loadResourceLiterals({
-              ids: namedNodes,
-              sparqlClient,
-              predicate: schema.color,
-            })
-          : [],
-        dimensionIsVersioned(dimension)
-          ? loadUnversionedResources({ ids: namedNodes, sparqlClient })
-          : [],
-      ]);
+    const [labels, literals, unversioned] = await Promise.all([
+      loadResourceLabels({ ids: namedNodes, locale, sparqlClient }),
+      loadResourceLiterals({
+        ids: namedNodes,
+        sparqlClient,
+        predicates: {
+          identifier:
+            scaleType === "Ordinal" || scaleType === "Nominal"
+              ? schema.identifier
+              : null,
+          position: scaleType === "Ordinal" ? schema.position : null,
+          color: scaleType === "Ordinal" ? schema.color : null,
+        },
+      }),
+      dimensionIsVersioned(dimension)
+        ? loadUnversionedResources({ ids: namedNodes, sparqlClient })
+        : [],
+    ]);
 
     const identifiersLookup = new Map(
-      identifiers.map(({ iri, value }) => [iri.value, value?.value])
+      literals.map(({ iri, identifier }) => [iri.value, identifier?.value])
     );
 
-    console.log({ identifiers });
-
     const labelsLookup = new Map(
       labels.map(({ iri, label }) => [iri.value, label?.value])
     );
 
     const positionsLookup = new Map(
-      positions.map(({ iri, value }) => [iri.value, value?.value])
+      literals.map(({ iri, position }) => [iri.value, position?.value])
     );
 
     const colorsLookup = new Map(
-      colors.map(({ iri, value }) => [iri.value, value?.value])
+      literals.map(({ iri, color }) => [iri.value, color?.value])
     );
 
     const unversionedLookup = new Map(
diff --git a/app/rdf/query-literals.ts b/app/rdf/query-literals.ts
index 9270766dc..e9abdb706 100644
--- a/app/rdf/query-literals.ts
+++ b/app/rdf/query-literals.ts
@@ -1,46 +1,56 @@
-import { SELECT } from "@tpluscode/sparql-builder";
+import { SELECT, sparql } from "@tpluscode/sparql-builder";
 import { NamedNode, Literal } from "rdf-js";
 import ParsingClient from "sparql-http-client/ParsingClient";
 
 import batchLoad from "./batch-load";
 import { pragmas } from "./create-source";
 
-type ResourceLiteral = {
+type PredicateOption = Record<string, NamedNode<string> | null>;
+
+type ResourceLiteral<T extends PredicateOption> = {
   iri: NamedNode;
-  value?: Literal;
+} & {
+  [P in keyof T]?: Literal;
 };
 
 const buildResourceLiteralQuery = ({
   values,
-  predicate,
+  predicates,
 }: {
   values: NamedNode<string>[];
-  predicate: NamedNode<string>;
+  predicates: PredicateOption;
 }) => {
-  return SELECT.DISTINCT`?iri ?value`.WHERE`
+  const q = SELECT.DISTINCT`?iri ${Object.keys(predicates).map((x) => `?${x}`)}`
+    .WHERE`
       values ?iri {
         ${values}
       }
 
-      ?iri ${predicate} ?value .
+      ${Object.entries(predicates)
+        .filter((x) => x[1])
+        .map(([attr, namedNode]) => {
+          return sparql`OPTIONAL { ?iri ${namedNode} ?${attr}. }`;
+        })}
     `.prologue`${pragmas}`;
+
+  return q;
 };
 
 /**
  * Load literals for a list of IDs (e.g. dimension values, positions, colors)
  */
-export async function loadResourceLiterals({
+export const loadResourceLiterals = async <Predicates extends PredicateOption>({
   ids,
   sparqlClient,
-  predicate,
+  predicates,
 }: {
   ids: NamedNode[];
   sparqlClient: ParsingClient;
-  predicate: NamedNode<string>;
-}) {
-  return batchLoad<ResourceLiteral, NamedNode>({
+  predicates: Predicates;
+}) => {
+  return batchLoad<ResourceLiteral<Predicates>, NamedNode>({
     ids,
     sparqlClient,
-    buildQuery: (values) => buildResourceLiteralQuery({ values, predicate }),
+    buildQuery: (values) => buildResourceLiteralQuery({ values, predicates }),
   });
-}
+};

From 823dcff494c7d82b0a674b0486d748186bc650bd Mon Sep 17 00:00:00 2001
From: Patrick Browne <pt.browne@gmail.com>
Date: Thu, 20 Oct 2022 10:58:00 +0200
Subject: [PATCH 18/28] feat: Change default sorting to auto

---
 app/charts/index.ts                     |  4 ++--
 app/configurator/configurator-state.tsx | 12 ++++++------
 e2e/sorting.spec.ts                     | 17 +++++++----------
 3 files changed, 15 insertions(+), 18 deletions(-)

diff --git a/app/charts/index.ts b/app/charts/index.ts
index 481ca5d8b..1ea844a29 100644
--- a/app/charts/index.ts
+++ b/app/charts/index.ts
@@ -119,8 +119,8 @@ type SortingOption = {
   sortingOrder: SortingOrder;
 };
 
-const DEFAULT_SORTING: SortingOption = {
-  sortingType: "byDimensionLabel",
+export const DEFAULT_SORTING: SortingOption = {
+  sortingType: "byAuto",
   sortingOrder: "asc",
 };
 
diff --git a/app/configurator/configurator-state.tsx b/app/configurator/configurator-state.tsx
index 159dcadb8..53a60cffb 100644
--- a/app/configurator/configurator-state.tsx
+++ b/app/configurator/configurator-state.tsx
@@ -18,6 +18,7 @@ import { Client, useClient } from "urql";
 import { Reducer, useImmerReducer } from "use-immer";
 
 import {
+  DEFAULT_SORTING,
   getChartConfigAdjustedToChartType,
   getFieldComponentIris,
   getGroupedFieldIris,
@@ -368,8 +369,10 @@ export const deriveFiltersFromFields = produce(
       const isField = (iri: string) => fieldDimensionIris.has(iri);
 
       // Apply hierarchical dimensions first
-      const sortedDimensions = sortBy(dimensions, d => isGeoDimension(d) ? -1 : 1, (d) =>
-        d.hierarchy ? -1 : 1
+      const sortedDimensions = sortBy(
+        dimensions,
+        (d) => (isGeoDimension(d) ? -1 : 1),
+        (d) => (d.hierarchy ? -1 : 1)
       );
       sortedDimensions.forEach((dimension) =>
         applyNonTableDimensionToFilters({
@@ -719,10 +722,7 @@ const handleChartFieldChanged = (
           palette: DEFAULT_PALETTE,
           // Type exists only within column charts.
           ...(isColumnConfig(draft.chartConfig) && { type: "stacked" }),
-          sorting: {
-            sortingType: "byDimensionLabel",
-            sortingOrder: "asc",
-          },
+          sorting: DEFAULT_SORTING,
           colorMapping: colorMapping,
         };
       }
diff --git a/e2e/sorting.spec.ts b/e2e/sorting.spec.ts
index 76330c6ee..9d7f25a9d 100644
--- a/e2e/sorting.spec.ts
+++ b/e2e/sorting.spec.ts
@@ -35,37 +35,34 @@ test("Segment sorting", async ({ selectors, actions, within, screen }) => {
     await selectors.chart.colorLegend(undefined, { setTimeout: 5_000 });
 
     const legendItems = await selectors.chart.colorLegendItems();
-    const defaultExpected = chartType === "Lines" ? "Zurich" : "Aargau";
     const legendTexts = await legendItems.allInnerTexts();
-    expect(legendTexts[0]).toEqual(defaultExpected);
+    expect(legendTexts[0]).toEqual("Zurich");
 
     if (chartType !== "Lines") {
       await within(selectors.edition.controlSection("Sort"))
-        .getByText("Name")
+        .getByText("Automatic")
         .click();
 
-      await actions.mui.selectOption("Automatic");
+      await actions.mui.selectOption("Name");
 
       await selectors.chart.loaded();
       await selectors.edition.filtersLoaded();
 
       const legendTexts = await legendItems.allInnerTexts();
-      expect(legendTexts[0]).toBe("Zurich");
+      expect(legendTexts[0]).toBe("Aargau");
       await screen.getByText("Z → A").click();
 
       const legendTexts2 = await legendItems.allInnerTexts();
-      expect(legendTexts2[0]).toEqual(
-        chartType === "Pie" ? "Neuchâtel" : "Jura"
-      );
+      expect(legendTexts2[0]).toEqual("Zurich");
 
       // Re-initialize for future tests
       await screen.getByText("A → Z").click();
 
       await within(selectors.edition.controlSection("Sort"))
-        .getByText("Automatic")
+        .getByText("Name")
         .click();
 
-      await actions.mui.selectOption("Name");
+      await actions.mui.selectOption("Automatic");
     }
   }
 });

From f3a0c6839dd3eb0ba9eeeb4daa3783074440d342 Mon Sep 17 00:00:00 2001
From: Patrick Browne <pt.browne@gmail.com>
Date: Thu, 20 Oct 2022 11:25:18 +0200
Subject: [PATCH 19/28] fix: Automatic defaults to label sorting if there is no
 identifier or position

---
 app/utils/sorting-values.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/utils/sorting-values.ts b/app/utils/sorting-values.ts
index c6cbe574c..a9d46cca0 100644
--- a/app/utils/sorting-values.ts
+++ b/app/utils/sorting-values.ts
@@ -56,7 +56,7 @@ export const makeDimensionValueSorters = (
     dv: DimensionValue["label"]
   ) => string | undefined | number)[] = [];
 
-  const defaultSorters = [getIdentifier, getPosition];
+  const defaultSorters = [getIdentifier, getPosition, getLabel];
 
   switch (sortingType) {
     case "byDimensionLabel":

From e47159b3f9bedb99c34bfe6e37c6e37954523f2d Mon Sep 17 00:00:00 2001
From: Patrick Browne <pt.browne@gmail.com>
Date: Thu, 20 Oct 2022 11:28:49 +0200
Subject: [PATCH 20/28] chore: Ignore exhaustive deps for brush components that
 know works

Ideally we'd want to solve this error but since it works well right now,
I've removed the check since they are mainly noise right now.
---
 app/charts/shared/brush.tsx                                  | 5 +++++
 app/charts/shared/use-sync-interactive-filters.tsx           | 2 ++
 app/configurator/interactive-filters/editor-time-brush.tsx   | 1 +
 .../interactive-filters/editor-time-interval-brush.tsx       | 2 ++
 4 files changed, 10 insertions(+)

diff --git a/app/charts/shared/brush.tsx b/app/charts/shared/brush.tsx
index 2108e1504..be8773a8b 100644
--- a/app/charts/shared/brush.tsx
+++ b/app/charts/shared/brush.tsx
@@ -321,6 +321,7 @@ export const BrushTime = () => {
       ).call(brush.move, coord);
       updateBrushEndedStatus(false);
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [brushWidthScale, brushedIsEnded, dispatch, closestFromStr, closestToStr]);
 
   // This effect resets brush defaults to editor values
@@ -339,6 +340,8 @@ export const BrushTime = () => {
       brush.move,
       defaultSelection
     );
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [minBrushDomainValue, maxBrushDomainValue]);
 
   // This effect makes the brush responsive
@@ -350,6 +353,8 @@ export const BrushTime = () => {
       brush.move,
       coord
     );
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [brushWidth, BRUSH_HEIGHT]);
 
   return (
diff --git a/app/charts/shared/use-sync-interactive-filters.tsx b/app/charts/shared/use-sync-interactive-filters.tsx
index b668426ff..ec2eef660 100644
--- a/app/charts/shared/use-sync-interactive-filters.tsx
+++ b/app/charts/shared/use-sync-interactive-filters.tsx
@@ -36,6 +36,7 @@ const useSyncInteractiveFilters = (chartConfig: ChartConfig) => {
     if (presetFrom && presetTo) {
       dispatch({ type: "ADD_TIME_FILTER", value: [presetFrom, presetTo] });
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [dispatch, presetFromStr, presetToStr]);
 
   // Data Filters
@@ -60,6 +61,7 @@ const useSyncInteractiveFilters = (chartConfig: ChartConfig) => {
 
       dispatch({ type: "SET_DATA_FILTER", value: newInteractiveDataFilters });
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [componentIris, dispatch]);
 
   const changes = useFilterChanges(chartConfig.filters);
diff --git a/app/configurator/interactive-filters/editor-time-brush.tsx b/app/configurator/interactive-filters/editor-time-brush.tsx
index 38e7723e2..8a0c236ba 100644
--- a/app/configurator/interactive-filters/editor-time-brush.tsx
+++ b/app/configurator/interactive-filters/editor-time-brush.tsx
@@ -164,6 +164,7 @@ export const EditorBrush = ({
       brush.move,
       defaultSelection
     );
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   return (
diff --git a/app/configurator/interactive-filters/editor-time-interval-brush.tsx b/app/configurator/interactive-filters/editor-time-interval-brush.tsx
index 3532450b0..8585b69e2 100644
--- a/app/configurator/interactive-filters/editor-time-interval-brush.tsx
+++ b/app/configurator/interactive-filters/editor-time-interval-brush.tsx
@@ -119,6 +119,8 @@ export const EditorIntervalBrush = ({
       fromPx,
       toPx,
     ]);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [fromPx, toPx]);
 
   return (

From 307b88246b26c6b6fc30ddc019e447f2b7d9b574 Mon Sep 17 00:00:00 2001
From: Patrick Browne <pt.browne@gmail.com>
Date: Thu, 20 Oct 2022 11:29:53 +0200
Subject: [PATCH 21/28] chore: Update yarn.lock

---
 yarn.lock | 251 +++++++++++++++++++++++++++---------------------------
 1 file changed, 127 insertions(+), 124 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index 6bd30d2f8..a19d1f319 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -133,43 +133,21 @@
   resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.19.3.tgz#707b939793f867f5a73b2666e6d9a3396eb03151"
   integrity sha512-prBHMK4JYYK+wDjJF1q99KK4JLL+egWS4nmNqdlMUgCExMZ+iZW0hGhyC3VEbsPjvaN0TBhW//VIFwBrk8sEiw==
 
-"@babel/core@7.12.9":
-  version "7.12.9"
-  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.12.9.tgz#fd450c4ec10cdbb980e2928b7aa7a28484593fc8"
-  integrity sha512-gTXYh3M5wb7FRXQy+FErKFAv90BnlOuNn1QkCK2lREoPAjrQCO49+HVSrFoe5uakFAF5eenS75KbO2vQiLrTMQ==
-  dependencies:
-    "@babel/code-frame" "^7.10.4"
-    "@babel/generator" "^7.12.5"
-    "@babel/helper-module-transforms" "^7.12.1"
-    "@babel/helpers" "^7.12.5"
-    "@babel/parser" "^7.12.7"
-    "@babel/template" "^7.12.7"
-    "@babel/traverse" "^7.12.9"
-    "@babel/types" "^7.12.7"
-    convert-source-map "^1.7.0"
-    debug "^4.1.0"
-    gensync "^1.0.0-beta.1"
-    json5 "^2.1.2"
-    lodash "^4.17.19"
-    resolve "^1.3.2"
-    semver "^5.4.1"
-    source-map "^0.5.0"
-
-"@babel/core@^7.0.0", "@babel/core@^7.1.0", "@babel/core@^7.10.5", "@babel/core@^7.12.3", "@babel/core@^7.12.9", "@babel/core@^7.7.2", "@babel/core@^7.7.5", "@babel/core@^7.7.7":
-  version "7.19.3"
-  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.19.3.tgz#2519f62a51458f43b682d61583c3810e7dcee64c"
-  integrity sha512-WneDJxdsjEvyKtXKsaBGbDeiyOjR5vYq4HcShxnIbG0qixpoHjI3MqeZM9NDvsojNCEBItQE4juOo/bU6e72gQ==
+"@babel/core@7.12.9", "@babel/core@^7.0.0", "@babel/core@^7.1.0", "@babel/core@^7.10.5", "@babel/core@^7.12.3", "@babel/core@^7.12.9", "@babel/core@^7.14.6", "@babel/core@^7.7.2", "@babel/core@^7.7.5", "@babel/core@^7.7.7":
+  version "7.19.6"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.19.6.tgz#7122ae4f5c5a37c0946c066149abd8e75f81540f"
+  integrity sha512-D2Ue4KHpc6Ys2+AxpIx1BZ8+UegLLLE2p3KJEuJRKmokHOtl49jQ5ny1773KsGLZs8MQvBidAF6yWUJxRqtKtg==
   dependencies:
     "@ampproject/remapping" "^2.1.0"
     "@babel/code-frame" "^7.18.6"
-    "@babel/generator" "^7.19.3"
+    "@babel/generator" "^7.19.6"
     "@babel/helper-compilation-targets" "^7.19.3"
-    "@babel/helper-module-transforms" "^7.19.0"
-    "@babel/helpers" "^7.19.0"
-    "@babel/parser" "^7.19.3"
+    "@babel/helper-module-transforms" "^7.19.6"
+    "@babel/helpers" "^7.19.4"
+    "@babel/parser" "^7.19.6"
     "@babel/template" "^7.18.10"
-    "@babel/traverse" "^7.19.3"
-    "@babel/types" "^7.19.3"
+    "@babel/traverse" "^7.19.6"
+    "@babel/types" "^7.19.4"
     convert-source-map "^1.7.0"
     debug "^4.1.0"
     gensync "^1.0.0-beta.2"
@@ -185,15 +163,6 @@
     jsesc "^2.5.1"
     source-map "^0.5.0"
 
-"@babel/generator@^7.12.5", "@babel/generator@^7.19.4":
-  version "7.19.5"
-  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.19.5.tgz#da3f4b301c8086717eee9cab14da91b1fa5dcca7"
-  integrity sha512-DxbNz9Lz4aMZ99qPpO1raTbcrI1ZeYh+9NR9qhfkQIbFtVEqotHojEBxHzmxhVONkGt6VyrqVQcgpefMy9pqcg==
-  dependencies:
-    "@babel/types" "^7.19.4"
-    "@jridgewell/gen-mapping" "^0.3.2"
-    jsesc "^2.5.1"
-
 "@babel/generator@^7.19.0":
   version "7.19.0"
   resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.19.0.tgz#785596c06425e59334df2ccee63ab166b738419a"
@@ -212,6 +181,24 @@
     "@jridgewell/gen-mapping" "^0.3.2"
     jsesc "^2.5.1"
 
+"@babel/generator@^7.19.4":
+  version "7.19.5"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.19.5.tgz#da3f4b301c8086717eee9cab14da91b1fa5dcca7"
+  integrity sha512-DxbNz9Lz4aMZ99qPpO1raTbcrI1ZeYh+9NR9qhfkQIbFtVEqotHojEBxHzmxhVONkGt6VyrqVQcgpefMy9pqcg==
+  dependencies:
+    "@babel/types" "^7.19.4"
+    "@jridgewell/gen-mapping" "^0.3.2"
+    jsesc "^2.5.1"
+
+"@babel/generator@^7.19.6":
+  version "7.19.6"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.19.6.tgz#9e481a3fe9ca6261c972645ae3904ec0f9b34a1d"
+  integrity sha512-oHGRUQeoX1QrKeJIKVe0hwjGqNnVYsM5Nep5zo0uE0m42sLH+Fsd2pStJ5sRM1bNyTUUoz0pe2lTeMJrb/taTA==
+  dependencies:
+    "@babel/types" "^7.19.4"
+    "@jridgewell/gen-mapping" "^0.3.2"
+    jsesc "^2.5.1"
+
 "@babel/helper-annotate-as-pure@^7.14.5":
   version "7.14.5"
   resolved "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.14.5.tgz"
@@ -322,7 +309,21 @@
   dependencies:
     "@babel/types" "^7.18.6"
 
-"@babel/helper-module-transforms@^7.12.1", "@babel/helper-module-transforms@^7.19.0":
+"@babel/helper-module-transforms@^7.14.5":
+  version "7.15.8"
+  resolved "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.15.8.tgz"
+  integrity sha512-DfAfA6PfpG8t4S6npwzLvTUpp0sS7JrcuaMiy1Y5645laRJIp/LiLGIBbQKaXSInK8tiGNI7FL7L8UvB8gdUZg==
+  dependencies:
+    "@babel/helper-module-imports" "^7.15.4"
+    "@babel/helper-replace-supers" "^7.15.4"
+    "@babel/helper-simple-access" "^7.15.4"
+    "@babel/helper-split-export-declaration" "^7.15.4"
+    "@babel/helper-validator-identifier" "^7.15.7"
+    "@babel/template" "^7.15.4"
+    "@babel/traverse" "^7.15.4"
+    "@babel/types" "^7.15.6"
+
+"@babel/helper-module-transforms@^7.19.0":
   version "7.19.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.19.0.tgz#309b230f04e22c58c6a2c0c0c7e50b216d350c30"
   integrity sha512-3HBZ377Fe14RbLIA+ac3sY4PTgpxHVkFrESaWhoI5PuyXPBBX8+C34qblV9G89ZtycGJCmCI/Ut+VUDK4bltNQ==
@@ -336,19 +337,19 @@
     "@babel/traverse" "^7.19.0"
     "@babel/types" "^7.19.0"
 
-"@babel/helper-module-transforms@^7.14.5":
-  version "7.15.8"
-  resolved "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.15.8.tgz"
-  integrity sha512-DfAfA6PfpG8t4S6npwzLvTUpp0sS7JrcuaMiy1Y5645laRJIp/LiLGIBbQKaXSInK8tiGNI7FL7L8UvB8gdUZg==
+"@babel/helper-module-transforms@^7.19.6":
+  version "7.19.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.19.6.tgz#6c52cc3ac63b70952d33ee987cbee1c9368b533f"
+  integrity sha512-fCmcfQo/KYr/VXXDIyd3CBGZ6AFhPFy1TfSEJ+PilGVlQT6jcbqtHAM4C1EciRqMza7/TpOUZliuSH+U6HAhJw==
   dependencies:
-    "@babel/helper-module-imports" "^7.15.4"
-    "@babel/helper-replace-supers" "^7.15.4"
-    "@babel/helper-simple-access" "^7.15.4"
-    "@babel/helper-split-export-declaration" "^7.15.4"
-    "@babel/helper-validator-identifier" "^7.15.7"
-    "@babel/template" "^7.15.4"
-    "@babel/traverse" "^7.15.4"
-    "@babel/types" "^7.15.6"
+    "@babel/helper-environment-visitor" "^7.18.9"
+    "@babel/helper-module-imports" "^7.18.6"
+    "@babel/helper-simple-access" "^7.19.4"
+    "@babel/helper-split-export-declaration" "^7.18.6"
+    "@babel/helper-validator-identifier" "^7.19.1"
+    "@babel/template" "^7.18.10"
+    "@babel/traverse" "^7.19.6"
+    "@babel/types" "^7.19.4"
 
 "@babel/helper-optimise-call-expression@^7.14.5", "@babel/helper-optimise-call-expression@^7.15.4":
   version "7.15.4"
@@ -396,6 +397,13 @@
   dependencies:
     "@babel/types" "^7.18.6"
 
+"@babel/helper-simple-access@^7.19.4":
+  version "7.19.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.19.4.tgz#be553f4951ac6352df2567f7daa19a0ee15668e7"
+  integrity sha512-f9Xq6WqBFqaDfbCzn2w85hwklswz5qsKlh7f08w4Y9yhJHpnNC0QemtSkK5YyOY8kPGvyiwdzZksGUhnGdaUIg==
+  dependencies:
+    "@babel/types" "^7.19.4"
+
 "@babel/helper-skip-transparent-expression-wrappers@^7.14.5":
   version "7.14.5"
   resolved "https://registry.npmjs.org/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.14.5.tgz"
@@ -457,15 +465,6 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.18.6.tgz#bf0d2b5a509b1f336099e4ff36e1a63aa5db4db8"
   integrity sha512-XO7gESt5ouv/LRJdrVjkShckw6STTaB7l9BrpBaAHDeF5YZT+01PCwmR0SJHnkW6i8OwW/EVWRShfi4j2x+KQw==
 
-"@babel/helpers@^7.12.5":
-  version "7.19.4"
-  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.19.4.tgz#42154945f87b8148df7203a25c31ba9a73be46c5"
-  integrity sha512-G+z3aOx2nfDHwX/kyVii5fJq+bgscg89/dJNWpYeKeBv3v9xX8EIabmx1k6u9LS04H7nROFVRVK+e3k0VHp+sw==
-  dependencies:
-    "@babel/template" "^7.18.10"
-    "@babel/traverse" "^7.19.4"
-    "@babel/types" "^7.19.4"
-
 "@babel/helpers@^7.19.0":
   version "7.19.0"
   resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.19.0.tgz#f30534657faf246ae96551d88dd31e9d1fa1fc18"
@@ -475,6 +474,15 @@
     "@babel/traverse" "^7.19.0"
     "@babel/types" "^7.19.0"
 
+"@babel/helpers@^7.19.4":
+  version "7.19.4"
+  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.19.4.tgz#42154945f87b8148df7203a25c31ba9a73be46c5"
+  integrity sha512-G+z3aOx2nfDHwX/kyVii5fJq+bgscg89/dJNWpYeKeBv3v9xX8EIabmx1k6u9LS04H7nROFVRVK+e3k0VHp+sw==
+  dependencies:
+    "@babel/template" "^7.18.10"
+    "@babel/traverse" "^7.19.4"
+    "@babel/types" "^7.19.4"
+
 "@babel/highlight@^7.10.4", "@babel/highlight@^7.14.5":
   version "7.14.5"
   resolved "https://registry.npmjs.org/@babel/highlight/-/highlight-7.14.5.tgz"
@@ -493,15 +501,10 @@
     chalk "^2.0.0"
     js-tokens "^4.0.0"
 
-"@babel/parser@7.12.16":
-  version "7.12.16"
-  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.12.16.tgz#cc31257419d2c3189d394081635703f549fc1ed4"
-  integrity sha512-c/+u9cqV6F0+4Hpq01jnJO+GLp2DdT63ppz9Xa+6cHaajM9VFzK/iDXiKK65YtpeVwu+ctfS6iqlMqRgQRzeCw==
-
-"@babel/parser@^7.0.0", "@babel/parser@^7.1.0", "@babel/parser@^7.11.5", "@babel/parser@^7.12.13", "@babel/parser@^7.12.7", "@babel/parser@^7.14.7", "@babel/parser@^7.15.4", "@babel/parser@^7.18.10", "@babel/parser@^7.19.0", "@babel/parser@^7.19.3", "@babel/parser@^7.19.4", "@babel/parser@^7.7.2":
-  version "7.19.4"
-  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.19.4.tgz#03c4339d2b8971eb3beca5252bafd9b9f79db3dc"
-  integrity sha512-qpVT7gtuOLjWeDTKLkJ6sryqLliBaFpAtGeqw5cs5giLldvh+Ch0plqnUMKoVAUS6ZEueQQiZV+p5pxtPitEsA==
+"@babel/parser@7.12.16", "@babel/parser@^7.0.0", "@babel/parser@^7.1.0", "@babel/parser@^7.11.5", "@babel/parser@^7.12.13", "@babel/parser@^7.14.6", "@babel/parser@^7.14.7", "@babel/parser@^7.15.4", "@babel/parser@^7.18.10", "@babel/parser@^7.19.0", "@babel/parser@^7.19.3", "@babel/parser@^7.19.4", "@babel/parser@^7.19.6", "@babel/parser@^7.7.2":
+  version "7.19.6"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.19.6.tgz#b923430cb94f58a7eae8facbffa9efd19130e7f8"
+  integrity sha512-h1IUp81s2JYJ3mRkdxJgs4UvmSsRvDrx5ICSJbPvtWYv5i1nTBGcBpnog+89rAFMwvvru6E5NUHdBe01UeSzYA==
 
 "@babel/plugin-proposal-class-properties@^7.0.0":
   version "7.14.5"
@@ -841,15 +844,6 @@
   resolved "https://registry.npmjs.org/@babel/standalone/-/standalone-7.14.6.tgz"
   integrity sha512-oAoSp82jhJFnXKybKTOj5QF04XxiDRyiiqrFToiU1udlBXuZoADlPmmnOcuqBrZxSNNUjzJIVK8vt838Qoqjxg==
 
-"@babel/template@^7.12.7", "@babel/template@^7.18.10":
-  version "7.18.10"
-  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.18.10.tgz#6f9134835970d1dbf0835c0d100c9f38de0c5e71"
-  integrity sha512-TI+rCtooWHr3QJ27kJxfjutghu44DLnasDMwpDqCXVTal9RLp3RSYNh4NdBrRP2cQAoG9A8juOQl6P6oZG4JxA==
-  dependencies:
-    "@babel/code-frame" "^7.18.6"
-    "@babel/parser" "^7.18.10"
-    "@babel/types" "^7.18.10"
-
 "@babel/template@^7.15.4", "@babel/template@^7.3.3":
   version "7.15.4"
   resolved "https://registry.npmjs.org/@babel/template/-/template-7.15.4.tgz"
@@ -859,6 +853,15 @@
     "@babel/parser" "^7.15.4"
     "@babel/types" "^7.15.4"
 
+"@babel/template@^7.18.10":
+  version "7.18.10"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.18.10.tgz#6f9134835970d1dbf0835c0d100c9f38de0c5e71"
+  integrity sha512-TI+rCtooWHr3QJ27kJxfjutghu44DLnasDMwpDqCXVTal9RLp3RSYNh4NdBrRP2cQAoG9A8juOQl6P6oZG4JxA==
+  dependencies:
+    "@babel/code-frame" "^7.18.6"
+    "@babel/parser" "^7.18.10"
+    "@babel/types" "^7.18.10"
+
 "@babel/traverse@7.12.13":
   version "7.12.13"
   resolved "https://registry.npmjs.org/@babel/traverse/-/traverse-7.12.13.tgz"
@@ -889,22 +892,6 @@
     debug "^4.1.0"
     globals "^11.1.0"
 
-"@babel/traverse@^7.12.9", "@babel/traverse@^7.19.4":
-  version "7.19.4"
-  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.19.4.tgz#f117820e18b1e59448a6c1fa9d0ff08f7ac459a8"
-  integrity sha512-w3K1i+V5u2aJUOXBFFC5pveFLmtq1s3qcdDNC2qRI6WPBQIDaKFqXxDEqDO/h1dQ3HjsZoZMyIy6jGLq0xtw+g==
-  dependencies:
-    "@babel/code-frame" "^7.18.6"
-    "@babel/generator" "^7.19.4"
-    "@babel/helper-environment-visitor" "^7.18.9"
-    "@babel/helper-function-name" "^7.19.0"
-    "@babel/helper-hoist-variables" "^7.18.6"
-    "@babel/helper-split-export-declaration" "^7.18.6"
-    "@babel/parser" "^7.19.4"
-    "@babel/types" "^7.19.4"
-    debug "^4.1.0"
-    globals "^11.1.0"
-
 "@babel/traverse@^7.19.0":
   version "7.19.0"
   resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.19.0.tgz#eb9c561c7360005c592cc645abafe0c3c4548eed"
@@ -937,6 +924,38 @@
     debug "^4.1.0"
     globals "^11.1.0"
 
+"@babel/traverse@^7.19.4":
+  version "7.19.4"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.19.4.tgz#f117820e18b1e59448a6c1fa9d0ff08f7ac459a8"
+  integrity sha512-w3K1i+V5u2aJUOXBFFC5pveFLmtq1s3qcdDNC2qRI6WPBQIDaKFqXxDEqDO/h1dQ3HjsZoZMyIy6jGLq0xtw+g==
+  dependencies:
+    "@babel/code-frame" "^7.18.6"
+    "@babel/generator" "^7.19.4"
+    "@babel/helper-environment-visitor" "^7.18.9"
+    "@babel/helper-function-name" "^7.19.0"
+    "@babel/helper-hoist-variables" "^7.18.6"
+    "@babel/helper-split-export-declaration" "^7.18.6"
+    "@babel/parser" "^7.19.4"
+    "@babel/types" "^7.19.4"
+    debug "^4.1.0"
+    globals "^11.1.0"
+
+"@babel/traverse@^7.19.6":
+  version "7.19.6"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.19.6.tgz#7b4c865611df6d99cb131eec2e8ac71656a490dc"
+  integrity sha512-6l5HrUCzFM04mfbG09AagtYyR2P0B71B1wN7PfSPiksDPz2k5H9CBC1tcZpz2M8OxbKTPccByoOJ22rUKbpmQQ==
+  dependencies:
+    "@babel/code-frame" "^7.18.6"
+    "@babel/generator" "^7.19.6"
+    "@babel/helper-environment-visitor" "^7.18.9"
+    "@babel/helper-function-name" "^7.19.0"
+    "@babel/helper-hoist-variables" "^7.18.6"
+    "@babel/helper-split-export-declaration" "^7.18.6"
+    "@babel/parser" "^7.19.6"
+    "@babel/types" "^7.19.4"
+    debug "^4.1.0"
+    globals "^11.1.0"
+
 "@babel/types@7.12.13":
   version "7.12.13"
   resolved "https://registry.npmjs.org/@babel/types/-/types-7.12.13.tgz"
@@ -962,15 +981,6 @@
     "@babel/helper-validator-identifier" "^7.14.9"
     to-fast-properties "^2.0.0"
 
-"@babel/types@^7.12.7", "@babel/types@^7.19.4":
-  version "7.19.4"
-  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.19.4.tgz#0dd5c91c573a202d600490a35b33246fed8a41c7"
-  integrity sha512-M5LK7nAeS6+9j7hAq+b3fQs+pNfUtTGq+yFFfHnauFA8zQtLRfmuipmsKDKKLuyG+wC8ABW43A153YNawNTEtw==
-  dependencies:
-    "@babel/helper-string-parser" "^7.19.4"
-    "@babel/helper-validator-identifier" "^7.19.1"
-    to-fast-properties "^2.0.0"
-
 "@babel/types@^7.16.7":
   version "7.17.0"
   resolved "https://registry.npmjs.org/@babel/types/-/types-7.17.0.tgz"
@@ -1014,6 +1024,15 @@
     "@babel/helper-validator-identifier" "^7.19.1"
     to-fast-properties "^2.0.0"
 
+"@babel/types@^7.19.4":
+  version "7.19.4"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.19.4.tgz#0dd5c91c573a202d600490a35b33246fed8a41c7"
+  integrity sha512-M5LK7nAeS6+9j7hAq+b3fQs+pNfUtTGq+yFFfHnauFA8zQtLRfmuipmsKDKKLuyG+wC8ABW43A153YNawNTEtw==
+  dependencies:
+    "@babel/helper-string-parser" "^7.19.4"
+    "@babel/helper-validator-identifier" "^7.19.1"
+    to-fast-properties "^2.0.0"
+
 "@bcoe/v8-coverage@^0.2.3":
   version "0.2.3"
   resolved "https://registry.npmjs.org/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz"
@@ -9254,7 +9273,7 @@ fwd-stream@^1.0.4:
   dependencies:
     readable-stream "~1.0.26-4"
 
-gensync@^1.0.0-beta.1, gensync@^1.0.0-beta.2:
+gensync@^1.0.0-beta.2:
   version "1.0.0-beta.2"
   resolved "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz"
   integrity sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==
@@ -10336,13 +10355,6 @@ is-core-module@^2.8.1:
   dependencies:
     has "^1.0.3"
 
-is-core-module@^2.9.0:
-  version "2.10.0"
-  resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.10.0.tgz#9012ede0a91c69587e647514e1d5277019e728ed"
-  integrity sha512-Erxj2n/LDAZ7H8WNJXd9tw38GYM3dv8rk8Zcs+jJuxYTW7sozH+SS8NtrSjVL1/vpLvWi1hxy96IzjJ3EHTJJg==
-  dependencies:
-    has "^1.0.3"
-
 is-date-object@^1.0.1:
   version "1.0.4"
   resolved "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.4.tgz"
@@ -14633,15 +14645,6 @@ resolve@^1.12.0:
     path-parse "^1.0.7"
     supports-preserve-symlinks-flag "^1.0.0"
 
-resolve@^1.3.2:
-  version "1.22.1"
-  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.1.tgz#27cb2ebb53f91abb49470a928bba7558066ac177"
-  integrity sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw==
-  dependencies:
-    is-core-module "^2.9.0"
-    path-parse "^1.0.7"
-    supports-preserve-symlinks-flag "^1.0.0"
-
 resolve@^2.0.0-next.3:
   version "2.0.0-next.3"
   resolved "https://registry.npmjs.org/resolve/-/resolve-2.0.0-next.3.tgz"
@@ -14886,7 +14889,7 @@ semver-diff@^4.0.0:
   dependencies:
     semver "^7.3.5"
 
-"semver@2 || 3 || 4 || 5", semver@^5.4.1, semver@^5.6.0:
+"semver@2 || 3 || 4 || 5", semver@^5.6.0:
   version "5.7.1"
   resolved "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz"
   integrity sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==

From 9659bd0ad413d6e4bacb46bcf0f15b67b4305ed0 Mon Sep 17 00:00:00 2001
From: Patrick Browne <pt.browne@gmail.com>
Date: Thu, 20 Oct 2022 12:22:36 +0200
Subject: [PATCH 22/28] feat: Allow to sort segments for line chart (useful for
 tooltip and legend items)

---
 app/charts/chart-config-ui-options.ts     |  6 ++++++
 app/charts/line/lines-state.tsx           | 12 ++++++++++--
 app/configurator/components/ui-helpers.ts |  4 ++++
 app/configurator/config-types.ts          |  2 +-
 4 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/app/charts/chart-config-ui-options.ts b/app/charts/chart-config-ui-options.ts
index 932733763..70e2b5c0d 100644
--- a/app/charts/chart-config-ui-options.ts
+++ b/app/charts/chart-config-ui-options.ts
@@ -81,6 +81,11 @@ export const AREA_SEGMENT_SORTING: EncodingSortingOption[] = [
   { sortingType: "byTotalSize", sortingOrder: ["asc", "desc"] },
 ];
 
+export const LINE_SEGMENT_SORTING: EncodingSortingOption[] = [
+  { sortingType: "byAuto", sortingOrder: ["asc", "desc"] },
+  { sortingType: "byDimensionLabel", sortingOrder: ["asc", "desc"] },
+];
+
 export const COLUMN_SEGMENT_SORTING: EncodingSortingOption[] =
   AREA_SEGMENT_SORTING;
 
@@ -218,6 +223,7 @@ export const chartConfigOptionsUISpec: ChartSpecs = {
         optional: true,
         componentTypes: SEGMENT_COMPONENT_TYPES,
         filters: true,
+        sorting: LINE_SEGMENT_SORTING,
         options: [{ field: "color", type: "palette" }],
       },
     ],
diff --git a/app/charts/line/lines-state.tsx b/app/charts/line/lines-state.tsx
index 0922644f3..609d24fb8 100644
--- a/app/charts/line/lines-state.tsx
+++ b/app/charts/line/lines-state.tsx
@@ -218,11 +218,19 @@ const useLinesState = (
     const dimension = dimensions.find(
       (d) => d.iri === fields?.segment?.componentIri
     );
-    const sorters = makeDimensionValueSorters(dimension);
-    return orderBy(uniqueSegments, sorters, "asc");
+    const sorting = fields?.segment?.sorting;
+    const sorters = makeDimensionValueSorters(dimension, {
+      sorting,
+    });
+    return orderBy(
+      uniqueSegments,
+      sorters,
+      sorting?.sortingOrder === "desc" ? "desc" : "asc"
+    );
   }, [
     dimensions,
     fields?.segment?.componentIri,
+    fields?.segment?.sorting,
     getSegment,
     plottableSortedData,
   ]);
diff --git a/app/configurator/components/ui-helpers.ts b/app/configurator/components/ui-helpers.ts
index 2462d26be..ea2657717 100644
--- a/app/configurator/components/ui-helpers.ts
+++ b/app/configurator/components/ui-helpers.ts
@@ -796,6 +796,7 @@ export function getFieldLabel(field: string): string {
     // for existing charts compatibility
     case "area.stacked.byDimensionLabel.asc":
     case "pie..byDimensionLabel.asc":
+    case "line..byDimensionLabel.asc":
     case "sorting.byDimensionLabel.asc":
       return i18n._(fieldLabels["controls.sorting.byDimensionLabel.ascending"]);
     case "bar.stacked.byAuto.asc":
@@ -804,6 +805,7 @@ export function getFieldLabel(field: string): string {
     case "column.stacked.byAuto.asc":
     case "column.grouped.byAuto.asc":
     case "pie..byAuto.asc":
+    case "line..byAuto.asc":
     case "area..byAuto.asc":
       return i18n._(fieldLabels["controls.sorting.byAuto.ascending"]);
     case "bar.stacked.byAuto.desc":
@@ -812,6 +814,7 @@ export function getFieldLabel(field: string): string {
     case "column.stacked.byAuto.desc":
     case "column.grouped.byAuto.desc":
     case "pie..byAuto.desc":
+    case "line..byAuto.desc":
     case "area..byAuto.desc":
       return i18n._(fieldLabels["controls.sorting.byAuto.descending"]);
     case "bar.stacked.byDimensionLabel.desc":
@@ -823,6 +826,7 @@ export function getFieldLabel(field: string): string {
     // for existing charts compatibility
     case "area.stacked.byDimensionLabel.desc":
     case "pie..byDimensionLabel.desc":
+    case "line..byDimensionLabel.desc":
     case "sorting.byDimensionLabel.desc":
       return i18n._(
         fieldLabels["controls.sorting.byDimensionLabel.descending"]
diff --git a/app/configurator/config-types.ts b/app/configurator/config-types.ts
index a13dee283..d889ddee9 100644
--- a/app/configurator/config-types.ts
+++ b/app/configurator/config-types.ts
@@ -225,7 +225,7 @@ const ColumnConfig = t.type(
 export type ColumnFields = t.TypeOf<typeof ColumnFields>;
 export type ColumnConfig = t.TypeOf<typeof ColumnConfig>;
 
-const LineSegmentField = GenericSegmentField;
+const LineSegmentField = t.intersection([GenericSegmentField, SortingField]);
 export type LineSegmentField = t.TypeOf<typeof LineSegmentField>;
 
 const LineFields = t.intersection([

From 0a834c8c7ad3628a0cca61aa1af0d5d4d646ceeb Mon Sep 17 00:00:00 2001
From: Patrick Browne <pt.browne@gmail.com>
Date: Thu, 20 Oct 2022 12:52:11 +0200
Subject: [PATCH 23/28] fix: Use plottable data in case we have missing
 measures

---
 app/charts/column/columns-grouped-state.tsx | 17 ++++++++---------
 app/charts/pie/pie-state.tsx                |  2 +-
 2 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/app/charts/column/columns-grouped-state.tsx b/app/charts/column/columns-grouped-state.tsx
index 05d0b632e..8d44d70cd 100644
--- a/app/charts/column/columns-grouped-state.tsx
+++ b/app/charts/column/columns-grouped-state.tsx
@@ -266,10 +266,9 @@ const useGroupedColumnsState = (
     const xScaleIn = scaleBand().domain(segments).padding(PADDING_WITHIN);
 
     // x as time, needs to be memoized!
-    const xEntireDomainAsTime = extent(sortedData, (d) => getXAsDate(d)) as [
-      Date,
-      Date
-    ];
+    const xEntireDomainAsTime = extent(plottableSortedData, (d) =>
+      getXAsDate(d)
+    ) as [Date, Date];
     const xEntireScale = scaleTime().domain(xEntireDomainAsTime);
 
     // y
@@ -304,13 +303,13 @@ const useGroupedColumnsState = (
   }, [
     dimensions,
     fields.segment,
+    preparedData,
+    segments,
+    plottableSortedData,
     getX,
     getXAsDate,
-    getY,
     getYErrorRange,
-    sortedData,
-    preparedData,
-    segments,
+    getY,
   ]);
 
   const yMeasure = measures.find((d) => d.iri === fields.y.componentIri);
@@ -446,7 +445,7 @@ const useGroupedColumnsState = (
   return {
     chartType: "column",
     preparedData,
-    allData: sortedData,
+    allData: plottableSortedData,
     bounds,
     getX,
     getXAsDate,
diff --git a/app/charts/pie/pie-state.tsx b/app/charts/pie/pie-state.tsx
index 8465a7d41..b8888bc39 100644
--- a/app/charts/pie/pie-state.tsx
+++ b/app/charts/pie/pie-state.tsx
@@ -84,7 +84,7 @@ const usePieState = (
   // Apply end-user-activated interactive filters to the stack
   const preparedData = usePreparedData({
     legendFilterActive: interactiveFiltersConfig?.legend.active,
-    sortedData: data,
+    sortedData: plottableData,
     interactiveFilters,
     getSegment: getX,
   });

From f7ebb8a07e05584c6928f34932546ca77a5e3954 Mon Sep 17 00:00:00 2001
From: Patrick Browne <pt.browne@gmail.com>
Date: Thu, 20 Oct 2022 12:52:11 +0200
Subject: [PATCH 24/28] fix: Do not filter out segments with 0 from legend

---
 app/charts/pie/pie-state.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/charts/pie/pie-state.tsx b/app/charts/pie/pie-state.tsx
index b8888bc39..f0ef06107 100644
--- a/app/charts/pie/pie-state.tsx
+++ b/app/charts/pie/pie-state.tsx
@@ -114,7 +114,7 @@ const usePieState = (
       plottableData.map((d) => [getX(d), getY(d)])
     );
     const uniqueSegments = Object.entries(measureBySegment)
-      .filter((x) => x[1])
+      .filter((x) => typeof x[1] === "number")
       .map((x) => x[0]);
 
     const sorters = makeDimensionValueSorters(segmentDimension, {

From c1d68dba917a5859ae545f358fd5b58701397bcd Mon Sep 17 00:00:00 2001
From: Patrick Browne <pt.browne@gmail.com>
Date: Thu, 20 Oct 2022 13:08:21 +0200
Subject: [PATCH 25/28] fix: Keep old sorting when switching to line segment

---
 app/charts/index.ts |  6 ++++++
 e2e/sorting.spec.ts | 36 +++++++++++++++++-------------------
 2 files changed, 23 insertions(+), 19 deletions(-)

diff --git a/app/charts/index.ts b/app/charts/index.ts
index 1ea844a29..a9c8a77b7 100644
--- a/app/charts/index.ts
+++ b/app/charts/index.ts
@@ -691,6 +691,12 @@ const chartConfigsAdjusters: ChartConfigsAdjusters = {
             componentIri: oldSegment.componentIri,
             palette: oldSegment.palette,
             colorMapping: oldSegment.colorMapping,
+            sorting:
+              "sorting" in oldSegment &&
+              oldSegment.sorting &&
+              "sortingOrder" in oldSegment.sorting
+                ? oldSegment.sorting || DEFAULT_FIXED_COLOR_FIELD
+                : DEFAULT_SORTING,
           };
         }
 
diff --git a/e2e/sorting.spec.ts b/e2e/sorting.spec.ts
index 9d7f25a9d..9c96c9a6b 100644
--- a/e2e/sorting.spec.ts
+++ b/e2e/sorting.spec.ts
@@ -38,31 +38,29 @@ test("Segment sorting", async ({ selectors, actions, within, screen }) => {
     const legendTexts = await legendItems.allInnerTexts();
     expect(legendTexts[0]).toEqual("Zurich");
 
-    if (chartType !== "Lines") {
-      await within(selectors.edition.controlSection("Sort"))
-        .getByText("Automatic")
-        .click();
+    await within(selectors.edition.controlSection("Sort"))
+      .getByText("Automatic")
+      .click();
 
-      await actions.mui.selectOption("Name");
+    await actions.mui.selectOption("Name");
 
-      await selectors.chart.loaded();
-      await selectors.edition.filtersLoaded();
+    await selectors.chart.loaded();
+    await selectors.edition.filtersLoaded();
 
-      const legendTexts = await legendItems.allInnerTexts();
-      expect(legendTexts[0]).toBe("Aargau");
-      await screen.getByText("Z → A").click();
+    const legendTexts2 = await legendItems.allInnerTexts();
+    expect(legendTexts2[0]).toBe("Aargau");
+    await screen.getByText("Z → A").click();
 
-      const legendTexts2 = await legendItems.allInnerTexts();
-      expect(legendTexts2[0]).toEqual("Zurich");
+    const legendTexts3 = await legendItems.allInnerTexts();
+    expect(legendTexts3[0]).toEqual("Zurich");
 
-      // Re-initialize for future tests
-      await screen.getByText("A → Z").click();
+    // Re-initialize for future tests
+    await screen.getByText("A → Z").click();
 
-      await within(selectors.edition.controlSection("Sort"))
-        .getByText("Name")
-        .click();
+    await within(selectors.edition.controlSection("Sort"))
+      .getByText("Name")
+      .click();
 
-      await actions.mui.selectOption("Automatic");
-    }
+    await actions.mui.selectOption("Automatic");
   }
 });

From 0e5e9d30a035ada208b10e5ca2773e460d1c4159 Mon Sep 17 00:00:00 2001
From: Patrick Browne <pt.browne@gmail.com>
Date: Wed, 19 Oct 2022 14:11:31 +0200
Subject: [PATCH 26/28] docs: Update changelog

---
 CHANGELOG.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5377a805d..4196519f7 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -17,6 +17,10 @@ You can also check the [release page](https://github.com/visualize-admin/visuali
   - area & symbol layers now use the same approach as for segment field (optional select element), to be more consistent across the app
   - it's now possible to use discrete color mapping in symbol layer
 
+## [3.10.0] - 2022-10-19
+
+- Improve loading performance for larger cubes
+
 ## [3.9.6] - 2022-10-12
 
 - Fix: IRIs of NFI cubes (previously there was None-None- includes in IRI; it was removed recently and we now migrate old IRIs to new IRIs)

From 146dec57d1b09f5023941fd99a895a5f1af85fca Mon Sep 17 00:00:00 2001
From: Patrick Browne <pt.browne@gmail.com>
Date: Thu, 20 Oct 2022 13:17:50 +0200
Subject: [PATCH 27/28] docs: Update changelog

---
 CHANGELOG.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4196519f7..24de1a4dd 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -13,6 +13,8 @@ You can also check the [release page](https://github.com/visualize-admin/visuali
   - Enable sorting of Geo dimensions
   - Maintain segment sorting type correctly when switching from / to Pie chart
   - Fix sorting by measure when undefined values are present in the data
+  - New "Automatic" sorting option using "identifier" or "position" or "label"
+  - Sorting is enabled for line charts (sorts legend items and tooltip values)
 - Map:
   - area & symbol layers now use the same approach as for segment field (optional select element), to be more consistent across the app
   - it's now possible to use discrete color mapping in symbol layer

From 8952a915f8482c05bea556e5c3084805af61fc21 Mon Sep 17 00:00:00 2001
From: Patrick Browne <pt.browne@gmail.com>
Date: Thu, 20 Oct 2022 13:21:28 +0200
Subject: [PATCH 28/28] chore: Add type hint

---
 app/docs/lines.docs.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/app/docs/lines.docs.tsx b/app/docs/lines.docs.tsx
index d9945334c..2158bf3f9 100644
--- a/app/docs/lines.docs.tsx
+++ b/app/docs/lines.docs.tsx
@@ -9,6 +9,7 @@ import { BrushTime } from "@/charts/shared/brush";
 import { ChartContainer, ChartSvg } from "@/charts/shared/containers";
 import { InteractiveLegendColor } from "@/charts/shared/legend-color";
 import { InteractiveFiltersProvider } from "@/charts/shared/use-interactive-filters";
+import { SortingField } from "@/configurator";
 import { DimensionMetadataFragment } from "@/graphql/query-hooks";
 
 export const Docs = () => markdown`
@@ -71,7 +72,10 @@ const fields = {
       "http://environment.ld.admin.ch/foen/px/0703010000_103/dimension/3",
     palette: "category10",
     type: "stacked",
-    sorting: { sortingType: "byDimensionLabel", sortingOrder: "asc" },
+    sorting: {
+      sortingType: "byDimensionLabel",
+      sortingOrder: "asc",
+    } as SortingField["sorting"],
     colorMapping: {
       "http://environment.ld.admin.ch/foen/px/0703010000_103/dimension/3/0":
         "#1f77b4",