Skip to content

Commit

Permalink
Merge pull request #1019 from visualize-admin/fix/same-labelled
Browse files Browse the repository at this point in the history 
fix: Allow multiple identical labels in charts
  • Loading branch information
@bprusinowski
bprusinowski authored Apr 13, 2023
2 parents e03a61f + 2f63295 commit 9820273
Show file tree
Hide file tree
Showing 25 changed files with 478 additions and 298 deletions.
17 changes: 12 additions & 5 deletions app/charts/area/areas-state.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@ import { useMaybeAbbreviations } from "@/charts/shared/use-abbreviations";
import useChartFormatters from "@/charts/shared/use-chart-formatters";
import { ChartContext, ChartProps } from "@/charts/shared/use-chart-state";
import { InteractionProvider } from "@/charts/shared/use-interaction";
import { useObservationLabels } from "@/charts/shared/use-observation-labels";
import { Observer, useWidth } from "@/charts/shared/use-width";
import { AreaConfig, AreaFields } from "@/configurator";
import { isTemporalDimension, Observation } from "@/domain/data";
Expand Down Expand Up @@ -110,14 +111,20 @@ const useAreasState = (
);

const {
getAbbreviationOrLabelByValue: getSegment,
getLabelByAbbreviation: getSegmentLabel,
getAbbreviationOrLabelByValue: getSegmentAbbreviationOrLabel,
abbreviationOrLabelLookup: segmentsByAbbreviationOrLabel,
} = useMaybeAbbreviations({
useAbbreviations: fields.segment?.useAbbreviations ?? false,
useAbbreviations: fields.segment?.useAbbreviations,
dimension: segmentDimension,
});

const { getValue: getSegment, getLabel: getSegmentLabel } =
useObservationLabels(
data,
getSegmentAbbreviationOrLabel,
fields.segment?.componentIri
);

