@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.
528 lines (458 loc) • 16.4 kB
TypeScript
import { Component, Property, NotifyPropertyChanges, Internationalization, INotifyPropertyChanged, remove, Complex, Collection, ModuleDeclaration, Browser, EventHandler, TapEventArgs, extend, Animation, AnimationOptions, AnimationModel, animationMode } from '@syncfusion/ej2-base';import { L10n, isNullOrUndefined, Touch } from '@syncfusion/ej2-base';import { Event, EmitType } from '@syncfusion/ej2-base';import { Rect, Size, SvgRenderer, TextOption, measureText, removeElement } from '@syncfusion/ej2-svg-base';import { ImageOption, RectOption, appendChildElement, createSvg, getElement, getTextAnchor, getTitle, redrawElement, textElement, titlePositionX, showTooltip, appendClipElement, getAnimationFunction, withInBounds, Point3D } from '../common/utils/helper';import { beforeResize, load, pointClick, pointMove, resized } from '../common/model/constants';import { Chart3DBoderElements, Chart3DLoadedEventArgs, Chart3DThemeStyle, Chart3DBeforeResizeEventArgs, Chart3DLegendClickEventArgs, Chart3DLegendRenderEventArgs, Chart3DPointRenderEventArgs, Chart3DResizeEventArgs, Chart3DTooltipRenderEventArgs, TitleSettings } from './model/chart3d-Interface';import { Chart3DSeriesRenderEventArgs, Chart3DAxisLabelRenderEventArgs, Chart3DExportEventArgs, Chart3DMouseEventArgs, Chart3DPointEventArgs, Chart3DPrintEventArgs, Chart3DSelectionCompleteEventArgs, Chart3DTextRenderEventArgs, Chart3DPolygon } from './model/chart3d-Interface';import { CartesianAxisLayoutPanel } from './axis/cartesian-panel';import { get3DSeriesColor, get3DThemeColor } from './model/theme';import { Border, Indexes, Margin } from '../common/model/base';import { BorderModel, IndexesModel, MarginModel } from '../common/model/base-model';import { Alignment, HighlightMode, SelectionPattern, ExportType, ChartTheme } from '../common/utils/enum';import { Vector3D, Matrix3D, Graphics3D, BinaryTreeBuilder, Polygon3D, ChartTransform3D, Svg3DRenderer, Chart3DRender } from './utils/chart3dRender';import { AxisRenderer, WallRenderer } from './utils/renderer';import { Chart3DAxisModel, Chart3DColumnModel, Chart3DRowModel } from './axis/axis-model';import { Chart3DAxis, Chart3DColumn, Chart3DRow } from './axis/axis';import { DataManager } from '@syncfusion/ej2-data';import { Data } from '../common/model/data';import { Chart3DPoint, Chart3DSeries } from './series/chart-series';import { DataLabel3D } from './series/data-label';import { Chart3DTooltipSettings, Tooltip3D } from './user-interaction/tooltip';import { Legend3D, Chart3DLegendSettings } from './legend/legend';import { Highlight3D } from './user-interaction/high-light';import { Selection3D } from './user-interaction/selection';import { Export3D } from './print-export/export';import { Chart3DSeriesModel } from './series/chart-series-model';import { PrintUtils } from '../common/utils/print';import { IAfterExportEventArgs } from '../common/model/interface';import { Chart3DSelectionMode } from './utils/enum';import { Chart3DTooltipSettingsModel } from './user-interaction/tooltip-model';import { Chart3DLegendSettingsModel } from './legend/legend-model';import { TitleSettingsModel } from './model/chart3d-Interface-model';
import {ComponentModel} from '@syncfusion/ej2-base';
/**
* Interface for a class Chart3D
*/
export interface Chart3DModel extends ComponentModel{
/**
* Title of the chart
*
* @default ''
*/
title?: string;
/**
* SubTitle of the chart.
*
* @default ''
*/
subTitle?: string;
/**
* Specifies the theme for the chart.
*
* @default 'Bootstrap5'
*/
theme?: ChartTheme;
/**
* Description for chart.
*
* @default null
*/
description?: string;
/**
* The width of the chart as a string accepts input as both like '100px' or '100%'.
* If specified as '100%, chart renders to the full width of its parent element.
*
* @default null
*/
width?: string;
/**
* The background image of the chart that accepts value in string as url link or location of an image.
*
* @default null
*/
backgroundImage?: string;
/**
* The background color of the chart that accepts value in hex and rgba as a valid CSS color string.
*
* @default null
*/
background?: string;
/**
* Specifies the DataSource for the chart. It can be an array of JSON objects or an instance of DataManager.
* ```html
* <div id='Chart'></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 chart3D: Chart3D = new Chart3D({
* ...
* dataSource:dataManager,
* series: [{
* xName: 'Id',
* yName: 'Estimate',
* query: query
* }],
* ...
* });
* chart3D.appendTo('#Chart');
* ```
*
* @default ''
*/
dataSource?: Object | DataManager;
/**
* The height of the chart as a string accepts input both as '100px' or '100%'.
* If specified as '100%, chart renders to the full height of its parent element.
*
* @default null
*/
height?: string;
/**
* Depth of the 3D Chart from front view of the series to the background wall.
*
* @default 50
*/
depth?: number;
/**
* Defines the width of the 3D chart wall.
*
* @default 2
*/
wallSize?: number;
/**
* Defines the slope angle for the 3D chart.
*
* @default 0
*/
tilt?: number;
/**
* If set true, enables the rotation in the 3D chart.
*
* @default false
*/
enableRotation?: boolean;
/**
* Defines the rotating angle for the 3D chart.
*
* @default 0
*/
rotation?: number;
/**
* To enable the side by side placing the points for column type series.
*
* @default true
*/
enableSideBySidePlacement?: boolean;
/**
* Defines the perspective angle for the 3D chart.
*
* @default 90
*/
perspectiveAngle?: number;
/**
* Represents the color of the 3D wall.
*
* @default null
*/
wallColor?: string;
/**
* It specifies whether the chart should be render in transposed manner or not.
*
* @default false
*/
isTransposed?: boolean;
/**
* Defines the currencyCode format of the chart
*
* @private
* @aspType string
*/
currencyCode?: string;
/**
* Enables or disables the export feature in the 3D chart.
*
* @default false
*/
enableExport?: boolean;
/**
* Triggered before the chart is loaded.
*
* @event load
*/
load?: EmitType<Chart3DLoadedEventArgs>;
/**
* Triggered after the chart is loaded.
*
* @event loaded
*/
loaded?: EmitType<Chart3DLoadedEventArgs>;
/**
* Triggered when the user clicks on data points.
*
* @event pointClick
*
*/
pointClick?: EmitType<Chart3DPointEventArgs>;
/**
* Triggered when the user hovers over data points.
*
* @event pointMove
*
*/
pointMove?: EmitType<Chart3DPointEventArgs>;
/**
* Triggered when the data point is ready to render on the screen.
*
* @event pointRender
*/
pointRender?: EmitType<Chart3DPointRenderEventArgs>;
/**
* Triggered when the legend is ready to render on the screen.
*
* @event legendRender
*
*/
legendRender?: EmitType<Chart3DLegendRenderEventArgs>;
/**
* Triggered when the user clicks on the legend.
*
* @event legendClick
*/
legendClick?: EmitType<Chart3DLegendClickEventArgs>;
/**
* Triggered when the series is ready to render on the screen.
*
* @event seriesRender
*/
seriesRender?: EmitType<Chart3DSeriesRenderEventArgs>;
/**
* Triggered when the data label is ready to render on the screen.
*
* @event textRender
*/
textRender?: EmitType<Chart3DTextRenderEventArgs>;
/**
* Triggered when the tooltip is ready to render on the screen.
*
* @event tooltipRender
*/
tooltipRender?: EmitType<Chart3DTooltipRenderEventArgs>;
/**
* Triggers before resizing of chart
*
* @event beforeResize
*
*/
beforeResize?: EmitType<Chart3DBeforeResizeEventArgs>;
/**
* Triggers after resizing of chart.
*
* @event resized
*
*/
resized?: EmitType<Chart3DResizeEventArgs>;
/**
* Triggered when the user hovers over a 3D chart.
*
* @event chart3DMouseMove
*
*/
chart3DMouseMove?: EmitType<Chart3DMouseEventArgs>;
/**
* Triggered when the user clicks on a 3D chart.
*
* @event chart3DMouseClick
*
*/
chart3DMouseClick?: EmitType<Chart3DMouseEventArgs>;
/**
* Triggered when the mouse is pressed down on a 3D chart.
*
* @event chart3DMouseDown
*
*/
chart3DMouseDown?: EmitType<Chart3DMouseEventArgs>;
/**
* Triggered when the cursor leaves a 3D chart.
*
* @event chart3DMouseLeave
*
*/
chart3DMouseLeave?: EmitType<Chart3DMouseEventArgs>;
/**
* Triggered when the mouse button is released on a 3D chart.
*
* @event chart3DMouseUp
*
*/
chart3DMouseUp?: EmitType<Chart3DMouseEventArgs>;
/**
* Triggers before each axis label is rendered.
*
* @event axisLabelRender
*/
axisLabelRender?: EmitType<Chart3DAxisLabelRenderEventArgs>;
/**
* Triggers after the selection is completed.
*
* @event selectionComplete
*/
selectionComplete?: EmitType<Chart3DSelectionCompleteEventArgs>;
/**
* Triggers before the export gets started.
*
* @event beforeExport
*/
beforeExport?: EmitType<Chart3DExportEventArgs>;
/**
* Triggers after the export completed.
*
* @event afterExport
*/
afterExport?: EmitType<IAfterExportEventArgs>;
/**
* Triggers before the prints gets started.
*
* @event beforePrint
*/
beforePrint?: EmitType<Chart3DPrintEventArgs>;
/**
* Options to customize left, right, top and bottom margins of the chart.
*/
margin?: MarginModel;
/**
* Options for customizing the title of the Chart.
*/
titleStyle?: TitleSettingsModel;
/**
* Options for customizing the Subtitle of the Chart.
*/
subTitleStyle?: TitleSettingsModel;
/**
* The chart legend configuration options.
*/
legendSettings?: Chart3DLegendSettingsModel;
/**
* Options for customizing the color and width of the chart border.
*/
border?: BorderModel;
/**
* Options to configure the horizontal axis.
*/
primaryXAxis?: Chart3DAxisModel;
/**
* Options to configure the vertical axis.
*/
primaryYAxis?: Chart3DAxisModel;
/**
* The chart tooltip configuration options.
*/
tooltip?: Chart3DTooltipSettingsModel;
/**
* Options to split Chart into multiple plotting areas horizontally.
* Each object in the collection represents a plotting area in the Chart.
*/
rows?: Chart3DRowModel[];
/**
* Options to split chart into multiple plotting areas vertically.
* Each object in the collection represents a plotting area in the chart.
*/
columns?: Chart3DColumnModel[];
/**
* Secondary axis collection for the chart.
*/
axes?: Chart3DAxisModel[];
/**
* The configuration for series in the chart.
*/
series?: Chart3DSeriesModel[];
/**
* Defines the color for the highlighted data point.
*
* @default ''
*/
highlightColor?: string;
/**
* Specifies whether a series or data point should be highlighted. The options are:
* * none: Disables the selection.
* * series: selects a series.
* * point: selects a point.
* * cluster: selects a cluster of point
*
* @default None
*/
selectionMode?: Chart3DSelectionMode;
/**
* Specifies whether a series or data point should be highlighted. The options are:
* * none: Disables the highlight.
* * series: highlight a series.
* * point: highlight a point.
* * cluster: highlight a cluster of point
*
* @default None
*/
highlightMode?: HighlightMode;
/**
* Specifies whether series or data point has to be selected. They are,
* * none: sets none as selecting pattern.
* * chessboard: sets chess board as selecting pattern.
* * dots: sets dots as selecting pattern.
* * diagonalForward: sets diagonal forward as selecting pattern.
* * crosshatch: sets crosshatch as selecting pattern.
* * pacman: sets pacman selecting pattern.
* * diagonalbackward: sets diagonal backward as selecting pattern.
* * grid: sets grid as selecting pattern.
* * turquoise: sets turquoise as selecting pattern.
* * star: sets star as selecting pattern.
* * triangle: sets triangle as selecting pattern.
* * circle: sets circle as selecting pattern.
* * tile: sets tile as selecting pattern.
* * horizontaldash: sets horizontal dash as selecting pattern.
* * verticaldash: sets vertical dash as selecting pattern.
* * rectangle: sets rectangle as selecting pattern.
* * box: sets box as selecting pattern.
* * verticalstripe: sets vertical stripe as selecting pattern.
* * horizontalstripe: sets horizontal stripe as selecting pattern.
* * bubble: sets bubble as selecting pattern.
*
* @default None
*/
selectionPattern?: SelectionPattern;
/**
* Specifies whether series or data point has to be selected. They are,
* * none: sets none as highlighting pattern.
* * chessboard: sets chess board as highlighting pattern.
* * dots: sets dots as highlighting pattern.
* * diagonalForward: sets diagonal forward as highlighting pattern.
* * crosshatch: sets crosshatch as highlighting pattern.
* * pacman: sets pacman highlighting pattern.
* * diagonalbackward: sets diagonal backward as highlighting pattern.
* * grid: sets grid as highlighting pattern.
* * turquoise: sets turquoise as highlighting pattern.
* * star: sets star as highlighting pattern.
* * triangle: sets triangle as highlighting pattern.
* * circle: sets circle as highlighting pattern.
* * tile: sets tile as highlighting pattern.
* * horizontaldash: sets horizontal dash as highlighting pattern.
* * verticaldash: sets vertical dash as highlighting pattern.
* * rectangle: sets rectangle as highlighting pattern.
* * box: sets box as highlighting pattern.
* * verticalstripe: sets vertical stripe as highlighting pattern.
* * horizontalstripe: sets horizontal stripe as highlighting pattern.
* * bubble: sets bubble as highlighting pattern.
*
* @default None
*/
highlightPattern?: SelectionPattern;
/**
* If set true, enables the multi selection in chart. It requires `selectionMode` to be `Point` | `Series` | or `Cluster`.
*
* @default false
*/
isMultiSelect?: boolean;
/**
* Specifies the point indexes to be selected while loading a chart.
* It requires `selectionMode` or `highlightMode` to be `Point` | `Series` | or `Cluster`.
* ```html
* <div id='Chart'></div>
* ```
* ```typescript
* let chart3D: Chart3D = new Chart3D({
* ...
* selectionMode: 'Point',
* selectedDataIndexes: [ { series: 0, point: 1},
* { series: 2, point: 3} ],
* ...
* });
* chart3D.appendTo('#Chart');
* ```
*
* @default []
*/
selectedDataIndexes?: IndexesModel[];
/**
* Specifies whether a grouping separator should be used for a number.
*
* @default false
*/
useGroupingSeparator?: boolean;
/**
* Palette for the chart series.
*
* @default []
*/
palettes?: string[];
}