feat: Combo charts improvements

CHANGELOG.md

@@ -9,10 +9,15 @@ You can also check the [release page](https://github.com/visualize-admin/visuali
 
 ## Unreleased
 
+- Features
+  - It's now possible to adjust Combo charts colors 🧑‍🎨
+- Fixes
+  - Color picker in now in sync with selected color palette
 - Performance
   - Improved the performance of data download
   - (min|max)Inclusive values stored in `sh:or` are now also retrieved
 - Style
+  - Color picker's design has been adjusted to be more user-friendly
   - Map now outlines shapes on hover, instead of changing their colors
 - Maintenance
   - Added retrieval of dimension units via `qudt:hasUnit` (but kept `qudt:unit` for backward compatibility)

app/charts/area/areas-state.tsx

@@ -8,6 +8,7 @@ import {
   scaleOrdinal,
   ScaleTime,
   scaleTime,
+  schemeCategory10,
   stack,
   stackOrderAscending,
   stackOrderDescending,
@@ -251,7 +252,7 @@ const useAreasState = (
 
         return {
           label: segment,
-          color: fields.segment?.colorMapping![dvIri] ?? "#006699",
+          color: fields.segment?.colorMapping![dvIri] ?? schemeCategory10[0],
         };
       });
 

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

@@ -112,6 +112,10 @@ type EncodingOption<T extends ChartConfig = ChartConfig> =
     }
   | {
       field: "useAbbreviations";
+    }
+  | {
+      field: "lineAxisOrientation";
+      onChange: OnEncodingOptionChange<"left" | "right", ComboLineColumnConfig>;
     };
 
 const onColorComponentScaleTypeChange: OnEncodingOptionChange<
@@ -928,6 +932,27 @@ const chartConfigOptionsUISpec: ChartSpecs = {
         customComponent: true,
         componentTypes: ["NumericalMeasure"],
         filters: false,
+        options: {
+          lineAxisOrientation: {
+            onChange: (_, options) => {
+              const { chartConfig } = options;
+              // 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;
+
+              chartConfig.fields.y.colorMapping = {
+                [firstIri]: chartConfig.fields.y.colorMapping[secondIri],
+                [secondIri]: chartConfig.fields.y.colorMapping[firstIri],
+              };
+            },
+          },
+        },
       },
       {
         field: "x",
@@ -967,5 +992,7 @@ export const getChartFieldOptionChangeSideEffect = (
     case "areaLayer.color.scaleType":
     case "symbolLayer.color.scaleType":
       return get(encoding, "options.colorComponent.onScaleTypeChange");
+    case "y.lineAxisOrientation":
+      return get(encoding, "options.lineAxisOrientation.onChange");
   }
 };

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

@@ -11,6 +11,7 @@ import {
   ScaleOrdinal,
   scaleOrdinal,
   scaleTime,
+  schemeCategory10,
   sum,
 } from "d3";
 import orderBy from "lodash/orderBy";
@@ -196,7 +197,7 @@ const useColumnsGroupedState = (
 
         return {
           label: segment,
-          color: fields.segment?.colorMapping![dvIri] || "#006699",
+          color: fields.segment?.colorMapping![dvIri] ?? schemeCategory10[0],
         };
       });
 

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

@@ -9,6 +9,7 @@ import {
   ScaleOrdinal,
   scaleOrdinal,
   scaleTime,
+  schemeCategory10,
   stack,
   stackOffsetDiverging,
   stackOrderAscending,
@@ -236,7 +237,7 @@ const useColumnsStackedState = (
 
         return {
           label: segment,
-          color: fields.segment?.colorMapping![dvIri] || "#006699",
+          color: fields.segment?.colorMapping![dvIri] ?? schemeCategory10[0],
         };
       });
 

app/charts/column/columns.tsx

@@ -1,3 +1,4 @@
+import { schemeCategory10 } from "d3";
 import React from "react";
 
 import { ColumnsState } from "@/charts/column/columns-state";
