Merge branch 'main' into feat/line-dots

# Conflicts: # app/config-types.ts
visualize-admin · Jan 15, 2025 · ff1265d · ff1265d
2 parents 2d8a8b6 + 37111d2
commit ff1265d
Show file tree

Hide file tree

Showing 72 changed files with 2,060 additions and 675 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -11,17 +11,28 @@ You can also check the
 
 # Unreleased
 
+Nothing yet.
+
+# [5.1.0] - 2025-01-14
+
 - Features
+  - Added a new chart type - bar
   - It's now possible to export charts as images
-  - Added Footer to the Profile Page
+  - 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 in the
+    `sourceUrl` parameter in the GraphQL API
   - Color mapping is now correctly kept up to date in case of editing an old
     chart and the cube has been updated in the meantime and contains new values
     in the color dimension
   - Fixed preview via API (iframe)
   - Fixed cut table scroll-bars and unnecessary scroll of bar charts when
     switching between chart types
-  - Improved Readability for dataset selection and preview
+  - Improved readability for dataset selection and preview
   - Sorting dataset results by score option is now correctly available to select
   - Created with visualize.admin.ch footnote is only displayed once, not twice,
     when downloading an image of a published chart
@@ -32,6 +43,7 @@ You can also check the
 - Styles
   - Updated dataset result borders to match the design
 - Maintenance
+  - Implemented Content Security Policy (CSP)
   - Re-enabled screenshot tests using Argos CI
   - Fixed E2E HAR-based tests
   - Added two new E2E tests for chart actions (duplication, image download)

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",
+        },
       })
     );
   });