From 5763db89185a1c54d31456e9787823b1a59e61dc Mon Sep 17 00:00:00 2001 From: Bartosz Prusinowski Date: Tue, 6 Jun 2023 12:47:50 +0200 Subject: [PATCH 1/2] fix: Use plottable segments to construct series in stacked bar chart --- app/charts/column/columns-stacked-state.tsx | 29 ++++++++++++++++----- app/charts/shared/chart-helpers.tsx | 2 +- 2 files changed, 23 insertions(+), 8 deletions(-) diff --git a/app/charts/column/columns-stacked-state.tsx b/app/charts/column/columns-stacked-state.tsx index 3580f520f..e0e38624d 100644 --- a/app/charts/column/columns-stacked-state.tsx +++ b/app/charts/column/columns-stacked-state.tsx @@ -32,9 +32,9 @@ import { } from "@/charts/column/constants"; import { getLabelWithUnit, + getMaybeTemporalDimensionValues, getWideData, useDataAfterInteractiveFilters, - getMaybeTemporalDimensionValues, useOptionalNumericVariable, usePlottableData, useTemporalVariable, @@ -244,9 +244,12 @@ const useColumnsStackedState = ( const segmentFilter = segmentDimension?.iri ? chartConfig.filters[segmentDimension?.iri] : undefined; - const segments = useMemo(() => { - const uniqueSegments = Array.from( - new Set(plottableSortedData.map((d) => getSegment(d))) + const { segments, plottableSegments } = useMemo(() => { + const allUniqueSegments = Array.from( + new Set(plottableSortedData.map(getSegment)) + ); + const allPlottableSegments = Array.from( + new Set(preparedData.map(getSegment)) ); const sorting = fields?.segment?.sorting; @@ -257,9 +260,21 @@ const useColumnsStackedState = ( dimensionFilter: segmentFilter, }); - return orderBy(uniqueSegments, sorters, getSortingOrders(sorters, sorting)); + const allSegments = orderBy( + allUniqueSegments, + sorters, + getSortingOrders(sorters, sorting) + ); + + return { + segments: allSegments, + plottableSegments: allSegments.filter((d) => + allPlottableSegments.includes(d) + ), + }; }, [ plottableSortedData, + preparedData, segmentDimension, fields.segment?.sorting, fields.segment?.useAbbreviations, @@ -393,7 +408,7 @@ const useColumnsStackedState = ( const stacked = stack() .order(stackOrder) .offset(stackOffsetDiverging) - .keys(segments); + .keys(plottableSegments); const series = stacked( chartWideData as { @@ -401,7 +416,7 @@ const useColumnsStackedState = ( }[] ); return series; - }, [chartWideData, fields.segment?.sorting, segments]); + }, [chartWideData, fields.segment?.sorting, plottableSegments]); /** Chart dimensions */ const { left, bottom } = useChartPadding( diff --git a/app/charts/shared/chart-helpers.tsx b/app/charts/shared/chart-helpers.tsx index 5e1126f45..4833e88b7 100644 --- a/app/charts/shared/chart-helpers.tsx +++ b/app/charts/shared/chart-helpers.tsx @@ -25,8 +25,8 @@ import { InteractiveFiltersLegend, InteractiveFiltersTimeRange, isAreaConfig, - QueryFilters, MapConfig, + QueryFilters, } from "@/configurator/config-types"; import { FIELD_VALUE_NONE } from "@/configurator/constants"; import { isTemporalDimension, Observation } from "@/domain/data"; From c47ee8d273587c45f9ef3de020ef31c7f041b430 Mon Sep 17 00:00:00 2001 From: Bartosz Prusinowski Date: Tue, 6 Jun 2023 13:01:25 +0200 Subject: [PATCH 2/2] fix: Broken interactive color legend --- app/charts/area/areas-state.tsx | 2 +- app/charts/column/columns-grouped-state.tsx | 4 ++-- app/charts/column/columns-stacked-state.tsx | 2 +- app/charts/line/lines-state.tsx | 2 +- app/charts/pie/pie-state.tsx | 2 +- app/charts/scatterplot/scatterplot-state.tsx | 2 +- 6 files changed, 7 insertions(+), 7 deletions(-) diff --git a/app/charts/area/areas-state.tsx b/app/charts/area/areas-state.tsx index a53907ca8..05462f1ab 100644 --- a/app/charts/area/areas-state.tsx +++ b/app/charts/area/areas-state.tsx @@ -177,7 +177,7 @@ const useAreasState = ( // No animation yet for areas animationField: undefined, getX, - getSegment, + getSegment: getSegmentAbbreviationOrLabel, }); const chartWideData = useMemo(() => { diff --git a/app/charts/column/columns-grouped-state.tsx b/app/charts/column/columns-grouped-state.tsx index 65e030182..426cde8c4 100644 --- a/app/charts/column/columns-grouped-state.tsx +++ b/app/charts/column/columns-grouped-state.tsx @@ -28,8 +28,8 @@ import { } from "@/charts/column/constants"; import { getLabelWithUnit, - useDataAfterInteractiveFilters, getMaybeTemporalDimensionValues, + useDataAfterInteractiveFilters, useOptionalNumericVariable, usePlottableData, useTemporalVariable, @@ -189,7 +189,7 @@ const useGroupedColumnsState = ( interactiveFiltersConfig, animationField: fields.animation, getX: getXAsDate, - getSegment, + getSegment: getSegmentAbbreviationOrLabel, }); // segments diff --git a/app/charts/column/columns-stacked-state.tsx b/app/charts/column/columns-stacked-state.tsx index e0e38624d..2505b0a6d 100644 --- a/app/charts/column/columns-stacked-state.tsx +++ b/app/charts/column/columns-stacked-state.tsx @@ -202,7 +202,7 @@ const useColumnsStackedState = ( interactiveFiltersConfig, animationField: fields.animation, getX: getXAsDate, - getSegment, + getSegment: getSegmentAbbreviationOrLabel, }); const preparedDataGroupedByX = useMemo( diff --git a/app/charts/line/lines-state.tsx b/app/charts/line/lines-state.tsx index 2d8b2bf93..256de9a11 100644 --- a/app/charts/line/lines-state.tsx +++ b/app/charts/line/lines-state.tsx @@ -157,7 +157,7 @@ const useLinesState = ( // No animation yet for lines animationField: undefined, getX, - getSegment, + getSegment: getSegmentAbbreviationOrLabel, }); const preparedDataGroupedBySegment = useMemo( diff --git a/app/charts/pie/pie-state.tsx b/app/charts/pie/pie-state.tsx index b865f61e8..74fd9388b 100644 --- a/app/charts/pie/pie-state.tsx +++ b/app/charts/pie/pie-state.tsx @@ -100,7 +100,7 @@ const usePieState = ( sortedData: plottableData, interactiveFiltersConfig, animationField: fields.animation, - getSegment, + getSegment: getSegmentAbbreviationOrLabel, }); // Map ordered segments to colors diff --git a/app/charts/scatterplot/scatterplot-state.tsx b/app/charts/scatterplot/scatterplot-state.tsx index 59ca7b405..e2a1ad548 100644 --- a/app/charts/scatterplot/scatterplot-state.tsx +++ b/app/charts/scatterplot/scatterplot-state.tsx @@ -109,7 +109,7 @@ const useScatterplotState = ({ interactiveFiltersConfig, // No animation yet for scatterplot animationField: undefined, - getSegment, + getSegment: getSegmentAbbreviationOrLabel, }); const xMeasure = measures.find((d) => d.iri === fields.x.componentIri);