refactor: fixed all erros that occured due to chart config refactor

visualize-admin · Dec 3, 2024 · 4465745 · 4465745
1 parent 6f5f99f
commit 4465745
Show file tree

Hide file tree

Showing 19 changed files with 285 additions and 145 deletions.
diff --git a/app/charts/area/areas-state.tsx b/app/charts/area/areas-state.tsx
@@ -248,7 +248,7 @@ const useAreasState = (
     const xScaleTimeRange = scaleTime().domain(xScaleTimeRangeDomain);
     const colors = scaleOrdinal<string, string>();
 
-    if (segmentDimension && fields.segment?.colorMapping) {
+    if (segmentDimension && fields.color) {
       const orderedSegmentLabelsAndColors = allSegments.map((segment) => {
         const dvIri =
           segmentsByAbbreviationOrLabel.get(segment)?.value ??
@@ -257,15 +257,18 @@ const useAreasState = (
 
         return {
           label: segment,
-          color: fields.segment?.colorMapping![dvIri] ?? schemeCategory10[0],
+          color:
+            fields.color.type === "segment"
+              ? fields.color.colorMapping![dvIri] ?? schemeCategory10[0]
+              : 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(getPalette(fields.color.paletteId));
     }
 
     colors.unknown(() => undefined);
@@ -276,8 +279,7 @@ const useAreasState = (
       xScaleTimeRange,
     };
   }, [
-    fields.segment?.palette,
-    fields.segment?.colorMapping,
+    fields.color,
     getX,
     scalesData,
     timeRangeData,

diff --git a/app/charts/chart-config-ui-options.ts b/app/charts/chart-config-ui-options.ts
@@ -485,8 +485,8 @@ export const defaultSegmentOnChange: OnEncodingChange<
   const component = components.find((d) => d.id === id);
   const palette = getDefaultCategoricalPaletteName(
     component,
-    chartConfig.fields.segment && "palette" in chartConfig.fields.segment
-      ? chartConfig.fields.segment.palette
+    chartConfig.fields.color && "palette" in chartConfig.fields.color
+      ? chartConfig.fields.color.paletteId
       : undefined
   );
   const colorMapping = mapValueIrisToColor({
@@ -496,12 +496,14 @@ export const defaultSegmentOnChange: OnEncodingChange<
 
   if (chartConfig.fields.segment && "palette" in 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 @@ const chartConfigOptionsUISpec: ChartSpecs = {
             onChange: (ids, options) => {
               const { chartConfig } = options;
               const { fields } = chartConfig;
-              const { y } = fields;
-              const palette = getPalette(y.palette);
+              const { color } = fields;
+              const palette = getPalette(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 @@ const chartConfigOptionsUISpec: ChartSpecs = {
             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 @@ const chartConfigOptionsUISpec: ChartSpecs = {
             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 @@ const chartConfigOptionsUISpec: ChartSpecs = {
             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 @@ const chartConfigOptionsUISpec: ChartSpecs = {
             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 @@ const chartConfigOptionsUISpec: ChartSpecs = {
                 ? 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],
               };
             },
           },

diff --git a/app/charts/column/columns-grouped-state.tsx b/app/charts/column/columns-grouped-state.tsx
@@ -189,7 +189,7 @@ const useColumnsGroupedState = (
   } = useMemo(() => {
     const colors = scaleOrdinal<string, string>();
 
-    if (fields.segment && segmentDimension && fields.segment.colorMapping) {
+    if (fields.segment && segmentDimension && fields.color) {
       const orderedSegmentLabelsAndColors = allSegments.map((segment) => {
         const dvIri =
           segmentsByAbbreviationOrLabel.get(segment)?.value ||
@@ -198,15 +198,18 @@ const useColumnsGroupedState = (
 
         return {
           label: segment,
-          color: fields.segment?.colorMapping![dvIri] ?? schemeCategory10[0],
+          color:
+            fields.color.type === "segment"
+              ? fields.color.colorMapping![dvIri] ?? schemeCategory10[0]
+              : 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(getPalette(fields.color.paletteId));
     }
 
     colors.unknown(() => undefined);
@@ -278,6 +281,7 @@ const useColumnsGroupedState = (
     };
   }, [
     fields.segment,
+    fields.color,
     fields.x?.sorting,
     fields.x?.useAbbreviations,
     segmentDimension,

diff --git a/app/charts/column/columns-stacked-state.tsx b/app/charts/column/columns-stacked-state.tsx
@@ -224,11 +224,7 @@ const useColumnsStackedState = (
   } = useMemo(() => {
     const colors = scaleOrdinal<string, string>();
 
-    if (
-      fields.segment &&
-      segmentsByAbbreviationOrLabel &&
-      fields.segment.colorMapping
-    ) {
+    if (fields.segment && segmentsByAbbreviationOrLabel && 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 +240,18 @@ const useColumnsStackedState = (
 
         return {
           label: segment,
-          color: fields.segment?.colorMapping![dvIri] ?? schemeCategory10[0],
+          color:
+            fields.color.type === "segment"
+              ? fields.color.colorMapping![dvIri] ?? schemeCategory10[0]
+              : 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(getPalette(fields.color.paletteId));
     }
 
     colors.unknown(() => undefined);
@@ -295,6 +294,7 @@ const useColumnsStackedState = (
     };
   }, [
     fields.segment,
+    fields.color,
     fields.x.sorting,
     fields.x.useAbbreviations,
     xDimension,

diff --git a/app/charts/combo/combo-line-column-state-props.ts b/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 =

diff --git a/app/charts/combo/combo-line-dual-state-props.ts b/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 =

diff --git a/app/charts/combo/combo-line-single-state-props.ts b/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 =

diff --git a/app/charts/index.spec.ts b/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: {