igniteui-angular-charts
Version:
Ignite UI Angular charting components for building rich data visualizations for modern web apps.
213 lines (212 loc) • 23.6 kB
JavaScript
/*
THIS INFRAGISTICS ULTIMATE SOFTWARE LICENSE AGREEMENT ("AGREEMENT") LOCATED HERE:
https://www.infragistics.com/legal/license/igultimate-la
https://www.infragistics.com/legal/license/igultimate-eula
GOVERNS THE LICENSING, INSTALLATION AND USE OF INFRAGISTICS SOFTWARE. BY DOWNLOADING AND/OR INSTALLING AND USING INFRAGISTICS SOFTWARE: you are indicating that you have read and understand this Agreement, and agree to be legally bound by it on behalf of the yourself and your company.
*/
import { Component, EventEmitter, Output, ViewChild, ChangeDetectionStrategy } from '@angular/core';
import { TypeRegistrar } from "igniteui-angular-core";
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
var IgxDataChartDefaultTooltipsComponent = /** @class */ /*@__PURE__*/ (function () {
function IgxDataChartDefaultTooltipsComponent(_changeDetectorRef) {
this._changeDetectorRef = _changeDetectorRef;
this.onContentReady = new EventEmitter();
}
IgxDataChartDefaultTooltipsComponent.prototype.ensureDefaultTooltip = function (series) {
if (series.isPolar) {
if (series.showDefaultTooltip) {
series.tooltipTemplate = this.polarTooltip;
}
else {
if (series.tooltipTemplate === this.polarTooltip) {
series.tooltipTemplate = null;
}
}
}
else if (series.isRadial) {
if (series.showDefaultTooltip) {
series.tooltipTemplate = this.radialTooltip;
}
else {
if (series.tooltipTemplate === this.radialTooltip) {
series.tooltipTemplate = null;
}
}
}
else if (series.isShape) {
if (series.showDefaultTooltip) {
series.tooltipTemplate = this.shapeTooltip;
}
else {
if (series.tooltipTemplate === this.shapeTooltip) {
series.tooltipTemplate = null;
}
}
}
else if (series.isScatter) {
if (series.showDefaultTooltip) {
series.tooltipTemplate = this.scatterTooltip;
}
else {
if (series.tooltipTemplate === this.scatterTooltip) {
series.tooltipTemplate = null;
}
}
}
else if (series.isCategory &&
!series.isFinancial) {
var tooltip = series.isVertical ? this.anchoredVerticalCategoryTooltip : series.isRange ? this.rangeTooltip : this.anchoredCategoryTooltip;
if (series.showDefaultTooltip) {
series.tooltipTemplate = tooltip;
}
else {
if (series.tooltipTemplate === tooltip) {
series.tooltipTemplate = null;
}
}
}
else if (series.isFinancial) {
if (series.showDefaultTooltip) {
series.tooltipTemplate = this.financialTooltip;
}
else {
if (series.tooltipTemplate === this.financialTooltip) {
series.tooltipTemplate = null;
}
}
}
};
IgxDataChartDefaultTooltipsComponent.prototype.format = function (value) {
if (value == undefined || value == null) {
return "";
}
if (value.getTime) {
return this.shortDate(value);
}
return value.toString();
};
IgxDataChartDefaultTooltipsComponent.prototype.shortDate = function (item) {
if (item == undefined || item == null) {
return "";
}
return item.toLocaleDateString() + " " + item.toLocaleTimeString();
};
IgxDataChartDefaultTooltipsComponent.prototype.hasOpen = function (series) {
return series.openMemberPath;
};
IgxDataChartDefaultTooltipsComponent.prototype.getOpenValue = function (series, item) {
return this.getItemValue(series, item, "openMemberPath", series.openMemberPath);
};
IgxDataChartDefaultTooltipsComponent.prototype.hasHigh = function (series) {
return series.highMemberPath;
};
IgxDataChartDefaultTooltipsComponent.prototype.getHighValue = function (series, item) {
return this.getItemValue(series, item, "highMemberPath", series.highMemberPath);
};
IgxDataChartDefaultTooltipsComponent.prototype.hasLow = function (series) {
return series.lowMemberPath;
};
IgxDataChartDefaultTooltipsComponent.prototype.getLowValue = function (series, item) {
return this.getItemValue(series, item, "lowMemberPath", series.lowMemberPath);
};
IgxDataChartDefaultTooltipsComponent.prototype.hasClose = function (series) {
return series.closeMemberPath;
};
IgxDataChartDefaultTooltipsComponent.prototype.getCloseValue = function (series, item) {
return this.getItemValue(series, item, "closeMemberPath", series.closeMemberPath);
};
IgxDataChartDefaultTooltipsComponent.prototype.hasVolume = function (series) {
return series.volumeMemberPath;
};
IgxDataChartDefaultTooltipsComponent.prototype.getVolumeValue = function (series, item) {
return this.getItemValue(series, item, "volumeMemberPath", series.volumeMemberPath);
};
IgxDataChartDefaultTooltipsComponent.prototype.getAnchoredValue = function (series, item) {
return this.getItemValue(series, item, "valueMemberPath", series.valueMemberPath);
};
IgxDataChartDefaultTooltipsComponent.prototype.getXValue = function (series, item) {
return this.getItemValue(series, item, "xMemberPath", series.xMemberPath);
};
IgxDataChartDefaultTooltipsComponent.prototype.getYValue = function (series, item) {
return this.getItemValue(series, item, "yMemberPath", series.yMemberPath);
};
IgxDataChartDefaultTooltipsComponent.prototype.hasRadius = function (series) {
return series.radiusMemberPath !== undefined;
};
IgxDataChartDefaultTooltipsComponent.prototype.getRadiusValue = function (series, item) {
return this.getItemValue(series, item, "radiusMemberPath", series.radiusMemberPath);
};
IgxDataChartDefaultTooltipsComponent.prototype.getAngleValue = function (series, item) {
return this.getItemValue(series, item, "angleMemberPath", series.angleMemberPath);
};
IgxDataChartDefaultTooltipsComponent.prototype.hasValue = function (series) {
return series.valueMemberPath;
};
IgxDataChartDefaultTooltipsComponent.prototype.getItemValue = function (series, item, memberPath, memberPathValue) {
return series.getItemValue(item, memberPath);
};
IgxDataChartDefaultTooltipsComponent.prototype.getValue = function (series, item) {
return this.getItemValue(series, item, "valueMemberPath", series.valueMemberPath);
};
IgxDataChartDefaultTooltipsComponent.prototype.getBrush = function (series) {
return series.safeActualBrush;
};
IgxDataChartDefaultTooltipsComponent.prototype.hasXY = function (series, item) {
return series.xMemberPath && series.yMemberPath && item[series.xMemberPath] && item[series.yMemberPath];
};
IgxDataChartDefaultTooltipsComponent.prototype.hasColor = function (series) {
return series.colorMemberPath;
};
IgxDataChartDefaultTooltipsComponent.prototype.getColorValue = function (series, item) {
return this.getItemValue(series, item, "colorMemberPath", series.colorMemberPath);
};
IgxDataChartDefaultTooltipsComponent.prototype.asAny = function (item) {
return item;
};
IgxDataChartDefaultTooltipsComponent.register = function () {
TypeRegistrar.registerCons("IgxDataChartDefaultTooltipsComponent", IgxDataChartDefaultTooltipsComponent);
};
IgxDataChartDefaultTooltipsComponent.prototype.ngAfterContentInit = function () {
this.onContentReady.emit({});
};
IgxDataChartDefaultTooltipsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: IgxDataChartDefaultTooltipsComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
IgxDataChartDefaultTooltipsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: IgxDataChartDefaultTooltipsComponent, selector: "igx-data-chart-default-tooltips", outputs: { onContentReady: "onContentReady" }, viewQueries: [{ propertyName: "anchoredCategoryTooltip", first: true, predicate: ["anchoredCategoryTooltip"], descendants: true, static: true }, { propertyName: "anchoredVerticalCategoryTooltip", first: true, predicate: ["anchoredVerticalCategoryTooltip"], descendants: true, static: true }, { propertyName: "financialTooltip", first: true, predicate: ["financialTooltip"], descendants: true, static: true }, { propertyName: "polarTooltip", first: true, predicate: ["polarTooltip"], descendants: true, static: true }, { propertyName: "radialTooltip", first: true, predicate: ["radialTooltip"], descendants: true, static: true }, { propertyName: "rangeTooltip", first: true, predicate: ["rangeTooltip"], descendants: true, static: true }, { propertyName: "scatterTooltip", first: true, predicate: ["scatterTooltip"], descendants: true, static: true }, { propertyName: "shapeTooltip", first: true, predicate: ["shapeTooltip"], descendants: true, static: true }], ngImport: i0, template: "\n <ng-template #anchoredCategoryTooltip let-series=\"series\" let-item=\"item\">\n <div class='ui-chart-default-tooltip-content' *ngIf=\"item\" style=\"white-space:nowrap\"> \n <span *ngIf=\"series.xAxis.isDateTime\">{{shortDate(series.xAxis.getItemValue(asAny(item),'dateTimeMemberPath'))}}</span>\n <br *ngIf=\"series.xAxis.isDateTime\" />\n <span *ngIf=\"!series.xAxis.isDateTime && series.xAxis.label\">{{format(series.xAxis.getItemValue(asAny(item), 'label'))}}</span>\n <br *ngIf=\"!series.xAxis.isDateTime && series.xAxis.label\" />\n <span [style.color]=\"getBrush(series)\">{{series.title}}: </span>\n <span class=\"ui-tooltip-priority\">{{getAnchoredValue(series, item)}}</span>\n </div>\n </ng-template>\n <ng-template #anchoredVerticalCategoryTooltip let-series=\"series\" let-item=\"item\">\n <div class='ui-chart-default-tooltip-content' *ngIf=\"item\" style=\"white-space:nowrap\"> \n <span *ngIf=\"series.yAxis.isDateTime\">{{shortDate(series.yAxis.getItemValue(asAny(item), 'dateTimeMemberPath'))}}</span>\n <br *ngIf=\"series.yAxis.isDateTime\" />\n <span *ngIf=\"!series.yAxis.isDateTime && series.yAxis.label\">{{format(series.yAxis.getItemValue(asAny(item), 'label'))}}</span>\n <br *ngIf=\"!series.yAxis.isDateTime && series.yAxis.label\" />\n <span [style.color]=\"getBrush(series)\">{{series.title}}: </span>\n <span class=\"ui-tooltip-priority\">{{getAnchoredValue(series, item)}}</span>\n </div>\n </ng-template>\n <ng-template #financialTooltip let-series=\"series\" let-item=\"item\" let-itemLabel=\"itemLabel\">\n <div class='ui-chart-default-tooltip-content' *ngIf=\"item\" style=\"white-space:nowrap\"> \n <span *ngIf=\"series.xAxis.isDateTime\">{{itemLabel}}</span>\n <br *ngIf=\"series.xAxis.isDateTime\" />\n <span *ngIf=\"!series.xAxis.isDateTime && series.xAxis.label\">{{format(series.xAxis.getItemValue(asAny(item), 'label'))}}</span>\n <br *ngIf=\"!series.xAxis.isDateTime && series.xAxis.label\" />\n <span [style.color]=\"getBrush(series)\">{{series.title}}: </span>\n <table>\n <tr *ngIf=\"hasOpen(series)\"><td>{{series.actualOpenLabel}}:</td><td>{{getOpenValue(series, item)}}</td></tr>\n <tr *ngIf=\"hasHigh(series)\"><td>{{series.actualHighLabel}}:</td><td>{{getHighValue(series, item)}}</td></tr>\n <tr *ngIf=\"hasLow(series)\"><td>{{series.actualLowLabel}}:</td><td>{{getLowValue(series, item)}}</td></tr>\n <tr *ngIf=\"hasClose(series)\"><td>{{series.actualCloseLabel}}:</td><td>{{getCloseValue(series, item)}}</td></tr>\n <tr *ngIf=\"hasVolume(series)\"><td>{{series.actualVolumeLabel}}:</td><td>{{getVolumeValue(series, item)}}</td></tr>\n </table>\n </div>\n </ng-template> \n <ng-template #scatterTooltip let-series=\"series\" let-item=\"item\">\n <div class='ui-chart-default-tooltip-content' *ngIf=\"item\" style=\"white-space:nowrap\"> \n <span [style.color]=\"getBrush(series)\">{{series.title}}</span>\n <br/>\n <span *ngIf=\"hasRadius(series)\">({{getXValue(series, item)}}, {{getYValue(series, item)}}), {{series.actualRadiusLabel}}: {{getRadiusValue(series, item)}}</span>\n <span *ngIf=\"!hasRadius(series)\">x: {{getXValue(series, item)}}</span>\n <br *ngIf=\"!hasRadius(series)\"/>\n <span *ngIf=\"!hasRadius(series)\">y: {{getYValue(series, item)}}</span>\n </div>\n </ng-template>\n <ng-template #polarTooltip let-series=\"series\" let-item=\"item\">\n <div class='ui-chart-default-tooltip-content' *ngIf=\"item\" style=\"white-space:nowrap\">\n <span>{{getAngleValue(series, item)}}</span>\n <br/>\n <span [style.color]=\"getBrush(series)\">{{series.title}}: {{getRadiusValue(series, item)}}</span> \n </div>\n </ng-template>\n <ng-template #radialTooltip let-series=\"series\" let-item=\"item\">\n <div class='ui-chart-default-tooltip-content' *ngIf=\"item\" style=\"white-space:nowrap\">\n <span>{{series.angleAxis.label}}</span>\n <br/>\n <span [style.color]=\"getBrush(series)\">{{series.title}}: {{getAnchoredValue(series, item)}}</span> \n </div>\n </ng-template> \n <ng-template #rangeTooltip let-series=\"series\" let-item=\"item\">\n <div class='ui-chart-default-tooltip-content' *ngIf=\"item\" style=\"white-space:nowrap\"> \n <span *ngIf=\"series.xAxis.isDateTime\">{{shortDate(series.xAxis.getItemValue(asAny(item), 'dateTimeMemberPath'))}}</span>\n <br *ngIf=\"series.xAxis.isDateTime\" />\n <span *ngIf=\"!series.xAxis.isDateTime && series.xAxis.label\">{{format(series.xAxis.getItemValue(asAny(item), 'label'))}}</span>\n <br *ngIf=\"!series.xAxis.isDateTime && series.xAxis.label\" />\n <span [style.color]=\"getBrush(series)\">{{series.title}}: </span>\n <span class=\"ui-tooltip-priority\">{{getLowValue(series, item)}} - {{getHighValue(series, item)}}</span>\n </div>\n </ng-template> \n <ng-template #shapeTooltip let-series=\"series\" let-item=\"item\">\n <div class='ui-chart-default-tooltip-content' *ngIf=\"item\" style=\"white-space:nowrap\"> \n <span [style.color]=\"getBrush(series)\">{{series.title}}</span>\n <br *ngIf=\"hasXY(series, item)\"/>\n <span *ngIf=\"hasXY(series, item)\">({{getXValue(series, item)}}, {{getYValue(series, item)}})</span>\n <br *ngIf=\"hasColor(series)\"/>\n <span *ngIf=\"hasColor(series)\">{{series.actualValueLabel}}: {{getColorValue(series, item)}}</span>\n <br *ngIf=\"hasValue(series)\"/>\n <span *ngIf=\"hasValue(series)\">{{series.actualValueLabel}}: {{item}}</span>\n </div>\n </ng-template>\n ", isInline: true, directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
return IgxDataChartDefaultTooltipsComponent;
}());
export { IgxDataChartDefaultTooltipsComponent };
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: IgxDataChartDefaultTooltipsComponent, decorators: [{
type: Component,
args: [{
selector: 'igx-data-chart-default-tooltips',
changeDetection: ChangeDetectionStrategy.OnPush,
template: "\n <ng-template #anchoredCategoryTooltip let-series=\"series\" let-item=\"item\">\n <div class='ui-chart-default-tooltip-content' *ngIf=\"item\" style=\"white-space:nowrap\"> \n <span *ngIf=\"series.xAxis.isDateTime\">{{shortDate(series.xAxis.getItemValue(asAny(item),'dateTimeMemberPath'))}}</span>\n <br *ngIf=\"series.xAxis.isDateTime\" />\n <span *ngIf=\"!series.xAxis.isDateTime && series.xAxis.label\">{{format(series.xAxis.getItemValue(asAny(item), 'label'))}}</span>\n <br *ngIf=\"!series.xAxis.isDateTime && series.xAxis.label\" />\n <span [style.color]=\"getBrush(series)\">{{series.title}}: </span>\n <span class=\"ui-tooltip-priority\">{{getAnchoredValue(series, item)}}</span>\n </div>\n </ng-template>\n <ng-template #anchoredVerticalCategoryTooltip let-series=\"series\" let-item=\"item\">\n <div class='ui-chart-default-tooltip-content' *ngIf=\"item\" style=\"white-space:nowrap\"> \n <span *ngIf=\"series.yAxis.isDateTime\">{{shortDate(series.yAxis.getItemValue(asAny(item), 'dateTimeMemberPath'))}}</span>\n <br *ngIf=\"series.yAxis.isDateTime\" />\n <span *ngIf=\"!series.yAxis.isDateTime && series.yAxis.label\">{{format(series.yAxis.getItemValue(asAny(item), 'label'))}}</span>\n <br *ngIf=\"!series.yAxis.isDateTime && series.yAxis.label\" />\n <span [style.color]=\"getBrush(series)\">{{series.title}}: </span>\n <span class=\"ui-tooltip-priority\">{{getAnchoredValue(series, item)}}</span>\n </div>\n </ng-template>\n <ng-template #financialTooltip let-series=\"series\" let-item=\"item\" let-itemLabel=\"itemLabel\">\n <div class='ui-chart-default-tooltip-content' *ngIf=\"item\" style=\"white-space:nowrap\"> \n <span *ngIf=\"series.xAxis.isDateTime\">{{itemLabel}}</span>\n <br *ngIf=\"series.xAxis.isDateTime\" />\n <span *ngIf=\"!series.xAxis.isDateTime && series.xAxis.label\">{{format(series.xAxis.getItemValue(asAny(item), 'label'))}}</span>\n <br *ngIf=\"!series.xAxis.isDateTime && series.xAxis.label\" />\n <span [style.color]=\"getBrush(series)\">{{series.title}}: </span>\n <table>\n <tr *ngIf=\"hasOpen(series)\"><td>{{series.actualOpenLabel}}:</td><td>{{getOpenValue(series, item)}}</td></tr>\n <tr *ngIf=\"hasHigh(series)\"><td>{{series.actualHighLabel}}:</td><td>{{getHighValue(series, item)}}</td></tr>\n <tr *ngIf=\"hasLow(series)\"><td>{{series.actualLowLabel}}:</td><td>{{getLowValue(series, item)}}</td></tr>\n <tr *ngIf=\"hasClose(series)\"><td>{{series.actualCloseLabel}}:</td><td>{{getCloseValue(series, item)}}</td></tr>\n <tr *ngIf=\"hasVolume(series)\"><td>{{series.actualVolumeLabel}}:</td><td>{{getVolumeValue(series, item)}}</td></tr>\n </table>\n </div>\n </ng-template> \n <ng-template #scatterTooltip let-series=\"series\" let-item=\"item\">\n <div class='ui-chart-default-tooltip-content' *ngIf=\"item\" style=\"white-space:nowrap\"> \n <span [style.color]=\"getBrush(series)\">{{series.title}}</span>\n <br/>\n <span *ngIf=\"hasRadius(series)\">({{getXValue(series, item)}}, {{getYValue(series, item)}}), {{series.actualRadiusLabel}}: {{getRadiusValue(series, item)}}</span>\n <span *ngIf=\"!hasRadius(series)\">x: {{getXValue(series, item)}}</span>\n <br *ngIf=\"!hasRadius(series)\"/>\n <span *ngIf=\"!hasRadius(series)\">y: {{getYValue(series, item)}}</span>\n </div>\n </ng-template>\n <ng-template #polarTooltip let-series=\"series\" let-item=\"item\">\n <div class='ui-chart-default-tooltip-content' *ngIf=\"item\" style=\"white-space:nowrap\">\n <span>{{getAngleValue(series, item)}}</span>\n <br/>\n <span [style.color]=\"getBrush(series)\">{{series.title}}: {{getRadiusValue(series, item)}}</span> \n </div>\n </ng-template>\n <ng-template #radialTooltip let-series=\"series\" let-item=\"item\">\n <div class='ui-chart-default-tooltip-content' *ngIf=\"item\" style=\"white-space:nowrap\">\n <span>{{series.angleAxis.label}}</span>\n <br/>\n <span [style.color]=\"getBrush(series)\">{{series.title}}: {{getAnchoredValue(series, item)}}</span> \n </div>\n </ng-template> \n <ng-template #rangeTooltip let-series=\"series\" let-item=\"item\">\n <div class='ui-chart-default-tooltip-content' *ngIf=\"item\" style=\"white-space:nowrap\"> \n <span *ngIf=\"series.xAxis.isDateTime\">{{shortDate(series.xAxis.getItemValue(asAny(item), 'dateTimeMemberPath'))}}</span>\n <br *ngIf=\"series.xAxis.isDateTime\" />\n <span *ngIf=\"!series.xAxis.isDateTime && series.xAxis.label\">{{format(series.xAxis.getItemValue(asAny(item), 'label'))}}</span>\n <br *ngIf=\"!series.xAxis.isDateTime && series.xAxis.label\" />\n <span [style.color]=\"getBrush(series)\">{{series.title}}: </span>\n <span class=\"ui-tooltip-priority\">{{getLowValue(series, item)}} - {{getHighValue(series, item)}}</span>\n </div>\n </ng-template> \n <ng-template #shapeTooltip let-series=\"series\" let-item=\"item\">\n <div class='ui-chart-default-tooltip-content' *ngIf=\"item\" style=\"white-space:nowrap\"> \n <span [style.color]=\"getBrush(series)\">{{series.title}}</span>\n <br *ngIf=\"hasXY(series, item)\"/>\n <span *ngIf=\"hasXY(series, item)\">({{getXValue(series, item)}}, {{getYValue(series, item)}})</span>\n <br *ngIf=\"hasColor(series)\"/>\n <span *ngIf=\"hasColor(series)\">{{series.actualValueLabel}}: {{getColorValue(series, item)}}</span>\n <br *ngIf=\"hasValue(series)\"/>\n <span *ngIf=\"hasValue(series)\">{{series.actualValueLabel}}: {{item}}</span>\n </div>\n </ng-template>\n ",
styles: []
}]
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { anchoredCategoryTooltip: [{
type: ViewChild,
args: ["anchoredCategoryTooltip", { static: true }]
}], anchoredVerticalCategoryTooltip: [{
type: ViewChild,
args: ["anchoredVerticalCategoryTooltip", { static: true }]
}], financialTooltip: [{
type: ViewChild,
args: ["financialTooltip", { static: true }]
}], polarTooltip: [{
type: ViewChild,
args: ["polarTooltip", { static: true }]
}], radialTooltip: [{
type: ViewChild,
args: ["radialTooltip", { static: true }]
}], rangeTooltip: [{
type: ViewChild,
args: ["rangeTooltip", { static: true }]
}], scatterTooltip: [{
type: ViewChild,
args: ["scatterTooltip", { static: true }]
}], shapeTooltip: [{
type: ViewChild,
args: ["shapeTooltip", { static: true }]
}], onContentReady: [{
type: Output
}] } });