@covalent/echarts
Version:
Teradata UI Platform Echarts Module
284 lines (278 loc) • 14.6 kB
JavaScript
import * as i0 from '@angular/core';
import { Directive, TemplateRef, Component, ChangeDetectionStrategy, Input, ContentChild, ViewChild, NgModule } from '@angular/core';
import * as i2 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i1 from '@covalent/echarts/base';
import { assignDefined } from '@covalent/echarts/base';
class TdTooltipContext {
}
class TdChartTooltipFormatterDirective {
}
TdChartTooltipFormatterDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TdChartTooltipFormatterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
TdChartTooltipFormatterDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: TdChartTooltipFormatterDirective, selector: "ng-template[tdTooltipFormatter]", ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TdChartTooltipFormatterDirective, decorators: [{
type: Directive,
args: [{
selector: 'ng-template[tdTooltipFormatter]',
}]
}] });
class TdChartTooltipComponent {
constructor(_changeDetectorRef, _elementRef, _optionsService) {
this._changeDetectorRef = _changeDetectorRef;
this._elementRef = _elementRef;
this._optionsService = _optionsService;
this._state = {};
this._context = new TdTooltipContext();
this.config = {};
this.show = true;
this.trigger = 'axis';
this.showContent = true;
this.alwaysShowContent = false;
this.triggerOn = 'mousemove|click';
this.showDelay = 0;
this.hideDelay = 0;
this.enterable = false;
this.confine = false;
this.transitionDuration = 0.5;
this.backgroundColor = 'rgba(50,50,50,0.7)'; // series
this.borderColor = '#333'; // series
this.borderWidth = 0; // series
this.padding = 5; // series
this.textStyle = {
// series
color: '#FFF',
};
}
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;
};
}
}
TdChartTooltipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TdChartTooltipComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i1.TdChartOptionsService }], target: i0.ɵɵFactoryTarget.Component });
TdChartTooltipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TdChartTooltipComponent, selector: "td-chart-tooltip", 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" }, queries: [{ propertyName: "formatterTemplate", first: true, predicate: TdChartTooltipFormatterDirective, descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "fullTemplate", first: true, predicate: ["tooltipContent"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<ng-template\n #tooltipContent\n [ngTemplateOutlet]=\"formatterTemplate\"\n [ngTemplateOutletContext]=\"_context\"\n></ng-template>\n", dependencies: [{ kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TdChartTooltipComponent, decorators: [{
type: Component,
args: [{ selector: 'td-chart-tooltip', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template\n #tooltipContent\n [ngTemplateOutlet]=\"formatterTemplate\"\n [ngTemplateOutletContext]=\"_context\"\n></ng-template>\n" }]
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i1.TdChartOptionsService }]; }, propDecorators: { 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 }]
}] } });
class TdSeriesTooltipComponent {
constructor(_changeDetectorRef, _elementRef, _seriesComponent) {
this._changeDetectorRef = _changeDetectorRef;
this._elementRef = _elementRef;
this._seriesComponent = _seriesComponent;
this._state = {};
this._context = new TdTooltipContext();
this.backgroundColor = 'rgba(50,50,50,0.7)';
this.borderColor = '#333';
this.borderWidth = 0;
this.padding = 5;
this.textStyle = {
color: '#FFF',
};
}
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');
}
}
TdSeriesTooltipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TdSeriesTooltipComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i1.TdSeriesDirective }], target: i0.ɵɵFactoryTarget.Component });
TdSeriesTooltipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TdSeriesTooltipComponent, selector: "td-chart-series-tooltip", inputs: { config: "config", formatter: "formatter", position: "position", backgroundColor: "backgroundColor", borderColor: "borderColor", borderWidth: "borderWidth", padding: "padding", textStyle: "textStyle", extraCssText: "extraCssText" }, queries: [{ propertyName: "formatterTemplate", first: true, predicate: TdChartTooltipFormatterDirective, descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "fullTemplate", first: true, predicate: ["tooltipContent"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<ng-template\n #tooltipContent\n [ngTemplateOutlet]=\"formatterTemplate\"\n [ngTemplateOutletContext]=\"_context\"\n></ng-template>\n", dependencies: [{ kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TdSeriesTooltipComponent, decorators: [{
type: Component,
args: [{ selector: 'td-chart-series-tooltip', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template\n #tooltipContent\n [ngTemplateOutlet]=\"formatterTemplate\"\n [ngTemplateOutletContext]=\"_context\"\n></ng-template>\n" }]
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i1.TdSeriesDirective }]; }, propDecorators: { 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 }]
}] } });
const TOOLTIP_MODULE_COMPONENTS = [
TdChartTooltipComponent,
TdChartTooltipFormatterDirective,
TdSeriesTooltipComponent,
];
class CovalentTooltipEchartsModule {
}
CovalentTooltipEchartsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CovalentTooltipEchartsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
CovalentTooltipEchartsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: CovalentTooltipEchartsModule, declarations: [TdChartTooltipComponent,
TdChartTooltipFormatterDirective,
TdSeriesTooltipComponent], imports: [CommonModule], exports: [TdChartTooltipComponent,
TdChartTooltipFormatterDirective,
TdSeriesTooltipComponent] });
CovalentTooltipEchartsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CovalentTooltipEchartsModule, imports: [CommonModule] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CovalentTooltipEchartsModule, decorators: [{
type: NgModule,
args: [{
imports: [CommonModule],
declarations: [TOOLTIP_MODULE_COMPONENTS],
exports: [TOOLTIP_MODULE_COMPONENTS],
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { CovalentTooltipEchartsModule, TOOLTIP_MODULE_COMPONENTS, TdChartTooltipComponent, TdChartTooltipFormatterDirective, TdSeriesTooltipComponent, TdTooltipContext };
//# sourceMappingURL=covalent-echarts-tooltip.mjs.map