wip

visualize-admin · Dec 5, 2024 · ac51939 · ac51939
1 parent c0938df
commit ac51939
Show file tree

Hide file tree

Showing 36 changed files with 475 additions and 293 deletions.
diff --git a/app/charts/area/areas-state.tsx b/app/charts/area/areas-state.tsx
@@ -54,7 +54,7 @@ import { useSize } from "@/charts/shared/use-size";
 import { AreaConfig } from "@/configurator";
 import { Observation } from "@/domain/data";
 import { useFormatNumber, useTimeFormatUnit } from "@/formatters";
-import { getPaletteId } from "@/palettes";
+import { getPalette } from "@/palettes";
 import { useChartInteractiveFilters } from "@/stores/interactive-filters";
 import { sortByIndex } from "@/utils/array";
 import {
@@ -248,7 +248,7 @@ const useAreasState = (
     const xScaleTimeRange = scaleTime().domain(xScaleTimeRangeDomain);
     const colors = scaleOrdinal<string, string>();
 
-    if (segmentDimension && fields.color.type === "segment") {
+    if (segmentDimension && fields.color?.type === "segment") {
       const segmentColor = fields.color;
       const orderedSegmentLabelsAndColors = allSegments.map((segment) => {
         const dvIri =
@@ -266,7 +266,7 @@ const useAreasState = (
       colors.range(orderedSegmentLabelsAndColors.map((s) => s.color));
     } else {
       colors.domain(allSegments);
-      colors.range(getPaletteId(fields.color.paletteId));
+      colors.range(getPalette(fields.color?.paletteId));
     }
 
     colors.unknown(() => undefined);

diff --git a/app/charts/chart-config-ui-options.spec.ts b/app/charts/chart-config-ui-options.spec.ts
@@ -1,7 +1,7 @@
 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";
+import { DEFAULT_CATEGORICAL_PALETTE_ID } from "@/palettes";
 
 jest.mock("../rdf/extended-cube", () => ({
   ExtendedCube: jest.fn(),
@@ -45,7 +45,7 @@ describe("defaultSegmentOnChange", () => {
     expect(chartConfig.fields.segment).toEqual(
       expect.objectContaining({
         componentId,
-        palette: DEFAULT_CATEGORICAL_PALETTE_NAME,
+        palette: DEFAULT_CATEGORICAL_PALETTE_ID,
       })
     );
   });

diff --git a/app/charts/chart-config-ui-options.ts b/app/charts/chart-config-ui-options.ts
@@ -56,7 +56,7 @@ import {
   isTemporalEntityDimension,
   isTemporalOrdinalDimension,
 } from "@/domain/data";
-import { getDefaultCategoricalPaletteId, getPaletteId } from "@/palettes";
+import { getDefaultCategoricalPaletteId, getPalette } from "@/palettes";
 
 /**
  * This module controls chart controls displayed in the UI.
@@ -192,10 +192,13 @@ const onColorComponentIdChange: OnEncodingOptionChange<string, MapConfig> = (
       MULTI_FILTER_ENABLED_COMPONENTS.includes(component.__typename) ||
       isOrdinalMeasure(component)
     ) {
-      const palette = getDefaultCategoricalPaletteId(component, colorPalette);
+      const paletteId = getDefaultCategoricalPaletteId(
+        component,
+        colorPalette?.paletteId
+      );
       newField = getDefaultCategoricalColorField({
         id,
-        palette,
+        paletteId,
         dimensionValues: component.values,
       });
     } else if (isNumericalMeasure(component)) {
@@ -483,14 +486,14 @@ export const defaultSegmentOnChange: OnEncodingChange<
 > = (id, { chartConfig, dimensions, measures, selectedValues }) => {
   const components = [...dimensions, ...measures];
   const component = components.find((d) => d.id === id);
-  const palette = getDefaultCategoricalPaletteId(
+  const paletteId = getDefaultCategoricalPaletteId(
     component,
     chartConfig.fields.color && "paletteId" in chartConfig.fields.color
       ? chartConfig.fields.color.paletteId
       : undefined
   );
   const colorMapping = mapValueIrisToColor({
-    palette,
+    paletteId,
     dimensionValues: component ? component.values : selectedValues,
   });
 
@@ -503,7 +506,7 @@ export const defaultSegmentOnChange: OnEncodingChange<
     };
     chartConfig.fields.color = {
       type: "segment",
-      paletteId: palette,
+      paletteId: paletteId,
       colorMapping,
     };
   }
@@ -607,7 +610,11 @@ const chartConfigOptionsUISpec: ChartSpecs = {
         },
         options: {
           calculation: {},
-          colorPalette: {},
+          colorPalette: {
+            type: "single",
+            paletteId: "dimension",
+            colorMapping: {},
+          },
           imputation: {
             shouldShow: (chartConfig, data) => {
               return isMissingDataPresent(chartConfig, data);
@@ -763,7 +770,11 @@ const chartConfigOptionsUISpec: ChartSpecs = {
               }
             },
           },
-          colorPalette: {},
+          colorPalette: {
+            type: "single",
+            paletteId: "dimension",
+            colorMapping: {},
+          },
           useAbbreviations: {},
         },
       },
@@ -781,6 +792,11 @@ const chartConfigOptionsUISpec: ChartSpecs = {
         componentTypes: ["NumericalMeasure"],
         filters: false,
         options: {
+          colorPalette: {
+            type: "single",
+            paletteId: "dimension",
+            colorMapping: {},
+          },
           showStandardError: {},
           showConfidenceInterval: {},
         },
@@ -801,7 +817,11 @@ const chartConfigOptionsUISpec: ChartSpecs = {
         sorting: LINE_SEGMENT_SORTING,
         onChange: defaultSegmentOnChange,
         options: {
-          colorPalette: {},
+          colorPalette: {
+            type: "single",
+            paletteId: "dimension",
+            colorMapping: {},
+          },
           useAbbreviations: {},
         },
       },
@@ -894,7 +914,11 @@ const chartConfigOptionsUISpec: ChartSpecs = {
         sorting: PIE_SEGMENT_SORTING,
         onChange: defaultSegmentOnChange,
         options: {
-          colorPalette: {},
+          colorPalette: {
+            type: "single",
+            paletteId: "dimension",
+            colorMapping: {},
+          },
           useAbbreviations: {},
         },
       },
@@ -927,7 +951,11 @@ const chartConfigOptionsUISpec: ChartSpecs = {
         filters: true,
         onChange: defaultSegmentOnChange,
         options: {
-          colorPalette: {},
+          colorPalette: {
+            type: "single",
+            paletteId: "dimension",
+            colorMapping: {},
+          },
           useAbbreviations: {},
         },
       },
@@ -958,7 +986,7 @@ const chartConfigOptionsUISpec: ChartSpecs = {
               const { chartConfig } = options;
               const { fields } = chartConfig;
               const { color } = fields;
-              const palette = getPaletteId(color.paletteId);
+              const palette = getPalette(color.paletteId);
               const newColorMapping = Object.fromEntries(
                 ids.map((id, i) => [id, color.colorMapping[i] ?? palette[i]])
               );

diff --git a/app/charts/column/columns-grouped-state.tsx b/app/charts/column/columns-grouped-state.tsx
@@ -44,7 +44,7 @@ import { useSize } from "@/charts/shared/use-size";
 import { ColumnConfig } from "@/configurator";
 import { Observation } from "@/domain/data";
 import { formatNumberWithUnit, useFormatNumber } from "@/formatters";
-import { getPaletteId } from "@/palettes";
+import { getPalette } from "@/palettes";
 import { sortByIndex } from "@/utils/array";
 import {
   getSortingOrders,
@@ -189,7 +189,11 @@ const useColumnsGroupedState = (
   } = useMemo(() => {
     const colors = scaleOrdinal<string, string>();
 
-    if (fields.segment && segmentDimension && fields.color.type === "segment") {
+    if (
+      fields.segment &&
+      segmentDimension &&
+      fields.color?.type === "segment"
+    ) {
       const segmentColor = fields.color;
       const orderedSegmentLabelsAndColors = allSegments.map((segment) => {
         const dvIri =
@@ -207,7 +211,7 @@ const useColumnsGroupedState = (
       colors.range(orderedSegmentLabelsAndColors.map((s) => s.color));
     } else {
       colors.domain(allSegments);
-      colors.range(getPaletteId(fields.color.paletteId));
+      colors.range(getPalette(fields.color?.paletteId));
     }
 
     colors.unknown(() => undefined);

diff --git a/app/charts/column/columns-stacked-state.tsx b/app/charts/column/columns-stacked-state.tsx
@@ -56,7 +56,7 @@ import { useSize } from "@/charts/shared/use-size";
 import { ColumnConfig } from "@/configurator";
 import { Observation } from "@/domain/data";
 import { useFormatNumber } from "@/formatters";
-import { getPaletteId } from "@/palettes";
+import { getPalette } from "@/palettes";
 import { useChartInteractiveFilters } from "@/stores/interactive-filters";
 import { sortByIndex } from "@/utils/array";
 import {
@@ -253,7 +253,7 @@ const useColumnsStackedState = (
       colors.range(orderedSegmentLabelsAndColors.map((s) => s.color));
     } else {
       colors.domain(allSegments);
-      colors.range(getPaletteId(fields.color.paletteId));
+      colors.range(getPalette(fields.color.paletteId));
     }
 
     colors.unknown(() => undefined);