feat: x axis interval control to show ALL ticks on timeseries charts (#33729)

This commit is contained in:
Evan Rusackas
2025-06-10 21:40:56 -06:00
committed by GitHub
parent 86e7139245
commit e05ccb3824
17 changed files with 56 additions and 0 deletions

View File

@@ -37,6 +37,7 @@ import {
seriesOrderSection,
percentageThresholdControl,
xAxisLabelRotation,
xAxisLabelInterval,
truncateXAxis,
xAxisBounds,
minorTicks,
@@ -195,6 +196,7 @@ const config: ControlPanelConfig = {
},
],
[xAxisLabelRotation],
[xAxisLabelInterval],
...richTooltipSection,
// eslint-disable-next-line react/jsx-key
[<ControlSubSectionHeader>{t('Y Axis')}</ControlSubSectionHeader>],

View File

@@ -38,6 +38,7 @@ import {
truncateXAxis,
xAxisBounds,
xAxisLabelRotation,
xAxisLabelInterval,
} from '../../../controls';
import { OrientationType } from '../../types';
@@ -188,6 +189,18 @@ function createAxisControl(axis: 'x' | 'y'): ControlSetRow[] {
},
},
],
[
{
name: xAxisLabelInterval.name,
config: {
...xAxisLabelInterval.config,
visibility: ({ controls }: ControlPanelsContainerProps) =>
isXAxis ? isVertical(controls) : isHorizontal(controls),
disableStash: true,
resetOnHide: false,
},
},
],
[
{
name: 'y_axis_format',

View File

@@ -41,6 +41,7 @@ import {
truncateXAxis,
xAxisBounds,
xAxisLabelRotation,
xAxisLabelInterval,
} from '../../../controls';
const {
@@ -183,6 +184,7 @@ const config: ControlPanelConfig = {
},
],
[xAxisLabelRotation],
[xAxisLabelInterval],
...richTooltipSection,
// eslint-disable-next-line react/jsx-key
[<ControlSubSectionHeader>{t('Y Axis')}</ControlSubSectionHeader>],

View File

@@ -40,6 +40,7 @@ import {
truncateXAxis,
xAxisBounds,
xAxisLabelRotation,
xAxisLabelInterval,
} from '../../../controls';
const {
@@ -126,6 +127,7 @@ const config: ControlPanelConfig = {
},
],
[xAxisLabelRotation],
[xAxisLabelInterval],
// eslint-disable-next-line react/jsx-key
...richTooltipSection,
// eslint-disable-next-line react/jsx-key

View File

@@ -40,6 +40,7 @@ import {
truncateXAxis,
xAxisBounds,
xAxisLabelRotation,
xAxisLabelInterval,
} from '../../../controls';
const {
@@ -125,6 +126,7 @@ const config: ControlPanelConfig = {
},
],
[xAxisLabelRotation],
[xAxisLabelInterval],
// eslint-disable-next-line react/jsx-key
...richTooltipSection,
// eslint-disable-next-line react/jsx-key

View File

@@ -38,6 +38,7 @@ import {
truncateXAxis,
xAxisBounds,
xAxisLabelRotation,
xAxisLabelInterval,
} from '../../controls';
const {
@@ -177,6 +178,7 @@ const config: ControlPanelConfig = {
},
],
[xAxisLabelRotation],
[xAxisLabelInterval],
...richTooltipSection,
// eslint-disable-next-line react/jsx-key
[<ControlSubSectionHeader>{t('Y Axis')}</ControlSubSectionHeader>],

View File

@@ -78,6 +78,7 @@ export const DEFAULT_FORM_DATA: EchartsTimeseriesFormData = {
richTooltip: true,
xAxisForceCategorical: false,
xAxisLabelRotation: defaultXAxis.xAxisLabelRotation,
xAxisLabelInterval: defaultXAxis.xAxisLabelInterval,
groupby: [],
showValue: false,
onlyTotal: false,

View File

@@ -179,6 +179,7 @@ export default function transformProps(
xAxisBounds,
xAxisForceCategorical,
xAxisLabelRotation,
xAxisLabelInterval,
xAxisSort,
xAxisSortAsc,
xAxisTimeFormat,
@@ -501,6 +502,7 @@ export default function transformProps(
hideOverlap: true,
formatter: xAxisFormatter,
rotate: xAxisLabelRotation,
interval: xAxisLabelInterval,
},
minorTick: { show: minorTicks },
minInterval:

View File

@@ -90,6 +90,7 @@ export type EchartsTimeseriesFormData = QueryFormData & {
zoomable: boolean;
richTooltip: boolean;
xAxisLabelRotation: number;
xAxisLabelInterval: number | string;
showValue: boolean;
onlyTotal: boolean;
showExtraControls: boolean;