UNPKG

smart-webcomponents-angular

Version:

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

366 lines (365 loc) 22.7 kB
import { ThreeDChart } from './../index'; import { Animation, ThreeDChartColorScheme, ThreeDChartLegendIndex, ThreeDChartSelectionMode, ThreeDChartCameraPosition, ThreeDChartSeriesGroup, ThreeDChartFormatSettings, ThreeDChartPadding, ThreeDChartValueAxis, ThreeDChartXAxis, ThreeDChartZAxis } 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, ThreeDChartColorScheme, ThreeDChartLegendIndex, ThreeDChartSelectionMode, ThreeDChartSymbolType, ThreeDChartType, ThreeDChartRangeSelectorSerieType, ThreeDChartXAxisType, ThreeDChartCameraPosition, ThreeDChartSeriesGroup, ThreeDChartBand, ThreeDChartFormatSettings, ThreeDChartSeriesGroupSerie, ThreeDChartLabels, ThreeDChartOffset, ThreeDChartPadding, ThreeDChartValueAxis, ThreeDChartLines, ThreeDChartXAxis, ThreeDChartRangeSelector, ThreeDChartZAxis, ElementRenderMode } from './../index'; export { Smart } from './smart.element'; export { ThreeDChart } from './../index'; export declare class ThreeDChartComponent extends BaseElement implements OnInit, AfterViewInit, OnDestroy, OnChanges { constructor(ref: ElementRef<ThreeDChart>); private eventHandlers; nativeElement: ThreeDChart; /** @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 rate of the animation. The default animation rate is 1 */ get animationSpeed(): number; set animationSpeed(value: number); /** @description Sets whether the chart will rotate automatically. */ get autoRotate(): boolean; set autoRotate(value: boolean); /** @description Sets the speed of the automatic rotation. */ get autoRotateSpeed(): number; set autoRotateSpeed(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 to a static linear gradient. The property must be set to an Array of Strings in the format: 'offset, color' */ get backgroundGradient(): any[]; set backgroundGradient(value: any[]); /** @description Sets the chart's background to a static image. For example: 'https://www.htmlelements.com/demos/images/stars.jpg' */ get backgroundImage(): string; set backgroundImage(value: string); /** @description Sets the chart's background to a dynamic background image which rotates with the camera. The property must be set an Array of 6 images. All images must have aspect ratio 1:1 */ get backgroundTexture(): any[]; set backgroundTexture(value: any[]); /** @description Sets the camera's position. The property must be set to an {x, y, z} object. */ get cameraPosition(): ThreeDChartCameraPosition; set cameraPosition(value: ThreeDChartCameraPosition); /** @description Sets the intial camera zoom. The default value is 1 */ get cameraZoom(): number; set cameraZoom(value: number); /** @description Sets the caption (title) of the chart. */ get caption(): string; set caption(value: string); /** @description Sets the chart's color pallete. jqxChart suppports 32 color schemes from 'scheme01' to 'scheme32'. */ get colorScheme(): ThreeDChartColorScheme | string; set colorScheme(value: ThreeDChartColorScheme | string); /** @description Sets the chart's controls settings. */ get controlsSettings(): any; set controlsSettings(value: any); /** @description Allows substituting default items with custom 3D Objects. The property must be set to an Array of Objects in the format: { groupIndex, serieIndex, itemIndex, modelUrl } */ get customModels(): any[]; set customModels(value: any[]); /** @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 Sets whether the chart's toolbar is enabled. */ get enableControlsToolbar(): boolean; set enableControlsToolbar(value: boolean); /** @description */ get controlsToolbarItems(): any; set controlsToolbarItems(value: any); /** @description Sets the chart's grid options. */ get gridOptions(): any; set gridOptions(value: any); /** @description Sets whether the legend will be created based on the chart's series or serie groups. "auto" - the legend index will change depending on the Chart type */ get legendIndex(): ThreeDChartLegendIndex | string; set legendIndex(value: ThreeDChartLegendIndex | string); /** @description Sets the legend's layout. */ get legendLayout(): any; set legendLayout(value: any); /** @description Sets the light color of the 3D Scene. */ get lightColor(): string; set lightColor(value: string); /** @description Sets or gets the unlockKey which unlocks the product. */ get unlockKey(): string; set unlockKey(value: string); /** @description Sets or gets the locale. Used in conjunction with the property messages. */ get locale(): string; set locale(value: string); /** @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 or gets a value indicating whether the Chart's layout is mirrored. */ get rightToLeft(): boolean; set rightToLeft(value: boolean); /** @description Determines the selection mode. */ get selectionMode(): ThreeDChartSelectionMode | string; set selectionMode(value: ThreeDChartSelectionMode | string); /** @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(): ThreeDChartSeriesGroup[]; set seriesGroups(value: ThreeDChartSeriesGroup[]); /** @description Determines whether to show grid connecting lines when a chart item is hovered over. */ get showConnectionLines(): boolean; set showConnectionLines(value: boolean); /** @description Determines whether to show or hide the chart series legend. */ get showLegend(): boolean; set showLegend(value: boolean); /** @description Determines whether to show or hide the chart series legend table. */ get showLegendTable(): boolean; set showLegendTable(value: boolean); /** @description Enables or disables the chart tooltips. */ get showToolTips(): boolean; set showToolTips(value: boolean); /** @description Sets the padding of the chart's title (caption). */ get titlePadding(): ThreeDChartPadding; set titlePadding(value: ThreeDChartPadding); /** @description Tooltip data formatting settings for the values in the serie. */ get toolTipFormatFunction(): { (value?: any, index?: number, series?: any): string; }; set toolTipFormatFunction(value: { (value?: any, index?: number, series?: any): string; }); /** @description Tooltip line color. By default it is set to the hovered item's color */ get toolTipFormatSettings(): ThreeDChartFormatSettings; set toolTipFormatSettings(value: ThreeDChartFormatSettings); /** @description An object with settings about the Chart's y-axis (value axis). */ get toolTipLineColor(): string | null; set toolTipLineColor(value: string | null); /** @description Sets the Chart's xAxis. */ get valueAxis(): ThreeDChartValueAxis; set valueAxis(value: ThreeDChartValueAxis); /** @description Sets the Chart's zAxis. */ get xAxis(): ThreeDChartXAxis; set xAxis(value: ThreeDChartXAxis); /** @description undefined */ get zAxis(): ThreeDChartZAxis; set zAxis(value: ThreeDChartZAxis); /** @description The event is raised when the user clicks on a chart element. * @param event. The custom event. Custom event was created with: event.detail( itemIndex, serieIndex, groupIndex) * itemIndex - The item index of the item. * serieIndex - The serie index of the item. * groupIndex - The group index of the item. */ onItemClick: EventEmitter<CustomEvent>; /** @description The event is raised when a chart element is shown. * @param event. The custom event. Custom event was created with: event.detail( itemIndex, serieIndex, groupIndex) * itemIndex - The item index of the item. * serieIndex - The serie index of the item. * groupIndex - The group index of the item. */ onShow: EventEmitter<CustomEvent>; /** @description The event is raised when a chart element is hidden. * @param event. The custom event. Custom event was created with: event.detail( itemIndex, serieIndex, groupIndex) * itemIndex - The item index of the item. * serieIndex - The serie index of the item. * groupIndex - The group index of the item. */ onHide: EventEmitter<CustomEvent>; /** @description The event is raised when a chart element is selected. * @param event. The custom event. Custom event was created with: event.detail( itemIndex, serieIndex, groupIndex) * itemIndex - The item index of the item. * serieIndex - The serie index of the item. * groupIndex - The group index of the item. */ onSelect: EventEmitter<CustomEvent>; /** @description The event is raised when a chart element is unselected. * @param event. The custom event. Custom event was created with: event.detail( itemIndex, serieIndex, groupIndex) * itemIndex - The item index of the item. * serieIndex - The serie index of the item. * groupIndex - The group index of the item. */ onUnselect: 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. Custom event was created with: event.detail( minValue, maxValue) * minValue - The start value of the range selector. * maxValue - The end value of the range selector. */ onRangeSelectionChanged: EventEmitter<CustomEvent>; /** @description The event is raised when the chart's range selector position changes and before the chart starts rendering. The event can be default prevented to cancel the range selection change. * @param event. The custom event. Custom event was created with: event.detail( minValue, maxValue, oldMinValue, oldMaxValue) * minValue - The start value of the range selector. * maxValue - The end value of the range selector. * oldMinValue - The previous start value of the range selector. * oldMaxValue - The previous end value of the range selector. */ 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 the chart begins resizing. * @param event. The custom event. */ onResizeBegin: EventEmitter<CustomEvent>; /** @description The event is raised when the chart finishes resizing. * @param event. The custom event. */ onResizeEnd: 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 Begins an update of the chart. The chart will not be rendered until the endUpdate method is called. */ beginUpdate(): void; /** @description Ends an update of the chart. The chart will be rendered after the endUpdate method is called. * @param {boolean} refresh?. If set to true, the chart will complete a full refresh. */ endUpdate(refresh?: boolean): 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>; getColorSchemeSync(schemeName: any): any[]; /** @description Gets the item with the specified indexes. * @param {number | null} groupIndex?. Series group index. * @param {number | null} serieIndex?. Series index. * @param {number | null} itemIndex?. Item (data point) index. * @returns {any} */ getItemByIndexes(groupIndex?: any, serieIndex?: any, itemIndex?: any): Promise<any>; getItemByIndexesSync(groupIndex?: any, serieIndex?: any, itemIndex?: any): any; /** @description Gets an arrat of the items with the specified indexes. Leaving an index null will return all items that match the other indexes. * @param {number | null} groupIndex?. Series group index. * @param {number | null} serieIndex?. Series index. * @param {number | null} itemIndex?. Item (data point) index. * @returns {any} */ getItemsByIndexes(groupIndex?: any, serieIndex?: any, itemIndex?: any): Promise<any>; getItemsByIndexesSync(groupIndex?: any, serieIndex?: any, itemIndex?: any): any; /** @description Gets the indexes of the hidden series. * @returns {{ groupIndex: number, serieIndex: number, itemIndex: number }[]} */ getHidden(): Promise<any>; getHiddenSync(): { groupIndex: number; serieIndex: number; itemIndex: number; }[]; /** @description Gets the selected items. * @returns {any[]} */ getSelection(): Promise<any>; getSelectionSync(): any[]; /** @description Gets the rendered values of the valueAxis labels. * @returns {any} */ getValueAxisLabels(): Promise<any>; getValueAxisLabelsSync(): any; /** @description Gets the rendered values of the xAxis labels. * @returns {any} */ getXAxisLabels(): Promise<any>; getXAxisLabelsSync(): any; /** @description Gets the rendered values of the zAxis labels. * @returns {any} */ getZAxisLabels(): Promise<any>; getZAxisLabelsSync(): any; /** @description Hides all items of a chart group. * @param {number} groupIndex. Series group index. */ hideGroup(groupIndex: number): void; /** @description Hides a chart item. * @param {number} groupIndex. Series group index. * @param {number} serieIndex. Series index. * @param {number} itemIndex?. Item (data point) index. */ hideItem(groupIndex: number, serieIndex: number, itemIndex?: number): void; /** @description Hides all items of a chart serie. * @param {number} groupIndex. Series group index. * @param {number} serieIndex. Series index. */ hideSerie(groupIndex: number, serieIndex: number): 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. * @param {boolean} includeLegend?. Sets whether the legend will be part of the saved file. * @param {boolean} includeCaption?. Sets whether the caption will be part of the saved file. */ saveAsJPEG(fileName?: string, includeLegend?: boolean, includeCaption?: boolean): void; /** @description Exports the chart's content as PNG image. * @param {string} fileName?. File name. * @param {boolean} includeLegend?. Sets whether the legend will be part of the saved file. * @param {boolean} includeCaption?. Sets whether the caption will be part of the saved file. */ saveAsPNG(fileName?: string, includeLegend?: boolean, includeCaption?: boolean): void; /** @description Exports the chart's content as PDF file. * @param {string} fileName?. File name. * @param {boolean} includeLegend?. Sets whether the legend will be part of the saved file. * @param {boolean} includeCaption?. Sets whether the caption will be part of the saved file. */ saveAsPDF(fileName?: string, includeLegend?: boolean, includeCaption?: boolean): void; /** @description Selects a chart item. If selectionMode is 'one', the previous item will be unselected. * @param {number} groupIndex. Series group index. * @param {number} serieIndex. Series index. * @param {number} itemIndex?. Item (data point) index. */ selectItem(groupIndex: number, serieIndex: number, itemIndex?: number): void; /** @description Shows all items of a chart group. * @param {number} groupIndex. Series group index. */ showGroup(groupIndex: number): void; /** @description Shows a chart item. * @param {number} groupIndex. Series group index. * @param {number} serieIndex. Series index. * @param {number} itemIndex?. Item (data point) index. */ showItem(groupIndex: number, serieIndex: number, itemIndex?: number): void; /** @description Shows all items of a chart serie. * @param {number} groupIndex. Series group index. * @param {number} serieIndex. Series index. */ showSerie(groupIndex: number, serieIndex: number): void; /** @description Sets the camera position to its position during the initialization. */ setDefaultPosition(): void; /** @description Sets the camera mode. Different camera modes change the control actions of the mouse. Available modes are 'zoom', 'pan' and 'default'. * @param {string} mode. Camera mode. */ setCameraMode(mode: string): void; /** @description Sets the camera position. * @param {number} x. X coordinate. * @param {number} y. Y coordinate. * @param {number} z. Z coordinate. * @param {boolean} animation?. Animation Enabled */ setCameraPosition(x: number, y: number, z: number, animation?: boolean): void; /** @description Sets the camera zoom. * @param {number} level. Zoom level. * @param {boolean} animation?. Animation Enabled */ setCameraZoom(level: number, animation?: boolean): void; /** @description Unelects a chart item. * @param {number} groupIndex. Series group index. * @param {number} serieIndex. Series index. * @param {number} itemIndex?. Item (data point) index. */ unselectItem(groupIndex: number, serieIndex: number, itemIndex?: 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<ThreeDChartComponent, never>; static ɵdir: i0.ɵɵDirectiveDeclaration<ThreeDChartComponent, "smart-3d-chart, [smart-3d-chart]", ["smart-3d-chart"], { "animation": "animation"; "animationSpeed": "animationSpeed"; "autoRotate": "autoRotate"; "autoRotateSpeed": "autoRotateSpeed"; "backgroundColor": "backgroundColor"; "backgroundGradient": "backgroundGradient"; "backgroundImage": "backgroundImage"; "backgroundTexture": "backgroundTexture"; "cameraPosition": "cameraPosition"; "cameraZoom": "cameraZoom"; "caption": "caption"; "colorScheme": "colorScheme"; "controlsSettings": "controlsSettings"; "customModels": "customModels"; "dataSource": "dataSource"; "description": "description"; "disabled": "disabled"; "enableControlsToolbar": "enableControlsToolbar"; "controlsToolbarItems": "controlsToolbarItems"; "gridOptions": "gridOptions"; "legendIndex": "legendIndex"; "legendLayout": "legendLayout"; "lightColor": "lightColor"; "unlockKey": "unlockKey"; "locale": "locale"; "messages": "messages"; "rightToLeft": "rightToLeft"; "selectionMode": "selectionMode"; "seriesGroups": "seriesGroups"; "showConnectionLines": "showConnectionLines"; "showLegend": "showLegend"; "showLegendTable": "showLegendTable"; "showToolTips": "showToolTips"; "titlePadding": "titlePadding"; "toolTipFormatFunction": "toolTipFormatFunction"; "toolTipFormatSettings": "toolTipFormatSettings"; "toolTipLineColor": "toolTipLineColor"; "valueAxis": "valueAxis"; "xAxis": "xAxis"; "zAxis": "zAxis"; }, { "onItemClick": "onItemClick"; "onShow": "onShow"; "onHide": "onHide"; "onSelect": "onSelect"; "onUnselect": "onUnselect"; "onRangeSelectionChanged": "onRangeSelectionChanged"; "onRangeSelectionChanging": "onRangeSelectionChanging"; "onRefreshBegin": "onRefreshBegin"; "onRefreshEnd": "onRefreshEnd"; "onResizeBegin": "onResizeBegin"; "onResizeEnd": "onResizeEnd"; }, never>; }