fix(plugin-chart-echarts): support forced categorical x-axis (#26404)

This commit is contained in:
Ville Brofeldt
2024-01-08 12:04:22 -08:00
committed by GitHub
parent 6d58566779
commit 219c4a14b3
23 changed files with 346 additions and 51 deletions

View File

@@ -189,6 +189,7 @@ export default function transformProps(
groupby,
groupbyB,
xAxis: xAxisOrig,
xAxisForceCategorical,
xAxisTitle,
yAxisTitle,
xAxisTitleMargin,
@@ -227,7 +228,7 @@ export default function transformProps(
const dataTypes = getColtypesMapping(queriesData[0]);
const xAxisDataType = dataTypes?.[xAxisLabel] ?? dataTypes?.[xAxisOrig];
const xAxisType = getAxisType(stack, xAxisDataType);
const xAxisType = getAxisType(stack, xAxisForceCategorical, xAxisDataType);
const series: SeriesOption[] = [];
const formatter = contributionMode
? getNumberFormatter(',.0%')

View File

@@ -106,6 +106,7 @@ export const DEFAULT_FORM_DATA: EchartsMixedTimeseriesFormData = {
yAxisTitleSecondary: DEFAULT_TITLE_FORM_DATA.yAxisTitle,
tooltipTimeFormat: TIMESERIES_DEFAULTS.tooltipTimeFormat,
xAxisBounds: TIMESERIES_DEFAULTS.xAxisBounds,
xAxisForceCategorical: TIMESERIES_DEFAULTS.xAxisForceCategorical,
xAxisTimeFormat: TIMESERIES_DEFAULTS.xAxisTimeFormat,
area: TIMESERIES_DEFAULTS.area,
areaB: TIMESERIES_DEFAULTS.area,

View File

@@ -63,6 +63,7 @@ export const DEFAULT_FORM_DATA: EchartsTimeseriesFormData = {
yAxisBounds: [null, null],
zoomable: false,
richTooltip: true,
xAxisForceCategorical: false,
xAxisLabelRotation: defaultXAxis.xAxisLabelRotation,
groupby: [],
showValue: false,

View File

@@ -167,6 +167,7 @@ export default function transformProps(
truncateYAxis,
xAxis: xAxisOrig,
xAxisBounds,
xAxisForceCategorical,
xAxisLabelRotation,
xAxisSortSeries,
xAxisSortSeriesAscending,
@@ -248,7 +249,7 @@ export default function transformProps(
const isAreaExpand = stack === StackControlsValue.Expand;
const xAxisDataType = dataTypes?.[xAxisLabel] ?? dataTypes?.[xAxisOrig];
const xAxisType = getAxisType(stack, xAxisDataType);
const xAxisType = getAxisType(stack, xAxisForceCategorical, xAxisDataType);
const series: SeriesOption[] = [];
const forcePercentFormatter = Boolean(contributionMode || isAreaExpand);

View File

@@ -79,6 +79,7 @@ export type EchartsTimeseriesFormData = QueryFormData & {
truncateXAxis: boolean;
truncateYAxis: boolean;
yAxisFormat?: string;
xAxisForceCategorical?: boolean;
xAxisTimeFormat?: string;
timeGrainSqla?: TimeGranularity;
xAxisBounds: [number | undefined | null, number | undefined | null];

View File

@@ -309,3 +309,14 @@ export const minorTicks: ControlSetItem = {
description: t('Show minor ticks on axes.'),
},
};
export const forceCategorical: ControlSetItem = {
name: 'forceCategorical',
config: {
type: 'CheckboxControl',
label: t('Force categorical'),
default: false,
renderTrigger: true,
description: t('Make the x-axis categorical'),
},
};

View File

@@ -229,8 +229,10 @@ export function sortRows(
}
const value =
xAxisSortSeries === SortSeriesType.Name && typeof sortKey === 'string'
? sortKey.toLowerCase()
xAxisSortSeries === SortSeriesType.Name
? typeof sortKey === 'string'
? sortKey.toLowerCase()
: sortKey
: aggregate;
return {
@@ -515,8 +517,12 @@ export function sanitizeHtml(text: string): string {
export function getAxisType(
stack: StackType,
forceCategorical?: boolean,
dataType?: GenericDataType,
): AxisType {
if (forceCategorical) {
return AxisType.category;
}
if (dataType === GenericDataType.TEMPORAL) {
return AxisType.time;
}