Merge pull request #1930 from visualize-admin/refactor/chart-config-c…

…ustom-color-palettes
visualize-admin · Jan 14, 2025 · ca194bf · ca194bf
2 parents ae94562 + 8f66d7d
commit ca194bf
Show file tree

Hide file tree

Showing 61 changed files with 1,818 additions and 606 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -14,6 +14,8 @@ You can also check the
 - Features
   - Implemented Content Security Policy (CSP)
   - It's now possible to export charts as images
+	- Added support for custom colors in single and multi-colored charts, enabling enhanced visual customization.
+	- Introduced a new Color Picker, offering greater flexibility and precision in chart color selection.
   - Added Footer to the Profile Page
 - Fixes
   - Addressed security flaw allowing the injection of arbitrary URLs

diff --git a/app/charts/area/areas-state.tsx b/app/charts/area/areas-state.tsx
@@ -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,20 @@ 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(
+        getPalette({
+          paletteId: fields.color?.paletteId,
+          colorField: fields.color,
+        })
+      );
     }
 
     colors.unknown(() => undefined);
@@ -276,8 +282,7 @@ const useAreasState = (
       xScaleTimeRange,
     };
   }, [
-    fields.segment?.palette,
-    fields.segment?.colorMapping,
+    fields.color,
     getX,
     scalesData,
     timeRangeData,

diff --git a/app/charts/bar/bars-grouped-state.tsx b/app/charts/bar/bars-grouped-state.tsx
@@ -188,7 +188,7 @@ const useBarsGroupedState = (
   } = 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 ||
@@ -197,15 +197,23 @@ const useBarsGroupedState = (
 
         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({
+          paletteId: fields.color.paletteId,
+          colorField: fields.color,
+        })
+      );
     }
 
     colors.unknown(() => undefined);
@@ -276,6 +284,7 @@ const useBarsGroupedState = (
       yTimeRangeDomainLabels,
     };
   }, [
+    fields.color,
     fields.segment,
     fields.y?.sorting,
     fields.y?.useAbbreviations,

diff --git a/app/charts/bar/bars-stacked-state.tsx b/app/charts/bar/bars-stacked-state.tsx
@@ -227,11 +227,7 @@ const useBarsStackedState = (
   } = 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
@@ -247,15 +243,23 @@ const useBarsStackedState = (
 
         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({
+          paletteId: fields.color.paletteId,
+          colorField: fields.color,
+        })
+      );
     }
 
     colors.unknown(() => undefined);
@@ -297,6 +301,7 @@ const useBarsStackedState = (
       yScaleInteraction,
     };
   }, [
+    fields.color,
     fields.segment,
     fields.y.sorting,
     fields.y.useAbbreviations,

diff --git a/app/charts/chart-config-ui-options.spec.ts b/app/charts/chart-config-ui-options.spec.ts
@@ -1,7 +1,6 @@
 import { defaultSegmentOnChange } from "@/charts/chart-config-ui-options";
 import { ColumnConfig, ScatterPlotConfig } from "@/configurator";
 import { stringifyComponentId } from "@/graphql/make-component-id";
-import { DEFAULT_CATEGORICAL_PALETTE_NAME } from "@/palettes";
 
 jest.mock("../rdf/extended-cube", () => ({
   ExtendedCube: jest.fn(),
@@ -41,11 +40,14 @@ describe("defaultSegmentOnChange", () => {
       initializing: false,
       selectedValues: [],
     });
-    expect(Object.keys(chartConfig.fields)).toEqual(["segment"]);
+    expect(Object.keys(chartConfig.fields)).toEqual(["segment", "color"]);
     expect(chartConfig.fields.segment).toEqual(
       expect.objectContaining({
         componentId,
-        palette: DEFAULT_CATEGORICAL_PALETTE_NAME,
+        sorting: {
+          sortingOrder: "asc",
+          sortingType: "byAuto",
+        },
       })
     );
   });