@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.
251 lines (246 loc) • 12.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 { Component, ElementRef, Input, NgZone, Renderer2, TemplateRef, ViewChild } from '@angular/core';
import { LocalizationService } from '@progress/kendo-angular-l10n';
import { POPUP_CONTAINER, PopupService } from '@progress/kendo-angular-popup';
import { BaseTooltip } from '../../chart/tooltip/base-tooltip';
import { bodyFactory } from '../../chart/tooltip/body-factory';
import { SankeyLinkTooltipTemplateContext } from './link-tooltip-template-context';
import { SankeyLinkTooltipTemplateDirective } from './link-tooltip-template.directive';
import { SankeyNodeTooltipTemplateContext } from './node-tooltip-template-context';
import { SankeyNodeTooltipTemplateDirective } from './node-tooltip-template.directive';
import { SankeyTooltipTemplateService } from './tooltip-template.service';
import { arrowLeftIcon, arrowRightIcon } from '@progress/kendo-svg-icons';
import { IntlService } from '@progress/kendo-angular-intl';
import { SquareSymbol } from './square-symbol.directive';
import { NgStyle, NgTemplateOutlet } from '@angular/common';
import { IconWrapperComponent } from '@progress/kendo-angular-icons';
import * as i0 from "@angular/core";
import * as i1 from "@progress/kendo-angular-popup";
import * as i2 from "./tooltip-template.service";
import * as i3 from "@progress/kendo-angular-l10n";
import * as i4 from "@progress/kendo-angular-intl";
const DEFAULT_OFFSET = 12;
/**
* @hidden
*/
export class SankeyTooltipPopupComponent extends BaseTooltip {
element;
popupService;
templateService;
localizationService;
intlService;
ngZone;
renderer;
nodeTooltipTemplateRef;
linkTooltipTemplateRef;
nodeTooltipContext;
linkTooltipContext;
defaultNodeTooltipTemplate;
defaultLinkTooltipTemplate;
templateRef;
animate = false;
wrapperClass = 'k-chart-tooltip-wrapper';
tooltipUnitFormat;
offset;
isNode;
isLink;
arrowIcon = arrowRightIcon;
// TODO: Move to themes
textStyle = { margin: '0 3px' };
tooltipStyle = { display: 'flex', alignItems: 'center' };
subscriptions;
rtl = false;
constructor(element, popupService, templateService, localizationService, intlService, ngZone, renderer) {
super(popupService, localizationService);
this.element = element;
this.popupService = popupService;
this.templateService = templateService;
this.localizationService = localizationService;
this.intlService = intlService;
this.ngZone = ngZone;
this.renderer = renderer;
}
onInit() {
this.popupRef.popupElement.className += ` ${this.wrapperClass}`;
}
ngAfterViewInit() {
this.setDirection();
this.subscriptions = this.localizationService.changes.subscribe(this.rtlChange.bind(this));
}
ngOnDestroy() {
super.ngOnDestroy();
if (this.subscriptions) {
this.subscriptions.unsubscribe();
}
}
show(e) {
this.isNode = e.targetType === 'node';
this.isLink = e.targetType === 'link';
this.nodeTooltipTemplateRef = this.templateService.nodeTemplate || this.defaultNodeTooltipTemplate.templateRef;
this.nodeTooltipContext = new SankeyNodeTooltipTemplateContext(e);
this.linkTooltipTemplateRef = this.templateService.linkTemplate || this.defaultLinkTooltipTemplate.templateRef;
this.linkTooltipContext = new SankeyLinkTooltipTemplateContext(e);
super.show({
style: {
position: 'static' // Override k-tooltip positioning
},
anchor: {
align: e.tooltipData.popupAlign,
point: this.tooltipAnchor(e),
},
});
}
tooltipAnchor(e) {
const element = this.element.nativeElement;
const size = { width: element.offsetWidth, height: element.offsetHeight };
const anchor = { ...e.tooltipData.popupOffset };
const popupAlign = e.tooltipData.popupAlign;
const offset = this.offset || DEFAULT_OFFSET;
anchor.left += (popupAlign.horizontal === 'left') ? offset : (-1 * offset);
if (popupAlign.horizontal === 'right') {
anchor.left -= size.width;
}
if (popupAlign.vertical === 'bottom') {
anchor.top -= size.height + offset;
}
else {
anchor.top += offset;
}
return anchor;
}
formatUnits(value) {
return this.intlService.format(this.tooltipUnitFormat, value ?? 0);
}
rtlChange() {
this.arrowIcon = this.rtl ? arrowLeftIcon : arrowRightIcon;
}
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);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SankeyTooltipPopupComponent, deps: [{ token: i0.ElementRef }, { token: i1.PopupService }, { token: i2.SankeyTooltipTemplateService }, { token: i3.LocalizationService }, { token: i4.IntlService }, { token: i0.NgZone }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: SankeyTooltipPopupComponent, isStandalone: true, selector: "kendo-sankey-tooltip-popup", inputs: { animate: "animate", wrapperClass: "wrapperClass", tooltipUnitFormat: "tooltipUnitFormat", offset: "offset" }, providers: [
PopupService,
{
provide: POPUP_CONTAINER,
useFactory: bodyFactory,
},
], viewQueries: [{ propertyName: "defaultNodeTooltipTemplate", first: true, predicate: SankeyNodeTooltipTemplateDirective, descendants: true }, { propertyName: "defaultLinkTooltipTemplate", first: true, predicate: SankeyLinkTooltipTemplateDirective, descendants: true }, { propertyName: "templateRef", first: true, predicate: ["content"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: `
<ng-template #content>
<div class="k-tooltip k-sankey-tooltip k-chart-tooltip k-chart-shared-tooltip" [ngStyle]="style">
<div class="k-tooltip-content">
(isNode) {
<ng-template
[ngTemplateOutlet]="nodeTooltipTemplateRef"
[ngTemplateOutletContext]="nodeTooltipContext"
>
</ng-template>
}
(isLink) {
<ng-template
[ngTemplateOutlet]="linkTooltipTemplateRef"
[ngTemplateOutletContext]="linkTooltipContext"
>
</ng-template>
}
</div>
</div>
</ng-template>
<ng-template kendoSankeyNodeTooltipTemplate let-color="color" let-label="label" let-value="value">
<div [ngStyle]="tooltipStyle">
<div squareSymbol [color]="color"></div>
<span [ngStyle]="textStyle">{{ label.text }}</span>
<span [ngStyle]="textStyle">{{ formatUnits(value) }}</span>
</div>
</ng-template>
<ng-template kendoSankeyLinkTooltipTemplate let-source="source" let-target="target" let-value="value">
<div [ngStyle]="tooltipStyle">
<div squareSymbol [color]="source.color"></div>
<span [ngStyle]="textStyle">{{ source.label?.text }}</span>
<kendo-icon-wrapper [name]="arrowIcon.name" [svgIcon]="arrowIcon"></kendo-icon-wrapper>
<div squareSymbol [color]="target.color"></div>
<span [ngStyle]="textStyle">{{ target.label?.text }}</span>
<span [ngStyle]="textStyle">{{ formatUnits(value) }}</span>
</div>
</ng-template>
`, isInline: true, dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: SankeyNodeTooltipTemplateDirective, selector: "[kendoSankeyNodeTooltipTemplate]" }, { kind: "directive", type: SquareSymbol, selector: "[squareSymbol]", inputs: ["color", "size"] }, { kind: "directive", type: SankeyLinkTooltipTemplateDirective, selector: "[kendoSankeyLinkTooltipTemplate]" }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SankeyTooltipPopupComponent, decorators: [{
type: Component,
args: [{
providers: [
PopupService,
{
provide: POPUP_CONTAINER,
useFactory: bodyFactory,
},
],
selector: 'kendo-sankey-tooltip-popup',
template: `
<ng-template #content>
<div class="k-tooltip k-sankey-tooltip k-chart-tooltip k-chart-shared-tooltip" [ngStyle]="style">
<div class="k-tooltip-content">
(isNode) {
<ng-template
[ngTemplateOutlet]="nodeTooltipTemplateRef"
[ngTemplateOutletContext]="nodeTooltipContext"
>
</ng-template>
}
(isLink) {
<ng-template
[ngTemplateOutlet]="linkTooltipTemplateRef"
[ngTemplateOutletContext]="linkTooltipContext"
>
</ng-template>
}
</div>
</div>
</ng-template>
<ng-template kendoSankeyNodeTooltipTemplate let-color="color" let-label="label" let-value="value">
<div [ngStyle]="tooltipStyle">
<div squareSymbol [color]="color"></div>
<span [ngStyle]="textStyle">{{ label.text }}</span>
<span [ngStyle]="textStyle">{{ formatUnits(value) }}</span>
</div>
</ng-template>
<ng-template kendoSankeyLinkTooltipTemplate let-source="source" let-target="target" let-value="value">
<div [ngStyle]="tooltipStyle">
<div squareSymbol [color]="source.color"></div>
<span [ngStyle]="textStyle">{{ source.label?.text }}</span>
<kendo-icon-wrapper [name]="arrowIcon.name" [svgIcon]="arrowIcon"></kendo-icon-wrapper>
<div squareSymbol [color]="target.color"></div>
<span [ngStyle]="textStyle">{{ target.label?.text }}</span>
<span [ngStyle]="textStyle">{{ formatUnits(value) }}</span>
</div>
</ng-template>
`,
standalone: true,
imports: [NgStyle, NgTemplateOutlet, SankeyNodeTooltipTemplateDirective, SquareSymbol, SankeyLinkTooltipTemplateDirective, IconWrapperComponent]
}]
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.PopupService }, { type: i2.SankeyTooltipTemplateService }, { type: i3.LocalizationService }, { type: i4.IntlService }, { type: i0.NgZone }, { type: i0.Renderer2 }], propDecorators: { defaultNodeTooltipTemplate: [{
type: ViewChild,
args: [SankeyNodeTooltipTemplateDirective, { static: false }]
}], defaultLinkTooltipTemplate: [{
type: ViewChild,
args: [SankeyLinkTooltipTemplateDirective, { static: false }]
}], templateRef: [{
type: ViewChild,
args: ['content', { static: true }]
}], animate: [{
type: Input
}], wrapperClass: [{
type: Input
}], tooltipUnitFormat: [{
type: Input
}], offset: [{
type: Input
}] } });