or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

chart-components.mdchart-plugins.mddata-transformation.mdform-data.mdindex.mdquery-building.md
tile.json

form-data.mddocs/

Form Data Configuration

The form data interface provides comprehensive configuration options for chart appearance, behavior, and data processing. It extends the base QueryFormData with timeseries-specific options.

Capabilities

Main Form Data Interface

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;
}

Legend Configuration

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',
}

Title Configuration

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;
}

Series Type Configuration

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',
}

Orientation Configuration

Chart orientation options.

/**
 * Chart orientation configuration
 */
enum OrientationType {
  Vertical = 'vertical',
  Horizontal = 'horizontal',
}

Default Form Data

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
};

Configuration Categories

Visual Appearance

  • area: Fill area below lines
  • opacity: Chart transparency
  • colorScheme: Color palette selection
  • markerEnabled/markerSize: Data point markers
  • showValue: Display values on chart

Axis Configuration

  • logAxis: Logarithmic scaling
  • xAxisBounds/yAxisBounds: Axis value ranges
  • truncateXAxis/truncateYAxis: Label truncation
  • xAxisLabelRotation: Label rotation angle
  • xAxisTimeFormat/yAxisFormat: Value formatting
  • minorSplitLine/minorTicks: Minor grid elements

Interaction Features

  • zoomable: Pan and zoom functionality
  • richTooltip: Enhanced tooltip display
  • showTooltipTotal/showTooltipPercentage: Tooltip content options
  • orientation: Chart layout direction

Data Processing

  • rowLimit: Maximum data rows
  • orderDesc: Data sorting order
  • timeCompare: Time-over-time comparisons
  • contributionMode: Contribution calculations
  • stack/stackDimension: Data stacking options

Advanced Analytics

  • forecastEnabled: Enable forecasting
  • forecastPeriods: Number of forecast periods
  • forecastInterval: Confidence interval
  • forecastSeasonality*: Seasonal patterns
  • annotationLayers: Chart annotations

Control Display

  • showExtraControls: Extra control panels
  • showLegend: Legend visibility
  • legendOrientation/legendType: Legend configuration
  • percentageThreshold: Display thresholds