@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.
98 lines (97 loc) • 4.49 kB
JavaScript
/**-----------------------------------------------------------------------------------------
* Copyright © 2024 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the project root for more information
*-------------------------------------------------------------------------------------------*/
import { Component, Input, ViewChild, isDevMode } from '@angular/core';
import { BreadCrumbComponent } from '@progress/kendo-angular-navigation';
import { ChartComponent } from './index';
import { Subscription } from 'rxjs';
import { homeIcon } from '@progress/kendo-svg-icons';
import * as i0 from "@angular/core";
/**
* Navigation Breadcrumb component for Drilldown Charts.
*
* Use this component to implement navigation for [Drilldown Charts](slug:drilldown_chart_charts).
* Use the `chart` input to link the Breadcrumb to the Chart instance.
*
*/
export class ChartBreadcrumbComponent {
/**
* The Chart instance to link to.
*/
chart;
/**
* The definition of the breadcrumb root item.
*
* The default value is `{ icon: 'home', svgIcon: homeIcon, title: 'Home' }`.
* (homeIcon is imported from '@progress/kendo-svg-icons')
*/
rootItem = { icon: 'home', svgIcon: homeIcon, title: 'Home' };
/**
* @hidden
*/
items;
breadcrumb;
subscription = new Subscription();
ngOnInit() {
this.items = [this.rootItem];
if (this.chart) {
this.subscription.add(this.chart.drilldown.subscribe(this.onDrilldown.bind(this)));
this.subscription.add(this.chart.drilldownLevelChange.subscribe(this.onDrilldownLevelChange.bind(this)));
}
else if (isDevMode()) {
throw new Error('Chart Breadcrumb: No Chart instance supplied. Please add a reference using the "chart" attribute. For example: \n' +
'<kendo-chart-breadcrumb [chart]="instance" />\n' +
'<kendo-chart #instance>');
}
}
ngOnChanges(changes) {
const rootItemChange = changes['rootItem'];
if (rootItemChange && this.items) {
this.items[0] = rootItemChange.currentValue;
}
}
ngOnDestroy() {
if (this.subscription) {
this.subscription.unsubscribe();
this.subscription = null;
}
}
/**
* @hidden
*/
onItemClick(target) {
this.chart.drilldownLevel = this.items.findIndex(item => item === target);
}
onDrilldown(e) {
this.items = [...this.items, { text: e.point.category.toString() }];
}
onDrilldownLevelChange(level) {
this.items = this.items.slice(0, level + 1);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChartBreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ChartBreadcrumbComponent, isStandalone: true, selector: "kendo-chart-breadcrumb", inputs: { chart: "chart", rootItem: "rootItem" }, viewQueries: [{ propertyName: "breadcrumb", first: true, predicate: ["breadcrumb"], descendants: true, static: true }], exportAs: ["kendoChartBreadcrumb"], usesOnChanges: true, ngImport: i0, template: `
<kendo-breadcrumb [items]="items" (itemClick)="onItemClick($event)">
</kendo-breadcrumb>
`, isInline: true, dependencies: [{ kind: "component", type: BreadCrumbComponent, selector: "kendo-breadcrumb", inputs: ["items", "separatorIcon", "separatorSVGIcon", "collapseMode", "size"], outputs: ["itemClick"], exportAs: ["kendoBreadCrumb"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChartBreadcrumbComponent, decorators: [{
type: Component,
args: [{
exportAs: 'kendoChartBreadcrumb',
selector: 'kendo-chart-breadcrumb',
template: `
<kendo-breadcrumb [items]="items" (itemClick)="onItemClick($event)">
</kendo-breadcrumb>
`,
standalone: true,
imports: [BreadCrumbComponent]
}]
}], propDecorators: { chart: [{
type: Input
}], rootItem: [{
type: Input
}], breadcrumb: [{
type: ViewChild,
args: ['breadcrumb', { static: true }]
}] } });