@progress/kendo-angular-charts
Version:
Kendo UI Charts for Angular - A comprehensive package for creating beautiful and interactive data visualization. Every chart type, stock charts, and sparklines are included.
461 lines (460 loc) • 21.1 kB
TypeScript
/**-----------------------------------------------------------------------------------------
* Copyright © 2024 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the project root for more information
*-------------------------------------------------------------------------------------------*/
import { AfterViewChecked, AfterViewInit, ChangeDetectorRef, NgZone, OnChanges, OnDestroy, OnInit, Renderer2, SimpleChange, QueryList, EventEmitter, ElementRef, EmbeddedViewRef } from '@angular/core';
import { IntlService } from '@progress/kendo-angular-intl';
import { LocalizationService } from '@progress/kendo-angular-l10n';
import { Group, ImageExportOptions, Surface } from '@progress/kendo-drawing';
import { Subscription } from 'rxjs';
import { ChartAxis } from './api-types/chart-axis.interface';
import { ChartPane } from './api-types/chart-pane.interface';
import { ChartPlotArea } from './api-types/chart-plotarea.interface';
import { SeriesPoint } from './api-types/series-point.interface';
import './chart-defaults';
import { ChartOptions } from './chart-options.interface';
import { DonutCenterTemplateDirective } from './chart/donut-center-template.directive';
import { NoDataTemplateDirective } from './chart/no-data-template.directive';
import { SeriesItemComponent } from './chart/series-item.component';
import { CrosshairTooltipsContainerComponent } from './chart/tooltip/crosshair-tooltips-container.component';
import { PopupSettings } from './chart/tooltip/popup-settings.interface';
import { TooltipPopupComponent } from './chart/tooltip/tooltip-popup.component';
import { ChartSVGExportOptions, ChartVisualExportOptions } from './common/api-types';
import { ChartInstanceObserver } from './common/chart-instance-observer';
import { ConfigurationService } from './common/configuration.service';
import { AxisDefaults, CategoryAxis, ChartArea, DragAction, Legend, Pane, PaneDefaults, PlotArea, Series, SeriesDefaults, Subtitle, Title, Tooltip, ValueAxis, XAxis, YAxis, Zoomable } from './common/property-types';
import { ThemeService } from './common/theme.service';
import { AxisLabelClickEvent } from './events/axis-label-click-event';
import { DragEndEvent } from './events/drag-end-event';
import { DragEvent } from './events/drag-event';
import { DragStartEvent } from './events/drag-start-event';
import { InstanceEventService } from './events/instance-event.service';
import { LegendItemClickEvent } from './events/legend-item-click-event';
import { LegendItemHoverEvent } from './events/legend-item-hover-event';
import { LegendItemLeaveEvent } from './events/legend-item-leave-event';
import { NoteClickEvent } from './events/note-click-event';
import { NoteHoverEvent } from './events/note-hover-event';
import { NoteLeaveEvent } from './events/note-leave-event';
import { PaneRenderEvent } from './events/pane-render-event';
import { PlotAreaClickEvent } from './events/plot-area-click-event';
import { PlotAreaHoverEvent } from './events/plot-area-hover-event';
import { PlotAreaLeaveEvent } from './events/plot-area-leave-event';
import { RenderEvent } from './events/render-event';
import { SelectEndEvent } from './events/select-end-event';
import { SelectEvent } from './events/select-event';
import { SelectStartEvent } from './events/select-start-event';
import { SeriesClickEvent } from './events/series-click-event';
import { SeriesHoverEvent } from './events/series-hover-event';
import { SeriesLeaveEvent } from './events/series-leave-event';
import { SeriesOverEvent } from './events/series-over-event';
import { ZoomEndEvent } from './events/zoom-end-event';
import { ZoomEvent } from './events/zoom-event';
import { ZoomStartEvent } from './events/zoom-start-event';
import { SeriesComponent } from './chart/series.component';
import { DrilldownEvent } from './events/drilldown-event';
import * as i0 from "@angular/core";
/**
* The root Chart component.
*
* @example
* ```ts
* import { Component } from '@angular/core';
*
* _@Component({
* selector: 'my-app',
* template: `
* <button kendoButton (click)="toggleLegend()">Toggle Legend</button>
* <button kendoButton (click)="toggleSeries()">Toggle Series</button>
* <kendo-chart>
* <kendo-chart-legend [visible]="legendVisible">
* </kendo-chart-legend>
* <kendo-chart-series>
* <kendo-chart-series-item *ngIf="seriesVisible" name="Series #1"
* type="line" [data]="[1, 2, 3]">
* </kendo-chart-series-item>
* </kendo-chart-series>
* </kendo-chart>
* `
* })
* class AppComponent {
* public legendVisible: boolean = true;
* public seriesVisible: boolean = true;
*
* public toggleSeries(): void {
* this.seriesVisible = !this.seriesVisible;
* }
*
* public toggleLegend(): void {
* this.legendVisible = !this.legendVisible;
* }
* }
*
* ```
*/
export declare class ChartComponent implements ChartOptions, OnChanges, OnInit, OnDestroy, AfterViewInit, AfterViewChecked {
configurationService: ConfigurationService;
themeService: ThemeService;
protected element: ElementRef;
protected intl: IntlService;
protected localizationService: LocalizationService;
protected ngZone: NgZone;
protected instanceEventService: InstanceEventService;
protected changeDetector: ChangeDetectorRef;
protected renderer: Renderer2;
/**
* Specifies if the Chart can be panned.
* Panning is not available for the `Donut`, `Pie`, `Funnel`, `Pyramid`, `Polar`, and `Radar` series.
* @default false
*/
pannable: boolean | DragAction;
renderAs: 'svg' | 'canvas';
seriesColors: string[];
subtitle: string | Subtitle;
title: string | Title;
noData: boolean;
/**
* If set to `true`, the Chart plays animations when it displays the series.
* By default, animations are enabled.
* @default true
*/
transitions: boolean;
zoomable: boolean | Zoomable;
axisDefaults: AxisDefaults;
categoryAxis: CategoryAxis | CategoryAxis[];
chartArea: ChartArea;
legend: Legend;
panes: Pane[];
paneDefaults: PaneDefaults;
plotArea: PlotArea;
series: Series[];
seriesDefaults: SeriesDefaults;
tooltip: Tooltip;
valueAxis: ValueAxis | ValueAxis[];
xAxis: XAxis | XAxis[];
yAxis: YAxis | YAxis[];
/**
* Fires when the user clicks an axis label ([see example](slug:events_chart)).
*/
axisLabelClick: EventEmitter<AxisLabelClickEvent>;
/**
* Fires as long as the user is dragging the Chart with the mouse or through swipe gestures.
*/
drag: EventEmitter<DragEvent>;
/**
* Fires when the user stops dragging the Chart.
*/
dragEnd: EventEmitter<DragEndEvent>;
/**
* Fires when the user starts dragging the Chart.
*/
dragStart: EventEmitter<DragStartEvent>;
/**
* Fires when the user hovers over a legend item ([see example](slug:events_chart)).
*/
legendItemHover: EventEmitter<LegendItemHoverEvent>;
/**
* Fires when the cursor leaves a legend item.
*/
legendItemLeave: EventEmitter<LegendItemLeaveEvent>;
/**
* Fires when the user clicks a note.
*/
noteClick: EventEmitter<NoteClickEvent>;
/**
* Fires when the user hovers over a note.
*/
noteHover: EventEmitter<NoteHoverEvent>;
/**
* Fires when the cursor leaves a note.
*/
noteLeave: EventEmitter<NoteLeaveEvent>;
/**
* Fires when a pane is rendered because the Chart is rendered, performs panning or zooming, or is exported with different options.
* The event is used to render custom visuals in the panes.
*/
paneRender: EventEmitter<PaneRenderEvent>;
/**
* Fires when the user clicks the plot area ([see example](slug:events_chart)).
* The `click` event is triggered by the `tap` and `contextmenu` events.
* To distinguish between the original events, inspect the `e.originalEvent.type` field.
*/
plotAreaClick: EventEmitter<PlotAreaClickEvent>;
/**
* Fires when the user hovers the plot area ([see example](slug:events_chart)).
*/
plotAreaHover: EventEmitter<PlotAreaHoverEvent>;
/**
* Fires when the cursor leaves the plot area.
*/
plotAreaLeave: EventEmitter<PlotAreaLeaveEvent>;
/**
* Fires when the Chart is ready to render on screen ([see example](slug:events_chart)).
* For example, you can use it to remove loading indicators.
* Any changes made to the options are ignored.
*/
render: EventEmitter<RenderEvent>;
/**
* Fires when the user modifies the selection.
*
* The range units include a generic axis category index (0-based) and a date axis represented by a date instance.
*/
select: EventEmitter<SelectEvent>;
/**
* Fires when the user completes the modification of the selection.
*
* The range units include a generic axis category index (0-based) and a date axis represented by a date instance.
*/
selectEnd: EventEmitter<SelectEndEvent>;
/**
* Fires when the user starts modifying the axis selection.
*
* The range units include a generic axis category index (0-based) and a date axis represented by a date instance.
*/
selectStart: EventEmitter<SelectStartEvent>;
/**
* Fires when the user clicks the Chart series.
*
* The `click` event will be triggered by the `tap` and `contextmenu` events ([see example](slug:events_chart)).
* To distinguish between the original events, inspect the `e.originalEvent.type` field.
*/
seriesClick: EventEmitter<SeriesClickEvent>;
/**
* Fires when the user when the user wants to drill down on a specific point.
*/
drilldown: EventEmitter<DrilldownEvent>;
/**
* Fires when the user hovers the Chart series ([see example](slug:events_chart)).
*/
seriesHover: EventEmitter<SeriesHoverEvent>;
/**
* Fires when the cursor enters a series.
*/
seriesOver: EventEmitter<SeriesOverEvent>;
/**
* Fires when the cursor leaves a series.
*/
seriesLeave: EventEmitter<SeriesLeaveEvent>;
/**
* Fires as long as the user is zooming the Chart by using the mousewheel operation.
*/
zoom: EventEmitter<ZoomEvent>;
/**
* Fires when the user stops zooming the Chart.
*/
zoomEnd: EventEmitter<ZoomEndEvent>;
/**
* Fires when the user uses the mousewheel to zoom the Chart.
*/
zoomStart: EventEmitter<ZoomStartEvent>;
/**
* Fires when a legend item is clicked before the selected series visibility is toggled.
* Can be prevented.
*/
legendItemClick: EventEmitter<LegendItemClickEvent>;
/**
* Fires when the drill-down level has changed.
*/
drilldownLevelChange: EventEmitter<number>;
/**
* Limits the automatic resizing of the Chart. Sets the maximum number of times per second
* that the component redraws its content when the size of its container changes.
* Defaults to `10`. To disable the automatic resizing, set it to `0`.
*
* @default 10
*/
resizeRateLimit: number;
/**
* The settings for the tooltip popup.
*/
popupSettings: PopupSettings;
/**
* Gets or sets the current drill-down level for [Drilldown Charts](slug:drilldown_chart_charts).
*
* To return to a previous level, set the value to a number less than the current level.
* To return to the root chart, set the value to 0.
*
* Setting the value to a number greater than the current level will have no effect.
*/
get drilldownLevel(): number;
set drilldownLevel(level: number);
/**
* The Drawing `Surface` of the Chart.
*/
surface: Surface;
seriesCollectionComponent: QueryList<SeriesComponent>;
seriesComponents: QueryList<SeriesItemComponent>;
donutCenterTemplate: DonutCenterTemplateDirective;
noDataTemplate: NoDataTemplateDirective;
tooltipInstance: TooltipPopupComponent;
crossahirTooltips: CrosshairTooltipsContainerComponent;
surfaceElement: ElementRef;
/**
* @hidden
*/
donutCenterStyle: any;
/**
* @hidden
*/
messageFor(key: string): string;
/**
* @hidden
*/
showLicenseWatermark: boolean;
instance: any;
protected options: any;
protected theme: any;
protected optionsChange: Subscription;
protected suppressTransitions: boolean;
protected resizeTimeout: any;
protected redrawTimeout: any;
protected domSubscriptions: () => void;
protected destroyed: boolean;
protected subscriptions: Subscription;
protected rtl: boolean;
protected hostClasses: string[];
protected drilldownState: EmbeddedViewRef<any>[];
constructor(configurationService: ConfigurationService, themeService: ThemeService, element: ElementRef, intl: IntlService, localizationService: LocalizationService, ngZone: NgZone, instanceEventService: InstanceEventService, changeDetector: ChangeDetectorRef, renderer: Renderer2);
ngOnInit(): void;
ngAfterViewInit(): void;
private onDrilldown;
ngAfterViewChecked(): void;
ngOnChanges(changes: {
[propertyName: string]: SimpleChange;
}): void;
/**
* Updates the component fields with the specified values and refreshes the Chart.
*
* Use this method when the configuration values cannot be set through the template.
*
* @example
* ```ts-no-run
* chart.notifyChanges({ title: { text: 'New Title' } });
* ```
*
* @param changes An object containing the updated input fields.
*/
notifyChanges(changes: any): void;
ngOnDestroy(): void;
protected createInstance(element: any, observer: ChartInstanceObserver): void;
/**
* Exports the Chart as an image. The export operation is asynchronous and returns a promise.
*
* @param {ImageExportOptions} options - The parameters for the exported image.
* @returns {Promise<string>} - A promise that will be resolved with a PNG image encoded as a Data URI.
*/
exportImage(options?: ImageExportOptions): Promise<string>;
/**
* Exports the Chart as an SVG document. The export operation is asynchronous and returns a promise.
*
* @param options - The parameters for the exported file.
* @returns - A promise that will be resolved with an SVG document that is encoded as a Data URI.
*/
exportSVG(options?: ChartSVGExportOptions): Promise<string>;
/**
* Exports the Chart as a Drawing `Scene`.
*
* @param options - The parameters for the export operation.
* @returns - The root Group of the scene.
*/
exportVisual(options?: ChartVisualExportOptions | any): Group;
/**
* Returns the axis with the specified name.
*
* @param {string} name - The axis name.
* @returns {ChartAxis} - The axis with a corresponding name.
*/
findAxisByName(name: string): ChartAxis;
/**
* Returns the pane at the specified index.
*
* @param {number} index - The pane index.
* @returns {ChartPane} - The pane at the specified index.
*/
findPaneByIndex(index: number): ChartPane;
/**
* Returns the pane with the specified name.
*
* @param {string} name - The name of the pane.
* @returns {ChartPane} - The pane with the provided name.
*/
findPaneByName(name: string): ChartPane;
/**
* Returns the plot area of the Chart.
* @returns {ChartPlotArea} - The plot area of the Chart.
*/
getPlotArea(): ChartPlotArea;
/**
* Highlights the series points or the segments of a Pie, Donut, Funnel or Pyramid charts.
*
* See [Series Highlight]({% slug serieshighlight_chart_charts %}) for more details (with an [example](slug:serieshighlight_chart_charts#toc-toggling-the-highlight-with-code)).
* @param show - A Boolean value that indicates whether the highlight is shown or hidden.
* @param filter - A string that represents the series or category name, an object with the series and category name, or a function which will be called for each point. The function should return `true` for the points for which the highlight is toggled.
*/
toggleHighlight(show: boolean, filter: string | {
category: string;
series: string;
} | {
(point: SeriesPoint): boolean;
}): void;
/**
* Hides the tooltip of the Chart.
*/
hideTooltip(): void;
/**
* Shows the Chart tooltip of a specific point or the shared tooltip of a specific category.
*
* @param filter - The category for a shared tooltip or a function which will be called for each point until the function returns `true`.
*/
showTooltip(filter: number | string | Date | {
(point: SeriesPoint): boolean;
}): void;
protected init(): void;
/**
* Detects the size of the container and redraws the Chart.
* Resizing is automatic unless you set the `resizeRateLimit` option to `0`.
*/
resize(): void;
/**
* @hidden
*/
onResize(): void;
/**
* Reloads the Chart appearance settings from the current [Kendo UI Theme]({% slug themesandstyles %}).
*
* Call this method after loading a different theme stylesheet.
*/
reloadTheme(): void;
protected onLegendItemClick(e: any): void;
protected onInit(e: any): void;
protected onRender(e: any): void;
protected onShowTooltip(e: any): void;
protected onHideTooltip(e: any): void;
protected trigger(name: string, e: any): boolean;
protected requiresHandlers(names: string[]): boolean;
protected refresh(): void;
protected setChartAreaSize(): void;
protected updateOptions(): void;
/**
* @hidden
*/
tooltipMouseleave(e: any): void;
/**
* @hidden
*/
chartMouseleave(e: any): void;
protected get canRender(): boolean;
protected get autoResize(): boolean;
protected activeEmitter(name: string): any;
protected getDonutCenterStyle(): any;
protected refreshWait(): void;
protected run(callback: any, inZone?: boolean, detectChanges?: boolean): void;
protected detectChanges(): void;
protected intlChange(): void;
protected rtlChange(): void;
protected deferredRedraw(): void;
protected updateDirection(): void;
protected setDirection(): void;
protected get isRTL(): boolean;
static ɵfac: i0.ɵɵFactoryDeclaration<ChartComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<ChartComponent, "kendo-chart", ["kendoChart"], { "pannable": { "alias": "pannable"; "required": false; }; "renderAs": { "alias": "renderAs"; "required": false; }; "seriesColors": { "alias": "seriesColors"; "required": false; }; "subtitle": { "alias": "subtitle"; "required": false; }; "title": { "alias": "title"; "required": false; }; "noData": { "alias": "noData"; "required": false; }; "transitions": { "alias": "transitions"; "required": false; }; "zoomable": { "alias": "zoomable"; "required": false; }; "axisDefaults": { "alias": "axisDefaults"; "required": false; }; "categoryAxis": { "alias": "categoryAxis"; "required": false; }; "chartArea": { "alias": "chartArea"; "required": false; }; "legend": { "alias": "legend"; "required": false; }; "panes": { "alias": "panes"; "required": false; }; "paneDefaults": { "alias": "paneDefaults"; "required": false; }; "plotArea": { "alias": "plotArea"; "required": false; }; "series": { "alias": "series"; "required": false; }; "seriesDefaults": { "alias": "seriesDefaults"; "required": false; }; "tooltip": { "alias": "tooltip"; "required": false; }; "valueAxis": { "alias": "valueAxis"; "required": false; }; "xAxis": { "alias": "xAxis"; "required": false; }; "yAxis": { "alias": "yAxis"; "required": false; }; "resizeRateLimit": { "alias": "resizeRateLimit"; "required": false; }; "popupSettings": { "alias": "popupSettings"; "required": false; }; "drilldownLevel": { "alias": "drilldownLevel"; "required": false; }; }, { "axisLabelClick": "axisLabelClick"; "drag": "drag"; "dragEnd": "dragEnd"; "dragStart": "dragStart"; "legendItemHover": "legendItemHover"; "legendItemLeave": "legendItemLeave"; "noteClick": "noteClick"; "noteHover": "noteHover"; "noteLeave": "noteLeave"; "paneRender": "paneRender"; "plotAreaClick": "plotAreaClick"; "plotAreaHover": "plotAreaHover"; "plotAreaLeave": "plotAreaLeave"; "render": "render"; "select": "select"; "selectEnd": "selectEnd"; "selectStart": "selectStart"; "seriesClick": "seriesClick"; "drilldown": "drilldown"; "seriesHover": "seriesHover"; "seriesOver": "seriesOver"; "seriesLeave": "seriesLeave"; "zoom": "zoom"; "zoomEnd": "zoomEnd"; "zoomStart": "zoomStart"; "legendItemClick": "legendItemClick"; "drilldownLevelChange": "drilldownLevelChange"; }, ["donutCenterTemplate", "noDataTemplate", "seriesCollectionComponent", "seriesComponents"], never, true, never>;
}