@progress/kendo-angular-charts 15.5.0 → 16.0.0-develop.2

package/esm2020/sankey.component.mjs

@@ -0,0 +1,378 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2024 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, NgZone, Output, Renderer2, ViewChild, } from '@angular/core';
+import { isDocumentAvailable, shouldShowValidationUI } from '@progress/kendo-angular-common';
+import { L10N_PREFIX, LocalizationService } from '@progress/kendo-angular-l10n';
+import { exportImage, exportSVG } from '@progress/kendo-drawing';
+import { validatePackage } from '@progress/kendo-licensing';
+import { combineLatest } from 'rxjs';
+import { auditTime, tap } from 'rxjs/operators';
+import { ConfigurationService, THROTTLE_MS } from './common/configuration.service';
+import { copyChanges } from './common/copy-changes';
+import { ThemeService } from './common/theme.service';
+import { toSimpleChanges } from './common/to-simple-changes';
+import { packageMetadata } from './package-metadata';
+import { InstanceEventService } from './sankey/events';
+import { Sankey, } from '@progress/kendo-charts';
+import { hasObservers } from './common/has-observers';
+import { SankeyTooltipPopupComponent } from './sankey/tooltip/tooltip-popup.component';
+import { SankeyTooltipTemplateService } from './sankey/tooltip/tooltip-template.service';
+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-l10n";
+import * as i4 from "./sankey/events";
+import * as i5 from "./sankey/tooltip/tooltip-popup.component";
+import * as i6 from "@progress/kendo-angular-common";
+import * as i7 from "./sankey/localization/localized-messages.directive";
+import * as i8 from "@angular/common";
+/**
+ * The Sankey diagram component.
+ *
+ * @example
+ * ```ts
+ * import { Component } from '@angular/core';
+ *
+ * _@Component({
+ *   selector: 'my-app',
+ *   template: `
+ *       <kendo-sankey [data]="data">
+ *       </kendo-sankey>
+ *   `,
+ * })
+ * export class AppComponent {
+ *     public data: SankeyData = {
+ *         nodes: [
+ *           { id: 1, label: { text: 'Linux' } },
+ *           { id: 0, label: { text: 'iOS'} },
+ *           { id: 2, label: { text: 'Mobile' } },
+ *           { id: 3, label: { text: 'Desktop' } },
+ *         ],
+ *         links: [
+ *           { sourceId: 0, targetId: 2, value: 1 },
+ *           { sourceId: 1, targetId: 2, value: 2 },
+ *           { sourceId: 1, targetId: 3, value: 3 },
+ *         ],
+ *       };
+ * }
+ * ```
+ */
+export class SankeyComponent {
+    constructor(element, configurationService, themeService, localizationService, instanceEventService, ngZone, changeDetector, renderer) {
+        this.element = element;
+        this.configurationService = configurationService;
+        this.themeService = themeService;
+        this.localizationService = localizationService;
+        this.instanceEventService = instanceEventService;
+        this.ngZone = ngZone;
+        this.changeDetector = changeDetector;
+        this.renderer = renderer;
+        /**
+         * Fires when the mouse pointer enters a node. Similar to the `mouseenter` event.
+         */
+        this.nodeEnter = new EventEmitter();
+        /**
+         * Fires when the mouse pointer leaves a node. Similar to the `mouseleave` event.
+         */
+        this.nodeLeave = new EventEmitter();
+        /**
+         * Fires when a node is clicked.
+         */
+        this.nodeClick = new EventEmitter();
+        /**
+         * Fires when the mouse pointer enters a link. Similar to the `mouseenter` event,
+         */
+        this.linkEnter = new EventEmitter();
+        /**
+         * Fires when the mouse pointer leaves a link. Similar to the `mouseleave` event.
+         */
+        this.linkLeave = new EventEmitter();
+        /**
+         * Fires when a link is clicked.
+         */
+        this.linkClick = new EventEmitter();
+        /**
+         * @hidden
+         */
+        this.showLicenseWatermark = false;
+        this.rtl = false;
+        const isValid = validatePackage(packageMetadata);
+        this.showLicenseWatermark = shouldShowValidationUI(isValid);
+        this.themeService.loadTheme();
+        this.refreshWait();
+    }
+    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 widget.
+     *
+     * Use this method when the configuration values cannot be set through the template.
+     *
+     * @example
+     * ```ts-no-run
+     * sankey.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.optionsChange) {
+            this.optionsChange.unsubscribe();
+        }
+        if (this.instance) {
+            this.instance.destroy();
+            this.instance = null;
+        }
+        if (this.subscriptions) {
+            this.subscriptions.unsubscribe();
+        }
+        clearTimeout(this.redrawTimeout);
+    }
+    /**
+     * @hidden
+     */
+    messageFor(key) {
+        return this.localizationService.get(key);
+    }
+    createInstance(element) {
+        this.instance = new Sankey(element, this.options, this.theme);
+        ['nodeEnter', 'nodeLeave', 'nodeClick', 'linkEnter', 'linkLeave', 'linkClick'].forEach((eventName) => this.instance.bind(eventName, (e) => this.trigger(eventName, e)));
+        this.instance.bind('tooltipShow', (e) => this.onShowTooltip(e));
+        this.instance.bind('tooltipHide', () => this.onHideTooltip());
+    }
+    /**
+     * Exports the Sankey diagram 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 Sankey diagram 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 visual of the Sankey component to a drawing group.
+     *
+     * @param options - The parameters for the export operation.
+     * @returns - The root Group of the scene.
+     */
+    exportVisual(options = {}) {
+        return this.instance.exportVisual(options);
+    }
+    init() {
+        if (!this.canRender) {
+            return;
+        }
+        const element = this.instanceElement.nativeElement;
+        this.createInstance(element);
+    }
+    /**
+     * Reloads the Sankey appearance settings from the current [Kendo UI Theme]({% slug themesandstyles %}).
+     *
+     * Call this method after loading a different theme stylesheet.
+     */
+    reloadTheme() {
+        if (!this.instance) {
+            return;
+        }
+        this.themeService.reset();
+        this.instance.destroy();
+        this.instance = null;
+    }
+    onShowTooltip(e) {
+        this.run(() => {
+            this.tooltipInstance.show(e);
+        }, true, true);
+    }
+    onHideTooltip() {
+        if (this.tooltipInstance.active) {
+            this.tooltipInstance.hide();
+            this.detectChanges();
+        }
+    }
+    trigger(name, e) {
+        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);
+        if (!this.instance) {
+            this.init();
+            return;
+        }
+        this.updateOptions();
+    }
+    updateOptions() {
+        this.instance.setOptions(this.options);
+    }
+    get canRender() {
+        return isDocumentAvailable() && Boolean(this.instanceElement);
+    }
+    activeEmitter(name) {
+        const emitter = this[name];
+        if (emitter && emitter.emit && hasObservers(emitter)) {
+            return emitter;
+        }
+    }
+    refreshWait() {
+        this.ngZone.runOutsideAngular(() => {
+            this.optionsChange = combineLatest([this.configurationService.onChange$, this.themeService.onChange$])
+                .pipe(tap((result) => {
+                this.options = result[0];
+                this.theme = this.loadTheme(result[1]);
+            }), auditTime(THROTTLE_MS))
+                .subscribe(() => {
+                this.refresh();
+            });
+        });
+    }
+    loadTheme(chartTheme) {
+        return {
+            ...chartTheme,
+            nodeColors: chartTheme.seriesColors,
+        };
+    }
+    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();
+        }
+    }
+}
+SankeyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SankeyComponent, deps: [{ token: i0.ElementRef }, { token: i1.ConfigurationService }, { token: i2.ThemeService }, { token: i3.LocalizationService }, { token: i4.InstanceEventService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+SankeyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: SankeyComponent, selector: "kendo-sankey", inputs: { data: "data", links: "links", nodes: "nodes", labels: "labels", title: "title", legend: "legend", tooltip: "tooltip", disableAutoLayout: "disableAutoLayout", popupSettings: "popupSettings" }, outputs: { nodeEnter: "nodeEnter", nodeLeave: "nodeLeave", nodeClick: "nodeClick", linkEnter: "linkEnter", linkLeave: "linkLeave", linkClick: "linkClick" }, providers: [
+        ConfigurationService,
+        LocalizationService,
+        InstanceEventService,
+        SankeyTooltipTemplateService,
+        {
+            provide: L10N_PREFIX,
+            useValue: 'kendo.sankey',
+        },
+    ], viewQueries: [{ propertyName: "tooltipInstance", first: true, predicate: SankeyTooltipPopupComponent, descendants: true, static: true }, { propertyName: "instanceElement", first: true, predicate: ["instance"], descendants: true, static: true }], exportAs: ["kendoSankey"], usesOnChanges: true, ngImport: i0, template: `
+        <ng-container
+            kendoSankeyLocalizedMessages
+            i18n-tooltipUnitFormat="kendo.sankey.tooltipUnitFormat|The format string to use when displaying node and link values in the tooltip"
+            tooltipUnitFormat="({0} units)"
+        ></ng-container>
+        <div #instance></div>
+        <kendo-sankey-tooltip-popup
+            [popupSettings]="popupSettings"
+            [tooltipUnitFormat]="messageFor('tooltipUnitFormat')"
+        >
+        </kendo-sankey-tooltip-popup>
+        <div kendoWatermarkOverlay *ngIf="showLicenseWatermark"></div>
+    `, isInline: true, components: [{ type: i5.SankeyTooltipPopupComponent, selector: "kendo-sankey-tooltip-popup", inputs: ["animate", "popupSettings", "wrapperClass", "tooltipUnitFormat", "offset"] }, { type: i6.WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay]" }], directives: [{ type: i7.LocalizedMessagesDirective, selector: "[kendoSankeyLocalizedMessages]" }, { type: i8.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SankeyComponent, decorators: [{
+            type: Component,
+            args: [{
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    exportAs: 'kendoSankey',
+                    providers: [
+                        ConfigurationService,
+                        LocalizationService,
+                        InstanceEventService,
+                        SankeyTooltipTemplateService,
+                        {
+                            provide: L10N_PREFIX,
+                            useValue: 'kendo.sankey',
+                        },
+                    ],
+                    selector: 'kendo-sankey',
+                    template: `
+        <ng-container
+            kendoSankeyLocalizedMessages
+            i18n-tooltipUnitFormat="kendo.sankey.tooltipUnitFormat|The format string to use when displaying node and link values in the tooltip"
+            tooltipUnitFormat="({0} units)"
+        ></ng-container>
+        <div #instance></div>
+        <kendo-sankey-tooltip-popup
+            [popupSettings]="popupSettings"
+            [tooltipUnitFormat]="messageFor('tooltipUnitFormat')"
+        >
+        </kendo-sankey-tooltip-popup>
+        <div kendoWatermarkOverlay *ngIf="showLicenseWatermark"></div>
+    `,
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.ConfigurationService }, { type: i2.ThemeService }, { type: i3.LocalizationService }, { type: i4.InstanceEventService }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }]; }, propDecorators: { data: [{
+                type: Input
+            }], links: [{
+                type: Input
+            }], nodes: [{
+                type: Input
+            }], labels: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], legend: [{
+                type: Input
+            }], tooltip: [{
+                type: Input
+            }], disableAutoLayout: [{
+                type: Input
+            }], popupSettings: [{
+                type: Input
+            }], nodeEnter: [{
+                type: Output
+            }], nodeLeave: [{
+                type: Output
+            }], nodeClick: [{
+                type: Output
+            }], linkEnter: [{
+                type: Output
+            }], linkLeave: [{
+                type: Output
+            }], linkClick: [{
+                type: Output
+            }], tooltipInstance: [{
+                type: ViewChild,
+                args: [SankeyTooltipPopupComponent, { static: true }]
+            }], instanceElement: [{
+                type: ViewChild,
+                args: ['instance', { static: true }]
+            }] } });

package/esm2020/sankey.directives.mjs

@@ -0,0 +1,46 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2024 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { SankeyComponent } from './sankey.component';
+import { SankeyFlatBindingDirective } from './sankey/data-binding/flat-binding.directive';
+import { SankeyFlatBindingDataBoundEvent } from './sankey/data-binding/flat-binding.event';
+import { SankeyLabelsComponent } from './sankey/labels.component';
+import { SankeyLegendComponent } from './sankey/legend.component';
+import { SankeyLinksComponent } from './sankey/links.component';
+import { SankeyCustomMessagesComponent } from './sankey/localization/custom-messages.component';
+import { LocalizedMessagesDirective } from './sankey/localization/localized-messages.directive';
+import { SankeyNodesComponent } from './sankey/nodes.component';
+import { SankeyTitleComponent } from './sankey/title.component';
+import { SankeyTooltipComponent } from './sankey/tooltip.component';
+import { SankeyLinkTooltipTemplateDirective } from './sankey/tooltip/link-tooltip-template.directive';
+import { SankeyNodeTooltipTemplateDirective } from './sankey/tooltip/node-tooltip-template.directive';
+import { SquareSymbol } from './sankey/tooltip/square-symbol.directive';
+import { SankeyTooltipPopupComponent } from './sankey/tooltip/tooltip-popup.component';
+// Re-exports
+export { SankeyComponent, SankeyTooltipPopupComponent, SankeyLinkTooltipTemplateDirective, SankeyNodeTooltipTemplateDirective, SankeyCustomMessagesComponent, LocalizedMessagesDirective, SankeyTitleComponent, SankeyLegendComponent, SankeyTooltipComponent, SankeyLinksComponent, SankeyNodesComponent, SankeyLabelsComponent, SankeyFlatBindingDirective, SankeyFlatBindingDataBoundEvent };
+/**
+ * @hidden
+ */
+export const SANKEY_EXPORTS = [
+    SankeyComponent,
+    SankeyTooltipPopupComponent,
+    SankeyLinkTooltipTemplateDirective,
+    SankeyNodeTooltipTemplateDirective,
+    SankeyCustomMessagesComponent,
+    LocalizedMessagesDirective,
+    SankeyTitleComponent,
+    SankeyLegendComponent,
+    SankeyTooltipComponent,
+    SankeyLinksComponent,
+    SankeyNodesComponent,
+    SankeyLabelsComponent,
+    SankeyFlatBindingDirective
+];
+/**
+ * @hidden
+ */
+export const SANKEY_DIRECTIVES = [
+    ...SANKEY_EXPORTS,
+    SquareSymbol
+];

package/esm2020/sankey.module.mjs

@@ -0,0 +1,63 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2024 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { ResizeSensorModule, WatermarkModule } from '@progress/kendo-angular-common';
+import { IconsModule } from '@progress/kendo-angular-icons';
+import { PopupModule } from '@progress/kendo-angular-popup';
+import { ThemeService } from './common/theme.service';
+import { SANKEY_DIRECTIVES, SANKEY_EXPORTS } from './sankey.directives';
+import * as i0 from "@angular/core";
+import * as i1 from "./sankey.component";
+import * as i2 from "./sankey/tooltip/tooltip-popup.component";
+import * as i3 from "./sankey/tooltip/link-tooltip-template.directive";
+import * as i4 from "./sankey/tooltip/node-tooltip-template.directive";
+import * as i5 from "./sankey/localization/custom-messages.component";
+import * as i6 from "./sankey/localization/localized-messages.directive";
+import * as i7 from "./sankey/title.component";
+import * as i8 from "./sankey/legend.component";
+import * as i9 from "./sankey/tooltip.component";
+import * as i10 from "./sankey/links.component";
+import * as i11 from "./sankey/nodes.component";
+import * as i12 from "./sankey/labels.component";
+import * as i13 from "./sankey/data-binding/flat-binding.directive";
+import * as i14 from "./sankey/tooltip/square-symbol.directive";
+/**
+ * A [module](link:site.data.urls.angular['ngmoduleapi']) that includes the Sparkline component and directives.
+ *
+ * Imports the SparklineModule into your application
+ * [root module](link:site.data.urls.angular['ngmodules']#angular-modularity) or any other sub-module
+ * that will use the Sparkline component.
+ *
+ * @example
+ * ```ts-no-run
+ * import { NgModule } from '@angular/core';
+ * import { BrowserModule } from '@angular/platform-browser';
+ * import { SparklineModule } from '@progress/kendo-angular-charts';
+ * import { AppComponent } from './app.component';
+ *
+ * _@NgModule({
+ *     bootstrap:    [AppComponent],
+ *     declarations: [AppComponent],
+ *     imports:      [BrowserModule, SparklineModule]
+ * })
+ * export class AppModule {
+ * }
+ * ```
+ */
+export class SankeyModule {
+}
+SankeyModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SankeyModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SankeyModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SankeyModule, declarations: [i1.SankeyComponent, i2.SankeyTooltipPopupComponent, i3.SankeyLinkTooltipTemplateDirective, i4.SankeyNodeTooltipTemplateDirective, i5.SankeyCustomMessagesComponent, i6.LocalizedMessagesDirective, i7.SankeyTitleComponent, i8.SankeyLegendComponent, i9.SankeyTooltipComponent, i10.SankeyLinksComponent, i11.SankeyNodesComponent, i12.SankeyLabelsComponent, i13.SankeyFlatBindingDirective, i14.SquareSymbol], imports: [CommonModule, IconsModule, PopupModule, ResizeSensorModule, WatermarkModule], exports: [i1.SankeyComponent, i2.SankeyTooltipPopupComponent, i3.SankeyLinkTooltipTemplateDirective, i4.SankeyNodeTooltipTemplateDirective, i5.SankeyCustomMessagesComponent, i6.LocalizedMessagesDirective, i7.SankeyTitleComponent, i8.SankeyLegendComponent, i9.SankeyTooltipComponent, i10.SankeyLinksComponent, i11.SankeyNodesComponent, i12.SankeyLabelsComponent, i13.SankeyFlatBindingDirective] });
+SankeyModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SankeyModule, providers: [ThemeService], imports: [[CommonModule, IconsModule, PopupModule, ResizeSensorModule, WatermarkModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SankeyModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [SANKEY_DIRECTIVES],
+                    exports: [SANKEY_EXPORTS],
+                    imports: [CommonModule, IconsModule, PopupModule, ResizeSensorModule, WatermarkModule],
+                    providers: [ThemeService],
+                }]
+        }] });