igniteui-angular-charts/esm2015/lib/igx-data-chart-default-tooltips-component.js

Ignite UI Angular charting components for building rich data visualizations for modern web apps.

/*
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";
export let IgxDataChartDefaultTooltipsComponent = /*@__PURE__*/ (() => {
    class IgxDataChartDefaultTooltipsComponent {
        constructor(_changeDetectorRef) {
            this._changeDetectorRef = _changeDetectorRef;
            this.onContentReady = new EventEmitter();
        }
        ensureDefaultTooltip(series) {
            if (series.isUserAnnotationLayer) {
                if (series.showDefaultTooltip) {
                    series.tooltipTemplate = this.userAnnotationTooltip;
                }
                else {
                    if (series.tooltipTemplate === this.userAnnotationTooltip) {
                        series.tooltipTemplate = null;
                    }
                }
            }
            else 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) {
                let 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;
                    }
                }
            }
        }
        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;
        }
        hasXY(series, item) {
            return series.xMemberPath && series.yMemberPath && item[series.xMemberPath] && item[series.yMemberPath];
        }
        hasColor(series) {
            return series.colorMemberPath;
        }
        getColorValue(series, item) {
            return this.getItemValue(series, item, "colorMemberPath", series.colorMemberPath);
        }
        asAny(item) {
            return item;
        }
        static register() {
            TypeRegistrar.registerCons("IgxDataChartDefaultTooltipsComponent", IgxDataChartDefaultTooltipsComponent);
        }
        ngAfterContentInit() {
            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 }, { propertyName: "userAnnotationTooltip", first: true, predicate: ["userAnnotationTooltip"], descendants: true, static: true }], ngImport: i0, template: `
    <ng-template #anchoredCategoryTooltip let-series="series" let-item="item">
        <div class='ui-chart-default-tooltip-content' *ngIf="item" style="white-space:nowrap">            
            <span *ngIf="series.xAxis.isDateTime">{{shortDate(series.xAxis.getItemValue(asAny(item),'dateTimeMemberPath'))}}</span>
            <br *ngIf="series.xAxis.isDateTime" />
            <span *ngIf="!series.xAxis.isDateTime && series.xAxis.label">{{format(series.xAxis.getItemValue(asAny(item), 'label'))}}</span>
            <br *ngIf="!series.xAxis.isDateTime && series.xAxis.label" />
            <span [style.color]="getBrush(series)">{{series.title}}: </span>
            <span class="ui-tooltip-priority">{{getAnchoredValue(series, item)}}</span>
        </div>
    </ng-template>
    <ng-template #anchoredVerticalCategoryTooltip let-series="series" let-item="item">
        <div class='ui-chart-default-tooltip-content' *ngIf="item" style="white-space:nowrap">            
            <span *ngIf="series.yAxis.isDateTime">{{shortDate(series.yAxis.getItemValue(asAny(item), 'dateTimeMemberPath'))}}</span>
            <br *ngIf="series.yAxis.isDateTime" />
            <span *ngIf="!series.yAxis.isDateTime && series.yAxis.label">{{format(series.yAxis.getItemValue(asAny(item), 'label'))}}</span>
            <br *ngIf="!series.yAxis.isDateTime && series.yAxis.label" />
            <span [style.color]="getBrush(series)">{{series.title}}: </span>
            <span class="ui-tooltip-priority">{{getAnchoredValue(series, item)}}</span>
        </div>
    </ng-template>
    <ng-template #financialTooltip let-series="series" let-item="item" let-itemLabel="itemLabel">
        <div class='ui-chart-default-tooltip-content' *ngIf="item" style="white-space:nowrap">            
            <span *ngIf="series.xAxis.isDateTime">{{itemLabel}}</span>
            <br *ngIf="series.xAxis.isDateTime" />
            <span *ngIf="!series.xAxis.isDateTime && series.xAxis.label">{{format(series.xAxis.getItemValue(asAny(item), 'label'))}}</span>
            <br *ngIf="!series.xAxis.isDateTime && series.xAxis.label" />
            <span [style.color]="getBrush(series)">{{series.title}}: </span>
            <table>
                <tr *ngIf="hasOpen(series)"><td>{{series.actualOpenLabel}}:</td><td>{{getOpenValue(series, item)}}</td></tr>
                <tr *ngIf="hasHigh(series)"><td>{{series.actualHighLabel}}:</td><td>{{getHighValue(series, item)}}</td></tr>
                <tr *ngIf="hasLow(series)"><td>{{series.actualLowLabel}}:</td><td>{{getLowValue(series, item)}}</td></tr>
                <tr *ngIf="hasClose(series)"><td>{{series.actualCloseLabel}}:</td><td>{{getCloseValue(series, item)}}</td></tr>
                <tr *ngIf="hasVolume(series)"><td>{{series.actualVolumeLabel}}:</td><td>{{getVolumeValue(series, item)}}</td></tr>
            </table>
        </div>
    </ng-template>    
    <ng-template #scatterTooltip let-series="series" let-item="item">
        <div class='ui-chart-default-tooltip-content' *ngIf="item" style="white-space:nowrap">   
            <span [style.color]="getBrush(series)">{{series.title}}</span>
            <br/>
            <span *ngIf="hasRadius(series)">({{getXValue(series, item)}}, {{getYValue(series, item)}}), {{series.actualRadiusLabel}}: {{getRadiusValue(series, item)}}</span>
            <span *ngIf="!hasRadius(series)">x: {{getXValue(series, item)}}</span>
            <br *ngIf="!hasRadius(series)"/>
            <span *ngIf="!hasRadius(series)">y: {{getYValue(series, item)}}</span>
        </div>
    </ng-template>
    <ng-template #polarTooltip let-series="series" let-item="item">
        <div class='ui-chart-default-tooltip-content' *ngIf="item" style="white-space:nowrap">
            <span>{{getAngleValue(series, item)}}</span>
            <br/>
            <span [style.color]="getBrush(series)">{{series.title}}: {{getRadiusValue(series, item)}}</span> 
        </div>
    </ng-template>
    <ng-template #radialTooltip let-series="series" let-item="item">
        <div class='ui-chart-default-tooltip-content' *ngIf="item" style="white-space:nowrap">
            <span>{{series.angleAxis.label}}</span>
            <br/>
            <span [style.color]="getBrush(series)">{{series.title}}: {{getAnchoredValue(series, item)}}</span> 
        </div>
    </ng-template>    
    <ng-template #rangeTooltip let-series="series" let-item="item">
    <div class='ui-chart-default-tooltip-content' *ngIf="item" style="white-space:nowrap">            
        <span *ngIf="series.xAxis.isDateTime">{{shortDate(series.xAxis.getItemValue(asAny(item), 'dateTimeMemberPath'))}}</span>
        <br *ngIf="series.xAxis.isDateTime" />
        <span *ngIf="!series.xAxis.isDateTime && series.xAxis.label">{{format(series.xAxis.getItemValue(asAny(item), 'label'))}}</span>
        <br *ngIf="!series.xAxis.isDateTime && series.xAxis.label" />
        <span [style.color]="getBrush(series)">{{series.title}}: </span>
        <span class="ui-tooltip-priority">{{getLowValue(series, item)}} - {{getHighValue(series, item)}}</span>
    </div>
    </ng-template>    
    <ng-template #shapeTooltip let-series="series" let-item="item">
        <div class='ui-chart-default-tooltip-content' *ngIf="item" style="white-space:nowrap">   
            <span [style.color]="getBrush(series)">{{series.title}}</span>
            <br *ngIf="hasXY(series, item)"/>
            <span *ngIf="hasXY(series, item)">({{getXValue(series, item)}}, {{getYValue(series, item)}})</span>
            <br *ngIf="hasColor(series)"/>
            <span *ngIf="hasColor(series)">{{series.actualValueLabel}}: {{getColorValue(series, item)}}</span>
            <br *ngIf="hasValue(series)"/>
            <span *ngIf="hasValue(series)">{{series.actualValueLabel}}: {{item}}</span>
        </div>
    </ng-template>
    <ng-template #userAnnotationTooltip let-series="series" let-item="item">
    <div class='ui-chart-default-tooltip-content' *ngIf="item" style="white-space:nowrap">
        <div class='ui-chart-user-annotation-tooltip-main-content'></div>                
        <div class='ui-chart-user-annotation-tooltip-template-content'></div>
    </div>
    </ng-template>
  `, isInline: true, directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
    return 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: `
    <ng-template #anchoredCategoryTooltip let-series="series" let-item="item">
        <div class='ui-chart-default-tooltip-content' *ngIf="item" style="white-space:nowrap">            
            <span *ngIf="series.xAxis.isDateTime">{{shortDate(series.xAxis.getItemValue(asAny(item),'dateTimeMemberPath'))}}</span>
            <br *ngIf="series.xAxis.isDateTime" />
            <span *ngIf="!series.xAxis.isDateTime && series.xAxis.label">{{format(series.xAxis.getItemValue(asAny(item), 'label'))}}</span>
            <br *ngIf="!series.xAxis.isDateTime && series.xAxis.label" />
            <span [style.color]="getBrush(series)">{{series.title}}: </span>
            <span class="ui-tooltip-priority">{{getAnchoredValue(series, item)}}</span>
        </div>
    </ng-template>
    <ng-template #anchoredVerticalCategoryTooltip let-series="series" let-item="item">
        <div class='ui-chart-default-tooltip-content' *ngIf="item" style="white-space:nowrap">            
            <span *ngIf="series.yAxis.isDateTime">{{shortDate(series.yAxis.getItemValue(asAny(item), 'dateTimeMemberPath'))}}</span>
            <br *ngIf="series.yAxis.isDateTime" />
            <span *ngIf="!series.yAxis.isDateTime && series.yAxis.label">{{format(series.yAxis.getItemValue(asAny(item), 'label'))}}</span>
            <br *ngIf="!series.yAxis.isDateTime && series.yAxis.label" />
            <span [style.color]="getBrush(series)">{{series.title}}: </span>
            <span class="ui-tooltip-priority">{{getAnchoredValue(series, item)}}</span>
        </div>
    </ng-template>
    <ng-template #financialTooltip let-series="series" let-item="item" let-itemLabel="itemLabel">
        <div class='ui-chart-default-tooltip-content' *ngIf="item" style="white-space:nowrap">            
            <span *ngIf="series.xAxis.isDateTime">{{itemLabel}}</span>
            <br *ngIf="series.xAxis.isDateTime" />
            <span *ngIf="!series.xAxis.isDateTime && series.xAxis.label">{{format(series.xAxis.getItemValue(asAny(item), 'label'))}}</span>
            <br *ngIf="!series.xAxis.isDateTime && series.xAxis.label" />
            <span [style.color]="getBrush(series)">{{series.title}}: </span>
            <table>
                <tr *ngIf="hasOpen(series)"><td>{{series.actualOpenLabel}}:</td><td>{{getOpenValue(series, item)}}</td></tr>
                <tr *ngIf="hasHigh(series)"><td>{{series.actualHighLabel}}:</td><td>{{getHighValue(series, item)}}</td></tr>
                <tr *ngIf="hasLow(series)"><td>{{series.actualLowLabel}}:</td><td>{{getLowValue(series, item)}}</td></tr>
                <tr *ngIf="hasClose(series)"><td>{{series.actualCloseLabel}}:</td><td>{{getCloseValue(series, item)}}</td></tr>
                <tr *ngIf="hasVolume(series)"><td>{{series.actualVolumeLabel}}:</td><td>{{getVolumeValue(series, item)}}</td></tr>
            </table>
        </div>
    </ng-template>    
    <ng-template #scatterTooltip let-series="series" let-item="item">
        <div class='ui-chart-default-tooltip-content' *ngIf="item" style="white-space:nowrap">   
            <span [style.color]="getBrush(series)">{{series.title}}</span>
            <br/>
            <span *ngIf="hasRadius(series)">({{getXValue(series, item)}}, {{getYValue(series, item)}}), {{series.actualRadiusLabel}}: {{getRadiusValue(series, item)}}</span>
            <span *ngIf="!hasRadius(series)">x: {{getXValue(series, item)}}</span>
            <br *ngIf="!hasRadius(series)"/>
            <span *ngIf="!hasRadius(series)">y: {{getYValue(series, item)}}</span>
        </div>
    </ng-template>
    <ng-template #polarTooltip let-series="series" let-item="item">
        <div class='ui-chart-default-tooltip-content' *ngIf="item" style="white-space:nowrap">
            <span>{{getAngleValue(series, item)}}</span>
            <br/>
            <span [style.color]="getBrush(series)">{{series.title}}: {{getRadiusValue(series, item)}}</span> 
        </div>
    </ng-template>
    <ng-template #radialTooltip let-series="series" let-item="item">
        <div class='ui-chart-default-tooltip-content' *ngIf="item" style="white-space:nowrap">
            <span>{{series.angleAxis.label}}</span>
            <br/>
            <span [style.color]="getBrush(series)">{{series.title}}: {{getAnchoredValue(series, item)}}</span> 
        </div>
    </ng-template>    
    <ng-template #rangeTooltip let-series="series" let-item="item">
    <div class='ui-chart-default-tooltip-content' *ngIf="item" style="white-space:nowrap">            
        <span *ngIf="series.xAxis.isDateTime">{{shortDate(series.xAxis.getItemValue(asAny(item), 'dateTimeMemberPath'))}}</span>
        <br *ngIf="series.xAxis.isDateTime" />
        <span *ngIf="!series.xAxis.isDateTime && series.xAxis.label">{{format(series.xAxis.getItemValue(asAny(item), 'label'))}}</span>
        <br *ngIf="!series.xAxis.isDateTime && series.xAxis.label" />
        <span [style.color]="getBrush(series)">{{series.title}}: </span>
        <span class="ui-tooltip-priority">{{getLowValue(series, item)}} - {{getHighValue(series, item)}}</span>
    </div>
    </ng-template>    
    <ng-template #shapeTooltip let-series="series" let-item="item">
        <div class='ui-chart-default-tooltip-content' *ngIf="item" style="white-space:nowrap">   
            <span [style.color]="getBrush(series)">{{series.title}}</span>
            <br *ngIf="hasXY(series, item)"/>
            <span *ngIf="hasXY(series, item)">({{getXValue(series, item)}}, {{getYValue(series, item)}})</span>
            <br *ngIf="hasColor(series)"/>
            <span *ngIf="hasColor(series)">{{series.actualValueLabel}}: {{getColorValue(series, item)}}</span>
            <br *ngIf="hasValue(series)"/>
            <span *ngIf="hasValue(series)">{{series.actualValueLabel}}: {{item}}</span>
        </div>
    </ng-template>
    <ng-template #userAnnotationTooltip let-series="series" let-item="item">
    <div class='ui-chart-default-tooltip-content' *ngIf="item" style="white-space:nowrap">
        <div class='ui-chart-user-annotation-tooltip-main-content'></div>                
        <div class='ui-chart-user-annotation-tooltip-template-content'></div>
    </div>
    </ng-template>
  `,
                    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 }]
            }], userAnnotationTooltip: [{
                type: ViewChild,
                args: ["userAnnotationTooltip", { static: true }]
            }], onContentReady: [{
                type: Output
            }] } });