@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.
369 lines (305 loc) • 11.2 kB
TypeScript
import { Component, Property, NotifyPropertyChanges, Complex, Collection, Browser } from '@syncfusion/ej2-base';import { EventHandler, remove, ModuleDeclaration, Internationalization } from '@syncfusion/ej2-base';import { Event, EmitType } from '@syncfusion/ej2-base';import { createSvg, removeElement } from '../common/utils/helper';import { Rect, measureText, Size, SvgRenderer } from '@syncfusion/ej2-svg-base';import { RangeTooltip } from '../range-navigator/user-interaction/tooltip';import { Border, Margin, PeriodSelectorSettings } from '../common/model/base';import { BorderModel, MarginModel, PeriodSelectorSettingsModel} from '../common/model/base-model';import { RangeSeries } from './renderer/chart-render';import { RangeNavigatorAxis } from './renderer/range-axis';import { RangeNavigatorSeries, StyleSettings, RangeTooltipSettings } from './model/range-base';import { RangeNavigatorSeriesModel, StyleSettingsModel } from './model/range-base-model';import { ThumbSettingsModel, RangeTooltipSettingsModel } from './model/range-base-model';import { RangeSlider } from './renderer/slider';import { RectOption, getElement} from '../common/utils/helper';import { LineSeries } from '../chart/series/line-series';import { AreaSeries } from '../chart/series/area-series';import { StepLineSeries } from '../chart/series/step-line-series';import { Chart } from '../chart/chart';import { IResizeRangeNavigatorEventArgs } from '../range-navigator/model/range-navigator-interface';import { DateTime } from '../chart/axis/date-time-axis';import { Logarithmic } from '../chart/axis/logarithmic-axis';import { ILabelRenderEventsArgs, IRangeTooltipRenderEventArgs } from './model/range-navigator-interface';import { IRangeLoadedEventArgs, IRangeStyle, IChangedEventArgs, IRangeBeforeResizeEventArgs } from './model/range-navigator-interface';import { beforeResize } from '../common/model/constants';import { getRangeThemeColor } from './utils/theme';import { RangeValueType, LabelAlignment, RangeLabelIntersectAction, NavigatorPlacement } from './utils/enum';import { Font } from '../common/model/base';import { FontModel } from '../common/model/base-model';import { MajorGridLines, MajorTickLines } from '../chart/axis/axis';import { MajorGridLinesModel, MajorTickLinesModel } from '../chart/axis/axis-model';import { AxisPosition } from '../chart/utils/enum';import { DataManager, Query } from '@syncfusion/ej2-data';import { Double } from '../chart/axis/double-axis';import { Data } from '../common/model/data';import { ExportUtils } from '../common/utils/export';import { RangeIntervalType, ExportType, SkeletonType, ChartTheme } from '../common/utils/enum';import { PdfPageOrientation } from '@syncfusion/ej2-pdf-export';import { PeriodSelector } from '../common/period-selector/period-selector';import { AccumulationChart } from '../accumulation-chart/accumulation';import { IPrintEventArgs } from '../chart/model/chart-interface';import { IRangeSelectorRenderEventArgs } from './model/range-navigator-interface';import { StockChart } from '../stock-chart/stock-chart';import { DateTimeCategory } from '../chart/axis/date-time-category-axis';import { PrintUtils } from '../common/utils/print';import { VisibleRangeModel } from '../common/model/interface';
import {ComponentModel} from '@syncfusion/ej2-base';
/**
* Interface for a class RangeNavigator
*/
export interface RangeNavigatorModel extends ComponentModel{
/**
* The width of the range navigator as a string accepts input as both like '100px' or '100%'.
* If specified as '100%, range navigator renders to the full width of its parent element.
*
* @default null
* @aspDefaultValueIgnore
*/
width?: string;
/**
* The height of the chart as a string accepts input both as '100px' or '100%'.
* If specified as '100%, range navigator renders to the full height of its parent element.
*
* @default null
* @aspDefaultValueIgnore
*/
height?: string;
/**
* It defines the data source for a range navigator.
*
* @default null
*/
dataSource?: Object | DataManager;
/**
* It defines the xName for the range navigator.
*
* @default null
*/
xName?: string;
/**
* It defines the yName for the range navigator.
*
* @default null
*/
yName?: string;
/**
* It defines the query for the data source.
*
* @default null
*/
query?: Query;
/**
* It defines the configuration of series in the range navigator
*/
series?: RangeNavigatorSeriesModel[];
/**
* Options for customizing the tooltip of the chart.
*/
tooltip?: RangeTooltipSettingsModel;
/**
* Minimum value for the axis
*
* @default null
* @aspDefaultValueIgnore
*/
minimum?: number | Date;
/**
* Maximum value for the axis
*
* @default null
* @aspDefaultValueIgnore
*/
maximum?: number | Date;
/**
* interval value for the axis.
*
* @default null
* @aspDefaultValueIgnore
*/
interval?: number;
/**
* IntervalType for the dateTime axis.
*
* @default 'Auto'
*/
intervalType?: RangeIntervalType;
/**
* Specifies, when the axis labels intersect with each other.They are,
* * None: Shows all the labels.
* * Hide: Hides the label when it intersects.
*
* @default Hide
*/
labelIntersectAction?: RangeLabelIntersectAction;
/**
* base value for log axis.
*
* @default 10
*/
logBase?: number;
/**
* Specifies the data types that the axis can handle:
* * Double: This type is used for rendering a numeric axis to accommodate numeric data.
* * DateTime: This type is utilized for rendering a date-time axis to manage date-time data.
* * Logarithmic: This type is applied for rendering a logarithmic axis to handle a wide range of values.
* * DateTimeCategory: This type is used to render a date time category axis for managing business days.
*
* @default 'Double'
*/
valueType?: RangeValueType;
/**
* Label positions for the axis.
*
* @default 'Outside'
*/
labelPosition?: AxisPosition;
/**
* Specifies the placement of labels to the axis line. They are,
* betweenTicks - Render the label between the ticks.
* onTicks - Render the label on the ticks.
* auto - Render the label between or on the tick based on data.
*
* @default 'Auto'
*/
labelPlacement?: NavigatorPlacement;
/**
* Duration of the animation.
*
* @default 500
*/
animationDuration?: number;
/**
* Enable grouping for the labels.
*
* @default false
*/
enableGrouping?: boolean;
/**
* Enable deferred update for the range navigator.
*
* @default false
*/
enableDeferredUpdate?: boolean;
/**
* To render the period selector with out range navigator.
*
* @default false
*/
disableRangeSelector?: boolean;
/**
* Enable snapping for range navigator sliders.
*
* @default false
*/
allowSnapping?: boolean;
/**
* Allow the data to be selected for that particular interval while clicking the particular label.
*/
allowIntervalData?: boolean;
/**
* Specifies whether a grouping separator should be used for a number.
*
* @default false
*/
useGroupingSeparator?: boolean;
/**
* GroupBy property for the axis.
*
* @default `Auto`
*/
groupBy?: RangeIntervalType;
/**
* Tick Position for the axis
*
* @default 'Outside'
*/
tickPosition?: AxisPosition;
/**
* Label style for the labels.
*/
labelStyle?: FontModel;
/**
* MajorGridLines
*/
majorGridLines?: MajorGridLinesModel;
/**
* MajorTickLines
*/
majorTickLines?: MajorTickLinesModel;
/**
* Navigator style settings
*/
navigatorStyleSettings?: StyleSettingsModel;
/**
* Period selector settings
*/
periodSelectorSettings?: PeriodSelectorSettingsModel;
/**
* Options for customizing the color and width of the chart border.
*/
navigatorBorder?: BorderModel;
/**
* Specifies the theme for the range navigator.
*
* @default 'Material'
*/
theme?: ChartTheme;
/**
* Selected range for range navigator.
*
* @default []
*/
value?: number[] | Date[];
/**
* The background color of the chart that accepts value in hex and rgba as a valid CSS color string.
*
* @default null
*/
background?: string;
/**
* Used to format the axis label that accepts any global string format like 'C', 'n1', 'P' etc.
* It also accepts placeholder like '{value}°C' in which value represent the axis label, e.g, 20°C.
*
* @default ''
*/
labelFormat?: string;
/**
* Specifies the skeleton format in which the dateTime format will process.
*
* @default ''
*/
skeleton?: string;
/**
* It specifies the type of format to be used in dateTime format process.
*
* @default 'DateTime'
*/
skeletonType?: SkeletonType;
/**
* It specifies the label alignment for secondary axis labels
*
* @default 'Middle'
*/
secondaryLabelAlignment?: LabelAlignment;
/**
* Margin for the range navigator
*
* @default
*/
margin?: MarginModel;
/**
* Triggers before the range navigator rendering.
*
* @event load
*/
load?: EmitType<IRangeLoadedEventArgs>;
/**
* Triggers after the range navigator rendering.
*
* @event loaded
* @blazorProperty 'Loaded'
*/
loaded?: EmitType<IRangeLoadedEventArgs>;
/**
* Triggers after the range navigator resized
*
* @event resized
* @blazorProperty 'Resized'
*/
resized?: EmitType<IResizeRangeNavigatorEventArgs>;
/**
* Triggers before window resize.
*
* @event beforeResize
* @blazorProperty 'BeforeResize'
*/
beforeResize?: EmitType<IRangeBeforeResizeEventArgs>;
/**
* Triggers before the label rendering.
*
* @event labelRender
*/
labelRender?: EmitType<ILabelRenderEventsArgs>;
/**
* Triggers after change the slider.
*
* @event changed
* @blazorProperty 'Changed'
*/
changed?: EmitType<IChangedEventArgs>;
/**
* Triggers before the tooltip for series is rendered.
*
* @event tooltipRender
*/
tooltipRender?: EmitType<IRangeTooltipRenderEventArgs>;
/**
* Triggers before the range navigator selector rendering.
*
* @event selectorRender
*/
selectorRender?: EmitType<IRangeSelectorRenderEventArgs>;
/**
* Triggers before the prints gets started.
*
* @event beforePrint
* @blazorProperty 'OnPrint'
*/
beforePrint?: EmitType<IPrintEventArgs>;
}