const segmentsByValue = useMemo(() => {
const values = segmentDimension?.values || [];

Expand Down Expand Up @@ -377,13 +384,13 @@ const useAreasState = (
placement: { x: xPlacement, y: yPlacement },
xValue: timeFormatUnit(getX(datum), xDimension.timeUnit),
datum: {
label: hasSegment ? getSegment(datum) : undefined,
label: hasSegment && getSegmentAbbreviationOrLabel(datum),
value: yValueFormatter(getY(datum)),
color: colors(getSegment(datum)) as string,
},
values: hasSegment
? sortedTooltipValues.map((td) => ({
label: getSegment(td),
label: getSegmentAbbreviationOrLabel(td),
value: yValueFormatter(getY(td)),
color: colors(getSegment(td)) as string,
}))
Expand Down
48 changes: 33 additions & 15 deletions app/charts/column/columns-grouped-state.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@ import { useMaybeAbbreviations } from "@/charts/shared/use-abbreviations";
import useChartFormatters from "@/charts/shared/use-chart-formatters";
import { ChartContext, ChartProps } from "@/charts/shared/use-chart-state";
import { InteractionProvider } from "@/charts/shared/use-interaction";
import { useObservationLabels } from "@/charts/shared/use-observation-labels";
import { Observer, useWidth } from "@/charts/shared/use-width";
import { ColumnFields, SortingField } from "@/configurator";
import {
Expand All @@ -61,6 +62,7 @@ export interface GroupedColumnsState extends CommonChartState {
preparedData: Observation[];
allData: Observation[];
getX: (d: Observation) => string;
getXLabel: (d: string) => string;
getXAsDate: (d: Observation) => Date;
xIsTime: boolean;
xScale: ScaleBand<string>;
Expand Down Expand Up @@ -104,10 +106,17 @@ const useGroupedColumnsState = (

const xIsTime = isTemporalDimension(xDimension);

const { getAbbreviationOrLabelByValue: getX } = useMaybeAbbreviations({
useAbbreviations: fields.x.useAbbreviations ?? false,
dimension: xDimension,
});
const { getAbbreviationOrLabelByValue: getXAbbreviationOrLabel } =
useMaybeAbbreviations({
useAbbreviations: fields.x.useAbbreviations,
dimension: xDimension,
});

const { getValue: getX, getLabel: getXLabel } = useObservationLabels(
data,
getXAbbreviationOrLabel,
fields.x.componentIri
);

const getXAsDate = useTemporalVariable(fields.x.componentIri);
const getY = useOptionalNumericVariable(fields.y.componentIri);
Expand All @@ -119,14 +128,20 @@ const useGroupedColumnsState = (
);

const {
getAbbreviationOrLabelByValue: getSegment,
getLabelByAbbreviation: getSegmentLabel,
getAbbreviationOrLabelByValue: getSegmentAbbreviationOrLabel,
abbreviationOrLabelLookup: segmentsByAbbreviationOrLabel,
} = useMaybeAbbreviations({
useAbbreviations: fields.segment?.useAbbreviations ?? false,
useAbbreviations: fields.segment?.useAbbreviations,
dimension: segmentDimension,
});

const { getValue: getSegment, getLabel: getSegmentLabel } =
useObservationLabels(
data,
getSegmentAbbreviationOrLabel,
fields.segment?.componentIri
);

const segmentsByValue = useMemo(() => {
const values = segmentDimension?.values || [];

Expand Down Expand Up @@ -184,7 +199,7 @@ const useGroupedColumnsState = (
}, [plottableSortedData, getY, getSegment]);

const segmentFilter = segmentDimension?.iri
? chartConfig.filters[segmentDimension?.iri]
? chartConfig.filters[segmentDimension.iri]
: undefined;
const segments = useMemo(() => {
const uniqueSegments = Array.from(
Expand Down Expand Up @@ -212,7 +227,7 @@ const useGroupedColumnsState = (

/* Scales */
const {
bandDomain,
bandDomainLabels,
colors,
yScale,
xEntireScale,
Expand Down Expand Up @@ -247,7 +262,8 @@ const useGroupedColumnsState = (
colors.unknown(() => undefined);
}

const bandDomain = [...new Set(scalesData.map((d) => getX(d) as string))];
const bandDomain = [...new Set(scalesData.map(getX))];
const bandDomainLabels = bandDomain.map(getXLabel);
const xScale = scaleBand()
.domain(bandDomain)
.paddingInner(PADDING_INNER)
Expand Down Expand Up @@ -287,7 +303,7 @@ const useGroupedColumnsState = (
xScale,
xScaleIn,
xScaleInteraction,
bandDomain,
bandDomainLabels,
};
}, [
dimensions,
Expand All @@ -298,6 +314,7 @@ const useGroupedColumnsState = (
scalesData,
plottableSortedData,
getX,
getXLabel,
getXAsDate,
getYErrorRange,
getY,
Expand Down Expand Up @@ -338,7 +355,7 @@ const useGroupedColumnsState = (
aspectRatio,
interactiveFiltersConfig,
formatNumber,
bandDomain
bandDomainLabels
);

const margins = {
Expand Down Expand Up @@ -416,14 +433,14 @@ const useGroupedColumnsState = (
xAnchor,
yAnchor,
placement: { x: xPlacement, y: yPlacement },
xValue: getX(datum),
xValue: getXAbbreviationOrLabel(datum),
datum: {
label: fields.segment && getSegment(datum),
label: fields.segment && getSegmentAbbreviationOrLabel(datum),
value: yValueFormatter(getY(datum)),
color: colors(getSegment(datum)) as string,
},
values: sortedTooltipValues.map((td) => ({
label: getSegment(td),
label: getSegmentAbbreviationOrLabel(td),
value: yMeasure.unit
? `${formatNumber(getY(td))} ${yMeasure.unit}`
: formatNumber(getY(td)),
Expand All @@ -438,6 +455,7 @@ const useGroupedColumnsState = (
preparedData,
allData: plottableSortedData,
getX,
getXLabel,
getXAsDate,
xScale,
xScaleInteraction,
Expand Down
50 changes: 34 additions & 16 deletions app/charts/column/columns-stacked-state.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,7 @@ import { useMaybeAbbreviations } from "@/charts/shared/use-abbreviations";
import useChartFormatters from "@/charts/shared/use-chart-formatters";
import { ChartContext, ChartProps } from "@/charts/shared/use-chart-state";
import { InteractionProvider } from "@/charts/shared/use-interaction";
import { useObservationLabels } from "@/charts/shared/use-observation-labels";
import { Observer, useWidth } from "@/charts/shared/use-width";
import { ColumnFields, SortingOrder, SortingType } from "@/configurator";
import { isTemporalDimension, Observation } from "@/domain/data";
Expand All @@ -62,6 +63,7 @@ export interface StackedColumnsState extends CommonChartState {
preparedData: Observation[];
allData: Observation[];
getX: (d: Observation) => string;
getXLabel: (d: string) => string;
getXAsDate: (d: Observation) => Date;
xIsTime: boolean;
xScale: ScaleBand<string>;
Expand Down Expand Up @@ -107,10 +109,17 @@ const useColumnsStackedState = (

const xIsTime = isTemporalDimension(xDimension);

const { getAbbreviationOrLabelByValue: getX } = useMaybeAbbreviations({
useAbbreviations: fields.x.useAbbreviations ?? false,
dimension: xDimension,
});
const { getAbbreviationOrLabelByValue: getXAbbreviationOrLabel } =
useMaybeAbbreviations({
useAbbreviations: fields.x.useAbbreviations,
dimension: xDimension,
});

const { getValue: getX, getLabel: getXLabel } = useObservationLabels(
data,
getXAbbreviationOrLabel,
fields.x.componentIri
);

const getXAsDate = useTemporalVariable(xKey);
const getY = useOptionalNumericVariable(fields.y.componentIri);
Expand All @@ -120,14 +129,20 @@ const useColumnsStackedState = (
);

const {
getAbbreviationOrLabelByValue: getSegment,
getLabelByAbbreviation: getSegmentLabel,
getAbbreviationOrLabelByValue: getSegmentAbbreviationOrLabel,
abbreviationOrLabelLookup: segmentsByAbbreviationOrLabel,
} = useMaybeAbbreviations({
useAbbreviations: fields.segment?.useAbbreviations ?? false,
useAbbreviations: fields.segment?.useAbbreviations,
dimension: segmentDimension,
});

const { getValue: getSegment, getLabel: getSegmentLabel } =
useObservationLabels(
data,
getSegmentAbbreviationOrLabel,
fields.segment?.componentIri
);

const segmentsByValue = useMemo(() => {
const values = segmentDimension?.values || [];

Expand Down Expand Up @@ -254,7 +269,7 @@ const useColumnsStackedState = (
xScaleInteraction,
xEntireScale,
yStackDomain,
bandDomain,
bandDomainLabels,
} = useMemo(() => {
const colors = scaleOrdinal<string, string>();

Expand Down Expand Up @@ -292,7 +307,8 @@ const useColumnsStackedState = (
}

// x
const bandDomain = [...new Set(scalesData.map((d) => getX(d) as string))];
const bandDomain = [...new Set(scalesData.map(getX))];
const bandDomainLabels = bandDomain.map(getXLabel);
const xScale = scaleBand()
.domain(bandDomain)
.paddingInner(PADDING_INNER)
Expand Down Expand Up @@ -329,12 +345,13 @@ const useColumnsStackedState = (
xScale,
xEntireScale,
xScaleInteraction,
bandDomain,
bandDomainLabels,
};
}, [
scalesWideData,
fields.segment,
getX,
getXLabel,
getXAsDate,
plottableSortedData,
scalesData,
Expand Down Expand Up @@ -386,7 +403,7 @@ const useColumnsStackedState = (
aspectRatio,
interactiveFiltersConfig,
formatNumber,
bandDomain
bandDomainLabels
);

const margins = {
Expand Down Expand Up @@ -463,7 +480,6 @@ const useColumnsStackedState = (
: xRef + xOffset * 2;
};
const xAnchor = getXAnchor();
const rawSegment = fields.segment && getSegment(datum);

const yValueFormatter = (value: number | null) =>
formatNumberWithUnit(
Expand All @@ -476,14 +492,14 @@ const useColumnsStackedState = (
xAnchor,
yAnchor,
placement: { x: xPlacement, y: yPlacement },
xValue: getX(datum),
xValue: getXAbbreviationOrLabel(datum),
datum: {
label: rawSegment,
label: fields.segment && getSegmentAbbreviationOrLabel(datum),
value: yValueFormatter(getY(datum)),
color: colors(getSegment(datum)) as string,
},
values: sortedTooltipValues.map((td) => ({
label: getSegmentLabel(getSegment(td)),
label: getSegmentAbbreviationOrLabel(td),
value: yValueFormatter(getY(td)),
color: colors(getSegment(td)) as string,
})),
Expand All @@ -496,8 +512,9 @@ const useColumnsStackedState = (
formatNumber,
formatters,
getSegment,
getSegmentLabel,
getSegmentAbbreviationOrLabel,
getX,
getXAbbreviationOrLabel,
getY,
preparedDataGroupedByX,
segments,
Expand All @@ -514,6 +531,7 @@ const useColumnsStackedState = (
preparedData,
allData: plottableSortedData,
getX,
getXLabel,
getXAsDate,
xScale,
xScaleInteraction,
Expand Down
Loading

1 comment on commit 9820273

@vercel
Copy link

@vercel vercel bot commented on 9820273 Apr 13, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

visualization-tool – ./

visualization-tool-git-main-ixt1.vercel.app
visualization-tool-ixt1.vercel.app
visualization-tool-alpha.vercel.app

Please sign in to comment.