@@ -79,7 +80,7 @@ export const Columns = () => {
   const y0 = yScale(0);
   const renderData: RenderColumnDatum[] = React.useMemo(() => {
     const getColor = (d: number) => {
-      return d <= 0 ? theme.palette.secondary.main : theme.palette.primary.main;
+      return d <= 0 ? theme.palette.secondary.main : schemeCategory10[0];
     };
 
     return chartData.map((d) => {
@@ -108,7 +109,6 @@ export const Columns = () => {
     xScale,
     yScale,
     y0,
-    theme.palette.primary.main,
     theme.palette.secondary.main,
     getRenderingKey,
   ]);

app/charts/combo/axis-height-linear-dual.tsx

@@ -1,4 +1,3 @@
-import { alpha } from "@mui/material";
 import React from "react";
 
 import { ComboLineColumnState } from "@/charts/combo/combo-line-column-state";
@@ -10,16 +9,20 @@ import {
 import { useChartState } from "@/charts/shared/chart-state";
 import { useChartTheme } from "@/charts/shared/use-chart-theme";
 import { OpenMetadataPanelWrapper } from "@/components/metadata-panel";
+import { theme } from "@/themes/federal";
 import { getTextWidth } from "@/utils/get-text-width";
 
+const TITLE_HPADDING = 8;
+const TITLE_VPADDING = 4;
+
 type AxisHeightLinearDualProps = {
   orientation?: "left" | "right";
 };
 
 export const AxisHeightLinearDual = (props: AxisHeightLinearDualProps) => {
   const { orientation = "left" } = props;
   const leftAligned = orientation === "left";
-  const { axisLabelFontSize } = useChartTheme();
+  const { gridColor, labelColor, axisLabelFontSize } = useChartTheme();
   const [ref, setRef] = React.useState<SVGGElement | null>(null);
   const { y, yOrientationScales, colors, bounds, maxRightTickWidth } =
     useChartState() as ComboLineDualState | ComboLineColumnState;
@@ -32,13 +35,13 @@ export const AxisHeightLinearDual = (props: AxisHeightLinearDualProps) => {
 
   useRenderAxisHeightLinear(ref, {
     id: `axis-height-linear-${orientation}`,
-    orientation: orientation,
+    orientation,
     scale: yScale,
     width: bounds.chartWidth,
     height: bounds.chartHeight,
-    margins: bounds.margins,
-    lineColor: alpha(color, 0.1),
-    textColor: color,
+    margins,
+    lineColor: gridColor,
+    textColor: labelColor,
   });
 
   return (
@@ -52,14 +55,27 @@ export const AxisHeightLinearDual = (props: AxisHeightLinearDualProps) => {
               axisTitleWidth +
               // Align the title with the rightmost tick.
               maxRightTickWidth +
-              TICK_PADDING
+              TICK_PADDING -
+              TITLE_HPADDING * 2
         }
-        width={axisTitleWidth}
-        height={axisLabelFontSize * 2}
-        color={color}
+        width={axisTitleWidth + TITLE_HPADDING * 2}
+        height={(axisLabelFontSize + TITLE_VPADDING) * 2}
+        color={theme.palette.getContrastText(color)}
       >
         <OpenMetadataPanelWrapper dim={y[orientation].dimension}>
-          <span style={{ fontSize: axisLabelFontSize }}>{axisTitle}</span>
+          <span
+            style={{
+              fontSize: axisLabelFontSize,
+              backgroundColor: color,
+              paddingTop: TITLE_VPADDING,
+              paddingBottom: TITLE_VPADDING,
+              paddingLeft: TITLE_HPADDING,
+              paddingRight: TITLE_HPADDING,
+              borderRadius: 4,
+            }}
+          >
+            {axisTitle}
+          </span>
         </OpenMetadataPanelWrapper>
       </foreignObject>
       <g ref={(newRef) => setRef(newRef)} />

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

@@ -65,6 +65,7 @@ export const useComboLineColumnStateVariables = (
     dimension: measuresByIri[lineIri],
     iri: lineIri,
     label: getLabelWithUnit(measuresByIri[lineIri]),
+    color: fields.y.colorMapping[lineIri],
     getY: (d) => {
       return d[lineIri] !== null ? Number(d[lineIri]) : null;
     },
@@ -75,6 +76,7 @@ export const useComboLineColumnStateVariables = (
     dimension: measuresByIri[columnIri],
     iri: columnIri,
     label: getLabelWithUnit(measuresByIri[columnIri]),
+    color: fields.y.colorMapping[columnIri],
     getY: (d) => {
       return d[columnIri] !== null ? Number(d[columnIri]) : null;
     },

app/charts/combo/combo-line-column-state.tsx

@@ -157,7 +157,7 @@ const useComboLineColumnState = (
     const xScaled = (xScale(x) as number) + xScale.bandwidth() * 0.5;
 
     return {
-      datum: { label: "", value: "0", color: "#006699" },
+      datum: { label: "", value: "0", color: d3.schemeCategory10[0] },
       xAnchor: xScaled,
       yAnchor:
         [variables.y.left, variables.y.right]

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

@@ -49,6 +49,7 @@ export const useComboLineDualStateVariables = (
         dimension: measuresByIri[leftIri],
         iri: leftIri,
         label: getLabelWithUnit(measuresByIri[leftIri]),
+        color: fields.y.colorMapping[leftIri],
         getY: (d) => {
           return d[leftIri] !== null ? Number(d[leftIri]) : null;
         },
@@ -58,6 +59,7 @@ export const useComboLineDualStateVariables = (
         dimension: measuresByIri[rightIri],
         iri: rightIri,
         label: getLabelWithUnit(measuresByIri[rightIri]),
+        color: fields.y.colorMapping[rightIri],
         getY: (d) => {
           return d[rightIri] !== null ? Number(d[rightIri]) : null;
         },

app/charts/combo/combo-line-dual-state.tsx

@@ -137,7 +137,7 @@ const useComboLineDualState = (
     const xScaled = xScale(x);
 
     return {
-      datum: { label: "", value: "0", color: "#006699" },
+      datum: { label: "", value: "0", color: d3.schemeCategory10[0] },
       xAnchor: xScaled,
       yAnchor:
         [variables.y.left, variables.y.right]

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

@@ -42,6 +42,7 @@ export const useComboLineSingleStateVariables = (
         dimension: measuresByIri[iri],
         iri,
         label: measuresByIri[iri].label,
+        color: fields.y.colorMapping[iri],
         getY: (d) => {
           return d[iri] !== null ? Number(d[iri]) : null;
         },

app/charts/combo/combo-line-single-state.tsx

@@ -118,7 +118,7 @@ const useComboLineSingleState = (
     const xScaled = xScale(x);
 
     return {
-      datum: { label: "", value: "0", color: "#006699" },
+      datum: { label: "", value: "0", color: d3.schemeCategory10[0] },
       xAnchor: xScaled,
       yAnchor: yScale(
         variables.y.lines

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

@@ -8,6 +8,7 @@ export type BaseYGetter = {
   dimension: DimensionMetadataFragment;
   iri: string;
   label: string;
+  color: string;
   getY: (d: Observation) => number | null;
 };
 

app/charts/combo/combo-state.ts

@@ -4,7 +4,6 @@ import React from "react";
 import { useWidth } from "@/charts/shared/use-width";
 import { Observation } from "@/domain/data";
 import { useFormatNumber, useTimeFormatUnit } from "@/formatters";
-import { getPalette } from "@/palettes";
 
 type UseCommonComboStateOptions = {
   chartData: Observation[];
@@ -15,6 +14,7 @@ type UseCommonComboStateOptions = {
   yGetters: {
     label: string;
     getY: (d: Observation) => number | null;
+    color: string;
   }[];
   computeTotal: boolean;
 };
@@ -74,7 +74,7 @@ export const useCommonComboState = (options: UseCommonComboStateOptions) => {
 
   const colors = React.useMemo(() => {
     const domain = yGetters.map((d) => d.label);
-    const range = getPalette();
+    const range = yGetters.map((d) => d.color);
 
     return d3.scaleOrdinal<string, string>().domain(domain).range(range);
   }, [yGetters]);