fix(echarts): Display NULL values in categorical x-axis for bar charts (#34761)

Co-authored-by: Claude <noreply@anthropic.com>
(cherry picked from commit 682cdcc3e0)
This commit is contained in:
Evan Rusackas
2025-09-02 12:16:37 -07:00
committed by Joe Li
parent e84bdfaa6d
commit e1efc87fdc
4 changed files with 52 additions and 8 deletions

View File

@@ -243,6 +243,10 @@ export default function transformProps(
const MetricDisplayNameA = getMetricDisplayName(metrics[0], verboseMap);
const MetricDisplayNameB = getMetricDisplayName(metricsB[0], verboseMap);
const dataTypes = getColtypesMapping(queriesData[0]);
const xAxisDataType = dataTypes?.[xAxisLabel] ?? dataTypes?.[xAxisOrig];
const xAxisType = getAxisType(stack, xAxisForceCategorical, xAxisDataType);
const [rawSeriesA, sortedTotalValuesA] = extractSeries(rebasedDataA, {
fillNeighborValue: stack ? 0 : undefined,
xAxis: xAxisLabel,
@@ -250,6 +254,7 @@ export default function transformProps(
sortSeriesAscending,
stack,
totalStackedValues,
xAxisType,
});
const rebasedDataB = rebaseForecastDatum(data2, verboseMap);
const {
@@ -267,11 +272,8 @@ export default function transformProps(
sortSeriesAscending: sortSeriesAscendingB,
stack: Boolean(stackB),
totalStackedValues: totalStackedValuesB,
xAxisType,
});
const dataTypes = getColtypesMapping(queriesData[0]);
const xAxisDataType = dataTypes?.[xAxisLabel] ?? dataTypes?.[xAxisOrig];
const xAxisType = getAxisType(stack, xAxisForceCategorical, xAxisDataType);
const series: SeriesOption[] = [];
const formatter = contributionMode
? getNumberFormatter(',.0%')

View File

@@ -233,6 +233,8 @@ export default function transformProps(
);
const isMultiSeries = groupBy.length || metrics?.length > 1;
const xAxisDataType = dataTypes?.[xAxisLabel] ?? dataTypes?.[xAxisOrig];
const xAxisType = getAxisType(stack, xAxisForceCategorical, xAxisDataType);
const [rawSeries, sortedTotalValues, minPositiveValue] = extractSeries(
rebasedData,
@@ -247,6 +249,7 @@ export default function transformProps(
sortSeriesAscending,
xAxisSortSeries: isMultiSeries ? xAxisSort : undefined,
xAxisSortSeriesAscending: isMultiSeries ? xAxisSortAsc : undefined,
xAxisType,
},
);
const showValueIndexes = extractShowValueIndexes(rawSeries, {
@@ -259,9 +262,6 @@ export default function transformProps(
rawSeries.map(series => series.name as string),
);
const isAreaExpand = stack === StackControlsValue.Expand;
const xAxisDataType = dataTypes?.[xAxisLabel] ?? dataTypes?.[xAxisOrig];
const xAxisType = getAxisType(stack, xAxisForceCategorical, xAxisDataType);
const series: SeriesOption[] = [];
const forcePercentFormatter = Boolean(contributionMode || isAreaExpand);

View File

@@ -272,6 +272,7 @@ export function extractSeries(
sortSeriesAscending?: boolean;
xAxisSortSeries?: SortSeriesType;
xAxisSortSeriesAscending?: boolean;
xAxisType?: AxisType;
} = {},
): [SeriesOption[], number[], number | undefined] {
const {
@@ -286,11 +287,15 @@ export function extractSeries(
sortSeriesAscending,
xAxisSortSeries,
xAxisSortSeriesAscending,
xAxisType,
} = opts;
if (data.length === 0) return [[], [], undefined];
const rows: DataRecord[] = data.map(datum => ({
...datum,
[xAxis]: datum[xAxis],
[xAxis]:
datum[xAxis] === null && xAxisType === AxisType.Category
? NULL_STRING
: datum[xAxis],
}));
const sortedSeries = sortAndFilterSeries(
rows,