@syncfusion/ej2-charts
Version:
Feature-rich chart control with built-in support for over 25 chart types, technical indictors, trendline, zooming, tooltip, selection, crosshair and trackball.
431 lines (343 loc) • 13.1 kB
TypeScript
import { Component, INotifyPropertyChanged, Property, Complex, Collection, Internationalization, NotifyPropertyChanges, ModuleDeclaration } from '@syncfusion/ej2-base';import { Browser, EmitType, remove, Event, EventHandler } from '@syncfusion/ej2-base';import { DataManager } from '@syncfusion/ej2-data';import { Chart, ZoomSettings, CrosshairSettings } from '../chart/chart';import { ZoomSettingsModel, CrosshairSettingsModel } from '../chart/chart-model';import { appendChildElement, redrawElement, titlePositionX, textElement } from '../common/utils/helper';import { Axis } from '../chart/axis/axis';import { Series } from '../chart/series/chart-series';import { Size, Rect, TextOption, measureText, SvgRenderer } from '@syncfusion/ej2-svg-base';import { ITooltipRenderEventArgs, IMouseEventArgs, IPointEventArgs } from '../chart/model/chart-interface';import { IRangeSelectorRenderEventArgs } from '../range-navigator/model/range-navigator-interface';import { IAxisLabelRenderEventArgs, ISeriesRenderEventArgs, IZoomingEventArgs } from '../chart/model/chart-interface';import { StockTooltipSettingsModel, PeriodsModel } from '../common/model/base-model';import { calculateSize, getElement } from '../common/utils/helper';import { RangeNavigator } from '../range-navigator/range-navigator';import { getRangeValueXByPoint } from '../range-navigator/utils/helper';import { PeriodSelector } from '../common/period-selector/period-selector';import { CartesianChart } from './renderer/cartesian-chart';import { RangeSelector } from './renderer/range-selector';import { ToolBarSelector } from './renderer/toolbar-selector';import { StockMargin, StockChartArea, StockChartAxis, StockChartRow, StockChartIndexes, StockEventsSettings, IStockLegendRenderEventArgs, IStockLegendClickEventArgs } from './model/base';import { StockSeries, IStockChartEventArgs, StockChartIndicator, StockChartBorder, IRangeChangeEventArgs } from './model/base';import { StockChartAnnotationSettings, IStockEventRenderArgs } from './model/base';import { StockChartAnnotationSettingsModel } from './model/base-model';import { StockChartFont } from './model/base';import { StockSeriesModel, StockChartIndicatorModel, StockChartAxisModel, StockChartRowModel } from './model/base-model';import { StockChartIndexesModel, StockChartFontModel, StockChartAreaModel, StockEventsSettingsModel } from './model/base-model';import { StockChartBorderModel, StockMarginModel } from './model/base-model';import { ChartSeriesType, TrendlineTypes, TechnicalIndicators} from '../chart/utils/enum';import { ChartTheme, SelectionMode } from '../common/utils/enum';import { IExportEventArgs } from '../common/model/interface';import { ExportType, Alignment } from '../common/utils/enum';import { getSeriesColor, getThemeColor } from '../common/model/theme';import { StockEvents } from './renderer/stock-events';import { IThemeStyle } from '../chart/model/chart-interface';import { StockChartLegendSettingsModel } from './legend/legend-model';import { StockLegend, StockChartLegendSettings } from './legend/legend';import { ColumnSeries, RangeAreaSeries, SeriesModel, SplineRangeAreaSeries } from './index';import { VisibleRangeModel } from '../common/model/interface';import { Periods, StockTooltipSettings } from '../common/model/base';
import {ComponentModel} from '@syncfusion/ej2-base';
/**
* Interface for a class StockChart
*/
export interface StockChartModel extends ComponentModel{
/**
* The width of the stockChart as a string accepts input as both like '100px' or '100%'.
* If specified as '100%, stockChart renders to the full width of its parent element.
*
* @default null
*/
width?: string;
/**
* The height of the stockChart as a string accepts input both as '100px' or '100%'.
* If specified as '100%, stockChart renders to the full height of its parent element.
*
* @default null
*/
height?: string;
/**
* Specifies the DataSource for the stockChart. It can be an array of JSON objects or an instance of DataManager.
* ```html
* <div id='financial'></div>
* ```
* ```typescript
* let dataManager: DataManager = new DataManager({
* url: 'http://mvc.syncfusion.com/Services/Northwnd.svc/Tasks/'
* });
* let query: Query = new Query().take(50).where('Estimate', 'greaterThan', 0, false);
* let financial: stockChart = new stockChart({
* ...
* dataSource:dataManager,
* series: [{
* xName: 'Id',
* yName: 'Estimate',
* query: query
* }],
* ...
* });
* financial.appendTo('#financial');
* ```
*
* @default ''
*/
dataSource?: Object | DataManager;
/**
* Options to customize left, right, top and bottom margins of the stockChart.
*/
margin?: StockMarginModel;
/**
* Options for customizing the color and width of the stockChart border.
*/
border?: StockChartBorderModel;
/**
* The background color of the stockChart that accepts value in hex and rgba as a valid CSS color string.
*
* @default null
*/
background?: string;
/**
* Specifies the theme for the stockChart.
*
* @default 'Material'
*/
theme?: ChartTheme;
/**
* Options to configure the horizontal axis.
*/
primaryXAxis?: StockChartAxisModel;
/**
* Options for configuring the border and background of the stockChart area.
*/
chartArea?: StockChartAreaModel;
/**
* Options to configure the vertical axis.
*/
primaryYAxis?: StockChartAxisModel;
/**
* Options to split stockChart into multiple plotting areas horizontally.
* Each object in the collection represents a plotting area in the stockChart.
*/
rows?: StockChartRowModel[];
/**
* Secondary axis collection for the stockChart.
*/
axes?: StockChartAxisModel[];
/**
* The configuration for series in the stockChart.
*/
series?: StockSeriesModel[];
/**
* The configuration for stock events in the stockChart.
*/
stockEvents?: StockEventsSettingsModel[];
/**
* It specifies whether the stockChart should be render in transposed manner or not.
*
* @default false
*/
isTransposed?: boolean;
/**
* Title of the chart
*
* @default ''
*/
title?: string;
/**
* Options for customizing the title of the Chart.
*/
titleStyle?: StockChartFontModel;
/**
* Defines the collection of technical indicators, that are used in financial markets.
*/
indicators?: StockChartIndicatorModel[];
/**
* Options for customizing the tooltip of the chart.
*/
tooltip?: StockTooltipSettingsModel;
/**
* Options for customizing the crosshair of the chart.
*/
crosshair?: CrosshairSettingsModel;
/**
* Options for customizing the legend of the stockChart.
*/
legendSettings?: StockChartLegendSettingsModel;
/**
* Options to enable the zooming feature in the chart.
*/
zoomSettings?: ZoomSettingsModel;
/**
* It specifies whether the periodSelector to be rendered in financial chart
*
* @default true
*/
enablePeriodSelector?: boolean;
/**
* Custom Range
*
* @default true
*/
enableCustomRange?: boolean;
/**
* If set true, enables the animation in chart.
*
* @default false
*/
isSelect?: boolean;
/**
* It specifies whether the range navigator to be rendered in financial chart
*
* @default true
*/
enableSelector?: boolean;
/**
* To configure period selector options.
*/
periods?: PeriodsModel[];
/**
* The configuration for annotation in chart.
*/
annotations?: StockChartAnnotationSettingsModel[];
/**
* Triggers before render the selector
*
* @event selectorRender
*/
selectorRender?: EmitType<IRangeSelectorRenderEventArgs>;
/**
* Triggers on hovering the stock chart.
*
* @event stockChartMouseMove
* @blazorProperty 'OnStockChartMouseMove'
*/
stockChartMouseMove?: EmitType<IMouseEventArgs>;
/**
* Triggers when cursor leaves the chart.
*
* @event stockChartMouseLeave
* @blazorProperty 'OnStockChartMouseLeave'
*/
stockChartMouseLeave?: EmitType<IMouseEventArgs>;
/**
* Triggers on mouse down.
*
* @event stockChartMouseDown
* @blazorProperty 'OnStockChartMouseDown'
*/
stockChartMouseDown?: EmitType<IMouseEventArgs>;
/**
* Triggers on mouse up.
*
* @event stockChartMouseUp
* @blazorProperty 'OnStockChartMouseUp'
*/
stockChartMouseUp?: EmitType<IMouseEventArgs>;
/**
* Triggers on clicking the stock chart.
*
* @event stockChartMouseClick
* @blazorProperty 'OnStockChartMouseClick'
*/
stockChartMouseClick?: EmitType<IMouseEventArgs>;
/**
* Triggers on point click.
*
* @event pointClick
* @blazorProperty 'OnPointClick'
*/
pointClick?: EmitType<IPointEventArgs>;
/**
* Triggers on point move.
*
* @event pointMove
* @blazorProperty 'PointMoved'
*/
pointMove?: EmitType<IPointEventArgs>;
/**
* Triggers after the zoom selection is completed.
*
* @event onZooming
*/
onZooming?: EmitType<IZoomingEventArgs>;
/**
* Triggers before the legend is rendered.
*
* @event legendRender
*/
legendRender?: EmitType<IStockLegendRenderEventArgs>;
/**
* Triggers after click on legend.
*
* @event legendClick
*/
legendClick?: EmitType<IStockLegendClickEventArgs>;
/**
* Specifies whether series or data point has to be selected. They are,
* * none: Disables the selection.
* * series: selects a series.
* * point: selects a point.
* * cluster: selects a cluster of point
* * dragXY: selects points by dragging with respect to both horizontal and vertical axes
* * dragX: selects points by dragging with respect to horizontal axis.
* * dragY: selects points by dragging with respect to vertical axis.
*
* @default None
*/
selectionMode?: SelectionMode;
/**
* If set true, enables the multi selection in chart. It requires `selectionMode` to be `Point` | `Series` | or `Cluster`.
*
* @default false
*/
isMultiSelect?: boolean;
/**
* Triggers before the range navigator rendering.
*
* @event load
*/
load?: EmitType<IStockChartEventArgs>;
/**
* Triggers after the range navigator rendering.
*
* @event loaded
* @blazorProperty 'Loaded'
*/
loaded?: EmitType<IStockChartEventArgs>;
/**
* Triggers if the range is changed
*
* @event rangeChange
* @blazorProperty 'RangeChange'
*/
rangeChange?: EmitType<IRangeChangeEventArgs>;
/**
* Triggers before each axis label is rendered.
*
* @event axisLabelRender
*/
axisLabelRender?: EmitType<IAxisLabelRenderEventArgs>;
/**
* Triggers before the export process begins. This event allows for the customization of export settings before the chart is exported.
*
* @event beforeExport
*
*/
beforeExport?: EmitType<IExportEventArgs>;
/**
* Triggers before the tooltip for series is rendered.
*
* @event tooltipRender
*/
tooltipRender?: EmitType<ITooltipRenderEventArgs>;
/**
* Triggers before the series is rendered.
*
* @event seriesRender
*/
seriesRender?: EmitType<ISeriesRenderEventArgs>;
/**
* Triggers before the series is rendered.
*
* @event stockEventRender
*/
stockEventRender?: EmitType<IStockEventRenderArgs>;
/**
* Specifies the point indexes to be selected while loading a chart.
* It requires `selectionMode` to be `Point` | `Series` | or `Cluster`.
* ```html
* <div id='Chart'></div>
* ```
* ```typescript
* let chart: Chart = new Chart({
* ...
* selectionMode: 'Point',
* selectedDataIndexes: [ { series: 0, point: 1},
* { series: 2, point: 3} ],
* ...
* });
* chart.appendTo('#Chart');
* ```
*
* @default []
*/
selectedDataIndexes?: StockChartIndexesModel[];
/**
* It specifies the types of series in financial chart.
*/
seriesType?: ChartSeriesType[];
/**
* It specifies the types of indicators in financial chart.
*/
indicatorType?: TechnicalIndicators[];
/**
* It specifies the types of Export types in financial chart.
*/
exportType?: ExportType[];
/**
* It specifies the types of trendline types in financial chart.
*/
trendlineType?: TrendlineTypes[];
}