From cf163200de8dc91921be36b34bcafc25a2951f51 Mon Sep 17 00:00:00 2001 From: Bartosz Prusinowski Date: Mon, 6 Jan 2025 10:30:21 +0100 Subject: [PATCH 1/2] feat: Allow to keep old colors when updating color mapping --- app/configurator/components/filters.tsx | 2 +- app/configurator/components/ui-helpers.ts | 5 ++++- app/configurator/configurator-state/actions.tsx | 2 ++ app/configurator/configurator-state/reducer.tsx | 12 ++++++++++-- 4 files changed, 17 insertions(+), 4 deletions(-) diff --git a/app/configurator/components/filters.tsx b/app/configurator/components/filters.tsx index ad217704d..6d3043ba8 100644 --- a/app/configurator/components/filters.tsx +++ b/app/configurator/components/filters.tsx @@ -432,7 +432,7 @@ const MultiFilterContent = ({ /> ) : ( <> - + {label} diff --git a/app/configurator/components/ui-helpers.ts b/app/configurator/components/ui-helpers.ts index 273cc7af3..7acc91694 100644 --- a/app/configurator/components/ui-helpers.ts +++ b/app/configurator/components/ui-helpers.ts @@ -7,7 +7,7 @@ import { useMemo } from "react"; import { match } from "ts-pattern"; import type { BaseChartProps } from "@/charts/shared/ChartProps"; -import { TableColumn, TableFields } from "@/config-types"; +import { ColorMapping, TableColumn, TableFields } from "@/config-types"; import { FIELD_VALUE_NONE } from "@/configurator/constants"; import { Component, @@ -270,10 +270,12 @@ const randomComparator = () => (Math.random() > 0.5 ? 1 : -1); export const mapValueIrisToColor = ({ palette, dimensionValues, + colorMapping: oldColorMapping, random, }: { palette: string; dimensionValues: DimensionValue[]; + colorMapping?: ColorMapping; random?: boolean; }) => { if (!dimensionValues) { @@ -284,6 +286,7 @@ export const mapValueIrisToColor = ({ const colors = dimensionValues.map( (d, i) => (palette === "dimension" && d.color) || + oldColorMapping?.[`${d.value}`] || paletteValues[i % paletteValues.length] ); const colorScale = scaleOrdinal() diff --git a/app/configurator/configurator-state/actions.tsx b/app/configurator/configurator-state/actions.tsx index 08bab7c61..7ec7b29a0 100644 --- a/app/configurator/configurator-state/actions.tsx +++ b/app/configurator/configurator-state/actions.tsx @@ -2,6 +2,7 @@ import { EncodingFieldType } from "@/charts/chart-config-ui-options"; import { ChartConfig, ChartType, + ColorMapping, ConfiguratorState, DashboardFiltersConfig, DataSource, @@ -178,6 +179,7 @@ export type ConfiguratorStateAction = value: { field: string; colorConfigPath: string | undefined; + colorMapping?: ColorMapping; dimensionId: string; values: DimensionValue[]; random: boolean; diff --git a/app/configurator/configurator-state/reducer.tsx b/app/configurator/configurator-state/reducer.tsx index a3d43629c..f3970501e 100644 --- a/app/configurator/configurator-state/reducer.tsx +++ b/app/configurator/configurator-state/reducer.tsx @@ -458,8 +458,14 @@ export const updateColorMapping = ( > ) => { if (isConfiguring(draft)) { - const { field, colorConfigPath, dimensionId, values, random } = - action.value; + const { + field, + colorConfigPath, + colorMapping: oldColorMapping, + dimensionId, + values, + random, + } = action.value; const chartConfig = getChartConfig(draft); const path = colorConfigPath ? ["fields", field, colorConfigPath] @@ -476,6 +482,7 @@ export const updateColorMapping = ( colorMapping = mapValueIrisToColor({ palette: fieldValue.palette, dimensionValues: values, + colorMapping: oldColorMapping, random, }); } @@ -489,6 +496,7 @@ export const updateColorMapping = ( colorMapping = mapValueIrisToColor({ palette: fieldValue.palette, dimensionValues: values, + colorMapping: oldColorMapping, random, }); } From 0502747285b929a714417f5857cd651a73ed64a2 Mon Sep 17 00:00:00 2001 From: Bartosz Prusinowski Date: Mon, 6 Jan 2025 10:49:28 +0100 Subject: [PATCH 2/2] fix: Ensure colorMapping is up to date --- CHANGELOG.md | 6 +++- app/configurator/components/filters.tsx | 41 +++++++++++++++++++++++++ 2 files changed, 46 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 45cdbf2a8..e2ebcbc1f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -13,6 +13,10 @@ You can also check the - Features - It's now possible to export charts as images +- Fixes + - 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 # [5.0.2] - 2024-11-28 @@ -23,7 +27,7 @@ You can also check the - Changed component id separator text to be more unique, as it was causing issues with some cubes that had iris ending with "-" - Datasets section in the sidebar is now correctly shown at all times - - Improved Preventation of overlapping axis titles for combo charts + - Improved prevention of overlapping axis titles for combo charts # [5.0.1] - 2024-11-26 diff --git a/app/configurator/components/filters.tsx b/app/configurator/components/filters.tsx index 6d3043ba8..06eb8edea 100644 --- a/app/configurator/components/filters.tsx +++ b/app/configurator/components/filters.tsx @@ -46,6 +46,7 @@ import { MaybeTooltip } from "@/components/maybe-tooltip"; import { TooltipTitle } from "@/components/tooltip-utils"; import { ChartConfig, + ColorMapping, getChartConfig, getFilterValue, isConfiguring, @@ -77,6 +78,7 @@ import { InteractiveFilterToggle } from "@/configurator/interactive-filters/inte import { Component, Dimension, + DimensionValue, HierarchyValue, TemporalDimension, TemporalEntityDimension, @@ -332,6 +334,11 @@ const MultiFilterContent = ({ ); }, [colorConfig?.colorMapping, dimensionId, colorComponent]); + useEnsureUpToDateColorMapping({ + colorComponentValues: colorComponent?.values, + colorMapping: colorConfig?.colorMapping, + }); + const interactiveFilterProps = useInteractiveFiltersToggle("legend"); const chartSymbol = getChartSymbol(chartConfig.chartType); @@ -460,6 +467,40 @@ const MultiFilterContent = ({ ); }; +/** + * Fixes situations where an old chart is being edited and the cube has changed + * and contains new values in the color dimension. + * */ +const useEnsureUpToDateColorMapping = ({ + colorComponentValues, + colorMapping, +}: { + colorComponentValues?: DimensionValue[]; + colorMapping?: ColorMapping; +}) => { + const [state, dispatch] = useConfiguratorState(isConfiguring); + const chartConfig = getChartConfig(state); + const { dimensionId, colorConfigPath } = useMultiFilterContext(); + const { activeField } = chartConfig; + + if ( + activeField && + colorComponentValues?.some((v) => !colorMapping?.[v.value]) + ) { + dispatch({ + type: "CHART_CONFIG_UPDATE_COLOR_MAPPING", + value: { + field: activeField, + dimensionId, + colorConfigPath, + colorMapping, + values: colorComponentValues, + random: false, + }, + }); + } +}; + const useBreadcrumbStyles = makeStyles({ root: { display: "inline",