@progress/kendo-angular-charts 6.0.1 → 7.0.0-dev.202204191039

package/esm2015/chart.component.js

@@ -0,0 +1,853 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { ChangeDetectionStrategy, Component, ContentChild } from '@angular/core';
+import { ContentChildren, ViewChild } from '@angular/core';
+import { EventEmitter, Input, Output } from '@angular/core';
+import { isDocumentAvailable } from '@progress/kendo-angular-common';
+import { L10N_PREFIX, LocalizationService } from '@progress/kendo-angular-l10n';
+import { Chart } from '@progress/kendo-charts';
+import { exportImage, exportSVG } from '@progress/kendo-drawing';
+import { validatePackage } from '@progress/kendo-licensing';
+import { combineLatest } from 'rxjs';
+import { auditTime, tap } from 'rxjs/operators';
+import './chart-defaults';
+import { DonutCenterTemplateDirective } from './chart/donut-center-template.directive';
+import { SeriesItemComponent } from './chart/series-item.component';
+import { CrosshairTooltipsContainerComponent } from './chart/tooltip/crosshair-tooltips-container.component';
+import { TooltipPopupComponent } from './chart/tooltip/tooltip-popup.component';
+import { ChartInstanceObserver } from './common/chart-instance-observer';
+import { ConfigurationService, THROTTLE_MS } from './common/configuration.service';
+import { copyChanges } from './common/copy-changes';
+import { hasParent } from './common/has-parent';
+import { toSimpleChanges } from './common/to-simple-changes';
+import { TooltipTemplateService } from './common/tooltip-template.service';
+import { InstanceEventService } from './events/instance-event.service';
+import { LegendItemClickEvent } from './events/legend-item-click-event';
+import { RenderEvent } from './events/render-event';
+import { packageMetadata } from './package-metadata';
+import * as i0 from "@angular/core";
+import * as i1 from "./common/configuration.service";
+import * as i2 from "./common/theme.service";
+import * as i3 from "@progress/kendo-angular-intl";
+import * as i4 from "@progress/kendo-angular-l10n";
+import * as i5 from "./events/instance-event.service";
+import * as i6 from "./chart/tooltip/crosshair-tooltips-container.component";
+import * as i7 from "./chart/tooltip/tooltip-popup.component";
+import * as i8 from "@progress/kendo-angular-common";
+import * as i9 from "@angular/common";
+function hasObservers(emitter) {
+    return emitter.observers.length > 0;
+}
+/**
+ * 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 class ChartComponent {
+    constructor(configurationService, themeService, element, intl, localizationService, ngZone, instanceEventService, changeDetector, renderer) {
+        this.configurationService = configurationService;
+        this.themeService = themeService;
+        this.element = element;
+        this.intl = intl;
+        this.localizationService = localizationService;
+        this.ngZone = ngZone;
+        this.instanceEventService = instanceEventService;
+        this.changeDetector = changeDetector;
+        this.renderer = renderer;
+        /**
+         * Fires when the user clicks an axis label ([see example]({% slug overview_chart_charts %}#toc-events)).
+         */
+        this.axisLabelClick = new EventEmitter();
+        /**
+         * Fires as long as the user is dragging the Chart with the mouse or through swipe gestures.
+         */
+        this.drag = new EventEmitter();
+        /**
+         * Fires when the user stops dragging the Chart.
+         */
+        this.dragEnd = new EventEmitter();
+        /**
+         * Fires when the user starts dragging the Chart.
+         */
+        this.dragStart = new EventEmitter();
+        /**
+         * Fires when the user hovers over a legend item ([see example]({% slug overview_chart_charts %}#toc-events)).
+         */
+        this.legendItemHover = new EventEmitter();
+        /**
+         * Fires when the cursor leaves a legend item.
+         */
+        this.legendItemLeave = new EventEmitter();
+        /**
+         * Fires when the user clicks a note.
+         */
+        this.noteClick = new EventEmitter();
+        /**
+         * Fires when the user hovers over a note.
+         */
+        this.noteHover = new EventEmitter();
+        /**
+         * Fires when the cursor leaves a note.
+         */
+        this.noteLeave = new EventEmitter();
+        /**
+         * Fires when a pane is rendered because the Chart:
+         * * Is rendered.
+         * * Performs panning or zooming.
+         * * Is exported with different options.
+         * The event is used to render custom visuals in the panes.
+         */
+        this.paneRender = new EventEmitter();
+        /**
+         * Fires when the user clicks the plot area ([see example]({% slug overview_chart_charts %}#toc-events)).
+         * The `click` event is triggered by the `tap` and `contextmenu` events.
+         * To distinguish between the original events, inspect the `e.originalEvent.type` field.
+         */
+        this.plotAreaClick = new EventEmitter();
+        /**
+         * Fires when the user hovers the plot area ([see example]({% slug overview_chart_charts %}#toc-events)).
+         */
+        this.plotAreaHover = new EventEmitter();
+        /**
+         * Fires when the cursor leaves the plot area.
+         */
+        this.plotAreaLeave = new EventEmitter();
+        /**
+         * Fires when the Chart is ready to render on screen ([see example]({% slug overview_chart_charts %}#toc-events)).
+         * For example, you can use it to remove loading indicators.
+         * Any changes made to the options are ignored.
+         */
+        this.render = new EventEmitter();
+        /**
+         * Fires when the user modifies the selection.
+         *
+         * The range units are:
+         * - Generic axis&mdash;Category index (0-based).
+         * - Date axis&mdash;Date instance.
+         */
+        this.select = new EventEmitter();
+        /**
+         * Fires when the user completes the modification of the selection.
+         *
+         * The range units are:
+         * - Generic axis&mdash;Category index (0-based).
+         * - Date axis&mdash;Date instance.
+         */
+        this.selectEnd = new EventEmitter();
+        /**
+         * Fires when the user starts modifying the axis selection.
+         *
+         * The range units are:
+         * - Generic axis&mdash;Category index (0-based).
+         * - Date axis&mdash;Date instance.
+         */
+        this.selectStart = new EventEmitter();
+        /**
+         * Fires when the user clicks the Chart series.
+         *
+         * The `click` event will be triggered by the `tap` and `contextmenu` events ([see example]({% slug overview_chart_charts %}#toc-events)).
+         * To distinguish between the original events, inspect the `e.originalEvent.type` field.
+         */
+        this.seriesClick = new EventEmitter();
+        /**
+         * Fires when the user hovers the Chart series ([see example]({% slug overview_chart_charts %}#toc-events)).
+         */
+        this.seriesHover = new EventEmitter();
+        /**
+         * Fires when the cursor enters a series.
+         */
+        this.seriesOver = new EventEmitter();
+        /**
+         * Fires when the cursor leaves a series.
+         */
+        this.seriesLeave = new EventEmitter();
+        /**
+         * Fires as long as the user is zooming the Chart by using the mousewheel operation.
+         */
+        this.zoom = new EventEmitter();
+        /**
+         * Fires when the user stops zooming the Chart.
+         */
+        this.zoomEnd = new EventEmitter();
+        /**
+         * Fires when the user uses the mousewheel to zoom the Chart.
+         */
+        this.zoomStart = new EventEmitter();
+        /**
+         * Fires when a legend item is clicked before the selected series visibility is toggled.
+         * Can be prevented.
+         */
+        this.legendItemClick = new EventEmitter();
+        /**
+         * 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`.
+         *
+         * @example
+         * ```ts
+         * _@Component({
+         *     selector: 'my-app',
+         *     template: `
+         *         <kendo-chart [resizeRateLimit]="2">
+         * <!--                 ^^^^^^^^^^^^^^^^^^^^^^
+         *       Will update the size of the Chart up to two times a second.
+         *       Resize the Plunkr pane or window to try it out.
+         * -->
+         *          <kendo-chart-series>
+         *            <kendo-chart-series-item [data]="seriesData">
+         *           </kendo-chart-series-item>
+         *         </kendo-chart-series>
+         *       </kendo-chart>
+         *   `
+         * })
+         * export class AppComponent {
+         *    seriesData: number[] = [1, 2, 3, 5];
+         * }
+         * ```
+         */
+        this.resizeRateLimit = 10;
+        this.theme = null;
+        this.suppressTransitions = false;
+        this.rtl = false;
+        this.hostClasses = ['k-chart', 'k-widget'];
+        validatePackage(packageMetadata);
+        this.themeService.loadTheme();
+        this.refreshWait();
+    }
+    ngOnInit() {
+        if (this.element) {
+            this.hostClasses.forEach(name => {
+                this.renderer.addClass(this.element.nativeElement, name);
+            });
+            this.renderer.setStyle(this.element.nativeElement, 'position', 'relative');
+        }
+    }
+    ngAfterViewInit() {
+        if (this.canRender) {
+            this.ngZone.runOutsideAngular(() => {
+                const chartMouseleave = this.renderer.listen(this.surfaceElement.nativeElement, 'mouseleave', this.chartMouseleave.bind(this));
+                this.domSubscriptions = () => {
+                    chartMouseleave();
+                };
+            });
+        }
+        this.setDirection();
+        this.subscriptions = this.intl.changes.subscribe(this.intlChange.bind(this));
+        this.subscriptions.add(this.localizationService.changes.subscribe(this.rtlChange.bind(this)));
+    }
+    ngAfterViewChecked() {
+        if (this.instance && this.autoResize) {
+            this.ngZone.runOutsideAngular(() => {
+                clearTimeout(this.resizeTimeout);
+                this.resizeTimeout = setTimeout(() => {
+                    this.resize();
+                }, 0);
+            });
+        }
+    }
+    ngOnChanges(changes) {
+        const store = this.configurationService.store;
+        copyChanges(changes, store);
+        store.popupSettings = null;
+        this.configurationService.push(store);
+    }
+    /**
+     * 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) {
+        this.ngOnChanges(toSimpleChanges(changes));
+    }
+    ngOnDestroy() {
+        this.destroyed = true;
+        if (this.subscription) {
+            this.subscription.unsubscribe();
+        }
+        if (this.domSubscriptions) {
+            this.domSubscriptions();
+            this.domSubscriptions = null;
+        }
+        if (this.instance) {
+            this.instance.destroy();
+            this.instance = null;
+        }
+        if (this.subscriptions) {
+            this.subscriptions.unsubscribe();
+        }
+        clearTimeout(this.resizeTimeout);
+        clearTimeout(this.redrawTimeout);
+    }
+    createInstance(element, observer) {
+        this.instance = new Chart(element, this.options, this.theme, {
+            intlService: this.intl,
+            observer: observer,
+            rtl: this.rtl,
+            sender: this
+        });
+    }
+    /**
+     * 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 = {}) {
+        return exportImage(this.exportVisual(options), options);
+    }
+    /**
+     * 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 = {}) {
+        return exportSVG(this.exportVisual(options), options);
+    }
+    /**
+     * Exports the Chart as a Drawing `Scene`.
+     *
+     * @param options - The parameters for the export operation.
+     * @returns - The root Group of the scene.
+     */
+    exportVisual(options = {}) {
+        return this.instance.exportVisual(options);
+    }
+    /**
+     * Returns the axis with the specified name.
+     *
+     * @param {string} name - The axis name.
+     * @returns {ChartAxis} - The axis with a corresponding name.
+     */
+    findAxisByName(name) {
+        if (this.instance) {
+            return this.instance.findAxisByName(name);
+        }
+    }
+    /**
+     * Returns the pane at the specified index.
+     *
+     * @param {number} index - The pane index.
+     * @returns {ChartPane} - The pane at the specified index.
+     */
+    findPaneByIndex(index) {
+        if (this.instance) {
+            return this.instance.findPaneByIndex(index);
+        }
+    }
+    /**
+     * 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) {
+        if (this.instance) {
+            return this.instance.findPaneByName(name);
+        }
+    }
+    /**
+     * Returns the plot area of the Chart.
+     * @returns {ChartPlotArea} - The plot area of the Chart.
+     */
+    getPlotArea() {
+        if (this.instance) {
+            return this.instance.plotArea();
+        }
+    }
+    /**
+     * Highlights the series points or the segments of a Pie, Donut, or Funnel charts.
+     *
+     * See [Series Highlight]({% slug serieshighlight_chart_charts %}) for more details.
+     *
+     * In the following example, the callback is evaluated for each data point.
+     * If the function returns `true`, the point is highlighted.
+     *
+     * {% meta height:500 %}
+     * {% embed_file elements/highlight/api/app.component.ts preview %}
+     * {% embed_file shared/app.module.ts hidden %}
+     * {% embed_file shared/main.ts hidden %}
+     * {% endmeta %}
+     *
+     * @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, filter) {
+        if (this.instance) {
+            this.instance.toggleHighlight(show, filter);
+        }
+    }
+    /**
+     * Hides the tooltip of the Chart.
+     */
+    hideTooltip() {
+        if (this.instance) {
+            this.instance.hideTooltip();
+        }
+    }
+    /**
+     * 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) {
+        if (this.instance) {
+            this.instance.showTooltip(filter);
+        }
+    }
+    init() {
+        if (!this.canRender) {
+            return;
+        }
+        const element = this.surfaceElement.nativeElement;
+        const instanceObserver = new ChartInstanceObserver(this);
+        this.createInstance(element, instanceObserver);
+    }
+    /**
+     * Detects the size of the container and redraws the Chart.
+     * Resizing is automatic unless you set the `resizeRateLimit` option to `0`.
+     */
+    resize() {
+        if (this.instance) {
+            this.instance.resize();
+        }
+    }
+    /**
+     * @hidden
+     */
+    onResize(_event) {
+        if (this.autoResize) {
+            this.resize();
+        }
+    }
+    onLegendItemClick(e) {
+        this.run(() => {
+            const args = new LegendItemClickEvent(e, this);
+            this.legendItemClick.emit(args);
+            if (!args.isDefaultPrevented()) {
+                const series = this.seriesComponents.toArray()[e.series.index];
+                if (!series) {
+                    return;
+                }
+                if (e.pointIndex === undefined) {
+                    series.toggleVisibility();
+                }
+                else {
+                    series.togglePointVisibility(e.pointIndex);
+                }
+                this.suppressTransitions = true;
+            }
+        }, hasObservers(this.legendItemClick), this.seriesComponents.length > 0);
+    }
+    onInit(e) {
+        this.instance = e.sender;
+    }
+    onRender(e) {
+        const donutCenterStyle = this.getDonutCenterStyle();
+        this.run(() => {
+            const args = new RenderEvent(e, this);
+            this.surface = e.sender.surface;
+            this.render.emit(args);
+            this.donutCenterStyle = donutCenterStyle;
+        }, hasObservers(this.render), this.donutCenterStyle !== donutCenterStyle);
+    }
+    onShowTooltip(e) {
+        this.run(() => {
+            if (!e.crosshair) {
+                this.tooltipInstance.show(e);
+            }
+            else {
+                this.crossahirTooltips.show(e);
+            }
+        }, !e.crosshair, true);
+    }
+    onHideTooltip(e) {
+        if (!e.crosshair) {
+            if (this.tooltipInstance.active) {
+                this.tooltipInstance.hide();
+                this.detectChanges();
+            }
+        }
+        else if (this.crossahirTooltips.active) {
+            this.crossahirTooltips.hide();
+            this.detectChanges();
+        }
+    }
+    trigger(name, e) {
+        if (name === 'resize') {
+            return;
+        }
+        const emitter = this.activeEmitter(name);
+        if (emitter) {
+            const args = this.instanceEventService.create(name, e, this);
+            this.run(() => {
+                emitter.emit(args);
+            });
+            return args.isDefaultPrevented && args.isDefaultPrevented();
+        }
+    }
+    requiresHandlers(names) {
+        for (let idx = 0; idx < names.length; idx++) {
+            if (this.activeEmitter(names[idx])) {
+                return true;
+            }
+        }
+        return false;
+    }
+    refresh() {
+        clearTimeout(this.redrawTimeout);
+        this.updateDirection();
+        this.crossahirTooltips.createCrosshairTooltips(this.options);
+        this.setChartAreaSize();
+        if (!this.instance) {
+            this.init();
+            return;
+        }
+        const transitions = this.options.transitions;
+        if (this.suppressTransitions) {
+            this.options.transitions = false;
+        }
+        this.updateOptions();
+        if (this.suppressTransitions) {
+            this.options.transitions = transitions;
+            this.suppressTransitions = false;
+        }
+    }
+    setChartAreaSize() {
+        if (!this.element) {
+            return;
+        }
+        const element = this.element.nativeElement;
+        const chartArea = this.options.chartArea || {};
+        if (chartArea.width) {
+            element.style.width = `${chartArea.width}px`;
+        }
+        if (chartArea.height) {
+            element.style.height = `${chartArea.height}px`;
+        }
+    }
+    updateOptions() {
+        this.instance.setOptions(this.options);
+    }
+    /**
+     * @hidden
+     */
+    tooltipMouseleave(e) {
+        const relatedTarget = e.relatedTarget;
+        const chartElement = this.element.nativeElement;
+        if (this.instance && (!relatedTarget || !hasParent(relatedTarget, chartElement))) {
+            this.instance.hideElements();
+        }
+    }
+    /**
+     * @hidden
+     */
+    chartMouseleave(e) {
+        const relatedTarget = e.relatedTarget;
+        const chartElement = this.element.nativeElement;
+        if (this.instance && (!relatedTarget || !(this.tooltipInstance.containsElement(relatedTarget) || hasParent(relatedTarget, chartElement))) &&
+            !this.instance.handlingTap) {
+            this.instance.hideElements();
+        }
+    }
+    get canRender() {
+        return isDocumentAvailable() && Boolean(this.surfaceElement);
+    }
+    get autoResize() {
+        return this.resizeRateLimit > 0;
+    }
+    activeEmitter(name) {
+        const emitter = this[name];
+        if (emitter && emitter.emit && hasObservers(emitter)) {
+            return emitter;
+        }
+    }
+    getDonutCenterStyle() {
+        if (!this.instance || !this.options || !this.options.series) {
+            return;
+        }
+        const firstSeries = this.options.series[0];
+        const charts = this.instance._plotArea.charts;
+        if (!firstSeries || firstSeries.type !== 'donut' || !charts || charts[0].points.length === 0) {
+            return;
+        }
+        const firstPoint = charts[0].points[0];
+        const center = firstPoint.box.center();
+        const radius = firstPoint.sector.innerRadius;
+        const top = center.y - radius;
+        const left = center.x - radius;
+        const size = radius * 2;
+        return {
+            height: size + 'px',
+            left: left + 'px',
+            top: top + 'px',
+            width: size + 'px'
+        };
+    }
+    refreshWait() {
+        this.ngZone.runOutsideAngular(() => {
+            this.subscription = combineLatest(this.configurationService.onChange$, this.themeService.onChange$).pipe(tap((result) => {
+                this.options = result[0];
+                this.theme = result[1];
+            }), auditTime(THROTTLE_MS))
+                .subscribe(() => {
+                this.refresh();
+            });
+        });
+    }
+    run(callback, inZone = true, detectChanges) {
+        if (inZone) {
+            if (detectChanges) {
+                this.changeDetector.markForCheck();
+            }
+            this.ngZone.run(callback);
+        }
+        else {
+            callback();
+            if (detectChanges) {
+                this.detectChanges();
+            }
+        }
+    }
+    detectChanges() {
+        if (!this.destroyed) {
+            this.changeDetector.detectChanges();
+        }
+    }
+    intlChange() {
+        if (this.instance) {
+            this.deferredRedraw();
+        }
+    }
+    rtlChange() {
+        if (this.instance && this.rtl !== this.isRTL) {
+            this.deferredRedraw();
+        }
+    }
+    deferredRedraw() {
+        this.ngZone.runOutsideAngular(() => {
+            clearTimeout(this.redrawTimeout);
+            this.redrawTimeout = setTimeout(() => {
+                this.updateDirection();
+                this.instance.noTransitionsRedraw();
+            }, 0);
+        });
+    }
+    updateDirection() {
+        const current = this.isRTL;
+        if (this.rtl !== current) {
+            this.setDirection();
+            if (this.instance) {
+                this.instance.setDirection(current);
+            }
+        }
+    }
+    setDirection() {
+        this.rtl = this.isRTL;
+        if (this.element) {
+            this.renderer.setAttribute(this.element.nativeElement, 'dir', this.rtl ? 'rtl' : 'ltr');
+        }
+    }
+    get isRTL() {
+        return Boolean(this.localizationService.rtl);
+    }
+}
+ChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ChartComponent, deps: [{ token: i1.ConfigurationService }, { token: i2.ThemeService }, { token: i0.ElementRef }, { token: i3.IntlService }, { token: i4.LocalizationService }, { token: i0.NgZone }, { token: i5.InstanceEventService }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+ChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ChartComponent, selector: "kendo-chart", inputs: { pannable: "pannable", renderAs: "renderAs", seriesColors: "seriesColors", title: "title", transitions: "transitions", zoomable: "zoomable", axisDefaults: "axisDefaults", categoryAxis: "categoryAxis", chartArea: "chartArea", legend: "legend", panes: "panes", paneDefaults: "paneDefaults", plotArea: "plotArea", series: "series", seriesDefaults: "seriesDefaults", tooltip: "tooltip", valueAxis: "valueAxis", xAxis: "xAxis", yAxis: "yAxis", resizeRateLimit: "resizeRateLimit", popupSettings: "popupSettings" }, outputs: { 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", seriesHover: "seriesHover", seriesOver: "seriesOver", seriesLeave: "seriesLeave", zoom: "zoom", zoomEnd: "zoomEnd", zoomStart: "zoomStart", legendItemClick: "legendItemClick" }, providers: [
+        ConfigurationService,
+        TooltipTemplateService,
+        InstanceEventService,
+        LocalizationService,
+        {
+            provide: L10N_PREFIX,
+            useValue: 'kendo.chart'
+        }
+    ], queries: [{ propertyName: "donutCenterTemplate", first: true, predicate: DonutCenterTemplateDirective, descendants: true }, { propertyName: "seriesComponents", predicate: SeriesItemComponent, descendants: true }], viewQueries: [{ propertyName: "tooltipInstance", first: true, predicate: TooltipPopupComponent, descendants: true, static: true }, { propertyName: "crossahirTooltips", first: true, predicate: CrosshairTooltipsContainerComponent, descendants: true, static: true }, { propertyName: "surfaceElement", first: true, predicate: ["surface"], descendants: true, static: true }], exportAs: ["kendoChart"], usesOnChanges: true, ngImport: i0, template: `
+    <div #surface class="k-chart-surface"></div>
+    <kendo-chart-crosshair-tooltips-container [popupSettings]="popupSettings">
+    </kendo-chart-crosshair-tooltips-container>
+    <kendo-chart-tooltip-popup (leave)="tooltipMouseleave($event)" [popupSettings]="popupSettings">
+    </kendo-chart-tooltip-popup>
+    <kendo-resize-sensor (resize)="onResize($event)" [rateLimit]="resizeRateLimit"></kendo-resize-sensor>
+    <div class="k-chart-donut-center" [ngStyle]="donutCenterStyle" *ngIf="donutCenterStyle && donutCenterTemplate">
+      <ng-template [ngTemplateOutlet]="donutCenterTemplate.templateRef"></ng-template>
+    </div>
+  `, isInline: true, components: [{ type: i6.CrosshairTooltipsContainerComponent, selector: "kendo-chart-crosshair-tooltips-container", inputs: ["popupSettings"] }, { type: i7.TooltipPopupComponent, selector: "kendo-chart-tooltip-popup", inputs: ["animate", "classNames", "popupSettings", "wrapperClass"], outputs: ["leave"] }, { type: i8.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i9.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ChartComponent, decorators: [{
+            type: Component,
+            args: [{
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    exportAs: 'kendoChart',
+                    providers: [
+                        ConfigurationService,
+                        TooltipTemplateService,
+                        InstanceEventService,
+                        LocalizationService,
+                        {
+                            provide: L10N_PREFIX,
+                            useValue: 'kendo.chart'
+                        }
+                    ],
+                    selector: 'kendo-chart',
+                    template: `
+    <div #surface class="k-chart-surface"></div>
+    <kendo-chart-crosshair-tooltips-container [popupSettings]="popupSettings">
+    </kendo-chart-crosshair-tooltips-container>
+    <kendo-chart-tooltip-popup (leave)="tooltipMouseleave($event)" [popupSettings]="popupSettings">
+    </kendo-chart-tooltip-popup>
+    <kendo-resize-sensor (resize)="onResize($event)" [rateLimit]="resizeRateLimit"></kendo-resize-sensor>
+    <div class="k-chart-donut-center" [ngStyle]="donutCenterStyle" *ngIf="donutCenterStyle && donutCenterTemplate">
+      <ng-template [ngTemplateOutlet]="donutCenterTemplate.templateRef"></ng-template>
+    </div>
+  `
+                }]
+        }], ctorParameters: function () { return [{ type: i1.ConfigurationService }, { type: i2.ThemeService }, { type: i0.ElementRef }, { type: i3.IntlService }, { type: i4.LocalizationService }, { type: i0.NgZone }, { type: i5.InstanceEventService }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }]; }, propDecorators: { pannable: [{
+                type: Input
+            }], renderAs: [{
+                type: Input
+            }], seriesColors: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], transitions: [{
+                type: Input
+            }], zoomable: [{
+                type: Input
+            }], axisDefaults: [{
+                type: Input
+            }], categoryAxis: [{
+                type: Input
+            }], chartArea: [{
+                type: Input
+            }], legend: [{
+                type: Input
+            }], panes: [{
+                type: Input
+            }], paneDefaults: [{
+                type: Input
+            }], plotArea: [{
+                type: Input
+            }], series: [{
+                type: Input
+            }], seriesDefaults: [{
+                type: Input
+            }], tooltip: [{
+                type: Input
+            }], valueAxis: [{
+                type: Input
+            }], xAxis: [{
+                type: Input
+            }], yAxis: [{
+                type: Input
+            }], axisLabelClick: [{
+                type: Output
+            }], drag: [{
+                type: Output
+            }], dragEnd: [{
+                type: Output
+            }], dragStart: [{
+                type: Output
+            }], legendItemHover: [{
+                type: Output
+            }], legendItemLeave: [{
+                type: Output
+            }], noteClick: [{
+                type: Output
+            }], noteHover: [{
+                type: Output
+            }], noteLeave: [{
+                type: Output
+            }], paneRender: [{
+                type: Output
+            }], plotAreaClick: [{
+                type: Output
+            }], plotAreaHover: [{
+                type: Output
+            }], plotAreaLeave: [{
+                type: Output
+            }], render: [{
+                type: Output
+            }], select: [{
+                type: Output
+            }], selectEnd: [{
+                type: Output
+            }], selectStart: [{
+                type: Output
+            }], seriesClick: [{
+                type: Output
+            }], seriesHover: [{
+                type: Output
+            }], seriesOver: [{
+                type: Output
+            }], seriesLeave: [{
+                type: Output
+            }], zoom: [{
+                type: Output
+            }], zoomEnd: [{
+                type: Output
+            }], zoomStart: [{
+                type: Output
+            }], legendItemClick: [{
+                type: Output
+            }], resizeRateLimit: [{
+                type: Input
+            }], popupSettings: [{
+                type: Input
+            }], seriesComponents: [{
+                type: ContentChildren,
+                args: [SeriesItemComponent, { descendants: true }]
+            }], donutCenterTemplate: [{
+                type: ContentChild,
+                args: [DonutCenterTemplateDirective, { static: false }]
+            }], tooltipInstance: [{
+                type: ViewChild,
+                args: [TooltipPopupComponent, { static: true }]
+            }], crossahirTooltips: [{
+                type: ViewChild,
+                args: [CrosshairTooltipsContainerComponent, { static: true }]
+            }], surfaceElement: [{
+                type: ViewChild,
+                args: ['surface', { static: true }]
+            }] } });