UNPKG

smart-webcomponents-angular

Version:

[![Price](https://img.shields.io/badge/price-COMMERCIAL-0098f7.svg)](https://jqwidgets.com/license/)

300 lines (299 loc) 19.8 kB
import { Chart } from './../index'; import { Animation, ChartColorScheme, ChartRenderEngine, ChartLocalization, Padding, ChartSeriesGroup, ChartValueAxis, ChartXAxis } from './../index'; import { AfterViewInit, ElementRef, OnInit, OnChanges, OnDestroy, SimpleChanges, EventEmitter } from '@angular/core'; import { BaseElement } from './smart.element'; import * as i0 from "@angular/core"; export { Animation, ChartColorScheme, ChartRenderEngine, HorizontalAlignment, ChartRotationPoint, VerticalAlignment, ChartAnnotationType, ChartUnselectMode, Orientation, ChartSeriesGroupSerieEmptyPointsDisplay, ChartSymbolType, ChartType, AxisPosition, ChartBaseUnit, ChartXAxisType, ChartLocalization, Padding, ChartSeriesGroup, ChartAnnotation, Offset, ChartAnnotationText, ChartBand, ChartFormatSettings, ChartSeriesGroupSerie, ChartLabels, ChartValueAxis, ChartLines, ChartLine, ChartTitle, ChartXAxis, ChartRangeSelector, ElementRenderMode } from './../index'; export { Smart } from './smart.element'; export { Chart } from './../index'; export declare class ChartComponent extends BaseElement implements OnInit, AfterViewInit, OnDestroy, OnChanges { constructor(ref: ElementRef<Chart>); private eventHandlers; nativeElement: Chart; /** @description Creates the component on demand. * @param properties An optional object of properties, which will be added to the template binded ones. */ createComponent(properties?: {}): any; /** @description Sets or gets the animation mode. Animation is disabled when the property is set to 'none'. */ get animation(): Animation | string; set animation(value: Animation | string); /** @description Determines the animation duration in milliseconds. The value must be between 0 and 5000. If it is outside of this range jqxChart will reset it to the default value. */ get animationDuration(): number; set animationDuration(value: number); /** @description Sets the chart's background color. For example: '#DDFFE8' */ get backgroundColor(): string | null; set backgroundColor(value: string | null); /** @description Sets the chart's background image. For example: 'https://www.htmlelements.com/demos/images/carousel-large-1.jpg' */ get backgroundImage(): string; set backgroundImage(value: string); /** @description Sets the chart's border color. For example: '#098700' */ get borderLineColor(): string | null; set borderLineColor(value: string | null); /** @description Sets the chart's border line width. */ get borderLineWidth(): number; set borderLineWidth(value: number); /** @description Sets the caption (title) of the chart. */ get caption(): string; set caption(value: string); /** @description Determines whether to clip plotted elements that overflow the axis boundaries. */ get clip(): boolean; set clip(value: boolean); /** @description Sets the chart's color pallete. jqxChart suppports 32 color schemes from 'scheme01' to 'scheme32'. */ get colorScheme(): ChartColorScheme | string; set colorScheme(value: ChartColorScheme | string); /** @description Enables or disables overlapping of the column series. */ get columnSeriesOverlap(): boolean; set columnSeriesOverlap(value: boolean); /** @description Gets or sets the color of the crosshairs lines. The 'enableCrosshairs' property should be 'true'. */ get crosshairsColor(): string | null; set crosshairsColor(value: string | null); /** @description Gets or sets the dash style of the crosshairs lines. The style is a series of numbers indicating line length followed by space length. The 'enableCrosshairs' property should be 'true'. For example: '3,3' */ get crosshairsDashStyle(): string; set crosshairsDashStyle(value: string); /** @description Gets or sets the width of the crosshairs lines. The 'enableCrosshairs' property should be 'true' */ get crosshairsLineWidth(): number; set crosshairsLineWidth(value: number); /** @description Sets the chart's data source. */ get dataSource(): any[]; set dataSource(value: any[]); /** @description Sets the description text of the chart. */ get description(): string; set description(value: string); /** @description Enables or disables the chart. */ get disabled(): boolean; set disabled(value: boolean); /** @description Determines the drawing function of jqxChart. When the property is set, you can override the jqxChart's drawing. */ get draw(): any; set draw(value: any); /** @description Function for custom drawing before the caption and other chart elements. */ get drawBefore(): any; set drawBefore(value: any); /** @description Determines if the animation of the axes text is enabled. */ get enableAxisTextAnimation(): boolean; set enableAxisTextAnimation(value: boolean); /** @description Enables or disables the crosshairs lines. The lines are displayed in line and area series when you move over a data point. */ get enableCrosshairs(): boolean; set enableCrosshairs(value: boolean); /** @description Determines whether to display the chart using greyscale colors. */ get greyScale(): boolean; set greyScale(value: boolean); /** @description Sets the legend's layout. */ get legendLayout(): any; set legendLayout(value: any); /** @description Sets or gets the license which unlocks the product. */ get license(): string; set license(value: string); /** @description Sets or gets the locale. Used in conjunction with the property messages. */ get locale(): string; set locale(value: string); /** @description Localization object containing culture-specific properties required for formatting currencies, numbers and dates. */ get localization(): ChartLocalization; set localization(value: ChartLocalization); /** @description Sets or gets an object specifying strings used in the widget that can be localized. Used in conjunction with the property locale. */ get messages(): any; set messages(value: any); /** @description Sets the left, top, right and bottom padding of the Chart. */ get padding(): Padding; set padding(value: Padding); /** @description Determines the rendering engine used to display the chart. When the property is set to an empty string, jqxChart will automatically select an optimal rendering engine depending on the browser capabilities. */ get renderEngine(): ChartRenderEngine | string; set renderEngine(value: ChartRenderEngine | string); /** @description Sets or gets a value indicating whether the Chart's layout is mirrored. */ get rightToLeft(): boolean; set rightToLeft(value: boolean); /** @description The seriesGroups property is used to describe all series displayed on the chart. jqxChart supports multiple series of different types and series grouping. Each series group may have its own Value Axis (Y-axis) which allows you to have values with different scales displayed on the same chart at the same time. It also allows you to display multiple series types together on the same chart. For example, you can display all series in one group as lines and the series in a second group as columns. seriesGroups is an array of objects where each object represents one group. */ get seriesGroups(): ChartSeriesGroup[]; set seriesGroups(value: ChartSeriesGroup[]); /** @description Determines whether to display the chart's border line. */ get showBorderLine(): boolean; set showBorderLine(value: boolean); /** @description Determines whether to show or hide the chart series legend. */ get showLegend(): boolean; set showLegend(value: boolean); /** @description Enables or disables the chart tooltips. */ get showToolTips(): boolean; set showToolTips(value: boolean); /** @description Determines whether to show a composite tooltip containing information for all series. */ get showToolTipsOnAllSeries(): boolean; set showToolTipsOnAllSeries(value: boolean); /** @description Determines the set of default background, line, text and band colors that will be used in the Chart. */ get theme(): string; set theme(value: string); /** @description Sets the padding of the chart's title (caption). */ get titlePadding(): Padding; set titlePadding(value: Padding); /** @description Tooltip background color. */ get toolTipBackground(): string | null; set toolTipBackground(value: string | null); /** @description Determines the tooltip hide delay in milliseconds. */ get toolTipFormatFunction(): { (value?: any, index?: number, series?: any): string; }; set toolTipFormatFunction(value: { (value?: any, index?: number, series?: any): string; }); /** @description Tooltip line color. */ get toolTipHideDelay(): number; set toolTipHideDelay(value: number); /** @description Determines the tooltip show delay in milliseconds. Values may range from 0 to 10000 [ms]. */ get toolTipLineColor(): string | null; set toolTipLineColor(value: string | null); /** @description An object with settings about the Chart's y-axis (value axis). */ get toolTipShowDelay(): number; set toolTipShowDelay(value: number); /** @description Sets the Chart's xAxis. */ get valueAxis(): ChartValueAxis; set valueAxis(value: ChartValueAxis); /** @description undefined */ get xAxis(): ChartXAxis; set xAxis(value: ChartXAxis); /** @description The event is raised when the user clicks on a chart annotation. * @param event. The custom event. */ onAnnotationClick: EventEmitter<CustomEvent>; /** @description The event is raised when the user moves the cursor above a chart annotation. * @param event. The custom event. */ onAnnotationMouseenter: EventEmitter<CustomEvent>; /** @description The event is raised when the user moves the cursor out of a chart annotation. * @param event. The custom event. */ onAnnotationMouseleave: EventEmitter<CustomEvent>; /** @description The event is raised when the user clicks on series element. * @param event. The custom event. */ onClick: EventEmitter<CustomEvent>; /** @description The event is raised when the user moves the cursor out of a series element. * @param event. The custom event. */ onMouseout: EventEmitter<CustomEvent>; /** @description The event is raised when the user moves the cursor above a series element. * @param event. The custom event. */ onMouseover: EventEmitter<CustomEvent>; /** @description The event is raised after the chart's range selector position changes and after the chart ends rendering. * @param event. The custom event. */ onRangeSelectionChanged: EventEmitter<CustomEvent>; /** @description The event is raised when the chart's range selector position changes and before the chart starts rendering. * @param event. The custom event. */ onRangeSelectionChanging: EventEmitter<CustomEvent>; /** @description The event is raised when the chart begins rendering. * @param event. The custom event. */ onRefreshBegin: EventEmitter<CustomEvent>; /** @description The event is raised when the chart finishes rendering. * @param event. The custom event. */ onRefreshEnd: EventEmitter<CustomEvent>; /** @description The event is raised when a serie is toggled by a user click in the chart's legend or through an API call. * @param event. The custom event. */ onToggle: EventEmitter<CustomEvent>; /** @description Adds a new color sheme. If a scheme with the same name already exists, the method will update its colors. * @param {string} schemeName. The name of the custom color scheme. * @param {any[]} colorsArray. An array of color values. */ addColorScheme(schemeName: string, colorsArray: any[]): void; /** @description Returns the colors of a color scheme by name. If the scheme doesn't exist the method returns undefined. * @param {string} schemeName. The name of the color scheme. * @returns {any[]} */ getColorScheme(schemeName: any): Promise<any>; /** @description Gets the rendered coordinates of a data point element. * @param {number} groupIndex. Series group index. * @param {number} serieIndex. Series index. * @param {number} itemIndex. Item (data point) index. * @returns {{ x: number, y: number, width: number, height: number, center: number, centerOffset: number, innerRadius: number, outerRadius: number, selectedRadiusChange: number, fromAngle: number, toAngle: number, radius: number }} */ getItemCoord(groupIndex: any, serieIndex: any, itemIndex: any): Promise<any>; /** @description Gets the number of rendered items in a specific serie. * @param {number} groupIndex. Series group index. * @param {number} serieIndex. Series index. * @returns {number} */ getItemsCount(groupIndex: any, serieIndex: any): Promise<any>; /** @description Gets the rendered coordinates and values of the valueAxis labels. * @param {number} groupIndex. Series group index. * @returns {any} */ getValueAxisLabels(groupIndex: any): Promise<any>; /** @description Gets the rendered rectangle coordinates of the valueAxis of specific serie group. * @param {number} groupIndex. Series group index. * @returns {DOMRect} */ getValueAxisRect(groupIndex: any): Promise<any>; /** @description Gets the valueAxis (vertical axis)'s value. * @param {number} offset. Vertical offset. * @param {number} groupIndex. Series group index. * @returns {any} */ getValueAxisValue(offset: any, groupIndex: any): Promise<any>; /** @description Gets the rendered coordinates and values of the xAxis labels. * @param {number} groupIndex. Series group index. * @returns {any} */ getXAxisLabels(groupIndex: any): Promise<any>; /** @description Gets the rendered rectangle coordinates of the x-Axis of specific serie group. * @param {number} groupIndex. Series group index. * @returns {DOMRect} */ getXAxisRect(groupIndex: any): Promise<any>; /** @description Gets the xAxis (horizontal axis)'s value. * @param {number} offset. Horizontal offset. * @param {number} groupIndex. Series group index. * @returns {any} */ getXAxisValue(offset: any, groupIndex: any): Promise<any>; /** @description Hides a chart serie. The result of calling this function is same as the user unchecking the legend box of a chart serie. * @param {number} groupIndex. Series group index. * @param {number} serieIndex. Series index. * @param {number} itemIndex?. Item (data point) index. Applicable to pie and donut series only. */ hideSerie(groupIndex: number, serieIndex: number, itemIndex?: number): void; /** @description Hides the current tooltip if visible. * @param {number} hideDelay?. Hide delay. */ hideToolTip(hideDelay?: number): void; /** @description Prints the chart. */ print(): void; /** @description Refreshes the content of the chart element after a property or data update. */ refresh(): void; /** @description Removes an existing color scheme. If the scheme does not exist, the method has no effect. * @param {string} schemeName. The name of the custom color scheme. */ removeColorScheme(schemeName: string): void; /** @description Exports the chart's content as JPEG image. * @param {string} fileName?. File name. */ saveAsJPEG(fileName?: string): void; /** @description Exports the chart's content as PNG image. * @param {string} fileName?. File name. */ saveAsPNG(fileName?: string): void; /** @description Exports the chart's content as PDF. * @param {string} fileName?. File name. * @param {string} pageOrientation?. PDF page orientation. <strong>Possible values:</strong> 'portrait' (default), 'landscape'. */ saveAsPDF(fileName?: string, pageOrientation?: string): void; /** @description Shows a hidden chart serie. The result of calling this function is same as the user checking the legend box of a chart serie. * @param {number} groupIndex. Series group index. * @param {number} serieIndex. Series index. * @param {number} itemIndex?. Item (data point) index. Applicable to pie and donut series only. */ showSerie(groupIndex: number, serieIndex: number, itemIndex?: number): void; /** @description Shows a the tooltip for a particular data point. * @param {number} groupIndex. Series group index. * @param {number} serieIndex. Series index. * @param {number} itemIndex. Item (data point) index. * @param {number} showDelay?. Show delay. * @param {number} hideDelay?. Hide delay. */ showToolTip(groupIndex: number, serieIndex: number, itemIndex: number, showDelay?: number, hideDelay?: number): void; /** @description Updates the values of the chart series without full refresh of the entire chart. The method should be used for animation of frequently changing values. */ update(): void; get isRendered(): boolean; ngOnInit(): void; ngAfterViewInit(): void; ngOnDestroy(): void; ngOnChanges(changes: SimpleChanges): void; /** @description Add event listeners. */ private listen; /** @description Remove event listeners. */ private unlisten; static ɵfac: i0.ɵɵFactoryDeclaration<ChartComponent, never>; static ɵdir: i0.ɵɵDirectiveDeclaration<ChartComponent, "smart-chart, [smart-chart]", ["smart-chart"], { "animation": "animation"; "animationDuration": "animationDuration"; "backgroundColor": "backgroundColor"; "backgroundImage": "backgroundImage"; "borderLineColor": "borderLineColor"; "borderLineWidth": "borderLineWidth"; "caption": "caption"; "clip": "clip"; "colorScheme": "colorScheme"; "columnSeriesOverlap": "columnSeriesOverlap"; "crosshairsColor": "crosshairsColor"; "crosshairsDashStyle": "crosshairsDashStyle"; "crosshairsLineWidth": "crosshairsLineWidth"; "dataSource": "dataSource"; "description": "description"; "disabled": "disabled"; "draw": "draw"; "drawBefore": "drawBefore"; "enableAxisTextAnimation": "enableAxisTextAnimation"; "enableCrosshairs": "enableCrosshairs"; "greyScale": "greyScale"; "legendLayout": "legendLayout"; "license": "license"; "locale": "locale"; "localization": "localization"; "messages": "messages"; "padding": "padding"; "renderEngine": "renderEngine"; "rightToLeft": "rightToLeft"; "seriesGroups": "seriesGroups"; "showBorderLine": "showBorderLine"; "showLegend": "showLegend"; "showToolTips": "showToolTips"; "showToolTipsOnAllSeries": "showToolTipsOnAllSeries"; "theme": "theme"; "titlePadding": "titlePadding"; "toolTipBackground": "toolTipBackground"; "toolTipFormatFunction": "toolTipFormatFunction"; "toolTipHideDelay": "toolTipHideDelay"; "toolTipLineColor": "toolTipLineColor"; "toolTipShowDelay": "toolTipShowDelay"; "valueAxis": "valueAxis"; "xAxis": "xAxis"; }, { "onAnnotationClick": "onAnnotationClick"; "onAnnotationMouseenter": "onAnnotationMouseenter"; "onAnnotationMouseleave": "onAnnotationMouseleave"; "onClick": "onClick"; "onMouseout": "onMouseout"; "onMouseover": "onMouseover"; "onRangeSelectionChanged": "onRangeSelectionChanged"; "onRangeSelectionChanging": "onRangeSelectionChanging"; "onRefreshBegin": "onRefreshBegin"; "onRefreshEnd": "onRefreshEnd"; "onToggle": "onToggle"; }, never>; }