Refactor/chart config custom color palettes

app/charts/area/areas-state.tsx

@@ -54,7 +54,7 @@ import { useSize } from "@/charts/shared/use-size";
 import { AreaConfig } from "@/configurator";
 import { Observation } from "@/domain/data";
 import { useFormatNumber, useTimeFormatUnit } from "@/formatters";
-import { getPalette } from "@/palettes";
+import { getPaletteId } from "@/palettes";
 import { useChartInteractiveFilters } from "@/stores/interactive-filters";
 import { sortByIndex } from "@/utils/array";
 import {
@@ -248,7 +248,8 @@ const useAreasState = (
     const xScaleTimeRange = scaleTime().domain(xScaleTimeRangeDomain);
     const colors = scaleOrdinal<string, string>();
 
-    if (segmentDimension && fields.segment?.colorMapping) {
+    if (segmentDimension && fields.color.type === "segment") {
+      const segmentColor = fields.color;
       const orderedSegmentLabelsAndColors = allSegments.map((segment) => {
         const dvIri =
           segmentsByAbbreviationOrLabel.get(segment)?.value ??
@@ -257,15 +258,15 @@ const useAreasState = (
 
         return {
           label: segment,
-          color: fields.segment?.colorMapping![dvIri] ?? schemeCategory10[0],
+          color: segmentColor.colorMapping[dvIri] ?? schemeCategory10[0],
         };
       });
 
       colors.domain(orderedSegmentLabelsAndColors.map((s) => s.label));
       colors.range(orderedSegmentLabelsAndColors.map((s) => s.color));
     } else {
       colors.domain(allSegments);
-      colors.range(getPalette(fields.segment?.palette));
+      colors.range(getPaletteId(fields.color.paletteId));
     }
 
     colors.unknown(() => undefined);
@@ -276,8 +277,7 @@ const useAreasState = (
       xScaleTimeRange,
     };
   }, [
-    fields.segment?.palette,
-    fields.segment?.colorMapping,
+    fields.color,
     getX,
     scalesData,
     timeRangeData,

app/charts/chart-config-ui-options.ts

@@ -19,7 +19,6 @@
   ChartConfig,
   ChartSubType,
   ChartType,
-  ColorField,
   ColorScaleType,
   ColumnConfig,
   ColumnSegmentField,
@@ -29,6 +28,7 @@
   ComponentType,
   GenericField,
   LineConfig,
+  MapColorField,
   MapConfig,
   PaletteType,
   PieConfig,
@@ -56,7 +56,7 @@
   isTemporalEntityDimension,
   isTemporalOrdinalDimension,
 } from "@/domain/data";
-import { getDefaultCategoricalPaletteName, getPalette } from "@/palettes";
+import { getDefaultCategoricalPaletteId, getPaletteId } from "@/palettes";
 
 /**
  * This module controls chart controls displayed in the UI.
@@ -65,7 +65,7 @@
 
 type BaseEncodingFieldType = "animation";
 type MapEncodingFieldType = "baseLayer" | "areaLayer" | "symbolLayer";
-type XYEncodingFieldType = "x" | "y" | "segment";
+type XYEncodingFieldType = "x" | "y" | "segment" | "color";
 export type EncodingFieldType =
   | BaseEncodingFieldType
   | MapEncodingFieldType
@@ -175,7 +175,7 @@
 ) => {
   const basePath = `fields["${field}"]`;
   const components = [...dimensions, ...measures];
-  let newField: ColorField = DEFAULT_FIXED_COLOR_FIELD;
+  let newField: MapColorField = DEFAULT_FIXED_COLOR_FIELD;
   const component = components.find((d) => d.id === id);
   const currentColorComponentId = get(
     chartConfig,
@@ -192,7 +192,7 @@
       MULTI_FILTER_ENABLED_COMPONENTS.includes(component.__typename) ||
       isOrdinalMeasure(component)
     ) {
-      const palette = getDefaultCategoricalPaletteName(component, colorPalette);
+      const palette = getDefaultCategoricalPaletteId(component, colorPalette);
       newField = getDefaultCategoricalColorField({
         id,
         palette,
@@ -411,7 +411,7 @@
     }
 
     const fieldComponentsMap = Object.fromEntries(
       Object.entries<GenericField>(chartConfig.fields)
         .filter((d) => d[0] !== "animation")
         .map(([k, v]) => [v.componentId, k])
     );
@@ -483,25 +483,27 @@
 > = (id, { chartConfig, dimensions, measures, selectedValues }) => {
   const components = [...dimensions, ...measures];
   const component = components.find((d) => d.id === id);
-  const palette = getDefaultCategoricalPaletteName(
+  const palette = getDefaultCategoricalPaletteId(
     component,
-    chartConfig.fields.segment && "palette" in chartConfig.fields.segment
-      ? chartConfig.fields.segment.palette
+    chartConfig.fields.color && "paletteId" in chartConfig.fields.color
+      ? chartConfig.fields.color.paletteId
       : undefined
   );
   const colorMapping = mapValueIrisToColor({
     palette,
     dimensionValues: component ? component.values : selectedValues,
   });
 
-  if (chartConfig.fields.segment && "palette" in chartConfig.fields.segment) {
+  if (chartConfig.fields.segment) {
     chartConfig.fields.segment.componentId = id;
-    chartConfig.fields.segment.colorMapping = colorMapping;
   } else {
     chartConfig.fields.segment = {
       componentId: id,
-      palette,
       sorting: DEFAULT_SORTING,
+    };
+    chartConfig.fields.color = {
+      type: "segment",
+      paletteId: palette,
       colorMapping,
     };
   }
@@ -955,12 +957,12 @@
             onChange: (ids, options) => {
               const { chartConfig } = options;
               const { fields } = chartConfig;
-              const { y } = fields;
-              const palette = getPalette(y.palette);
+              const { color } = fields;
+              const palette = getPaletteId(color.paletteId);
               const newColorMapping = Object.fromEntries(
-                ids.map((id, i) => [id, y.colorMapping[i] ?? palette[i]])
+                ids.map((id, i) => [id, color.colorMapping[i] ?? palette[i]])
               );
-              chartConfig.fields.y.colorMapping = newColorMapping;
+              chartConfig.fields.color.colorMapping = newColorMapping;
             },
           },
         },
@@ -990,22 +992,23 @@
             onChange: (id, options) => {
               const { chartConfig } = options;
               const { fields } = chartConfig;
-              const { y } = fields;
-              chartConfig.fields.y.colorMapping = {
-                [id]: y.colorMapping[y.leftAxisComponentId],
+              const { y, color } = fields;
+              chartConfig.fields.color.colorMapping = {
+                [id]: color.colorMapping[y.leftAxisComponentId],
                 [y.rightAxisComponentId]:
-                  y.colorMapping[y.rightAxisComponentId],
+                  color.colorMapping[y.rightAxisComponentId],
               };
             },
           },
           rightAxisComponentId: {
             onChange: (id, options) => {
               const { chartConfig } = options;
               const { fields } = chartConfig;
-              const { y } = fields;
-              chartConfig.fields.y.colorMapping = {
-                [y.leftAxisComponentId]: y.colorMapping[y.leftAxisComponentId],
-                [id]: y.colorMapping[y.rightAxisComponentId],
+              const { y, color } = fields;
+              chartConfig.fields.color.colorMapping = {
+                [y.leftAxisComponentId]:
+                  color.colorMapping[y.leftAxisComponentId],
+                [id]: color.colorMapping[y.rightAxisComponentId],
               };
             },
           },
@@ -1036,11 +1039,11 @@
             onChange: (id, options) => {
               const { chartConfig } = options;
               const { fields } = chartConfig;
-              const { y } = fields;
-              const lineColor = y.colorMapping[y.lineComponentId];
-              const columnColor = y.colorMapping[y.columnComponentId];
+              const { y, color } = fields;
+              const lineColor = color.colorMapping[y.lineComponentId];
+              const columnColor = color.colorMapping[y.columnComponentId];
 
-              chartConfig.fields.y.colorMapping =
+              chartConfig.fields.color.colorMapping =
                 y.lineAxisOrientation === "left"
                   ? { [id]: lineColor, [y.columnComponentId]: columnColor }
                   : { [y.columnComponentId]: columnColor, [id]: lineColor };
@@ -1050,11 +1053,11 @@
             onChange: (id, options) => {
               const { chartConfig } = options;
               const { fields } = chartConfig;
-              const { y } = fields;
-              const columnColor = y.colorMapping[y.columnComponentId];
-              const lineColor = y.colorMapping[y.lineComponentId];
+              const { y, color } = fields;
+              const columnColor = color.colorMapping[y.columnComponentId];
+              const lineColor = color.colorMapping[y.lineComponentId];
 
-              chartConfig.fields.y.colorMapping =
+              chartConfig.fields.color.colorMapping =
                 y.lineAxisOrientation === "left"
                   ? { [y.lineComponentId]: lineColor, [id]: columnColor }
                   : { [id]: columnColor, [y.lineComponentId]: lineColor };
@@ -1064,7 +1067,7 @@
             onChange: (_, options) => {
               const { chartConfig } = options;
               const { fields } = chartConfig;
-              const { y } = fields;
+              const { y, color } = fields;
               const lineAxisLeft = y.lineAxisOrientation === "left";
               // Need the correct order to not enable "Reset color palette" button.
               const firstId = lineAxisLeft
@@ -1074,9 +1077,9 @@
                 ? y.lineComponentId
                 : y.columnComponentId;
 
-              chartConfig.fields.y.colorMapping = {
-                [firstId]: y.colorMapping[secondId],
-                [secondId]: y.colorMapping[firstId],
+              chartConfig.fields.color.colorMapping = {
+                [firstId]: color.colorMapping[secondId],
+                [secondId]: color.colorMapping[firstId],
               };
             },
           },

app/charts/column/columns-grouped-state.tsx

@@ -44,7 +44,7 @@ import { useSize } from "@/charts/shared/use-size";
 import { ColumnConfig } from "@/configurator";
 import { Observation } from "@/domain/data";
 import { formatNumberWithUnit, useFormatNumber } from "@/formatters";
-import { getPalette } from "@/palettes";
+import { getPaletteId } from "@/palettes";
 import { sortByIndex } from "@/utils/array";
 import {
   getSortingOrders,
@@ -189,7 +189,8 @@ const useColumnsGroupedState = (
   } = useMemo(() => {
     const colors = scaleOrdinal<string, string>();
 
-    if (fields.segment && segmentDimension && fields.segment.colorMapping) {
+    if (fields.segment && segmentDimension && fields.color.type === "segment") {
+      const segmentColor = fields.color;
       const orderedSegmentLabelsAndColors = allSegments.map((segment) => {
         const dvIri =
           segmentsByAbbreviationOrLabel.get(segment)?.value ||
@@ -198,15 +199,15 @@ const useColumnsGroupedState = (
 
         return {
           label: segment,
-          color: fields.segment?.colorMapping![dvIri] ?? schemeCategory10[0],
+          color: segmentColor.colorMapping![dvIri] ?? schemeCategory10[0],
         };
       });
 
       colors.domain(orderedSegmentLabelsAndColors.map((s) => s.label));
       colors.range(orderedSegmentLabelsAndColors.map((s) => s.color));
     } else {
       colors.domain(allSegments);
-      colors.range(getPalette(fields.segment?.palette));
+      colors.range(getPaletteId(fields.color.paletteId));
     }
 
     colors.unknown(() => undefined);
@@ -278,6 +279,7 @@ const useColumnsGroupedState = (
     };
   }, [
     fields.segment,
+    fields.color,
     fields.x?.sorting,
     fields.x?.useAbbreviations,
     segmentDimension,

app/charts/column/columns-stacked-state.tsx

@@ -56,7 +56,7 @@ import { useSize } from "@/charts/shared/use-size";
 import { ColumnConfig } from "@/configurator";
 import { Observation } from "@/domain/data";
 import { useFormatNumber } from "@/formatters";
-import { getPalette } from "@/palettes";
+import { getPaletteId } from "@/palettes";
 import { useChartInteractiveFilters } from "@/stores/interactive-filters";
 import { sortByIndex } from "@/utils/array";
 import {
@@ -227,8 +227,9 @@ const useColumnsStackedState = (
     if (
       fields.segment &&
       segmentsByAbbreviationOrLabel &&
-      fields.segment.colorMapping
+      fields.color.type === "segment"
     ) {
+      const segmentColor = fields.color;
       const orderedSegmentLabelsAndColors = allSegments.map((segment) => {
         // FIXME: Labels in observations can differ from dimension values because the latter can be concatenated to only appear once per value
         // See https://github.com/visualize-admin/visualization-tool/issues/97
@@ -244,15 +245,15 @@ const useColumnsStackedState = (
 
         return {
           label: segment,
-          color: fields.segment?.colorMapping![dvIri] ?? schemeCategory10[0],
+          color: segmentColor.colorMapping![dvIri] ?? schemeCategory10[0],
         };
       });
 
       colors.domain(orderedSegmentLabelsAndColors.map((s) => s.label));
       colors.range(orderedSegmentLabelsAndColors.map((s) => s.color));
     } else {
       colors.domain(allSegments);
-      colors.range(getPalette(fields.segment?.palette));
+      colors.range(getPaletteId(fields.color.paletteId));
     }
 
     colors.unknown(() => undefined);
@@ -295,6 +296,7 @@ const useColumnsStackedState = (
     };
   }, [
     fields.segment,
+    fields.color,
     fields.x.sorting,
     fields.x.useAbbreviations,
     xDimension,

app/charts/combo/combo-line-column-state-props.ts

@@ -77,7 +77,7 @@ export const useComboLineColumnStateVariables = (
     dimension: measuresById[lineId],
     id: lineId,
     label: getLabelWithUnit(measuresById[lineId]),
-    color: fields.y.colorMapping[lineId],
+    color: fields.color.colorMapping[lineId],
     getY: (d) => (d[lineId] !== null ? Number(d[lineId]) : null),
     getMinY: (data) => {
       const minY =
@@ -94,7 +94,7 @@ export const useComboLineColumnStateVariables = (
     dimension: measuresById[columnId],
     id: columnId,
     label: getLabelWithUnit(measuresById[columnId]),
-    color: fields.y.colorMapping[columnId],
+    color: fields.color.colorMapping[columnId],
     getY: (d) => (d[columnId] !== null ? Number(d[columnId]) : null),
     getMinY: (data) => {
       const minY =

app/charts/combo/combo-line-dual-state-props.ts

@@ -60,7 +60,7 @@ export const useComboLineDualStateVariables = (
         dimension: measuresById[leftId],
         id: leftId,
         label: getLabelWithUnit(measuresById[leftId]),
-        color: fields.y.colorMapping[leftId],
+        color: fields.color.colorMapping[leftId],
         getY: (d) => (d[leftId] !== null ? Number(d[leftId]) : null),
         getMinY: (data) => {
           const minY =
@@ -77,7 +77,7 @@ export const useComboLineDualStateVariables = (
         dimension: measuresById[rightId],
         id: rightId,
         label: getLabelWithUnit(measuresById[rightId]),
-        color: fields.y.colorMapping[rightId],
+        color: fields.color.colorMapping[rightId],
         getY: (d) => (d[rightId] !== null ? Number(d[rightId]) : null),
         getMinY: (data) => {
           const minY =

app/charts/combo/combo-line-single-state-props.ts

@@ -53,7 +53,7 @@ export const useComboLineSingleStateVariables = (
         dimension: measuresById[id],
         id,
         label: measuresById[id].label,
-        color: fields.y.colorMapping[id],
+        color: fields.color.colorMapping[id],
         getY: (d) => (d[id] !== null ? Number(d[id]) : null),
         getMinY: (data) => {
           const minY =

app/charts/index.spec.ts

@@ -275,6 +275,11 @@ describe("chart type switch", () => {
         y: {
           componentId: "https://environment.ld.admin.ch/foen/ubd0104/value",
         },
+        color: {
+          type: "segment",
+          paletteId: "category10",
+          colorMapping: {},
+        },
       },
       interactiveFiltersConfig: {
         legend: {