igniteui-webcomponents-charts
Version:
Ignite UI Web Components charting components for building rich data visualizations using TypeScript APIs.
222 lines (221 loc) • 10.9 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 { TypeRegistrar } from "igniteui-webcomponents-core";
import { html } from "igniteui-webcomponents-core";
export class IgcDataChartDefaultTooltipsComponent {
constructor() {
this.anchoredCategoryTooltip = (context) => {
let ret = context ? html `
<div class='ui-chart-default-tooltip-content'>
${context.series.xAxis.isDateTime ? html `<span>${this.shortDate(context.series.xAxis.getItemValue(this.asAny(context.item), 'dateTimeMemberPath'))}</span>` : html ``}
${context.series.xAxis.isDateTime ? html `<br />` : html ``}
${!context.series.xAxis.isDateTime && context.series.xAxis.label ? html `<span>${this.format(context.series.xAxis.getItemValue(this.asAny(context.item), 'label'))}</span>` : html ``}
${!context.series.xAxis.isDateTime && context.series.xAxis.label ? html `<br />` : html ``}
<span style="color: ${this.getBrush(context.series)}">${context.series.title}: </span>
<span class="ui-tooltip-priority">${this.getAnchoredValue(context.series, context.item)}</span>
</div>` : html ``;
return ret;
};
this.anchoredRadialTooltip = (context) => {
let ret = context ? html `
<div class='ui-chart-default-tooltip-content'>
${context.series.angleAxis.isDateTime ? html `<span>${this.shortDate(context.series.angleAxis.getItemValue(this.asAny(context.item), 'dateTimeMemberPath'))}</span>` : html ``}
${context.series.angleAxis.isDateTime ? html `<br />` : html ``}
${!context.series.angleAxis.isDateTime && context.series.angleAxis.label ? html `<span>${this.format(context.series.angleAxis.getItemValue(this.asAny(context.item), 'label'))}</span>` : html ``}
${!context.series.angleAxis.isDateTime && context.series.angleAxis.label ? html `<br />` : html ``}
<span style="color: ${this.getBrush(context.series)}">${context.series.title}: </span>
<span class="ui-tooltip-priority">${this.getAnchoredValue(context.series, context.item)}</span>
</div>` : html ``;
return ret;
};
this.rangeCategoryTooltip = (context) => {
let ret = context ? html `
<div class='ui-chart-default-tooltip-content'>
${context.series.xAxis.isDateTime ? html `<span>${this.shortDate(context.series.xAxis.getItemValue(this.asAny(context.item), 'dateTimeMemberPath'))}</span>` : html ``}
${context.series.xAxis.isDateTime ? html `<br />` : html ``}
${!context.series.xAxis.isDateTime && context.series.xAxis.label ? html `<span>${this.format(context.series.xAxis.getItemValue(this.asAny(context.item), 'label'))}</span>` : html ``}
${!context.series.xAxis.isDateTime && context.series.xAxis.label ? html `<br />` : html ``}
<span style="color: ${this.getBrush(context.series)}">${context.series.title}: </span>
<span class="ui-tooltip-priority">${this.getLowValue(context.series, context.item)} - </span>
<span class="ui-tooltip-priority">${this.getHighValue(context.series, context.item)}</span>
</div>` : html ``;
return ret;
};
this.financialTooltip = (context) => {
let ret = context ? html `
<div class='ui-chart-default-tooltip-content'>
${context.series.xAxis.isDateTime ? html `<span>${context.itemLabel}</span>` : html ``}
${context.series.xAxis.isDateTime ? html `<br />` : html ``}
${!context.series.xAxis.isDateTime && context.series.xAxis.label ? html `<span>${this.format(context.series.xAxis.getItemValue(this.asAny(context.item), 'label'))}</span>` : html ``}
${!context.series.xAxis.isDateTime && context.series.xAxis.label ? html `<br />` : html ``}
<span style="color: ${this.getBrush(context.series)}">${context.series.title}: </span>
<table>
${this.hasOpen(context.series) ? html `<tr><td>${context.series.actualOpenLabel}:</td><td>${this.getOpenValue(context.series, context.item)}</td></tr>` : html ``}
${this.hasHigh(context.series) ? html `<tr><td>${context.series.actualHighLabel}:</td><td>${this.getHighValue(context.series, context.item)}</td></tr>` : html ``}
${this.hasLow(context.series) ? html `<tr><td>${context.series.actualLowLabel}:</td><td>${this.getLowValue(context.series, context.item)}</td></tr>` : html ``}
${this.hasClose(context.series) ? html `<tr><td>${context.series.actualCloseLabel}:</td><td>${this.getCloseValue(context.series, context.item)}</td></tr>` : html ``}
${this.hasVolume(context.series) ? html `<tr><td>${context.series.actualVolumeLabel}:</td><td>${this.getVolumeValue(context.series, context.item)}</td></tr>` : html ``}
</table>
</div>` : html ``;
return ret;
};
this.userAnnotationTooltip = (context) => {
let ret = context ? html `
<div class='ui-chart-default-tooltip-content'>
<div class='ui-chart-user-annotation-tooltip-main-content'></div>
<div class='ui-chart-user-annotation-tooltip-template-content'>
</div>
</div>` : html ``;
return ret;
};
this.afterContentInit();
}
ensureDefaultTooltip(series) {
if (series.isCategory &&
!series.isVertical &&
!series.isFinancial &&
!series.isRange) {
if (series.showDefaultTooltip) {
series.tooltipTemplate = this.anchoredCategoryTooltip;
}
else {
if (series.tooltipTemplate === this.anchoredCategoryTooltip) {
series.tooltipTemplate = null;
}
}
}
if (series.isRadial) {
if (series.showDefaultTooltip) {
series.tooltipTemplate = this.anchoredRadialTooltip;
}
else {
if (series.tooltipTemplate === this.anchoredRadialTooltip) {
series.tooltipTemplate = null;
}
}
}
if (series.isCategory &&
!series.isVertical &&
!series.isFinancial &&
series.isRange) {
if (series.showDefaultTooltip) {
series.tooltipTemplate = this.rangeCategoryTooltip;
}
else {
if (series.tooltipTemplate === this.rangeCategoryTooltip) {
series.tooltipTemplate = null;
}
}
}
if (series.isFinancial) {
if (series.showDefaultTooltip) {
series.tooltipTemplate = this.financialTooltip;
}
else {
if (series.tooltipTemplate === this.financialTooltip) {
series.tooltipTemplate = null;
}
}
}
if (series.isUserAnnotationLayer) {
if (series.showDefaultTooltip) {
series.tooltipTemplate = this.userAnnotationTooltip;
}
else {
if (series.tooltipTemplate === this.userAnnotationTooltip) {
series.tooltipTemplate = null;
}
}
}
}
format(value) {
if (value == undefined || value == null) {
return "";
}
if (value.getTime) {
return this.shortDate(value);
}
return value.toString();
}
shortDate(item) {
if (item == undefined || item == null) {
return "";
}
return item.toLocaleDateString() + " " + item.toLocaleTimeString();
}
hasOpen(series) {
return series.openMemberPath;
}
getOpenValue(series, item) {
return this.getItemValue(series, item, "openMemberPath", series.openMemberPath);
}
hasHigh(series) {
return series.highMemberPath;
}
getHighValue(series, item) {
return this.getItemValue(series, item, "highMemberPath", series.highMemberPath);
}
hasLow(series) {
return series.lowMemberPath;
}
getLowValue(series, item) {
return this.getItemValue(series, item, "lowMemberPath", series.lowMemberPath);
}
hasClose(series) {
return series.closeMemberPath;
}
getCloseValue(series, item) {
return this.getItemValue(series, item, "closeMemberPath", series.closeMemberPath);
}
hasVolume(series) {
return series.volumeMemberPath;
}
getVolumeValue(series, item) {
return this.getItemValue(series, item, "volumeMemberPath", series.volumeMemberPath);
}
getAnchoredValue(series, item) {
return this.getItemValue(series, item, "valueMemberPath", series.valueMemberPath);
}
getXValue(series, item) {
return this.getItemValue(series, item, "xMemberPath", series.xMemberPath);
}
getYValue(series, item) {
return this.getItemValue(series, item, "yMemberPath", series.yMemberPath);
}
hasRadius(series) {
return series.radiusMemberPath !== undefined;
}
getRadiusValue(series, item) {
return this.getItemValue(series, item, "radiusMemberPath", series.radiusMemberPath);
}
getAngleValue(series, item) {
return this.getItemValue(series, item, "angleMemberPath", series.angleMemberPath);
}
hasValue(series) {
return series.valueMemberPath;
}
getItemValue(series, item, memberPath, memberPathValue) {
return series.getItemValue(item, memberPath);
}
getValue(series, item) {
return this.getItemValue(series, item, "valueMemberPath", series.valueMemberPath);
}
getBrush(series) {
return series.safeActualBrush;
}
asAny(item) {
return item;
}
static register() {
TypeRegistrar.registerCons("IgcDataChartDefaultTooltipsComponent", IgcDataChartDefaultTooltipsComponent);
}
afterContentInit() {
if (this.onContentReady) {
this.onContentReady();
}
}
}