@covalent/echarts
Version:
Teradata UI Platform Echarts Module
193 lines (188 loc) • 8.29 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 } from '@covalent/echarts/base';
const _c0 = ["toolboxContent"];
function TdChartToolboxComponent_ng_template_0_Template(rf, ctx) { }
class TdChartViewDataFormatterDirective {
static ɵfac = function TdChartViewDataFormatterDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TdChartViewDataFormatterDirective)(); };
static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: TdChartViewDataFormatterDirective, selectors: [["ng-template", "tdViewDataFormatter", ""]] });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdChartViewDataFormatterDirective, [{
type: Directive,
args: [{
selector: 'ng-template[tdViewDataFormatter]',
}]
}], null, null); })();
class TdChartToolboxComponent {
_changeDetectorRef = inject(ChangeDetectorRef);
_elementRef = inject(ElementRef);
_optionsService = inject(TdChartOptionsService);
_state = {};
config = {};
show = true;
trigger;
orient;
itemSize;
itemGap;
showTitle = true;
label;
feature;
iconStyle;
zlevel;
z;
transitionDuration = 0.5;
left = 'auto';
top = 'auto';
right = 'auto';
bottom = 'auto';
width = 'auto';
height = 'auto';
formatterTemplate;
fullTemplate;
ngOnChanges() {
this._setOptions();
}
ngOnDestroy() {
this._removeOption();
}
_setOptions() {
this._checkFormatterTemplate();
const config = assignDefined(this._state, {
show: this.show,
name: this.trigger,
orient: this.orient,
itemSize: this.itemSize,
itemGap: this.itemGap,
showTitle: this.showTitle,
label: this.label,
feature: this.feature,
iconStyle: this.iconStyle,
zlevel: this.zlevel,
z: this.z,
transitionDuration: this.transitionDuration,
left: this.left,
top: this.top,
right: this.right,
bottom: this.bottom,
width: this.width,
height: this.height,
}, this.config ? this.config : {});
// set toolbox configuration in parent chart and render new configurations
this._optionsService.setOption('toolbox', config);
}
_removeOption() {
this._optionsService.clearOption('toolbox');
}
_checkFormatterTemplate() {
if (this.formatterTemplate) {
this.feature = {
...this.feature,
dataView: {
...this.feature?.dataView,
optionToContent: this._optionToContentFormatter(),
},
};
}
}
_optionToContentFormatter() {
return () => {
this._changeDetectorRef.markForCheck();
return this._elementRef.nativeElement.innerHTML;
};
}
static ɵfac = function TdChartToolboxComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TdChartToolboxComponent)(); };
static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TdChartToolboxComponent, selectors: [["td-chart-toolbox"]], contentQueries: function TdChartToolboxComponent_ContentQueries(rf, ctx, dirIndex) { if (rf & 1) {
i0.ɵɵcontentQuery(dirIndex, TdChartViewDataFormatterDirective, 5, TemplateRef);
} if (rf & 2) {
let _t;
i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.formatterTemplate = _t.first);
} }, viewQuery: function TdChartToolboxComponent_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", show: "show", trigger: "trigger", orient: "orient", itemSize: "itemSize", itemGap: "itemGap", showTitle: "showTitle", label: "label", feature: "feature", iconStyle: "iconStyle", zlevel: "zlevel", z: "z", transitionDuration: "transitionDuration", left: "left", top: "top", right: "right", bottom: "bottom", width: "width", height: "height" }, features: [i0.ɵɵNgOnChangesFeature], decls: 2, vars: 1, consts: [["toolboxContent", ""], [3, "ngTemplateOutlet"]], template: function TdChartToolboxComponent_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵtemplate(0, TdChartToolboxComponent_ng_template_0_Template, 0, 0, "ng-template", 1, 0, i0.ɵɵtemplateRefExtractor);
} if (rf & 2) {
i0.ɵɵproperty("ngTemplateOutlet", ctx.formatterTemplate);
} }, dependencies: [CommonModule, i1.NgTemplateOutlet], encapsulation: 2, changeDetection: 0 });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdChartToolboxComponent, [{
type: Component,
args: [{ selector: 'td-chart-toolbox', imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template\n #toolboxContent\n [ngTemplateOutlet]=\"formatterTemplate\"\n></ng-template>\n" }]
}], null, { config: [{
type: Input
}], show: [{
type: Input
}], trigger: [{
type: Input
}], orient: [{
type: Input
}], itemSize: [{
type: Input
}], itemGap: [{
type: Input
}], showTitle: [{
type: Input
}], label: [{
type: Input
}], feature: [{
type: Input
}], iconStyle: [{
type: Input
}], zlevel: [{
type: Input
}], z: [{
type: Input
}], transitionDuration: [{
type: Input
}], left: [{
type: Input
}], top: [{
type: Input
}], right: [{
type: Input
}], bottom: [{
type: Input
}], width: [{
type: Input
}], height: [{
type: Input
}], formatterTemplate: [{
type: ContentChild,
args: [TdChartViewDataFormatterDirective, { read: TemplateRef }]
}], fullTemplate: [{
type: ViewChild,
args: ['toolboxContent', { static: true }]
}] }); })();
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TdChartToolboxComponent, { className: "TdChartToolboxComponent", filePath: "toolbox.component.ts", lineNumber: 149 }); })();
const TOOLBOX_MODULE_COMPONENTS = [
TdChartToolboxComponent,
TdChartViewDataFormatterDirective,
];
/**
* @deprecated This module is deprecated and will be removed in future versions.
* Please migrate to using standalone components as soon as possible.
*/
class CovalentToolboxEchartsModule {
static ɵfac = function CovalentToolboxEchartsModule_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || CovalentToolboxEchartsModule)(); };
static ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: CovalentToolboxEchartsModule });
static ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [TdChartToolboxComponent] });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CovalentToolboxEchartsModule, [{
type: NgModule,
args: [{
imports: [TOOLBOX_MODULE_COMPONENTS],
exports: [TOOLBOX_MODULE_COMPONENTS],
}]
}], null, null); })();
(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(CovalentToolboxEchartsModule, { imports: [TdChartToolboxComponent,
TdChartViewDataFormatterDirective], exports: [TdChartToolboxComponent,
TdChartViewDataFormatterDirective] }); })();
/**
* Generated bundle index. Do not edit.
*/
export { CovalentToolboxEchartsModule, TOOLBOX_MODULE_COMPONENTS, TdChartToolboxComponent, TdChartViewDataFormatterDirective };
//# sourceMappingURL=covalent-echarts-toolbox.mjs.map