The form data interface provides comprehensive configuration options for chart appearance, behavior, and data processing. It extends the base QueryFormData with timeseries-specific options.
Core configuration interface for timeseries charts.
/**
* Main form data interface for timeseries chart configuration
* Extends QueryFormData with timeseries-specific options
*/
interface EchartsTimeseriesFormData extends QueryFormData, LegendFormData, TitleFormData {
/** Annotation layers for chart overlays */
annotationLayers: AnnotationLayer[];
/** Enable area fill below lines */
area: boolean;
/** Color scheme for chart series */
colorScheme?: string;
/** Enable time shift coloring */
timeShiftColor?: boolean;
/** Contribution calculation mode */
contributionMode?: ContributionType;
/** Enable forecasting features */
forecastEnabled: boolean;
/** Number of forecast periods */
forecastPeriods: number;
/** Forecast confidence interval percentage */
forecastInterval: number;
/** Daily seasonality for forecasting */
forecastSeasonalityDaily: null;
/** Weekly seasonality for forecasting */
forecastSeasonalityWeekly: null;
/** Yearly seasonality for forecasting */
forecastSeasonalityYearly: null;
/** Use logarithmic axis scaling */
logAxis: boolean;
/** Show data point markers */
markerEnabled: boolean;
/** Size of data point markers */
markerSize: number;
/** Show minor grid lines */
minorSplitLine: boolean;
/** Show minor axis ticks */
minorTicks: boolean;
/** Chart opacity (0-1) */
opacity: number;
/** Sort data in descending order */
orderDesc: boolean;
/** Maximum number of data rows */
rowLimit: number;
/** Chart series visualization type */
seriesType: EchartsTimeseriesSeriesType;
/** Stacking configuration */
stack: StackType;
/** Dimension for stacking operations */
stackDimension: string;
/** Time comparison periods */
timeCompare?: string[];
/** Tooltip time format string */
tooltipTimeFormat?: string;
/** Show total values in tooltip */
showTooltipTotal?: boolean;
/** Show percentage values in tooltip */
showTooltipPercentage?: boolean;
/** Truncate long X-axis labels */
truncateXAxis: boolean;
/** Truncate long Y-axis labels */
truncateYAxis: boolean;
/** Y-axis value format string */
yAxisFormat?: string;
/** Force categorical X-axis */
xAxisForceCategorical?: boolean;
/** X-axis time format string */
xAxisTimeFormat?: string;
/** Time granularity for data aggregation */
timeGrainSqla?: TimeGranularity;
/** X-axis value bounds [min, max] */
xAxisBounds: [number | undefined | null, number | undefined | null];
/** Y-axis value bounds [min, max] */
yAxisBounds: [number | undefined | null, number | undefined | null];
/** Enable chart zoom functionality */
zoomable: boolean;
/** Enable rich tooltip display */
richTooltip: boolean;
/** X-axis label rotation angle */
xAxisLabelRotation: number;
/** X-axis label display interval */
xAxisLabelInterval: number | string;
/** Show values on chart points */
showValue: boolean;
/** Show only total values */
onlyTotal: boolean;
/** Show extra control panels */
showExtraControls: boolean;
/** Percentage threshold for display */
percentageThreshold: number;
/** Chart orientation */
orientation?: OrientationType;
}Configuration options for chart legend display and behavior.
/**
* Legend configuration interface
*/
interface LegendFormData {
/** Legend margin spacing */
legendMargin: number | null | string;
/** Legend position orientation */
legendOrientation: LegendOrientation;
/** Legend display type */
legendType: LegendType;
/** Show/hide legend display */
showLegend: boolean;
/** Legend sorting order */
legendSort: 'asc' | 'desc' | null;
}
enum LegendOrientation {
Top = 'top',
Bottom = 'bottom',
Left = 'left',
Right = 'right',
}
enum LegendType {
Scroll = 'scroll',
Plain = 'plain',
}Configuration for chart and axis titles.
/**
* Title and axis label configuration
*/
interface TitleFormData {
/** X-axis title text */
xAxisTitle: string;
/** X-axis title margin spacing */
xAxisTitleMargin: number;
/** Y-axis title text */
yAxisTitle: string;
/** Y-axis title margin spacing */
yAxisTitleMargin: number;
/** Y-axis title position */
yAxisTitlePosition: string;
}Available chart series types for visualization.
/**
* Chart series type enumeration
*/
enum EchartsTimeseriesSeriesType {
Line = 'line',
Scatter = 'scatter',
Smooth = 'smooth',
Bar = 'bar',
Start = 'start',
Middle = 'middle',
End = 'end',
}Chart orientation options.
/**
* Chart orientation configuration
*/
enum OrientationType {
Vertical = 'vertical',
Horizontal = 'horizontal',
}Default configuration values for all form data options.
/**
* Default form data configuration with all default values
*/
const DEFAULT_FORM_DATA: EchartsTimeseriesFormData;Default Values:
const DEFAULT_FORM_DATA = {
// Legend defaults
legendMargin: null,
legendOrientation: LegendOrientation.Top,
legendType: LegendType.Scroll,
showLegend: true,
// Title defaults
xAxisTitle: '',
xAxisTitleMargin: 0,
yAxisTitle: '',
yAxisTitleMargin: 0,
yAxisTitlePosition: 'Top',
// Chart configuration defaults
annotationLayers: [],
area: false,
forecastEnabled: false,
forecastInterval: 80,
forecastPeriods: 10,
logAxis: false,
markerEnabled: false,
markerSize: 6,
minorSplitLine: false,
opacity: 0.2,
orderDesc: true,
rowLimit: 10000,
seriesType: EchartsTimeseriesSeriesType.Line,
stack: false,
tooltipTimeFormat: 'smart_date',
xAxisTimeFormat: 'smart_date',
truncateXAxis: true,
truncateYAxis: false,
yAxisBounds: [null, null],
zoomable: false,
richTooltip: true,
xAxisForceCategorical: false,
orientation: OrientationType.Vertical,
// ... other defaults
};