@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.
218 lines (215 loc) • 10.6 kB
JavaScript
/**-----------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the project root for more information
*-------------------------------------------------------------------------------------------*/
import { Input, Component, NgZone, ElementRef, Output, EventEmitter, ChangeDetectorRef, ChangeDetectionStrategy, Renderer2 } from '@angular/core';
import { isDevMode } from '@angular/core';
import { ConfigurationService } from './common/configuration.service';
import { RootConfigurationService } from './common/root-configuration.service';
import { TooltipTemplateService } from './common/tooltip-template.service';
import { ChartComponent } from './chart.component';
import { ThemeService } from './common/theme.service';
import { IntlService } from '@progress/kendo-angular-intl';
import { StockInstanceEventService } from './stock-chart/events/instance-event.service';
import { StockChart } from '@progress/kendo-charts';
import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
import { validatePackage } from '@progress/kendo-licensing';
import { ResizeSensorComponent, WatermarkOverlayComponent, shouldShowValidationUI } from '@progress/kendo-angular-common';
import { packageMetadata } from './package-metadata';
import { NgIf } from '@angular/common';
import { TooltipPopupComponent } from './chart/tooltip/tooltip-popup.component';
import { CrosshairTooltipsContainerComponent } from './chart/tooltip/crosshair-tooltips-container.component';
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 "./stock-chart/events/instance-event.service";
const NAVIGATOR_DEFAULTS = {
autoBindElements: true,
liveDrag: false,
partialRedraw: true
};
/**
* The root StockChart component.
*
* @example
* ```html
* <kendo-stockchart>
* <kendo-chart-series>
* <kendo-chart-series-item type="line" [data]="data" field="value" categoryField="date">
* </kendo-chart-series-item>
* </kendo-chart-series>
* <kendo-chart-navigator>
* <kendo-chart-navigator-select to="2017/02/01">
* </kendo-chart-navigator-select>
* <kendo-chart-navigator-series>
* <kendo-chart-navigator-series-item type="area" [data]="data" field="value" categoryField="date">
* </kendo-chart-navigator-series-item>
* </kendo-chart-navigator-series>
* </kendo-chart-navigator>
* </kendo-stockchart>
* ```
*/
export class StockChartComponent extends ChartComponent {
configurationService;
themeService;
element;
intl;
localizationService;
ngZone;
instanceEventService;
changeDetector;
renderer;
/**
* The configuration options for the data navigator.
*/
navigator;
/**
* @hidden
*/
pannable;
/**
* @hidden
*/
zoomable;
/**
* @hidden
*/
drilldown = new EventEmitter();
/**
* @hidden
*/
drilldownLevelChange = new EventEmitter();
/**
* @hidden
*/
get drilldownLevel() {
return this.drilldownState.length;
}
/**
* Fires when the navigator range is changed.
*/
navigatorFilter = new EventEmitter();
/**
* @hidden
*/
showLicenseWatermark = false;
redrawSlaves = false;
hostClasses = ['k-chart', 'k-stockchart'];
constructor(configurationService, themeService, element, intl, localizationService, ngZone, instanceEventService, changeDetector, renderer) {
super(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;
const isValid = validatePackage(packageMetadata);
this.showLicenseWatermark = shouldShowValidationUI(isValid);
}
/**
* If called, the navigator pane is not redrawn the next time the StockChart options are updated.
* The method is useful if you need to update only the main series data for the selected period.
*/
skipNavigatorRedraw() {
this.redrawSlaves = true;
}
createInstance(element, observer) {
this.applyNavigatorDefaults();
if (this.isDevMode() && (this.options.zoomable || this.options.pannable)) {
throw new Error('The pannable and zoomable options are not supported by the StockChart component.');
}
this.instance = new StockChart(element, this.options, this.theme, {
intlService: this.intl,
observer: observer,
rtl: this.rtl,
sender: this
});
}
updateOptions() {
this.applyNavigatorDefaults();
if (this.redrawSlaves) {
this.instance.applyOptions(this.options);
this.instance.bindCategories();
this.instance.navigator.redrawSlaves();
}
else {
this.instance.setOptions(this.options);
}
this.redrawSlaves = false;
}
applyNavigatorDefaults() {
this.options.navigator = Object.assign({}, this.options.navigator, NAVIGATOR_DEFAULTS);
}
isDevMode() {
return isDevMode();
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: StockChartComponent, deps: [{ token: i1.ConfigurationService }, { token: i2.ThemeService }, { token: i0.ElementRef }, { token: i3.IntlService }, { token: i4.LocalizationService }, { token: i0.NgZone }, { token: i5.StockInstanceEventService }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: StockChartComponent, isStandalone: true, selector: "kendo-stockchart", inputs: { navigator: "navigator", pannable: "pannable", zoomable: "zoomable", drilldownLevel: "drilldownLevel" }, outputs: { drilldown: "drilldown", drilldownLevelChange: "drilldownLevelChange", navigatorFilter: "navigatorFilter" }, providers: [
ConfigurationService,
TooltipTemplateService,
{ provide: RootConfigurationService, useExisting: ConfigurationService },
StockInstanceEventService,
LocalizationService,
{
provide: L10N_PREFIX,
useValue: 'kendo.chart'
}
], exportAs: ["kendoStockChart"], usesInheritance: 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()"></kendo-resize-sensor>
<div kendoWatermarkOverlay *ngIf="showLicenseWatermark"></div>
`, isInline: true, dependencies: [{ kind: "component", type: CrosshairTooltipsContainerComponent, selector: "kendo-chart-crosshair-tooltips-container", inputs: ["popupSettings"] }, { kind: "component", type: TooltipPopupComponent, selector: "kendo-chart-tooltip-popup", inputs: ["animate", "classNames", "wrapperClass"], outputs: ["leave"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: StockChartComponent, decorators: [{
type: Component,
args: [{
changeDetection: ChangeDetectionStrategy.OnPush,
exportAs: 'kendoStockChart',
providers: [
ConfigurationService,
TooltipTemplateService,
{ provide: RootConfigurationService, useExisting: ConfigurationService },
StockInstanceEventService,
LocalizationService,
{
provide: L10N_PREFIX,
useValue: 'kendo.chart'
}
],
selector: 'kendo-stockchart',
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()"></kendo-resize-sensor>
<div kendoWatermarkOverlay *ngIf="showLicenseWatermark"></div>
`,
standalone: true,
imports: [CrosshairTooltipsContainerComponent, TooltipPopupComponent, ResizeSensorComponent, NgIf, WatermarkOverlayComponent]
}]
}], ctorParameters: function () { return [{ type: i1.ConfigurationService }, { type: i2.ThemeService }, { type: i0.ElementRef }, { type: i3.IntlService }, { type: i4.LocalizationService }, { type: i0.NgZone }, { type: i5.StockInstanceEventService }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }]; }, propDecorators: { navigator: [{
type: Input
}], pannable: [{
type: Input
}], zoomable: [{
type: Input
}], drilldown: [{
type: Output
}], drilldownLevelChange: [{
type: Output
}], drilldownLevel: [{
type: Input
}], navigatorFilter: [{
type: Output
}] } });