@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.
113 lines (112 loc) • 5.03 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, ViewChildren, QueryList, Input } from '@angular/core';
import { CrosshairTooltipComponent } from './crosshair-tooltip.component';
import { NgFor } from '@angular/common';
import * as i0 from "@angular/core";
const AXES = ["categoryAxis", "valueAxis", "xAxis", "yAxis"];
/**
* @hidden
*/
export class CrosshairTooltipsContainerComponent {
popupSettings;
crossahairTooltipComponents;
tooltipKeys = [];
tooltipsMap = {};
show(e) {
const tooltipComponents = this.crossahairTooltipComponents.toArray();
const axisName = e.axisName;
const axisIndex = e.axisIndex;
for (let idx = 0; idx < tooltipComponents.length; idx++) {
if (tooltipComponents[idx].key === axisName + axisIndex) {
tooltipComponents[idx].show(e);
break;
}
}
}
hide() {
const tooltipComponents = this.crossahairTooltipComponents.toArray();
for (let idx = 0; idx < tooltipComponents.length; idx++) {
tooltipComponents[idx].hide();
}
}
get active() {
return this.tooltipKeys.length > 0;
}
createCrosshairTooltips(options) {
const newMap = this.mapTooltips(options);
const map = this.tooltipsMap;
for (const key in map) {
if (!newMap[key]) {
this.removeTooltip(key);
delete map[key];
}
}
for (const key in newMap) {
if (!map[key]) {
map[key] = newMap[key];
this.tooltipKeys.push(key);
}
}
}
removeTooltip(key) {
const keys = this.tooltipKeys;
for (let idx = 0; idx < keys.length; idx++) {
if (keys[idx] === key) {
keys.splice(idx, 1);
break;
}
}
}
mapTooltips(options) {
const map = {};
for (let idx = 0; idx < AXES.length; idx++) {
const tooltips = this.axesCrosshairTooltipOptions(options, AXES[idx]);
for (let tooltipIdx = 0; tooltipIdx < tooltips.length; tooltipIdx++) {
const tooltip = tooltips[tooltipIdx];
map[tooltip.name + tooltip.index] = tooltip;
}
}
return map;
}
axesCrosshairTooltipOptions(options, name) {
const result = [];
if (options[name]) {
const axes = [].concat(options[name]);
for (let idx = 0; idx < axes.length; idx++) {
const tooltip = (axes[idx].crosshair || {}).tooltip;
if (tooltip && tooltip.visible) {
result.push({
index: idx,
name: name
});
}
}
}
return result;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CrosshairTooltipsContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CrosshairTooltipsContainerComponent, isStandalone: true, selector: "kendo-chart-crosshair-tooltips-container", inputs: { popupSettings: "popupSettings" }, viewQueries: [{ propertyName: "crossahairTooltipComponents", predicate: CrosshairTooltipComponent, descendants: true }], ngImport: i0, template: `
<kendo-chart-crosshair-tooltip *ngFor="let key of tooltipKeys" [key]="key" [popupSettings]="popupSettings">
</kendo-chart-crosshair-tooltip>
`, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: CrosshairTooltipComponent, selector: "kendo-chart-crosshair-tooltip", inputs: ["key"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CrosshairTooltipsContainerComponent, decorators: [{
type: Component,
args: [{
selector: 'kendo-chart-crosshair-tooltips-container',
template: `
<kendo-chart-crosshair-tooltip *ngFor="let key of tooltipKeys" [key]="key" [popupSettings]="popupSettings">
</kendo-chart-crosshair-tooltip>
`,
standalone: true,
imports: [NgFor, CrosshairTooltipComponent]
}]
}], propDecorators: { popupSettings: [{
type: Input
}], crossahairTooltipComponents: [{
type: ViewChildren,
args: [CrosshairTooltipComponent]
}] } });