@covalent/echarts
Version:
Teradata UI Platform Echarts Module
334 lines (328 loc) • 15.1 kB
JavaScript
import * as i0 from '@angular/core';
import { Directive, inject, ChangeDetectorRef, ElementRef, TemplateRef, ChangeDetectionStrategy, Component, ViewChild, ContentChild, Input, NgModule } from '@angular/core';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import { TdChartOptionsService, assignDefined, TdSeriesDirective } from '@covalent/echarts/base';
const _c0$1 = ["tooltipContent"];
function TdChartTooltipComponent_ng_template_0_Template(rf, ctx) { }
class TdTooltipContext {
$implicit;
ticket;
}
class TdChartTooltipFormatterDirective {
static ɵfac = function TdChartTooltipFormatterDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TdChartTooltipFormatterDirective)(); };
static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: TdChartTooltipFormatterDirective, selectors: [["ng-template", "tdTooltipFormatter", ""]] });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdChartTooltipFormatterDirective, [{
type: Directive,
args: [{
selector: 'ng-template[tdTooltipFormatter]',
}]
}], null, null); })();
class TdChartTooltipComponent {
_changeDetectorRef = inject(ChangeDetectorRef);
_elementRef = inject(ElementRef);
_optionsService = inject(TdChartOptionsService);
_state = {};
_context = new TdTooltipContext();
config = {};
show = true;
trigger = 'axis';
axisPointer;
showContent = true;
alwaysShowContent = false;
triggerOn = 'mousemove|click';
showDelay = 0;
hideDelay = 0;
enterable = false;
renderMode;
confine = false;
transitionDuration = 0.5;
position; // series
formatter; // series
backgroundColor = 'rgba(50,50,50,0.7)'; // series
borderColor = '#333'; // series
borderWidth = 0; // series
padding = 5; // series
textStyle = {
// series
color: '#FFF',
};
extraCssText; // series
formatterTemplate;
fullTemplate;
ngOnChanges() {
this._setOptions();
}
ngOnDestroy() {
this._removeOption();
}
_setOptions() {
const config = assignDefined(this._state, {
show: this.show,
trigger: this.trigger,
axisPointer: this.axisPointer,
showContent: this.showContent,
alwaysShowContent: this.alwaysShowContent,
triggerOn: this.triggerOn,
showDelay: this.showDelay,
hideDelay: this.hideDelay,
enterable: this.enterable,
confine: this.confine,
transitionDuration: this.transitionDuration,
position: this.position,
formatter: this.formatter
? this.formatter
: this.formatterTemplate
? this._formatter()
: undefined,
backgroundColor: this.backgroundColor,
borderColor: this.borderColor,
borderWidth: this.borderWidth,
padding: this.padding,
textStyle: this.textStyle,
extraCssText: this.extraCssText,
}, this.config ? this.config : {});
// set tooltip configuration in parent chart and render new configurations
this._optionsService.setOption('tooltip', config);
}
_removeOption() {
this._optionsService.clearOption('tooltip');
}
_formatter() {
return (params, ticket, callback) => {
this._context = {
$implicit: params,
ticket,
};
// timeout set since we need to set the HTML at the end of the angular lifecycle when
// the tooltip delay is more than 0
setTimeout(() => {
callback(ticket, this._elementRef.nativeElement.innerHTML);
});
this._changeDetectorRef.markForCheck();
return this._elementRef.nativeElement.innerHTML;
};
}
static ɵfac = function TdChartTooltipComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TdChartTooltipComponent)(); };
static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TdChartTooltipComponent, selectors: [["td-chart-tooltip"]], contentQueries: function TdChartTooltipComponent_ContentQueries(rf, ctx, dirIndex) { if (rf & 1) {
i0.ɵɵcontentQuery(dirIndex, TdChartTooltipFormatterDirective, 7, TemplateRef);
} if (rf & 2) {
let _t;
i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.formatterTemplate = _t.first);
} }, viewQuery: function TdChartTooltipComponent_Query(rf, ctx) { if (rf & 1) {
i0.ɵɵviewQuery(_c0$1, 7);
} if (rf & 2) {
let _t;
i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.fullTemplate = _t.first);
} }, inputs: { config: "config", show: "show", trigger: "trigger", axisPointer: "axisPointer", showContent: "showContent", alwaysShowContent: "alwaysShowContent", triggerOn: "triggerOn", showDelay: "showDelay", hideDelay: "hideDelay", enterable: "enterable", renderMode: "renderMode", confine: "confine", transitionDuration: "transitionDuration", position: "position", formatter: "formatter", backgroundColor: "backgroundColor", borderColor: "borderColor", borderWidth: "borderWidth", padding: "padding", textStyle: "textStyle", extraCssText: "extraCssText" }, features: [i0.ɵɵNgOnChangesFeature], decls: 2, vars: 2, consts: [["tooltipContent", ""], [3, "ngTemplateOutlet", "ngTemplateOutletContext"]], template: function TdChartTooltipComponent_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵtemplate(0, TdChartTooltipComponent_ng_template_0_Template, 0, 0, "ng-template", 1, 0, i0.ɵɵtemplateRefExtractor);
} if (rf & 2) {
i0.ɵɵproperty("ngTemplateOutlet", ctx.formatterTemplate)("ngTemplateOutletContext", ctx._context);
} }, dependencies: [CommonModule, i1.NgTemplateOutlet], encapsulation: 2, changeDetection: 0 });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdChartTooltipComponent, [{
type: Component,
args: [{ selector: 'td-chart-tooltip', imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template\n #tooltipContent\n [ngTemplateOutlet]=\"formatterTemplate\"\n [ngTemplateOutletContext]=\"_context\"\n></ng-template>\n" }]
}], null, { config: [{
type: Input
}], show: [{
type: Input
}], trigger: [{
type: Input
}], axisPointer: [{
type: Input
}], showContent: [{
type: Input
}], alwaysShowContent: [{
type: Input
}], triggerOn: [{
type: Input
}], showDelay: [{
type: Input
}], hideDelay: [{
type: Input
}], enterable: [{
type: Input
}], renderMode: [{
type: Input
}], confine: [{
type: Input
}], transitionDuration: [{
type: Input
}], position: [{
type: Input
}], formatter: [{
type: Input
}], backgroundColor: [{
type: Input
}], borderColor: [{
type: Input
}], borderWidth: [{
type: Input
}], padding: [{
type: Input
}], textStyle: [{
type: Input
}], extraCssText: [{
type: Input
}], formatterTemplate: [{
type: ContentChild,
args: [TdChartTooltipFormatterDirective, {
read: TemplateRef,
static: true,
}]
}], fullTemplate: [{
type: ViewChild,
args: ['tooltipContent', { static: true }]
}] }); })();
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TdChartTooltipComponent, { className: "TdChartTooltipComponent", filePath: "tooltip.component.ts", lineNumber: 40 }); })();
const _c0 = ["tooltipContent"];
function TdSeriesTooltipComponent_ng_template_0_Template(rf, ctx) { }
class TdSeriesTooltipComponent {
_changeDetectorRef = inject(ChangeDetectorRef);
_elementRef = inject(ElementRef);
_seriesComponent = inject(TdSeriesDirective);
_state = {};
_context = new TdTooltipContext();
config;
formatter;
// Parent tooltip trigger must be set to 'item' to render these properties
position;
backgroundColor = 'rgba(50,50,50,0.7)';
borderColor = '#333';
borderWidth = 0;
padding = 5;
textStyle = {
color: '#FFF',
};
extraCssText;
formatterTemplate;
fullTemplate;
ngOnChanges() {
this._setOptions();
}
ngOnDestroy() {
this._removeOption();
}
_setOptions() {
const config = assignDefined(this._state, {
position: this.position,
backgroundColor: this.backgroundColor,
borderColor: this.borderColor,
borderWidth: this.borderWidth,
padding: this.padding,
textStyle: this.textStyle,
extraCssText: this.extraCssText,
formatter: this.formatter
? this.formatter
: this.formatterTemplate
? this._formatter()
: undefined,
}, this.config ? this.config : {});
// set series tooltip configuration in parent chart and render new configurations
this._seriesComponent.setStateOption('tooltip', config);
}
/**
* Formatter for tooltip
*
*/
_formatter() {
return (params, ticket, callback) => {
this._context = {
$implicit: params,
ticket,
};
// timeout set since we need to set the HTML at the end of the angular lifecycle when
// the tooltip delay is more than 0
setTimeout(() => {
callback(ticket, this._elementRef.nativeElement.innerHTML);
});
this._changeDetectorRef.markForCheck();
return this._elementRef.nativeElement.innerHTML;
};
}
_removeOption() {
this._seriesComponent.removeStateOption('tooltip');
}
static ɵfac = function TdSeriesTooltipComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TdSeriesTooltipComponent)(); };
static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TdSeriesTooltipComponent, selectors: [["td-chart-series-tooltip"]], contentQueries: function TdSeriesTooltipComponent_ContentQueries(rf, ctx, dirIndex) { if (rf & 1) {
i0.ɵɵcontentQuery(dirIndex, TdChartTooltipFormatterDirective, 7, TemplateRef);
} if (rf & 2) {
let _t;
i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.formatterTemplate = _t.first);
} }, viewQuery: function TdSeriesTooltipComponent_Query(rf, ctx) { if (rf & 1) {
i0.ɵɵviewQuery(_c0, 7);
} if (rf & 2) {
let _t;
i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.fullTemplate = _t.first);
} }, inputs: { config: "config", formatter: "formatter", position: "position", backgroundColor: "backgroundColor", borderColor: "borderColor", borderWidth: "borderWidth", padding: "padding", textStyle: "textStyle", extraCssText: "extraCssText" }, features: [i0.ɵɵNgOnChangesFeature], decls: 2, vars: 2, consts: [["tooltipContent", ""], [3, "ngTemplateOutlet", "ngTemplateOutletContext"]], template: function TdSeriesTooltipComponent_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵtemplate(0, TdSeriesTooltipComponent_ng_template_0_Template, 0, 0, "ng-template", 1, 0, i0.ɵɵtemplateRefExtractor);
} if (rf & 2) {
i0.ɵɵproperty("ngTemplateOutlet", ctx.formatterTemplate)("ngTemplateOutletContext", ctx._context);
} }, dependencies: [CommonModule, i1.NgTemplateOutlet], encapsulation: 2, changeDetection: 0 });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdSeriesTooltipComponent, [{
type: Component,
args: [{ selector: 'td-chart-series-tooltip', imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template\n #tooltipContent\n [ngTemplateOutlet]=\"formatterTemplate\"\n [ngTemplateOutletContext]=\"_context\"\n></ng-template>\n" }]
}], null, { config: [{
type: Input
}], formatter: [{
type: Input
}], position: [{
type: Input
}], backgroundColor: [{
type: Input
}], borderColor: [{
type: Input
}], borderWidth: [{
type: Input
}], padding: [{
type: Input
}], textStyle: [{
type: Input
}], extraCssText: [{
type: Input
}], formatterTemplate: [{
type: ContentChild,
args: [TdChartTooltipFormatterDirective, {
read: TemplateRef,
static: true,
}]
}], fullTemplate: [{
type: ViewChild,
args: ['tooltipContent', { static: true }]
}] }); })();
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TdSeriesTooltipComponent, { className: "TdSeriesTooltipComponent", filePath: "series-tooltip.component.ts", lineNumber: 29 }); })();
const TOOLTIP_MODULE_COMPONENTS = [
TdChartTooltipComponent,
TdChartTooltipFormatterDirective,
TdSeriesTooltipComponent,
];
/**
* @deprecated This module is deprecated and will be removed in future versions.
* Please migrate to using standalone components as soon as possible.
*/
class CovalentTooltipEchartsModule {
static ɵfac = function CovalentTooltipEchartsModule_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || CovalentTooltipEchartsModule)(); };
static ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: CovalentTooltipEchartsModule });
static ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [TdChartTooltipComponent,
TdSeriesTooltipComponent] });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CovalentTooltipEchartsModule, [{
type: NgModule,
args: [{
imports: [TOOLTIP_MODULE_COMPONENTS],
exports: [TOOLTIP_MODULE_COMPONENTS],
}]
}], null, null); })();
(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(CovalentTooltipEchartsModule, { imports: [TdChartTooltipComponent,
TdChartTooltipFormatterDirective,
TdSeriesTooltipComponent], exports: [TdChartTooltipComponent,
TdChartTooltipFormatterDirective,
TdSeriesTooltipComponent] }); })();
/**
* Generated bundle index. Do not edit.
*/
export { CovalentTooltipEchartsModule, TOOLTIP_MODULE_COMPONENTS, TdChartTooltipComponent, TdChartTooltipFormatterDirective, TdSeriesTooltipComponent, TdTooltipContext };
//# sourceMappingURL=covalent-echarts-tooltip.mjs.map