From c202f502311de1de4b33052f2de38771c1bbe486 Mon Sep 17 00:00:00 2001
From: Bartosz Prusinowski <bartoszprusinowski1@gmail.com>
Date: Wed, 25 Oct 2023 11:22:03 +0200
Subject: [PATCH] fix: Combo charts measure changes

---
 app/charts/chart-config-ui-options.ts | 130 +++++++++++++++++++++++---
 1 file changed, 119 insertions(+), 11 deletions(-)

diff --git a/app/charts/chart-config-ui-options.ts b/app/charts/chart-config-ui-options.ts
index d56065d751..013eec2a34 100644
--- a/app/charts/chart-config-ui-options.ts
+++ b/app/charts/chart-config-ui-options.ts
@@ -47,7 +47,7 @@ import {
   isTemporalOrdinalDimension,
 } from "@/domain/data";
 import { DimensionMetadataFragment } from "@/graphql/query-hooks";
-import { getDefaultCategoricalPaletteName } from "@/palettes";
+import { getDefaultCategoricalPaletteName, getPalette } from "@/palettes";
 
 /**
  * This module controls chart controls displayed in the UI.
@@ -113,9 +113,31 @@ type EncodingOption<T extends ChartConfig = ChartConfig> =
   | {
       field: "useAbbreviations";
     }
+  // TODO: As these are quite chart type specific, they might be handled in
+  // some other way.
   | {
       field: "lineAxisOrientation";
       onChange: OnEncodingOptionChange<"left" | "right", ComboLineColumnConfig>;
+    }
+  | {
+      field: "componentIris";
+      onChange: OnEncodingOptionChange<string[], ComboLineSingleConfig>;
+    }
+  | {
+      field: "leftAxisComponentIri";
+      onChange: OnEncodingOptionChange<string, ComboLineDualConfig>;
+    }
+  | {
+      field: "rightAxisComponentIri";
+      onChange: OnEncodingOptionChange<string, ComboLineDualConfig>;
+    }
+  | {
+      field: "lineComponentIri";
+      onChange: OnEncodingOptionChange<string, ComboLineColumnConfig>;
+    }
+  | {
+      field: "columnComponentIri";
+      onChange: OnEncodingOptionChange<string, ComboLineColumnConfig>;
     };
 
 const onColorComponentScaleTypeChange: OnEncodingOptionChange<
@@ -894,6 +916,21 @@ const chartConfigOptionsUISpec: ChartSpecs = {
         customComponent: true,
         componentTypes: ["NumericalMeasure"],
         filters: false,
+        options: {
+          componentIris: {
+            onChange: (iris, options) => {
+              const { chartConfig } = options;
+              const palette = getPalette(chartConfig.fields.y.palette);
+              const newColorMapping = Object.fromEntries(
+                iris.map((iri, i) => [
+                  iri,
+                  chartConfig.fields.y.colorMapping[i] ?? palette[i],
+                ])
+              );
+              chartConfig.fields.y.colorMapping = newColorMapping;
+            },
+          },
+        },
       },
       {
         field: "x",
@@ -913,6 +950,38 @@ const chartConfigOptionsUISpec: ChartSpecs = {
         customComponent: true,
         componentTypes: ["NumericalMeasure"],
         filters: false,
+        options: {
+          leftAxisComponentIri: {
+            onChange: (iri, options) => {
+              const { chartConfig } = options;
+              chartConfig.fields.y.colorMapping = {
+                [iri]:
+                  chartConfig.fields.y.colorMapping[
+                    chartConfig.fields.y.leftAxisComponentIri
+                  ],
+                [chartConfig.fields.y.rightAxisComponentIri]:
+                  chartConfig.fields.y.colorMapping[
+                    chartConfig.fields.y.rightAxisComponentIri
+                  ],
+              };
+            },
+          },
+          rightAxisComponentIri: {
+            onChange: (iri, options) => {
+              const { chartConfig } = options;
+              chartConfig.fields.y.colorMapping = {
+                [chartConfig.fields.y.leftAxisComponentIri]:
+                  chartConfig.fields.y.colorMapping[
+                    chartConfig.fields.y.leftAxisComponentIri
+                  ],
+                [iri]:
+                  chartConfig.fields.y.colorMapping[
+                    chartConfig.fields.y.rightAxisComponentIri
+                  ],
+              };
+            },
+          },
+        },
       },
       {
         field: "x",
@@ -933,22 +1002,51 @@ const chartConfigOptionsUISpec: ChartSpecs = {
         componentTypes: ["NumericalMeasure"],
         filters: false,
         options: {
+          lineComponentIri: {
+            onChange: (iri, options) => {
+              const { chartConfig } = options;
+              const { fields } = chartConfig;
+              const { y } = fields;
+              const lineColor = y.colorMapping[y.lineComponentIri];
+              const columnColor = y.colorMapping[y.columnComponentIri];
+
+              chartConfig.fields.y.colorMapping =
+                y.lineAxisOrientation === "left"
+                  ? { [iri]: lineColor, [y.columnComponentIri]: columnColor }
+                  : { [y.columnComponentIri]: columnColor, [iri]: lineColor };
+            },
+          },
+          columnComponentIri: {
+            onChange: (iri, options) => {
+              const { chartConfig } = options;
+              const { fields } = chartConfig;
+              const { y } = fields;
+              const columnColor = y.colorMapping[y.columnComponentIri];
+              const lineColor = y.colorMapping[y.lineComponentIri];
+
+              chartConfig.fields.y.colorMapping =
+                y.lineAxisOrientation === "left"
+                  ? { [y.lineComponentIri]: lineColor, [iri]: columnColor }
+                  : { [iri]: columnColor, [y.lineComponentIri]: lineColor };
+            },
+          },
           lineAxisOrientation: {
             onChange: (_, options) => {
               const { chartConfig } = options;
+              const { fields } = chartConfig;
+              const { y } = fields;
+              const lineAxisLeft = y.lineAxisOrientation === "left";
               // Need the correct order to not enable "Reset color palette" button.
-              const firstIri =
-                chartConfig.fields.y.lineAxisOrientation === "left"
-                  ? chartConfig.fields.y.columnComponentIri
-                  : chartConfig.fields.y.lineComponentIri;
-              const secondIri =
-                chartConfig.fields.y.lineAxisOrientation === "left"
-                  ? chartConfig.fields.y.lineComponentIri
-                  : chartConfig.fields.y.columnComponentIri;
+              const firstIri = lineAxisLeft
+                ? y.columnComponentIri
+                : y.lineComponentIri;
+              const secondIri = lineAxisLeft
+                ? y.lineComponentIri
+                : y.columnComponentIri;
 
               chartConfig.fields.y.colorMapping = {
-                [firstIri]: chartConfig.fields.y.colorMapping[secondIri],
-                [secondIri]: chartConfig.fields.y.colorMapping[firstIri],
+                [firstIri]: y.colorMapping[secondIri],
+                [secondIri]: y.colorMapping[firstIri],
               };
             },
           },
@@ -992,7 +1090,17 @@ export const getChartFieldOptionChangeSideEffect = (
     case "areaLayer.color.scaleType":
     case "symbolLayer.color.scaleType":
       return get(encoding, "options.colorComponent.onScaleTypeChange");
+    case "y.componentIris":
+      return get(encoding, "options.componentIris.onChange");
     case "y.lineAxisOrientation":
       return get(encoding, "options.lineAxisOrientation.onChange");
+    case "y.leftAxisComponentIri":
+      return get(encoding, "options.leftAxisComponentIri.onChange");
+    case "y.rightAxisComponentIri":
+      return get(encoding, "options.rightAxisComponentIri.onChange");
+    case "y.lineComponentIri":
+      return get(encoding, "options.lineComponentIri.onChange");
+    case "y.columnComponentIri":
+      return get(encoding, "options.columnComponentIri.onChange");
   }
 };