Skip to content

Commit

Permalink
fix: Combo charts measure changes
Browse files Browse the repository at this point in the history
  • Loading branch information
@bprusinowski
bprusinowski committed Oct 25, 2023
1 parent 6afc9ea commit c202f50
Showing 1 changed file with 119 additions and 11 deletions.
130 changes: 119 additions & 11 deletions app/charts/chart-config-ui-options.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ import {
isTemporalOrdinalDimension,
} from "@/domain/data";
import { DimensionMetadataFragment } from "@/graphql/query-hooks";
import { getDefaultCategoricalPaletteName } from "@/palettes";
import { getDefaultCategoricalPaletteName, getPalette } from "@/palettes";

/**
* This module controls chart controls displayed in the UI.
Expand Down Expand Up @@ -113,9 +113,31 @@ type EncodingOption<T extends ChartConfig = ChartConfig> =
| {
field: "useAbbreviations";
}
// TODO: As these are quite chart type specific, they might be handled in
// some other way.
| {
field: "lineAxisOrientation";
onChange: OnEncodingOptionChange<"left" | "right", ComboLineColumnConfig>;
}
| {
field: "componentIris";
onChange: OnEncodingOptionChange<string[], ComboLineSingleConfig>;
}
| {
field: "leftAxisComponentIri";
onChange: OnEncodingOptionChange<string, ComboLineDualConfig>;
}
| {
field: "rightAxisComponentIri";
onChange: OnEncodingOptionChange<string, ComboLineDualConfig>;
}
| {
field: "lineComponentIri";
onChange: OnEncodingOptionChange<string, ComboLineColumnConfig>;
}
| {
field: "columnComponentIri";
onChange: OnEncodingOptionChange<string, ComboLineColumnConfig>;
};

const onColorComponentScaleTypeChange: OnEncodingOptionChange<
Expand Down Expand Up @@ -894,6 +916,21 @@ const chartConfigOptionsUISpec: ChartSpecs = {
customComponent: true,
componentTypes: ["NumericalMeasure"],
filters: false,
options: {
componentIris: {
onChange: (iris, options) => {
const { chartConfig } = options;
const palette = getPalette(chartConfig.fields.y.palette);
const newColorMapping = Object.fromEntries(
iris.map((iri, i) => [
iri,
chartConfig.fields.y.colorMapping[i] ?? palette[i],
])
);
chartConfig.fields.y.colorMapping = newColorMapping;
},
},
},
},
{
field: "x",
Expand All @@ -913,6 +950,38 @@ const chartConfigOptionsUISpec: ChartSpecs = {
customComponent: true,
componentTypes: ["NumericalMeasure"],
filters: false,
options: {
leftAxisComponentIri: {
onChange: (iri, options) => {
const { chartConfig } = options;
chartConfig.fields.y.colorMapping = {
[iri]:
chartConfig.fields.y.colorMapping[
chartConfig.fields.y.leftAxisComponentIri
],
[chartConfig.fields.y.rightAxisComponentIri]:
chartConfig.fields.y.colorMapping[
chartConfig.fields.y.rightAxisComponentIri
],
};
},
},
rightAxisComponentIri: {
onChange: (iri, options) => {
const { chartConfig } = options;
chartConfig.fields.y.colorMapping = {
[chartConfig.fields.y.leftAxisComponentIri]:
chartConfig.fields.y.colorMapping[
chartConfig.fields.y.leftAxisComponentIri
],
[iri]:
chartConfig.fields.y.colorMapping[
chartConfig.fields.y.rightAxisComponentIri
],
};
},
},
},
},
{
field: "x",
Expand All @@ -933,22 +1002,51 @@ const chartConfigOptionsUISpec: ChartSpecs = {
componentTypes: ["NumericalMeasure"],
filters: false,
options: {
lineComponentIri: {
onChange: (iri, options) => {
const { chartConfig } = options;
const { fields } = chartConfig;
const { y } = fields;
const lineColor = y.colorMapping[y.lineComponentIri];
const columnColor = y.colorMapping[y.columnComponentIri];

chartConfig.fields.y.colorMapping =
y.lineAxisOrientation === "left"
? { [iri]: lineColor, [y.columnComponentIri]: columnColor }
: { [y.columnComponentIri]: columnColor, [iri]: lineColor };
},
},
columnComponentIri: {
onChange: (iri, options) => {
const { chartConfig } = options;
const { fields } = chartConfig;
const { y } = fields;
const columnColor = y.colorMapping[y.columnComponentIri];
const lineColor = y.colorMapping[y.lineComponentIri];

chartConfig.fields.y.colorMapping =
y.lineAxisOrientation === "left"
? { [y.lineComponentIri]: lineColor, [iri]: columnColor }
: { [iri]: columnColor, [y.lineComponentIri]: lineColor };
},
},
lineAxisOrientation: {
onChange: (_, options) => {
const { chartConfig } = options;
const { fields } = chartConfig;
const { y } = fields;
const lineAxisLeft = y.lineAxisOrientation === "left";
// Need the correct order to not enable "Reset color palette" button.
const firstIri =
chartConfig.fields.y.lineAxisOrientation === "left"
? chartConfig.fields.y.columnComponentIri
: chartConfig.fields.y.lineComponentIri;
const secondIri =
chartConfig.fields.y.lineAxisOrientation === "left"
? chartConfig.fields.y.lineComponentIri
: chartConfig.fields.y.columnComponentIri;
const firstIri = lineAxisLeft
? y.columnComponentIri
: y.lineComponentIri;
const secondIri = lineAxisLeft
? y.lineComponentIri
: y.columnComponentIri;

chartConfig.fields.y.colorMapping = {
[firstIri]: chartConfig.fields.y.colorMapping[secondIri],
[secondIri]: chartConfig.fields.y.colorMapping[firstIri],
[firstIri]: y.colorMapping[secondIri],
[secondIri]: y.colorMapping[firstIri],
};
},
},
Expand Down Expand Up @@ -992,7 +1090,17 @@ export const getChartFieldOptionChangeSideEffect = (
case "areaLayer.color.scaleType":
case "symbolLayer.color.scaleType":
return get(encoding, "options.colorComponent.onScaleTypeChange");
case "y.componentIris":
return get(encoding, "options.componentIris.onChange");
case "y.lineAxisOrientation":
return get(encoding, "options.lineAxisOrientation.onChange");
case "y.leftAxisComponentIri":
return get(encoding, "options.leftAxisComponentIri.onChange");
case "y.rightAxisComponentIri":
return get(encoding, "options.rightAxisComponentIri.onChange");
case "y.lineComponentIri":
return get(encoding, "options.lineComponentIri.onChange");
case "y.columnComponentIri":
return get(encoding, "options.columnComponentIri.onChange");
}
};

0 comments on commit c202f50

Please sign in to comment.