@covalent/echarts
Version:
Teradata UI Platform Echarts Module
5,004 lines • 126 kB
JavaScript
import * as i0 from '@angular/core';
import { Injectable, Optional, SkipSelf, EventEmitter, ChangeDetectionStrategy, Component, Output, Input, Directive, NgModule } from '@angular/core';
import { BehaviorSubject, Subject, fromEvent, merge, timer } from 'rxjs';
import { takeUntil, debounceTime, distinctUntilChanged, tap } from 'rxjs/operators';
class TdChartOptionsService {
_options = {};
_optionsSubject = new BehaviorSubject(this._options);
setOption(option, value) {
const options = {};
options[option] = value;
Object.assign(this._options, options);
this._optionsSubject.next(this._options);
}
setArrayOption(option, value) {
let prevValue = this.getOption(option);
if (prevValue) {
const index = prevValue.indexOf(value);
index > -1 ? (prevValue[index] = value) : prevValue.push(value);
}
else {
prevValue = [value];
}
this.setOption(option, prevValue);
}
removeArrayOption(option, value) {
let prevValue = this.getOption(option);
if (prevValue) {
const index = prevValue.indexOf(value);
if (index > -1) {
/* tslint:disable-next-line */
prevValue[index] = null;
}
else {
prevValue = [];
}
}
this.setOption(option, prevValue);
}
getOption(option) {
return this._options[option];
}
clearOption(option) {
/* tslint:disable-next-line */
this.setOption(option, null);
}
listen() {
return this._optionsSubject.asObservable();
}
static ɵfac = function TdChartOptionsService_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TdChartOptionsService)(); };
static ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: TdChartOptionsService, factory: TdChartOptionsService.ɵfac });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdChartOptionsService, [{
type: Injectable
}], null, null); })();
function CHART_PROVIDER_FACTORY(parent) {
return parent || new TdChartOptionsService();
}
const CHART_PROVIDER = {
// If there is already a service available, use that. Otherwise, provide a new one.
provide: TdChartOptionsService,
deps: [[new Optional(), new SkipSelf(), TdChartOptionsService]],
useFactory: CHART_PROVIDER_FACTORY,
};
function assignDefined(target, ...sources) {
const keys = new Set();
for (const source of sources) {
for (const key of Object.keys(source)) {
keys.add(key);
const val = source[key];
/* tslint:disable-next-line */
if (val !== undefined && val !== null) {
target[key] = val;
/* tslint:disable-next-line */
}
else if (val === null) {
delete target[key];
}
}
}
// delete keys that are not in any source
for (const key of Object.keys(target)) {
if (!keys.has(key)) {
delete target[key];
}
}
return target;
}
/* tslint:disable */
var aquaSplash = {
color: [
'#305b9e',
'#0076a9',
'#1d8daa',
'#51a2a8',
'#7fb5aa',
'#aac6b4',
'#CFD8C8',
'#ECEBE4',
],
backgroundColor: 'transparent',
textStyle: {},
title: {
textStyle: {
color: '#aaaaaa',
},
subtextStyle: {
color: '#aaaaaa',
},
},
tree: {
itemStyle: {
color: '#ECEBE4',
borderColor: '#305b9e',
},
},
line: {
itemStyle: {
normal: {
borderWidth: '2',
},
},
lineStyle: {
normal: {
width: '2',
},
},
symbolSize: '6',
symbol: 'emptyCircle',
smooth: true,
},
radar: {
itemStyle: {
normal: {
borderWidth: '2',
},
},
lineStyle: {
normal: {
width: '2',
},
},
symbolSize: '6',
symbol: 'emptyCircle',
smooth: true,
},
bar: {
itemStyle: {
normal: {
barBorderWidth: 0,
barBorderColor: '#ccc',
},
emphasis: {
barBorderWidth: 0,
barBorderColor: '#ccc',
},
},
},
pie: {
itemStyle: {
normal: {
borderWidth: 0,
borderColor: '#ccc',
},
emphasis: {
borderWidth: 0,
borderColor: '#ccc',
},
},
},
scatter: {
itemStyle: {
normal: {
borderWidth: 0,
borderColor: '#ccc',
},
emphasis: {
borderWidth: 0,
borderColor: '#ccc',
},
},
},
boxplot: {
itemStyle: {
normal: {
borderWidth: 0,
borderColor: '#ccc',
},
emphasis: {
borderWidth: 0,
borderColor: '#ccc',
},
},
},
parallel: {
itemStyle: {
normal: {
borderWidth: 0,
borderColor: '#ccc',
},
emphasis: {
borderWidth: 0,
borderColor: '#ccc',
},
},
},
sankey: {
itemStyle: {
normal: {
borderWidth: 0,
borderColor: '#ccc',
},
emphasis: {
borderWidth: 0,
borderColor: '#ccc',
},
},
},
funnel: {
itemStyle: {
normal: {
borderWidth: 0,
borderColor: '#ccc',
},
emphasis: {
borderWidth: 0,
borderColor: '#ccc',
},
},
},
gauge: {
itemStyle: {
normal: {
borderWidth: 0,
borderColor: '#ccc',
},
emphasis: {
borderWidth: 0,
borderColor: '#ccc',
},
},
},
candlestick: {
itemStyle: {
normal: {
color: '#305b9e',
color0: 'transparent',
borderColor: '#305b9e',
borderColor0: '#1d8daa',
borderWidth: '2',
},
},
},
graph: {
itemStyle: {
normal: {
borderWidth: 0,
borderColor: '#ccc',
},
},
lineStyle: {
normal: {
width: 1,
color: '#aaaaaa',
},
},
symbolSize: '6',
symbol: 'emptyCircle',
smooth: true,
color: [
'#305b9e',
'#0076a9',
'#1d8daa',
'#51a2a8',
'#7fb5aa',
'#aac6b4',
'#CFD8C8',
'#ECEBE4',
],
label: {
normal: {
textStyle: {
color: '#ffffff',
},
},
},
},
map: {
itemStyle: {
normal: {
areaColor: '#f3f3f3',
borderColor: '#999999',
borderWidth: 0.5,
},
emphasis: {
areaColor: 'rgba(254,198,77,1)',
borderColor: '#ecaf2b',
borderWidth: 1,
},
},
label: {
normal: {
textStyle: {
color: '#00475e',
},
},
emphasis: {
textStyle: {
color: 'rgb(0,71,94)',
},
},
},
},
geo: {
itemStyle: {
normal: {
areaColor: '#f3f3f3',
borderColor: '#999999',
borderWidth: 0.5,
},
emphasis: {
areaColor: 'rgba(254,198,77,1)',
borderColor: '#ecaf2b',
borderWidth: 1,
},
},
label: {
normal: {
textStyle: {
color: '#00475e',
},
},
emphasis: {
textStyle: {
color: 'rgb(0,71,94)',
},
},
},
},
categoryAxis: {
axisLine: {
show: true,
lineStyle: {
color: '#aaaaaa',
},
},
axisTick: {
show: false,
lineStyle: {
color: '#333',
},
},
axisLabel: {
show: true,
textStyle: {
color: '#999999',
},
},
splitLine: {
show: true,
lineStyle: {
color: ['#e6e6e6'],
},
},
splitArea: {
show: false,
areaStyle: {
color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)'],
},
},
},
valueAxis: {
axisLine: {
show: true,
lineStyle: {
color: '#aaaaaa',
},
},
axisTick: {
show: false,
lineStyle: {
color: '#333',
},
},
axisLabel: {
show: true,
textStyle: {
color: '#999999',
},
},
splitLine: {
show: true,
lineStyle: {
color: ['#e6e6e6'],
},
},
splitArea: {
show: false,
areaStyle: {
color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)'],
},
},
},
logAxis: {
axisLine: {
show: true,
lineStyle: {
color: '#aaaaaa',
},
},
axisTick: {
show: false,
lineStyle: {
color: '#333',
},
},
axisLabel: {
show: true,
textStyle: {
color: '#999999',
},
},
splitLine: {
show: true,
lineStyle: {
color: ['#e6e6e6'],
},
},
splitArea: {
show: false,
areaStyle: {
color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)'],
},
},
},
timeAxis: {
axisLine: {
show: true,
lineStyle: {
color: '#aaaaaa',
},
},
axisTick: {
show: false,
lineStyle: {
color: '#333',
},
},
axisLabel: {
show: true,
textStyle: {
color: '#999999',
},
},
splitLine: {
show: true,
lineStyle: {
color: ['#e6e6e6'],
},
},
splitArea: {
show: false,
areaStyle: {
color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)'],
},
},
},
toolbox: {
iconStyle: {
normal: {
borderColor: '#999999',
},
emphasis: {
borderColor: '#666666',
},
},
},
legend: {
textStyle: {
color: '#000000',
},
},
tooltip: {
axisPointer: {
lineStyle: {
color: '#cccccc',
width: 1,
},
crossStyle: {
color: '#cccccc',
width: 1,
},
},
},
timeline: {
lineStyle: {
color: '#666666',
width: 1,
},
itemStyle: {
normal: {
color: '#666666',
borderWidth: 1,
},
emphasis: {
color: '#f7ac4f',
},
},
controlStyle: {
normal: {
color: '#666666',
borderColor: '#666666',
borderWidth: 0.5,
},
emphasis: {
color: '#666666',
borderColor: '#666666',
borderWidth: 0.5,
},
},
checkpointStyle: {
color: '#f7ac4f',
borderColor: 'rgba(254,198,77,0.6)',
},
label: {
normal: {
textStyle: {
color: '#666666',
},
},
emphasis: {
textStyle: {
color: '#666666',
},
},
},
},
visualMap: {
color: [
'#305b9e',
'#0076a9',
'#1d8daa',
'#51a2a8',
'#7fb5aa',
'#aac6b4',
'#CFD8C8',
'#ECEBE4',
],
},
dataZoom: {
backgroundColor: 'rgba(255,255,255,0)',
dataBackgroundColor: 'rgba(255,178,72,0.5)',
fillerColor: 'rgba(255,178,72,0.15)',
handleColor: '#ffb248',
handleSize: '100%',
textStyle: {
color: '#aaaaaa',
},
},
markPoint: {
label: {
normal: {
textStyle: {
color: '#ffffff',
},
},
emphasis: {
textStyle: {
color: '#ffffff',
},
},
},
},
};
/* tslint:disable */
var californiaCoast = {
color: ['#0098c9', '#6ab1d7', '#a0cae4', '#ffbb9c', '#fd986d', '#ff5f02'],
backgroundColor: 'transparent',
textStyle: {},
title: {
textStyle: {
color: '#aaaaaa',
},
subtextStyle: {
color: '#aaaaaa',
},
},
tree: {
itemStyle: {
color: '#ffbb9c',
borderColor: '#0098c9',
},
},
line: {
itemStyle: {
normal: {
borderWidth: '2',
},
},
lineStyle: {
normal: {
width: '2',
},
},
symbolSize: '6',
symbol: 'emptyCircle',
smooth: true,
},
radar: {
itemStyle: {
normal: {
borderWidth: '2',
},
},
lineStyle: {
normal: {
width: '2',
},
},
symbolSize: '6',
symbol: 'emptyCircle',
smooth: true,
},
bar: {
itemStyle: {
normal: {
barBorderWidth: 0,
barBorderColor: '#ccc',
},
emphasis: {
barBorderWidth: 0,
barBorderColor: '#ccc',
},
},
},
pie: {
itemStyle: {
normal: {
borderWidth: 0,
borderColor: '#ccc',
},
emphasis: {
borderWidth: 0,
borderColor: '#ccc',
},
},
},
scatter: {
itemStyle: {
normal: {
borderWidth: 0,
borderColor: '#ccc',
},
emphasis: {
borderWidth: 0,
borderColor: '#ccc',
},
},
},
boxplot: {
itemStyle: {
normal: {
borderWidth: 0,
borderColor: '#ccc',
},
emphasis: {
borderWidth: 0,
borderColor: '#ccc',
},
},
},
parallel: {
itemStyle: {
normal: {
borderWidth: 0,
borderColor: '#ccc',
},
emphasis: {
borderWidth: 0,
borderColor: '#ccc',
},
},
},
sankey: {
itemStyle: {
normal: {
borderWidth: 0,
borderColor: '#ccc',
},
emphasis: {
borderWidth: 0,
borderColor: '#ccc',
},
},
},
funnel: {
itemStyle: {
normal: {
borderWidth: 0,
borderColor: '#ccc',
},
emphasis: {
borderWidth: 0,
borderColor: '#ccc',
},
},
},
gauge: {
itemStyle: {
normal: {
borderWidth: 0,
borderColor: '#ccc',
},
emphasis: {
borderWidth: 0,
borderColor: '#ccc',
},
},
},
candlestick: {
itemStyle: {
normal: {
color: '#ff5f02',
color0: 'transparent',
borderColor: '#ff5f02',
borderColor0: '#0098c9',
borderWidth: '2',
},
},
},
graph: {
itemStyle: {
normal: {
borderWidth: 0,
borderColor: '#ccc',
},
},
lineStyle: {
normal: {
width: 1,
color: '#aaaaaa',
},
},
symbolSize: '6',
symbol: 'emptyCircle',
smooth: true,
color: ['#0098c9', '#6ab1d7', '#a0cae4', '#ffbb9c', '#fd986d', '#ff5f02'],
label: {
normal: {
textStyle: {
color: '#ffffff',
},
},
},
},
map: {
itemStyle: {
normal: {
areaColor: '#f3f3f3',
borderColor: '#999999',
borderWidth: 0.5,
},
emphasis: {
areaColor: 'rgba(254,198,77,1)',
borderColor: '#ecaf2b',
borderWidth: 1,
},
},
label: {
normal: {
textStyle: {
color: '#394851',
},
},
emphasis: {
textStyle: {
color: 'rgb(57,72,81)',
},
},
},
},
geo: {
itemStyle: {
normal: {
areaColor: '#f3f3f3',
borderColor: '#999999',
borderWidth: 0.5,
},
emphasis: {
areaColor: 'rgba(254,198,77,1)',
borderColor: '#ecaf2b',
borderWidth: 1,
},
},
label: {
normal: {
textStyle: {
color: '#394851',
},
},
emphasis: {
textStyle: {
color: 'rgb(57,72,81)',
},
},
},
},
categoryAxis: {
axisLine: {
show: true,
lineStyle: {
color: '#aaaaaa',
},
},
axisTick: {
show: false,
lineStyle: {
color: '#333',
},
},
axisLabel: {
show: true,
textStyle: {
color: '#999999',
},
},
splitLine: {
show: true,
lineStyle: {
color: ['#e6e6e6'],
},
},
splitArea: {
show: false,
areaStyle: {
color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)'],
},
},
},
valueAxis: {
axisLine: {
show: true,
lineStyle: {
color: '#aaaaaa',
},
},
axisTick: {
show: false,
lineStyle: {
color: '#333',
},
},
axisLabel: {
show: true,
textStyle: {
color: '#999999',
},
},
splitLine: {
show: true,
lineStyle: {
color: ['#e6e6e6'],
},
},
splitArea: {
show: false,
areaStyle: {
color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)'],
},
},
},
logAxis: {
axisLine: {
show: true,
lineStyle: {
color: '#aaaaaa',
},
},
axisTick: {
show: false,
lineStyle: {
color: '#333',
},
},
axisLabel: {
show: true,
textStyle: {
color: '#999999',
},
},
splitLine: {
show: true,
lineStyle: {
color: ['#e6e6e6'],
},
},
splitArea: {
show: false,
areaStyle: {
color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)'],
},
},
},
timeAxis: {
axisLine: {
show: true,
lineStyle: {
color: '#aaaaaa',
},
},
axisTick: {
show: false,
lineStyle: {
color: '#333',
},
},
axisLabel: {
show: true,
textStyle: {
color: '#999999',
},
},
splitLine: {
show: true,
lineStyle: {
color: ['#e6e6e6'],
},
},
splitArea: {
show: false,
areaStyle: {
color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)'],
},
},
},
toolbox: {
iconStyle: {
normal: {
borderColor: '#999999',
},
emphasis: {
borderColor: '#666666',
},
},
},
legend: {
textStyle: {
color: '#aaaaaa',
},
},
tooltip: {
axisPointer: {
lineStyle: {
color: '#cccccc',
width: 1,
},
crossStyle: {
color: '#cccccc',
width: 1,
},
},
},
timeline: {
lineStyle: {
color: '#666666',
width: 1,
},
itemStyle: {
normal: {
color: '#666666',
borderWidth: 1,
},
emphasis: {
color: '#fec64d',
},
},
controlStyle: {
normal: {
color: '#666666',
borderColor: '#666666',
borderWidth: 0.5,
},
emphasis: {
color: '#666666',
borderColor: '#666666',
borderWidth: 0.5,
},
},
checkpointStyle: {
color: '#ff5f02',
borderColor: 'rgba(255,178,72,0.41)',
},
label: {
normal: {
textStyle: {
color: '#666666',
},
},
emphasis: {
textStyle: {
color: '#666666',
},
},
},
},
visualMap: {
color: ['#0098c9', '#6ab1d7', '#a0cae4', '#FFBB9C', '#FD986D', '#ff5f02'],
},
dataZoom: {
backgroundColor: 'rgba(255,255,255,0)',
dataBackgroundColor: 'rgba(255,178,72,0.5)',
fillerColor: 'rgba(255,178,72,0.15)',
handleColor: '#fec64d',
handleSize: '100%',
textStyle: {
color: '#aaaaaa',
},
},
markPoint: {
label: {
normal: {
textStyle: {
color: '#ffffff',
},
},
emphasis: {
textStyle: {
color: '#ffffff',
},
},
},
},
};
/* tslint:disable */
var hawaiianSunrise = {
color: ['#00b2b1', '#69c6c4', '#a0d9d7', '#ffbb9c', '#fd986d', '#ff5f02'],
backgroundColor: 'transparent',
textStyle: {},
title: {
textStyle: {
color: '#aaaaaa',
},
subtextStyle: {
color: '#aaaaaa',
},
},
tree: {
itemStyle: {
color: '#a0d9d7',
borderColor: '#00b2b1',
},
},
line: {
itemStyle: {
normal: {
borderWidth: '2',
},
},
lineStyle: {
normal: {
width: '2',
},
},
symbolSize: '6',
symbol: 'emptyCircle',
smooth: true,
},
radar: {
itemStyle: {
normal: {
borderWidth: '2',
},
},
lineStyle: {
normal: {
width: '2',
},
},
symbolSize: '6',
symbol: 'emptyCircle',
smooth: true,
},
bar: {
itemStyle: {
normal: {
barBorderWidth: 0,
barBorderColor: '#ccc',
},
emphasis: {
barBorderWidth: 0,
barBorderColor: '#ccc',
},
},
},
pie: {
itemStyle: {
normal: {
borderWidth: 0,
borderColor: '#ccc',
},
emphasis: {
borderWidth: 0,
borderColor: '#ccc',
},
},
},
scatter: {
itemStyle: {
normal: {
borderWidth: 0,
borderColor: '#ccc',
},
emphasis: {
borderWidth: 0,
borderColor: '#ccc',
},
},
},
boxplot: {
itemStyle: {
normal: {
borderWidth: 0,
borderColor: '#ccc',
},
emphasis: {
borderWidth: 0,
borderColor: '#ccc',
},
},
},
parallel: {
itemStyle: {
normal: {
borderWidth: 0,
borderColor: '#ccc',
},
emphasis: {
borderWidth: 0,
borderColor: '#ccc',
},
},
},
sankey: {
itemStyle: {
normal: {
borderWidth: 0,
borderColor: '#ccc',
},
emphasis: {
borderWidth: 0,
borderColor: '#ccc',
},
},
},
funnel: {
itemStyle: {
normal: {
borderWidth: 0,
borderColor: '#ccc',
},
emphasis: {
borderWidth: 0,
borderColor: '#ccc',
},
},
},
gauge: {
itemStyle: {
normal: {
borderWidth: 0,
borderColor: '#ccc',
},
emphasis: {
borderWidth: 0,
borderColor: '#ccc',
},
},
},
candlestick: {
itemStyle: {
normal: {
color: '#ff5f02',
color0: 'transparent',
borderColor: '#ff5f02',
borderColor0: '#00b2b1',
borderWidth: '2',
},
},
},
graph: {
itemStyle: {
normal: {
borderWidth: 0,
borderColor: '#ccc',
},
},
lineStyle: {
normal: {
width: 1,
color: '#aaaaaa',
},
},
symbolSize: '6',
symbol: 'emptyCircle',
smooth: true,
color: ['#00b2b1', '#69c6c4', '#a0d9d7', '#ffbb9c', '#fd986d', '#ff5f02'],
label: {
normal: {
textStyle: {
color: '#ffffff',
},
},
},
},
map: {
itemStyle: {
normal: {
areaColor: '#f3f3f3',
borderColor: '#999999',
borderWidth: 0.5,
},
emphasis: {
areaColor: 'rgba(254,198,77,1)',
borderColor: '#ecaf2b',
borderWidth: 1,
},
},
label: {
normal: {
textStyle: {
color: '#007373',
},
},
emphasis: {
textStyle: {
color: 'rgb(0,115,115)',
},
},
},
},
geo: {
itemStyle: {
normal: {
areaColor: '#f3f3f3',
borderColor: '#999999',
borderWidth: 0.5,
},
emphasis: {
areaColor: 'rgba(254,198,77,1)',
borderColor: '#ecaf2b',
borderWidth: 1,
},
},
label: {
normal: {
textStyle: {
color: '#007373',
},
},
emphasis: {
textStyle: {
color: 'rgb(0,115,115)',
},
},
},
},
categoryAxis: {
axisLine: {
show: true,
lineStyle: {
color: '#aaaaaa',
},
},
axisTick: {
show: false,
lineStyle: {
color: '#333',
},
},
axisLabel: {
show: true,
textStyle: {
color: '#999999',
},
},
splitLine: {
show: true,
lineStyle: {
color: ['#e6e6e6'],
},
},
splitArea: {
show: false,
areaStyle: {
color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)'],
},
},
},
valueAxis: {
axisLine: {
show: true,
lineStyle: {
color: '#aaaaaa',
},
},
axisTick: {
show: false,
lineStyle: {
color: '#333',
},
},
axisLabel: {
show: true,
textStyle: {
color: '#999999',
},
},
splitLine: {
show: true,
lineStyle: {
color: ['#e6e6e6'],
},
},
splitArea: {
show: false,
areaStyle: {
color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)'],
},
},
},
logAxis: {
axisLine: {
show: true,
lineStyle: {
color: '#aaaaaa',
},
},
axisTick: {
show: false,
lineStyle: {
color: '#333',
},
},
axisLabel: {
show: true,
textStyle: {
color: '#999999',
},
},
splitLine: {
show: true,
lineStyle: {
color: ['#e6e6e6'],
},
},
splitArea: {
show: false,
areaStyle: {
color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)'],
},
},
},
timeAxis: {
axisLine: {
show: true,
lineStyle: {
color: '#aaaaaa',
},
},
axisTick: {
show: false,
lineStyle: {
color: '#333',
},
},
axisLabel: {
show: true,
textStyle: {
color: '#999999',
},
},
splitLine: {
show: true,
lineStyle: {
color: ['#e6e6e6'],
},
},
splitArea: {
show: false,
areaStyle: {
color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)'],
},
},
},
toolbox: {
iconStyle: {
normal: {
borderColor: '#999999',
},
emphasis: {
borderColor: '#666666',
},
},
},
legend: {
textStyle: {
color: '#000000',
},
},
tooltip: {
axisPointer: {
lineStyle: {
color: '#cccccc',
width: 1,
},
crossStyle: {
color: '#cccccc',
width: 1,
},
},
},
timeline: {
lineStyle: {
color: '#666666',
width: 1,
},
itemStyle: {
normal: {
color: '#666666',
borderWidth: 1,
},
emphasis: {
color: '#fec64d',
},
},
controlStyle: {
normal: {
color: '#666666',
borderColor: '#666666',
borderWidth: 0.5,
},
emphasis: {
color: '#666666',
borderColor: '#666666',
borderWidth: 0.5,
},
},
checkpointStyle: {
color: '#ff5f02',
borderColor: 'rgba(255,178,72,0.41)',
},
label: {
normal: {
textStyle: {
color: '#666666',
},
},
emphasis: {
textStyle: {
color: '#666666',
},
},
},
},
visualMap: {
color: ['#00b2b1', '#69c6c4', '#a0d9d7', '#ffbb9c', '#fd986d', '#ff5f02'],
},
dataZoom: {
backgroundColor: 'rgba(255,255,255,0)',
dataBackgroundColor: 'rgba(255,178,72,0.5)',
fillerColor: 'rgba(255,178,72,0.15)',
handleColor: '#fec64d',
handleSize: '100%',
textStyle: {
color: '#aaaaaa',
},
},
markPoint: {
label: {
normal: {
textStyle: {
color: '#ffffff',
},
},
emphasis: {
textStyle: {
color: '#ffffff',
},
},
},
},
};
/* tslint:disable */
var passionFlower = {
color: ['#007e7d', '#977ed2', '#d58a9c', '#97b6eb', '#ceccbb', '#f2dfd8'],
backgroundColor: 'transparent',
textStyle: {},
title: {
textStyle: {
color: '#aaaaaa',
},
subtextStyle: {
color: '#aaaaaa',
},
},
tree: {
itemStyle: {
color: '#f2dfd8',
borderColor: '#007e7d',
},
},
line: {
itemStyle: {
normal: {
borderWidth: '2',
},
},
lineStyle: {
normal: {
width: '2',
},
},
symbolSize: '6',
symbol: 'emptyCircle',
smooth: true,
},
radar: {
itemStyle: {
normal: {
borderWidth: '2',
},
},
lineStyle: {
normal: {
width: '2',
},
},
symbolSize: '6',
symbol: 'emptyCircle',
smooth: true,
},
bar: {
itemStyle: {
normal: {
barBorderWidth: 0,
barBorderColor: '#ccc',
},
emphasis: {
barBorderWidth: 0,
barBorderColor: '#ccc',
},
},
},
pie: {
itemStyle: {
normal: {
borderWidth: 0,
borderColor: '#ccc',
},
emphasis: {
borderWidth: 0,
borderColor: '#ccc',
},
},
},
scatter: {
itemStyle: {
normal: {
borderWidth: 0,
borderColor: '#ccc',
},
emphasis: {
borderWidth: 0,
borderColor: '#ccc',
},
},
},
boxplot: {
itemStyle: {
normal: {
borderWidth: 0,
borderColor: '#ccc',
},
emphasis: {
borderWidth: 0,
borderColor: '#ccc',
},
},
},
parallel: {
itemStyle: {
normal: {
borderWidth: 0,
borderColor: '#ccc',
},
emphasis: {
borderWidth: 0,
borderColor: '#ccc',
},
},
},
sankey: {
itemStyle: {
normal: {
borderWidth: 0,
borderColor: '#ccc',
},
emphasis: {
borderWidth: 0,
borderColor: '#ccc',
},
},
},
funnel: {
itemStyle: {
normal: {
borderWidth: 0,
borderColor: '#ccc',
},
emphasis: {
borderWidth: 0,
borderColor: '#ccc',
},
},
},
gauge: {
itemStyle: {
normal: {
borderWidth: 0,
borderColor: '#ccc',
},
emphasis: {
borderWidth: 0,
borderColor: '#ccc',
},
},
},
candlestick: {
itemStyle: {
normal: {
color: '#977ed2',
color0: 'transparent',
borderColor: '#977ed2',
borderColor0: '#007e7d',
borderWidth: '2',
},
},
},
graph: {
itemStyle: {
normal: {
borderWidth: 0,
borderColor: '#ccc',
},
},
lineStyle: {
normal: {
width: 1,
color: '#aaaaaa',
},
},
symbolSize: '6',
symbol: 'emptyCircle',
smooth: true,
color: ['#007e7d', '#977ed2', '#d58a9c', '#97b6eb', '#ceccbb', '#f2dfd8'],
label: {
normal: {
textStyle: {
color: '#ffffff',
},
},
},
},
map: {
itemStyle: {
normal: {
areaColor: '#f3f3f3',
borderColor: '#999999',
borderWidth: 0.5,
},
emphasis: {
areaColor: 'rgba(254,198,77,1)',
borderColor: '#ecaf2b',
borderWidth: 1,
},
},
label: {
normal: {
textStyle: {
color: '#00475e',
},
},
emphasis: {
textStyle: {
color: 'rgb(0,71,94)',
},
},
},
},
geo: {
itemStyle: {
normal: {
areaColor: '#f3f3f3',
borderColor: '#999999',
borderWidth: 0.5,
},
emphasis: {
areaColor: 'rgba(254,198,77,1)',
borderColor: '#ecaf2b',
borderWidth: 1,
},
},
label: {
normal: {
textStyle: {
color: '#00475e',
},
},
emphasis: {
textStyle: {
color: 'rgb(0,71,94)',
},
},
},
},
categoryAxis: {
axisLine: {
show: true,
lineStyle: {
color: '#aaaaaa',
},
},
axisTick: {
show: false,
lineStyle: {
color: '#333',
},
},
axisLabel: {
show: true,
textStyle: {
color: '#999999',
},
},
splitLine: {
show: true,
lineStyle: {
color: ['#e6e6e6'],
},
},
splitArea: {
show: false,
areaStyle: {
color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)'],
},
},
},
valueAxis: {
axisLine: {
show: true,
lineStyle: {
color: '#aaaaaa',
},
},
axisTick: {
show: false,
lineStyle: {
color: '#333',
},
},
axisLabel: {
show: true,
textStyle: {
color: '#999999',
},
},
splitLine: {
show: true,
lineStyle: {
color: ['#e6e6e6'],
},
},
splitArea: {
show: false,
areaStyle: {
color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)'],
},
},
},
logAxis: {
axisLine: {
show: true,
lineStyle: {
color: '#aaaaaa',
},
},
axisTick: {
show: false,
lineStyle: {
color: '#333',
},
},
axisLabel: {
show: true,
textStyle: {
color: '#999999',
},
},
splitLine: {
show: true,
lineStyle: {
color: ['#e6e6e6'],
},
},
splitArea: {
show: false,
areaStyle: {
color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)'],
},
},
},
timeAxis: {
axisLine: {
show: true,
lineStyle: {
color: '#aaaaaa',
},
},
axisTick: {
show: false,
lineStyle: {
color: '#333',
},
},
axisLabel: {
show: true,
textStyle: {
color: '#999999',
},
},
splitLine: {
show: true,
lineStyle: {
color: ['#e6e6e6'],
},
},
splitArea: {
show: false,
areaStyle: {
color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)'],
},
},
},
toolbox: {
iconStyle: {
normal: {
borderColor: '#999999',
},
emphasis: {
borderColor: '#666666',
},
},
},
legend: {
textStyle: {
color: '#999999',
},
},
tooltip: {
axisPointer: {
lineStyle: {
color: '#cccccc',
width: 1,
},
crossStyle: {
color: '#cccccc',
width: 1,
},
},
},
timeline: {
lineStyle: {
color: '#666666',
width: 1,
},
itemStyle: {
normal: {
color: '#666666',
borderWidth: 1,
},
emphasis: {
color: '#f7ac4f',
},
},
controlStyle: {
normal: {
color: '#666666',
borderColor: '#666666',
borderWidth: 0.5,
},
emphasis: {
color: '#666666',
borderColor: '#666666',
borderWidth: 0.5,
},
},
checkpointStyle: {
color: '#f7ac4f',
borderColor: 'rgba(254,198,77,0.6)',
},
label: {
normal: {
textStyle: {
color: '#666666',
},
},
emphasis: {
textStyle: {
color: '#666666',
},
},
},
},
visualMap: {
color: ['#007e7d', '#977ed2', '#d58a9c', '#97b6eb', '#ceccbb', '#f2dfd8'],
},
dataZoom: {
backgroundColor: 'rgba(255,255,255,0)',
dataBackgroundColor: 'rgba(255,178,72,0.5)',
fillerColor: 'rgba(255,178,72,0.15)',
handleColor: '#ffb248',
handleSize: '100%',
textStyle: {
color: '#aaaaaa',
},
},
markPoint: {
label: {
normal: {
textStyle: {
color: '#ffffff',
},
},
emphasis: {
textStyle: {
color: '#ffffff',
},
},
},
},
};
/* tslint:disable */
var razzleberryPie = {
color: [
'#523e85',
'#8b4f8f',
'#b96595',
'#e0829a',
'#ffa3a2',
'#f9b8a3',
'#f1ccb1',
'#ebddc8',
],
backgroundColor: 'transparent',
textStyle: {},
title: {
textStyle: {
color: '#aaaaaa',
},
subtextStyle: {
color: '#aaaaaa',
},
},
tree: {
itemStyle: {
color: '#ffa3a2',
borderColor: '#523e85',
},
},
line: {
itemStyle: {
normal: {
borderWidth: '2',
},
},
lineStyle: {
normal: {
width: '2',
},
},
symbolSize: '6',
symbol: 'emptyCircle',
smooth: true,
},
radar: {
itemStyle: {
normal: {
borderWidth: '2',
},
},
lineStyle: {
normal: {
width: '2',
},
},
symbolSize: '6',
symbol: 'emptyCircle',
smooth: true,
},
bar: {
itemStyle: {
normal: {
barBorderWidth: 0,
barBorderColor: '#ccc',
},
emphasis: {
barBorderWidth: 0,
barBorderColor: '#ccc',
},
},
},
pie: {
itemStyle: {
normal: {
borderWidth: 0,
borderColor: '#ccc',
},
emphasis: {
borderWidth: 0,
borderColor: '#ccc',
},
},
},
scatter: {
itemStyle: {
normal: {
borderWidth: 0,
borderColor: '#ccc',
},
emphasis: {
borderWidth: 0,
borderColor: '#ccc',
},
},
},
boxplot: {
itemStyle: {
normal: {
borderWidth: 0,
borderColor: '#ccc',
},
emphasis: {
borderWidth: 0,
borderColor: '#ccc',
},
},
},
parallel: {
itemStyle: {
normal: {
borderWidth: 0,
borderColor: '#ccc',
},
emphasis: {
borderWidth: 0,
borderColor: '#ccc',
},
},
},
sankey: {
itemStyle: {
normal: {
borderWidth: 0,
borderColor: '#ccc',
},
emphasis: {
borderWidth: 0,
borderColor: '#ccc',
},
},
},
funnel: {
itemStyle: {
normal: {
borderWidth: 0,
borderColor: '#ccc',
},
emphasis: {
borderWidth: 0,
borderColor: '#ccc',
},
},
},
gauge: {
itemStyle: {
normal: {
borderWidth: 0,
borderColor: '#ccc',
},
emphasis: {
borderWidth: 0,
borderColor: '#ccc',
},
},
},
candlestick: {
itemStyle: {
normal: {
color: '#8b4f8f',
color0: '#ffa3a2',
borderColor: '#8b4f8f',
borderColor0: '#ffa3a2',
borderWidth: '2',
},
},
},
graph: {
itemStyle: {
normal: {
borderWidth: 0,
borderColor: '#ccc',
},
},
lineStyle: {
normal: {
width: 1,
color: '#aaaaaa',
},
},
symbolSize: '6',
symbol: 'emptyCircle',
smooth: true,
color: [
'#523e85',
'#8b4f8f',
'#b96595',
'#e0829a',
'#ffa3a2',
'#f9b8a3',
'#f1ccb1',
'#ebddc8',
],
label: {
normal: {
textStyle: {
color: '#ffffff',
},
},
},
},
map: {
itemStyle: {
normal: {
areaColor: '#f3f3f3',
borderColor: '#999999',
borderWidth: 0.5,
},
emphasis: {
areaColor: 'rgba(255,178,72,1)',
borderColor: '#eb8146',
borderWidth: 1,
},
},
label: {
normal: {
textStyle: {
color: '#523e85',
},
},
emphasis: {
textStyle: {
color: 'rgb(82,62,133)',
},
},
},
},
geo: {
itemStyle: {
normal: {
areaColor: '#f3f3f3',
borderColor: '#999999',
borderWidth: 0.5,
},
emphasis: {
areaColor: 'rgba(255,178,72,1)',
borderColor: '#eb8146',
borderWidth: 1,
},
},
label: {
normal: {
textStyle: {
color: '#523e85',
},
},
emphasis: {
textStyle: {
color: 'rgb(82,62,133)',
},
},
},
},
categoryAxis: {
axisLine: {
show: true,
lineStyle: {
color: '#aaaaaa',
},
},
axisTick: {
show: false,
lineStyle: {
color: '#333',
},
},
axisLabel: {
show: true,
textStyle: {
color: '#999999',
},
},
splitLine: {
show: true,
lineStyle: {
color: ['#e6e6e6'],
},
},
splitArea: {
show: false,
areaStyle: {
color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)'],
},
},
},
valueAxis: {
axisLine: {
show: true,
lineStyle: {
color: '#aaaaaa',
},
},
axisTick: {
show: false,
lineStyle: {
color: '#333',
},
},
axisLabel: {
show: true,
textStyle: {
color: '#999999',
},
},
splitLine: {
show: true,
lineStyle: {
color: ['#e6e6e6'],
},
},
splitArea: {
show: false,
areaStyle: {
color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)'],
},
},
},
logAxis: {
axisLine: {
show: true,
lineStyle: {
color: '#aaaaaa',
},
},
axisTick: {
show: false,
lineStyle: {
color: '#333',
},
},
axisLabel: {
show: true,
textStyle: {
color: '#999999',
},
},
splitLine: {
show: true,
lineStyle: {
color: ['#e6e6e6'],
},
},
splitArea: {
show: false,
areaStyle: {
color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)'],
},
},
},
timeAxis: {
axisLine: {
show: true,
lineStyle: {
color: '#aaaaaa',
},
},
axisTick: {
show: false,
lineStyle: {
color: '#333',
},
},
axisLabel: {
show: true,
textStyle: {
color: '#999999',
},
},
splitLine: {
show: true,
lineStyle: {
color: ['#e6e6e6'],
},
},
splitArea: {
show: false,
areaStyle: {
color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)'],
},
},
},
toolbox: {
iconStyle: {
normal: {
borderColor: '#999999',
},
emphasis: {
borderColor: '#666666',
},
},
},
legend: {
textStyle: {
color: '#000000',
},
},
tooltip: {
axisPointer: {
lineStyle: {
color: '#cccccc',
width: 1,
},
crossStyle: {
color: '#cccccc',
width: 1,
},
},
},
timeline: {
lineStyle: {
color: '#523e85',
width: 1,
},
itemStyle: {
normal: {
color: '#523e85',
borderWidth: 1,
},
emphasis: {
color: '#ffb248',
},
},
controlStyle: {
normal: {
color: '#523e85',
borderColor: '#523e85',
borderWidth: 0.5,
},
emphasis: {
color: '#523e85',
borderColor: '#523e85',
borderWidth: 0.5,
},
},
checkpointStyle: {
color: '#eb8146',
borderColor: 'rgba(255,178,72,0.41)',
},
label: {
normal: {
textStyle: {
color: '#523e85',
},
},
emphasis: {
textStyle: {
color: '#523e85',
},
},
},
},
visualMap: {
color: [
'#523e85',
'#8b4f8f',
'#b96595',
'#e0829a',
'#ffa3a2',
'#f9b8a3',
'#f1ccb1',
'#ebddc8',
],
},
dataZoom: {
backgroundColor: 'rgba(255,255,255,0)',
dataBackgroundColor: 'rgba(255,178,72,0.5)',
fillerColor: 'rgba(255,178,72,0.15)',
handleColor: '#ffb248',
handleSize: '100%',
textStyle: {
color: '#aaaaaa',
},
},
markPoint: {
label: {
normal: {
textStyle: {
color: '#ffffff',
},
},
emphasis: {
textStyle: {
color: '#ffffff',
},
},
},
},
};
/* tslint:disable */
var teradataClassic = {
color: [
'#005e7d',
'#c54b17',
'#009392',
'#f5bb3c',
'#0098c9',
'#f58b5e',
'#59cecd',
'#fee2a6',
],
backgroundColor: 'transparent',
textStyle: {},
title: {
textStyle: {
color: '#aaaaaa',
},
subtextStyle: {
color: '#aaaaaa',
},
},
tree: {
itemStyle: {
color: '#fee2a6',
borderColor: '#005e7d',
},
},
line: {
itemStyle: {
normal: {
borderWidth: '2',
},
},
lineStyle: {
normal: {
width: '2',
},
},
symbolSize: '6',
symbol: 'emptyCircle',
smooth: true,
},
radar: {
itemStyle: {
normal: {
borderWidth: '2',
},
},
lineStyle: {
normal: {
width: '2',
},
},
symbolSize: '6',
symbol: 'emptyCircle',
smooth: true,
},
bar: {
itemStyle: {
normal: {
barBorderWidth: 0,
barBorderColor: '#ccc',
},
emphasis: {
barBorderWidth: 0,
barBorderColor: '#ccc',
},
},
},
pie: {
itemStyle: {
normal: {
borderWidth: 0,
borderColor: '#ccc',
},
emphasis: {
borderWidth: 0,
borderColor: '#ccc',
},
},
},
scatter: {
itemStyle: {
normal: {
borderWidth: 0,
borderColor: '#ccc',
},
emphasis: {
borderWidth: 0,
borderColor: '#ccc',
},
},
},
boxplot: {
itemStyle: {
normal: {
borderWidth: 0,
borderColor: '#ccc',
},
emphasis: {
borderWidth: 0,
borderColor: '#ccc',
},
},
},
parallel: {
itemStyle: {
normal: {
borderWidth: 0,
borderColor: '#ccc',
},
emphasis: {
borderWidth: 0,
borderColor: '#ccc',
},
},
},
sankey: {
itemStyle: {
normal: {
borderWidth: 0,
borderColor: '#ccc',
},
emphasis: {
borderWidth: 0,
borderColor: '#ccc',
},
},
},
funnel: {
itemStyle: {
normal: {
borderWidth: 0,
borderColor: '#ccc',
},
emphasis: {
borderWidth: 0,
borderColor: '#ccc',
},
},
},
gauge: {
itemStyle: {
normal: {
borderWidth: 0,
borderColor: '#ccc',
},
emphasis: {
borderWidth: 0,
borderColor: '#ccc',
},
},
},
candlestick: {
itemStyle: {
normal: {
color: '#0098c9',
color0: 'transparent',
borderColor: '#0098c9',
borderColor0: '#c54b17',
borderWidth: '2',
},
},
},
graph: {
itemStyle: {
normal: {
borderWidth: 0,
borderColor: '#ccc',
},
},
lineStyle: {
normal: {
width: 1,
color: '#aaaaaa',
},
},
symbolSize: '6',
symbol: 'emptyCircle',
smooth: true,
color: [
'#005e7d',
'#c54b17',
'#009392',
'#f5bb3c',
'#0098c9',
'#f58b5e',
'#59cecd',
'#fee2a6',
],
label: {
normal: {
textStyle: {
color: '#ffffff',
},
},
},
},
map: {
itemStyle: {
normal: {
areaColor: '#f3f3f3',
borderColor: '#999999',
borderWidth: 0.5,
},
emphasis: {
areaColor: 'rgba(254,198,77,1)',
borderColor: '#ecaf2b',
borderWidth: 1,
},
},
label: {
normal: {
textStyle: {
color: '#00475e',
},
},
emphasis: {
textStyle: {
color: 'rgb(0,71,94)',
},
},
},
},
geo: {
itemStyle: {
normal: {
areaColor: '#f3f3f3',
borderColor: '#999999',
borderWidth: 0.5,
},
emphasis: {
areaColor: 'rgba(254,198,77,1)',
borderColor: '#ecaf2b',
borderWidth: 1,
},
},
label: {
normal: {
textStyle: {
color: '#00475e',
},
},
emphasis: {
textStyle: {
color: 'rgb(0,71,94)',
},
},
},
},
categoryAxis: {
axisLine: {
show: true,
lineStyle: {
color: '#aaaaaa',
},
},
axisTick: {
show: false,
lineStyle: {
color: '#333',
},
},
axisLabel: {
show: true,
textStyle: {
color: '#999999',
},
},
splitLine: {
show: true,
lineStyle: {
color: ['#e6e6e6'],
},
},
splitArea: {
show: false,
areaStyle: {
color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)'],
},
},
},
valueAxis: {
axisLine: {
show: true,
lineStyle: {
color: '#aaaaaa',
},
},
axisTick: {
show: false,
lineStyle: {
color: '#333',
},
},
axisLabel: {
show: true,
textStyle: {
color: '#999999',
},
},
splitLine: {
show: true,
lineStyle: {
color: ['#e6e6e6'],
},
},
splitArea: {
show: false,
areaStyle: {
color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)'],
},
},
},
logAxis: {
axisLine: {
show: true,
lineStyle: {
color: '#aaaaaa',
},
},
axisTick: {
show: false,
lineStyle: {
color: '#333',
},
},
axisLabel: {
show: true,
textStyle: {
color: '#999999',
},
},
splitLine: {
show: true,
lineStyle: {
color: ['#e6e6e6'],
},
},
splitArea: {
show: false,
areaStyle: {
color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)'],
},
},
},
timeAxis: {
axisLine: {
show: true,
lineStyle: {
color: '#aaaaaa',
},
},
axisTick: {
show: false,
lineStyle: {
color: '#333',
},
},
axisLabel: {
show: true,
textStyle: {
color: '#999999',
},
},
splitLine: {
show: true,
lineStyle: {
color: ['#e6e6e6'],
},
},
splitArea: {
show: false,
areaStyle: {
color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)'],
},
},
},
toolbox: {
iconStyle: {
normal: {
borderColor: '#999999',
},
emphasis: {
borderColor: '#666666',
},
},
},
legend: {
textStyle: {
color: '#999999',
},
},
tooltip: {
axisPointer: {
lineStyle: {
color: '#cccccc',
width: 1,
},
crossStyle: {
color: '#cccccc',
width: 1,
},
},
},
timeline: {
lineStyle: {
color: '#666666',
width: 1,
},
itemStyle: {
normal: {
color: '#666666',
borderWidth: 1,
},
emphasis: {
color: '#f7ac4f',
},
},
controlStyle: {
normal: {
color: '#666666',
borderColor: '#666666',
borderWidth: 0.5,
},
emphasis: {
color: '#666666',
borderColor: '#666666',
borderWidth: 0.5,
},
},
checkpointStyle: {
color: '#f7ac4f',
borderColor: 'rgba(254,198,77,0.6)',
},
label: {
normal: {
textStyle: {
color: '#666666',
},
},
emphasis: {
textStyle: {
color: '#666666',
},
},
},
},
visualMap: {
color: [
'#005e7d',
'#c54b17',
'#009392',
'#f5bb3c',
'#0098c9',
'#f58b5e',
'#59cecd',
'#fee2a6',
],
},
dataZoom: {
backgroundColor: 'rgba(255,255,255,0)',
dataBackgroundColor: 'rgba(255,178,72,0.5)',
fillerColor: 'rgba(255,178,72,0.15)',
handleColor: '#ffb248',
handleSize: '100%',
textStyle: {
color: '#aaaaaa',
},
},
markPoint: {
label: {
normal: {
textStyle: {
color: '#ffffff',
},
},
emphasis: {
textStyle: {
color: '#ffffff',
},
},
},
},
};
/* tslint:disable */
var teradataDefault = {
color: ['#4d5b62', '#008ab6', '#ff5f02', '#2cc0bf', '#fed887'],
backgroundColor: 'transparent',
textStyle: {},
title: {
textStyle: {
color: '#aaaaaa',
},
subtextStyle: {
color: '#aaaaaa',
},
},
tree: {
itemStyle: {
color: '#fed887',
borderColor: '#4d5b62',
},
},
line: {
itemStyle: {
normal: {
borderWidth: '2',
},
},
lineStyle: {
normal: {
width: '2',
},
},
symbolSize: '6',
symbol: 'emptyCircle',
smooth: true,
},
radar: {
itemStyle: {
normal: {
borderWidth: '2',
},
},
lineStyle: {
normal: {
width: '2',
},
},
symbolSize: '6',
symbol: 'emptyCircle',
smooth: true,
},
bar: {
itemStyle: {
normal: {
barBorderWidth: 0,
barBorderColor: '#ccc',
},
emphasis: {
barBorderWidth: 0,
barBorderColor: '#ccc',
},
},
},
pie: {
itemStyle: {
normal: {
borderWidth: 0,
borderColor: '#ccc',
},
emphasis: {
borderWidth: 0,
borderColor: '#ccc',
},
},
},
scatter: {
itemStyle: {
normal: {
borderWidth: 0,
borderColor: '#ccc',
},
emphasis: {
borderWidth: 0,
borderColor: '#ccc',
},
},
},
boxplot: {
itemStyle: {
normal: {
borderWidth: 0,
borderColor: '#ccc',
},
emphasis: {
borderWidth: 0,
borderColor: '#ccc',
},
},
},
parallel: {
itemStyle: {
normal: {
borderWidth: 0,
borderColor: '#ccc',
},
emphasis: {
borderWidth: 0,
borderColor: '#ccc',
},
},
},
sankey: {
itemStyle: {
normal: {
borderWidth: 0,
borderColor: '#ccc',
},
emphasis: {
borderWidth: 0,
borderColor: '#ccc',
},
},
},
funnel: {
itemStyle: {
normal: {
borderWidth: 0,
borderColor: '#ccc',
},
emphasis: {
borderWidth: 0,
borderColor: '#ccc',
},
},
},
gauge: {
itemStyle: {
normal: {
borderWidth: 0,
borderColor: '#ccc',
},
emphasis: {
borderWidth: 0,
borderColor: '#ccc',
},
},
},
candlestick: {
itemStyle: {
normal: {
color: '#977ed2',
color0: 'transparent',
borderColor: '#977ed2',
borderColor0: '#009d9c',
borderWidth: '2',
},
},
},
graph: {
itemStyle: {
normal: {
borderWidth: 0,
borderColor: '#ccc',
},
},
lineStyle: {
normal: {
width: 1,
color: '#aaaaaa',
},
},
symbolSize: '6',
symbol: 'emptyCircle',
smooth: true,
color: ['#4d5b62', '#008ab6', '#ff5f02', '#2cc0bf', '#fed887'],
label: {
normal: {
textStyle: {
color: '#ffffff',
},
},
},
},
map: {
itemStyle: {
normal: {
areaColor: '#f3f3f3',
borderColor: '#999999',
borderWidth: 0.5,
},
emphasis: {
areaColor: 'rgba(254,198,77,1)',
borderColor: '#ecaf2b',
borderWidth: 1,
},
},
label: {
normal: {
textStyle: {
color: '#00475e',
},
},
emphasis: {
textStyle: {
color: 'rgb(0,71,94)',
},
},
},
},
geo: {
itemStyle: {
normal: {
areaColor: '#f3f3f3',
borderColor: '#999999',
borderWidth: 0.5,
},
emphasis: {
areaColor: 'rgba(254,198,77,1)',
borderColor: '#ecaf2b',
borderWidth: 1,
},
},
label: {
normal: {
textStyle: {
color: '#00475e',
},
},
emphasis: {
textStyle: {
color: 'rgb(0,71,94)',
},
},
},
},
categoryAxis: {
axisLine: {
show: true,
lineStyle: {
color: '#aaaaaa',
},
},
axisTick: {
show: false,
lineStyle: {
color: '#333',
},
},
axisLabel: {
show: true,
textStyle: {
color: '#999999',
},
},
splitLine: {
show: true,
lineStyle: {
color: ['#e6e6e6'],
},
},
splitArea: {
show: false,
areaStyle: {
color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)'],
},
},
},
valueAxis: {
axisLine: {
show: true,
lineStyle: {
color: '#aaaaaa',
},
},
axisTick: {
show: false,
lineStyle: {
color: '#333',
},
},
axisLabel: {
show: true,
textStyle: {
color: '#999999',
},
},
splitLine: {
show: true,
lineStyle: {
color: ['#e6e6e6'],
},
},
splitArea: {
show: false,
areaStyle: {
color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)'],
},
},
},
logAxis: {
axisLine: {
show: true,
lineStyle: {
color: '#aaaaaa',
},
},
axisTick: {
show: false,
lineStyle: {
color: '#333',
},
},
axisLabel: {
show: true,
textStyle: {
color: '#999999',
},
},
splitLine: {
show: true,
lineStyle: {
color: ['#e6e6e6'],
},
},
splitArea: {
show: false,
areaStyle: {
color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)'],
},
},
},
timeAxis: {
axisLine: {
show: true,
lineStyle: {
color: '#aaaaaa',
},
},
axisTick: {
show: false,
lineStyle: {
color: '#333',
},
},
axisLabel: {
show: true,
textStyle: {
color: '#999999',
},
},
splitLine: {
show: true,
lineStyle: {
color: ['#e6e6e6'],
},
},
splitArea: {
show: false,
areaStyle: {
color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)'],
},
},
},
toolbox: {
iconStyle: {
normal: {
borderColor: '#999999',
},
emphasis: {
borderColor: '#666666',
},
},
},
legend: {
textStyle: {
color: '#999999',
},
},
tooltip: {
axisPointer: {
lineStyle: {
color: '#cccccc',
width: 1,
},
crossStyle: {
color: '#cccccc',
width: 1,
},
},
},
timeline: {
lineStyle: {
color: '#666666',
width: 1,
},
itemStyle: {
normal: {
color: '#666666',
borderWidth: 1,
},
emphasis: {
color: '#f7ac4f',
},
},
controlStyle: {
normal: {
color: '#666666',
borderColor: '#666666',
borderWidth: 0.5,
},
emphasis: {
color: '#666666',
borderColor: '#666666',
borderWidth: 0.5,
},
},
checkpointStyle: {
color: '#f7ac4f',
borderColor: 'rgba(254,198,77,0.6)',
},
label: {
normal: {
textStyle: {
color: '#666666',
},
},
emphasis: {
textStyle: {
color: '#666666',
},
},
},
},
visualMap: {
color: ['#4d5b62', '#008ab6', '#ff5f02', '#2cc0bf', '#fed887'],
},
dataZoom: {
backgroundColor: 'rgba(255,255,255,0)',
dataBackgroundColor: 'rgba(255,178,72,0.5)',
fillerColor: 'rgba(255,178,72,0.15)',
handleColor: '#ffb248',
handleSize: '100%',
textStyle: {
color: '#aaaaaa',
},
},
markPoint: {
label: {
normal: {
textStyle: {
color: '#ffffff',
},
},
emphasis: {
textStyle: {
color: '#ffffff',
},
},
},
},
};
/* tslint:disable */
var urbanSunrise = {
color: ['#667279', '#979ea4', '#caced0', '#ffbb9c', '#fd986d', '#ff5f02'],
backgroundColor: 'transparent',
textStyle: {},
title: {
textStyle: {
color: '#aaaaaa',
},
subtextStyle: {
color: '#aaaaaa',
},
},
tree: {
itemStyle: {
color: '#ffbb9c',
borderColor: '#667279',
},
},
line: {
itemStyle: {
normal: {
borderWidth: '2',
},
},
lineStyle: {
normal: {
width: '2',
},
},
symbolSize: '6',
symbol: 'emptyCircle',
smooth: true,
},
radar: {
itemStyle: {
normal: {
borderWidth: '2',
},
},
lineStyle: {
normal: {
width: '2',
},
},
symbolSize: '6',
symbol: 'emptyCircle',
smooth: true,
},
bar: {
itemStyle: {
normal: {
barBorderWidth: 0,
barBorderColor: '#ccc',
},
emphasis: {
barBorderWidth: 0,
barBorderColor: '#ccc',
},
},
},
pie: {
itemStyle: {
normal: {
borderWidth: 0,
borderColor: '#ccc',
},
emphasis: {
borderWidth: 0,
borderColor: '#ccc',
},
},
},
scatter: {
itemStyle: {
normal: {
borderWidth: 0,
borderColor: '#ccc',
},
emphasis: {
borderWidth: 0,
borderColor: '#ccc',
},
},
},
boxplot: {
itemStyle: {
normal: {
borderWidth: 0,
borderColor: '#ccc',
},
emphasis: {
borderWidth: 0,
borderColor: '#ccc',
},
},
},
parallel: {
itemStyle: {
normal: {
borderWidth: 0,
borderColor: '#ccc',
},
emphasis: {
borderWidth: 0,
borderColor: '#ccc',
},
},
},
sankey: {
itemStyle: {
normal: {
borderWidth: 0,
borderColor: '#ccc',
},
emphasis: {
borderWidth: 0,
borderColor: '#ccc',
},
},
},
funnel: {
itemStyle: {
normal: {
borderWidth: 0,
borderColor: '#ccc',
},
emphasis: {
borderWidth: 0,
borderColor: '#ccc',
},
},
},
gauge: {
itemStyle: {
normal: {
borderWidth: 0,
borderColor: '#ccc',
},
emphasis: {
borderWidth: 0,
borderColor: '#ccc',
},
},
},
candlestick: {
itemStyle: {
normal: {
color: '#ff5f02',
color0: 'transparent',
borderColor: '#ff5f02',
borderColor0: '#667279',
borderWidth: '2',
},
},
},
graph: {
itemStyle: {
normal: {
borderWidth: 0,
borderColor: '#ccc',
},
},
lineStyle: {
normal: {
width: 1,
color: '#aaaaaa',
},
},
symbolSize: '6',
symbol: 'emptyCircle',
smooth: true,
color: ['#667279', '#979ea4', '#caced0', '#ffbb9c', '#fd986d', '#ff5f02'],
label: {
normal: {
textStyle: {
color: '#ffffff',
},
},
},
},
map: {
itemStyle: {
normal: {
areaColor: '#f3f3f3',
borderColor: '#999999',
borderWidth: 0.5,
},
emphasis: {
areaColor: 'rgba(254,198,77,1)',
borderColor: '#ecaf2b',
borderWidth: 1,
},
},
label: {
normal: {
textStyle: {
color: '#667279',
},
},
emphasis: {
textStyle: {
color: 'rgb(102,114,121)',
},
},
},
},
geo: {
itemStyle: {
normal: {
areaColor: '#f3f3f3',
borderColor: '#999999',
borderWidth: 0.5,
},
emphasis: {
areaColor: 'rgba(254,198,77,1)',
borderColor: '#ecaf2b',
borderWidth: 1,
},
},
label: {
normal: {
textStyle: {
color: '#667279',
},
},
emphasis: {
textStyle: {
color: 'rgb(102,114,121)',
},
},
},
},
categoryAxis: {
axisLine: {
show: true,
lineStyle: {
color: '#aaaaaa',
},
},
axisTick: {
show: false,
lineStyle: {
color: '#333',
},
},
axisLabel: {
show: true,
textStyle: {
color: '#999999',
},
},
splitLine: {
show: true,
lineStyle: {
color: ['#e6e6e6'],
},
},
splitArea: {
show: false,
areaStyle: {
color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)'],
},
},
},
valueAxis: {
axisLine: {
show: true,
lineStyle: {
color: '#aaaaaa',
},
},
axisTick: {
show: false,
lineStyle: {
color: '#333',
},
},
axisLabel: {
show: true,
textStyle: {
color: '#999999',
},
},
splitLine: {
show: true,
lineStyle: {
color: ['#e6e6e6'],
},
},
splitArea: {
show: false,
areaStyle: {
color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)'],
},
},
},
logAxis: {
axisLine: {
show: true,
lineStyle: {
color: '#aaaaaa',
},
},
axisTick: {
show: false,
lineStyle: {
color: '#333',
},
},
axisLabel: {
show: true,
textStyle: {
color: '#999999',
},
},
splitLine: {
show: true,
lineStyle: {
color: ['#e6e6e6'],
},
},
splitArea: {
show: false,
areaStyle: {
color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)'],
},
},
},
timeAxis: {
axisLine: {
show: true,
lineStyle: {
color: '#aaaaaa',
},
},
axisTick: {
show: false,
lineStyle: {
color: '#333',
},
},
axisLabel: {
show: true,
textStyle: {
color: '#999999',
},
},
splitLine: {
show: true,
lineStyle: {
color: ['#e6e6e6'],
},
},
splitArea: {
show: false,
areaStyle: {
color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)'],
},
},
},
toolbox: {
iconStyle: {
normal: {
borderColor: '#999999',
},
emphasis: {
borderColor: '#666666',
},
},
},
legend: {
textStyle: {
color: '#999999',
},
},
tooltip: {
axisPointer: {
lineStyle: {
color: '#cccccc',
width: 1,
},
crossStyle: {
color: '#cccccc',
width: 1,
},
},
},
timeline: {
lineStyle: {
color: '#666666',
width: 1,
},
itemStyle: {
normal: {
color: '#666666',
borderWidth: 1,
},
emphasis: {
color: '#fec64d',
},
},
controlStyle: {
normal: {
color: '#666666',
borderColor: '#666666',
borderWidth: 0.5,
},
emphasis: {
color: '#666666',
borderColor: '#666666',
borderWidth: 0.5,
},
},
checkpointStyle: {
color: '#ff5f02',
borderColor: 'rgba(255,178,72,0.41)',
},
label: {
normal: {
textStyle: {
color: '#666666',
},
},
emphasis: {
textStyle: {
color: '#666666',
},
},
},
},
visualMap: {
color: ['#667279', '#979ea4', '#caced0', '#ffbb9c', '#fd986d', '#ff5f02'],
},
dataZoom: {
backgroundColor: 'rgba(255,255,255,0)',
dataBackgroundColor: 'rgba(255,178,72,0.5)',
fillerColor: 'rgba(255,178,72,0.15)',
handleColor: '#fec64d',
handleSize: '100%',
textStyle: {
color: '#aaaaaa',
},
},
markPoint: {
label: {
normal: {
textStyle: {
color: '#ffffff',
},
},
emphasis: {
textStyle: {
color: '#ffffff',
},
},
},
},
};
/* tslint:disable */
var volcanicEruption = {
color: ['#565a83', '#7c5c91', '#a85a90', '#cf5880', '#ea5f64', '#ff5f02'],
backgroundColor: 'transparent',
textStyle: {},
title: {
textStyle: {
color: '#aaaaaa',
},
subtextStyle: {
color: '#aaaaaa',
},
},
tree: {
itemStyle: {
color: '#a85a90',
borderColor: '#565a83',
},
},
line: {
itemStyle: {
normal: {
borderWidth: '2',
},
},
lineStyle: {
normal: {
width: '2',
},
},
symbolSize: '6',
symbol: 'emptyCircle',
smooth: true,
},
radar: {
itemStyle: {
normal: {
borderWidth: '2',
},
},
lineStyle: {
normal: {
width: '2',
},
},
symbolSize: '6',
symbol: 'emptyCircle',
smooth: true,
},
bar: {
itemStyle: {
normal: {
barBorderWidth: 0,
barBorderColor: '#ccc',
},
emphasis: {
barBorderWidth: 0,
barBorderColor: '#ccc',
},
},
},
pie: {
itemStyle: {
normal: {
borderWidth: 0,
borderColor: '#ccc',
},
emphasis: {
borderWidth: 0,
borderColor: '#ccc',
},
},
},
scatter: {
itemStyle: {
normal: {
borderWidth: 0,
borderColor: '#ccc',
},
emphasis: {
borderWidth: 0,
borderColor: '#ccc',
},
},
},
boxplot: {
itemStyle: {
normal: {
borderWidth: 0,
borderColor: '#ccc',
},
emphasis: {
borderWidth: 0,
borderColor: '#ccc',
},
},
},
parallel: {
itemStyle: {
normal: {
borderWidth: 0,
borderColor: '#ccc',
},
emphasis: {
borderWidth: 0,
borderColor: '#ccc',
},
},
},
sankey: {
itemStyle: {
normal: {
borderWidth: 0,
borderColor: '#ccc',
},
emphasis: {
borderWidth: 0,
borderColor: '#ccc',
},
},
},
funnel: {
itemStyle: {
normal: {
borderWidth: 0,
borderColor: '#ccc',
},
emphasis: {
borderWidth: 0,
borderColor: '#ccc',
},
},
},
gauge: {
itemStyle: {
normal: {
borderWidth: 0,
borderColor: '#ccc',
},
emphasis: {
borderWidth: 0,
borderColor: '#ccc',
},
},
},
candlestick: {
itemStyle: {
normal: {
color: '#ff5f02',
color0: 'transparent',
borderColor: '#ff5f02',
borderColor0: '#667279',
borderWidth: '2',
},
},
},
graph: {
itemStyle: {
normal: {
borderWidth: 0,
borderColor: '#ccc',
},
},
lineStyle: {
normal: {
width: 1,
color: '#aaaaaa',
},
},
symbolSize: '6',
symbol: 'emptyCircle',
smooth: true,
color: ['#565a83', '#7c5c91', '#a85a90', '#cf5880', '#ea5f64', '#ff5f02'],
label: {
normal: {
textStyle: {
color: '#ffffff',
},
},
},
},
map: {
itemStyle: {
normal: {
areaColor: '#f3f3f3',
borderColor: '#999999',
borderWidth: 0.5,
},
emphasis: {
areaColor: 'rgba(254,198,77,1)',
borderColor: '#ecaf2b',
borderWidth: 1,
},
},
label: {
normal: {
textStyle: {
color: '#667279',
},
},
emphasis: {
textStyle: {
color: 'rgb(102,114,121)',
},
},
},
},
geo: {
itemStyle: {
normal: {
areaColor: '#f3f3f3',
borderColor: '#999999',
borderWidth: 0.5,
},
emphasis: {
areaColor: 'rgba(254,198,77,1)',
borderColor: '#ecaf2b',
borderWidth: 1,
},
},
label: {
normal: {
textStyle: {
color: '#667279',
},
},
emphasis: {
textStyle: {
color: 'rgb(102,114,121)',
},
},
},
},
categoryAxis: {
axisLine: {
show: true,
lineStyle: {
color: '#aaaaaa',
},
},
axisTick: {
show: false,
lineStyle: {
color: '#333',
},
},
axisLabel: {
show: true,
textStyle: {
color: '#999999',
},
},
splitLine: {
show: true,
lineStyle: {
color: ['#e6e6e6'],
},
},
splitArea: {
show: false,
areaStyle: {
color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)'],
},
},
},
valueAxis: {
axisLine: {
show: true,
lineStyle: {
color: '#aaaaaa',
},
},
axisTick: {
show: false,
lineStyle: {
color: '#333',
},
},
axisLabel: {
show: true,
textStyle: {
color: '#999999',
},
},
splitLine: {
show: true,
lineStyle: {
color: ['#e6e6e6'],
},
},
splitArea: {
show: false,
areaStyle: {
color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)'],
},
},
},
logAxis: {
axisLine: {
show: true,
lineStyle: {
color: '#aaaaaa',
},
},
axisTick: {
show: false,
lineStyle: {
color: '#333',
},
},
axisLabel: {
show: true,
textStyle: {
color: '#999999',
},
},
splitLine: {
show: true,
lineStyle: {
color: ['#e6e6e6'],
},
},
splitArea: {
show: false,
areaStyle: {
color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)'],
},
},
},
timeAxis: {
axisLine: {
show: true,
lineStyle: {
color: '#aaaaaa',
},
},
axisTick: {
show: false,
lineStyle: {
color: '#333',
},
},
axisLabel: {
show: true,
textStyle: {
color: '#999999',
},
},
splitLine: {
show: true,
lineStyle: {
color: ['#e6e6e6'],
},
},
splitArea: {
show: false,
areaStyle: {
color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)'],
},
},
},
toolbox: {
iconStyle: {
normal: {
borderColor: '#999999',
},
emphasis: {
borderColor: '#666666',
},
},
},
legend: {
textStyle: {
color: '#000000',
},
},
tooltip: {
axisPointer: {
lineStyle: {
color: '#cccccc',
width: 1,
},
crossStyle: {
color: '#cccccc',
width: 1,
},
},
},
timeline: {
lineStyle: {
color: '#666666',
width: 1,
},
itemStyle: {
normal: {
color: '#666666',
borderWidth: 1,
},
emphasis: {
color: '#fec64d',
},
},
controlStyle: {
normal: {
color: '#666666',
borderColor: '#666666',
borderWidth: 0.5,
},
emphasis: {
color: '#666666',
borderColor: '#666666',
borderWidth: 0.5,
},
},
checkpointStyle: {
color: '#ff5f02',
borderColor: 'rgba(255,178,72,0.41)',
},
label: {
normal: {
textStyle: {
color: '#666666',
},
},
emphasis: {
textStyle: {
color: '#666666',
},
},
},
},
visualMap: {
color: ['#565a83', '#7c5c91', '#a85a90', '#cf5880', '#ea5f64', '#ff5f02'],
},
dataZoom: {
backgroundColor: 'rgba(255,255,255,0)',
dataBackgroundColor: 'rgba(255,178,72,0.5)',
fillerColor: 'rgba(255,178,72,0.15)',
handleColor: '#fec64d',
handleSize: '100%',
textStyle: {
color: '#aaaaaa',
},
},
markPoint: {
label: {
normal: {
textStyle: {
color: '#ffffff',
},
},
emphasis: {
textStyle: {
color: '#ffffff',
},
},
},
},
};
/**
* Function used to register a theme into echarts
* Theme name and theme object needed as stated in
* https://ecomfe.github.io/echarts-doc/public/en/api.html#echarts.registerTheme
*/
function registerTheme(themeName, theme) {
echarts.registerTheme(themeName, theme);
}
/**
* Function to register all default themes
* @internal
*/
function registerDefaultThemes() {
registerTheme('aqua-splash', aquaSplash);
registerTheme('california-coast', californiaCoast);
registerTheme('hawaiian-sunrise', hawaiianSunrise);
registerTheme('passion-flower', passionFlower);
registerTheme('razzleberry-pie', razzleberryPie);
registerTheme('teradata-classic', teradataClassic);
registerTheme('teradata-default', teradataDefault);
registerTheme('urban-sunrise', urbanSunrise);
registerTheme('volcanic-eruption', volcanicEruption);
}
/**
* Returns all the theme names bundled with covalent echarts.
*/
function getThemes() {
return [
'aqua-splash',
'california-coast',
'hawaiian-sunrise',
'passion-flower',
'razzleberry-pie',
'teradata-classic',
'teradata-default',
'urban-sunrise',
'volcanic-eruption',
];
}
class TdChartComponent {
_changeDetectorRef;
_elementRef;
_optionsService;
_destroy = new Subject();
_widthSubject = new Subject();
_heightSubject = new Subject();
_instance;
/**
* returns the echarts instance
*/
get instance() {
return this._instance;
}
_state = {};
_options = {};
/**
* config?: any;
* Sets the JS config object if you choose to not use the property inputs.
* Note: [config] input properties will override input values
* https://ecomfe.github.io/echarts-doc/public/en/option.html
*/
config = {};
/**
* group?: string
* group name in which the chart instance will be connected to
* https://ecomfe.github.io/echarts-doc/public/en/api.html#echarts.connect
*/
group;
/**
* themeName?: string
* theme to be applied into chart instance
* https://ecomfe.github.io/echarts-doc/public/en/tutorial.html#Overview%20of%20Style%20Customization
*/
themeName;
/**
* renderer: 'svg' | 'canvas'
* sets the rendering mode for the chart.
* defaults to 'canvas'
* https://ecomfe.github.io/echarts-doc/public/en/tutorial.html#Render%20by%20Canvas%20or%20SVG
*/
renderer = 'canvas';
chartClick = new EventEmitter();
chartDblclick = new EventEmitter();
chartContextmenu = new EventEmitter();
magicTypeChanged = new EventEmitter();
dataViewChanged = new EventEmitter();
datazoom = new EventEmitter();
restore = new EventEmitter();
constructor(_changeDetectorRef, _elementRef, _optionsService) {
this._changeDetectorRef = _changeDetectorRef;
this._elementRef = _elementRef;
this._optionsService = _optionsService;
}
ngAfterViewInit() {
this._initializeChart();
}
ngOnChanges(changes) {
if (this._instance) {
// destroy and reinitialize chart only when `renderer`, `themeName` and `group` changes
if (changes['renderer'] || changes['themeName'] || changes['group']) {
this._disposeChart();
this._initializeChart();
}
else {
this.render();
}
}
}
ngOnDestroy() {
this._disposeChart();
this._destroy.unsubscribe();
}
render() {
if (this._instance) {
this._instance.setOption(assignDefined(this._state, {
grid: {
show: true,
left: '20',
right: '20',
bottom: (this.config.toolbox &&
typeof this.config.toolbox.bottom === 'number') ||
(this._options.toolbox &&
typeof this._options.toolbox.bottom === 'number')
? '40'
: '10',
top: (this.config.toolbox &&
typeof this.config.toolbox.top === 'number') ||
(this._options.toolbox &&
typeof this._options.toolbox.top === 'number')
? '40'
: '10',
containLabel: true,
},
}, this._options, this.config ? this.config : {}), true);
this._changeDetectorRef.markForCheck();
}
}
_initializeChart() {
this._instance = echarts.init(this._elementRef.nativeElement, this.themeName ?? '', {
renderer: this.renderer,
});
fromEvent(this._instance, 'click')
.pipe(takeUntil(this._destroy))
.subscribe((params) => {
this.chartClick.next(params);
});
fromEvent(this._instance, 'dblclick')
.pipe(takeUntil(this._destroy))
.subscribe((params) => {
this.chartDblclick.next(params);
});
fromEvent(this._instance, 'contextmenu')
.pipe(takeUntil(this._destroy))
.subscribe((params) => {
this.chartContextmenu.next(params);
});
fromEvent(this._instance, 'magictypechanged')
.pipe(takeUntil(this._destroy))
.subscribe((params) => {
this.magicTypeChanged.next(params);
});
fromEvent(this._instance, 'dataviewchanged')
.pipe(takeUntil(this._destroy))
.subscribe((params) => {
this.dataViewChanged.next(params);
});
fromEvent(this._instance, 'datazoom')
.pipe(takeUntil(this._destroy))
.subscribe((params) => {
this.datazoom.next(params);
});
fromEvent(this._instance, 'restore')
.pipe(takeUntil(this._destroy))
.subscribe((params) => {
this.restore.next(params);
});
if (this.group) {
this._instance.group = this.group;
echarts.connect(this.group);
this._changeDetectorRef.markForCheck();
}
merge(fromEvent(window, 'resize').pipe(debounceTime(100)), this._widthSubject.asObservable().pipe(distinctUntilChanged()), this._heightSubject.asObservable().pipe(distinctUntilChanged()))
.pipe(takeUntil(this._destroy), debounceTime(100))
.subscribe(() => {
if (this._instance) {
this._instance.resize();
this._changeDetectorRef.markForCheck();
}
});
this._optionsService
.listen()
.pipe(tap((options) => {
assignDefined(this._options, options);
}), debounceTime(0), takeUntil(this._destroy))
.subscribe(() => {
this.render();
});
timer(500, 250)
.pipe(takeUntil(this._destroy))
.subscribe(() => {
if (this._elementRef && this._elementRef.nativeElement) {
this._widthSubject.next((this._elementRef.nativeElement).getBoundingClientRect().width);
this._heightSubject.next((this._elementRef.nativeElement).getBoundingClientRect().height);
}
});
}
_disposeChart() {
if (this._instance) {
this._instance.clear();
echarts.dispose(this._instance);
}
this._destroy.next(true);
}
static ɵfac = function TdChartComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TdChartComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(TdChartOptionsService)); };
static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TdChartComponent, selectors: [["td-chart"]], inputs: { config: "config", group: "group", themeName: "themeName", renderer: "renderer" }, outputs: { chartClick: "chartClick", chartDblclick: "chartDblclick", chartContextmenu: "chartContextmenu", magicTypeChanged: "magicTypeChanged", dataViewChanged: "dataViewChanged", datazoom: "datazoom", restore: "restore" }, features: [i0.ɵɵProvidersFeature([CHART_PROVIDER]), i0.ɵɵNgOnChangesFeature], decls: 0, vars: 0, template: function TdChartComponent_Template(rf, ctx) { }, styles: ["[_nghost-%COMP%]{display:block;width:100%}"], changeDetection: 0 });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdChartComponent, [{
type: Component,
args: [{ selector: 'td-chart', template: '', changeDetection: ChangeDetectionStrategy.OnPush, providers: [CHART_PROVIDER], styles: [":host{display:block;width:100%}\n"] }]
}], () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: TdChartOptionsService }], { config: [{
type: Input
}], group: [{
type: Input
}], themeName: [{
type: Input
}], renderer: [{
type: Input
}], chartClick: [{
type: Output
}], chartDblclick: [{
type: Output
}], chartContextmenu: [{
type: Output
}], magicTypeChanged: [{
type: Output
}], dataViewChanged: [{
type: Output
}], datazoom: [{
type: Output
}], restore: [{
type: Output
}] }); })();
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TdChartComponent, { className: "TdChartComponent", filePath: "chart.component.ts", lineNumber: 33 }); })();
class TdChartAxisDirective {
_axisOption;
_optionsService;
_state = {};
config = {};
id;
show = true;
gridIndex;
offset;
type;
name;
nameLocation;
nameTextStyle;
nameGap;
nameRotate;
inverse;
boundaryGap;
min;
max;
scale;
minInterval;
interval;
logBase;
silent;
triggerEvent;
axisLine;
axisTick;
axisLabel;
splitLine;
splitArea;
data;
axisPointer;
zlevel;
z;
constructor(_axisOption, _optionsService) {
this._axisOption = _axisOption;
this._optionsService = _optionsService;
}
ngOnInit() {
this._setOptions();
}
ngOnChanges() {
this._setOptions();
}
ngOnDestroy() {
this._removeOption();
}
_setOptions() {
const config = assignDefined(this._state, {
id: this.id,
show: this.show,
gridIndex: this.gridIndex,
position: this.position,
offset: this.offset,
type: this.type,
name: this.name,
nameLocation: this.nameLocation,
nameTextStyle: this.nameTextStyle,
nameGap: this.nameGap,
nameRotate: this.nameRotate,
inverse: this.inverse,
boundaryGap: this.boundaryGap,
min: this.min,
max: this.max,
scale: this.scale,
minInterval: this.minInterval,
interval: this.interval,
logBase: this.logBase,
silent: this.silent,
triggerEvent: this.triggerEvent,
axisLine: this.axisLine,
axisTick: this.axisTick,
axisLabel: this.axisLabel,
splitLine: this.splitLine,
splitArea: this.splitArea,
data: this.data,
axisPointer: this.axisPointer,
zlevel: this.zlevel,
z: this.z,
}, this.config ? this.config : {});
this._optionsService.setArrayOption(this._axisOption, config);
}
_removeOption() {
this._optionsService.clearOption(this._axisOption);
}
static ɵfac = function TdChartAxisDirective_Factory(__ngFactoryType__) { i0.ɵɵinvalidFactory(); };
static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: TdChartAxisDirective, inputs: { config: "config", id: "id", show: "show", gridIndex: "gridIndex", offset: "offset", type: "type", name: "name", nameLocation: "nameLocation", nameTextStyle: "nameTextStyle", nameGap: "nameGap", nameRotate: "nameRotate", inverse: "inverse", boundaryGap: "boundaryGap", min: "min", max: "max", scale: "scale", minInterval: "minInterval", interval: "interval", logBase: "logBase", silent: "silent", triggerEvent: "triggerEvent", axisLine: "axisLine", axisTick: "axisTick", axisLabel: "axisLabel", splitLine: "splitLine", splitArea: "splitArea", data: "data", axisPointer: "axisPointer", zlevel: "zlevel", z: "z" }, features: [i0.ɵɵNgOnChangesFeature] });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdChartAxisDirective, [{
type: Directive
}], () => [{ type: undefined }, { type: TdChartOptionsService }], { config: [{
type: Input
}], id: [{
type: Input
}], show: [{
type: Input
}], gridIndex: [{
type: Input
}], offset: [{
type: Input
}], type: [{
type: Input
}], name: [{
type: Input
}], nameLocation: [{
type: Input
}], nameTextStyle: [{
type: Input
}], nameGap: [{
type: Input
}], nameRotate: [{
type: Input
}], inverse: [{
type: Input
}], boundaryGap: [{
type: Input
}], min: [{
type: Input
}], max: [{
type: Input
}], scale: [{
type: Input
}], minInterval: [{
type: Input
}], interval: [{
type: Input
}], logBase: [{
type: Input
}], silent: [{
type: Input
}], triggerEvent: [{
type: Input
}], axisLine: [{
type: Input
}], axisTick: [{
type: Input
}], axisLabel: [{
type: Input
}], splitLine: [{
type: Input
}], splitArea: [{
type: Input
}], data: [{
type: Input
}], axisPointer: [{
type: Input
}], zlevel: [{
type: Input
}], z: [{
type: Input
}] }); })();
class TdChartXAxisComponent extends TdChartAxisDirective {
position;
constructor(_optionsService) {
super('xAxis', _optionsService);
}
static ɵfac = function TdChartXAxisComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TdChartXAxisComponent)(i0.ɵɵdirectiveInject(TdChartOptionsService)); };
static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TdChartXAxisComponent, selectors: [["td-chart-x-axis"]], inputs: { config: "config", id: "id", show: "show", gridIndex: "gridIndex", offset: "offset", type: "type", name: "name", nameLocation: "nameLocation", nameTextStyle: "nameTextStyle", nameGap: "nameGap", nameRotate: "nameRotate", inverse: "inverse", boundaryGap: "boundaryGap", min: "min", max: "max", scale: "scale", minInterval: "minInterval", interval: "interval", logBase: "logBase", silent: "silent", triggerEvent: "triggerEvent", axisLine: "axisLine", axisTick: "axisTick", axisLabel: "axisLabel", splitLine: "splitLine", splitArea: "splitArea", data: "data", axisPointer: "axisPointer", zlevel: "zlevel", z: "z", position: "position" }, features: [i0.ɵɵInheritDefinitionFeature], decls: 0, vars: 0, template: function TdChartXAxisComponent_Template(rf, ctx) { }, encapsulation: 2, changeDetection: 0 });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdChartXAxisComponent, [{
type: Component,
args: [{
selector: 'td-chart-x-axis',
template: '',
inputs: [
'config',
'id',
'show',
'gridIndex',
'offset',
'type',
'name',
'nameLocation',
'nameTextStyle',
'nameGap',
'nameRotate',
'inverse',
'boundaryGap',
'min',
'max',
'scale',
'minInterval',
'interval',
'logBase',
'silent',
'triggerEvent',
'axisLine',
'axisTick',
'axisLabel',
'splitLine',
'splitArea',
'data',
'axisPointer',
'zlevel',
'z',
],
changeDetection: ChangeDetectionStrategy.OnPush,
}]
}], () => [{ type: TdChartOptionsService }], { position: [{
type: Input
}] }); })();
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TdChartXAxisComponent, { className: "TdChartXAxisComponent", filePath: "axis/x-axis.component.ts", lineNumber: 44 }); })();
class TdChartYAxisComponent extends TdChartAxisDirective {
position;
constructor(_optionsService) {
super('yAxis', _optionsService);
}
static ɵfac = function TdChartYAxisComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TdChartYAxisComponent)(i0.ɵɵdirectiveInject(TdChartOptionsService)); };
static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TdChartYAxisComponent, selectors: [["td-chart-y-axis"]], inputs: { config: "config", id: "id", show: "show", gridIndex: "gridIndex", offset: "offset", type: "type", name: "name", nameLocation: "nameLocation", nameTextStyle: "nameTextStyle", nameGap: "nameGap", nameRotate: "nameRotate", inverse: "inverse", boundaryGap: "boundaryGap", min: "min", max: "max", scale: "scale", minInterval: "minInterval", interval: "interval", logBase: "logBase", silent: "silent", triggerEvent: "triggerEvent", axisLine: "axisLine", axisTick: "axisTick", axisLabel: "axisLabel", splitLine: "splitLine", splitArea: "splitArea", data: "data", axisPointer: "axisPointer", zlevel: "zlevel", z: "z", position: "position" }, features: [i0.ɵɵInheritDefinitionFeature], decls: 0, vars: 0, template: function TdChartYAxisComponent_Template(rf, ctx) { }, encapsulation: 2, changeDetection: 0 });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdChartYAxisComponent, [{
type: Component,
args: [{
selector: 'td-chart-y-axis',
template: '',
inputs: [
'config',
'id',
'show',
'gridIndex',
'offset',
'type',
'name',
'nameLocation',
'nameTextStyle',
'nameGap',
'nameRotate',
'inverse',
'boundaryGap',
'min',
'max',
'scale',
'minInterval',
'interval',
'logBase',
'silent',
'triggerEvent',
'axisLine',
'axisTick',
'axisLabel',
'splitLine',
'splitArea',
'data',
'axisPointer',
'zlevel',
'z',
],
changeDetection: ChangeDetectionStrategy.OnPush,
}]
}], () => [{ type: TdChartOptionsService }], { position: [{
type: Input
}] }); })();
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TdChartYAxisComponent, { className: "TdChartYAxisComponent", filePath: "axis/y-axis.component.ts", lineNumber: 44 }); })();
class TdDatasetComponent {
_optionsService;
_state = {};
id;
config = {};
source;
dimensions;
sourceHeader;
constructor(_optionsService) {
this._optionsService = _optionsService;
}
ngOnChanges() {
this._setOptions();
}
ngOnDestroy() {
this._removeOption();
}
_setOptions() {
const config = assignDefined(this._state, {
id: this.id,
source: this.source,
dimensions: this.dimensions,
sourceHeader: this.sourceHeader,
}, this.config ? this.config : {});
// set dataset configuration in parent chart and render new configurations
this._optionsService.setOption('dataset', config);
}
_removeOption() {
this._optionsService.clearOption('dataset');
}
static ɵfac = function TdDatasetComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TdDatasetComponent)(i0.ɵɵdirectiveInject(TdChartOptionsService)); };
static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TdDatasetComponent, selectors: [["td-chart-dataset"]], inputs: { id: "id", config: "config", source: "source", dimensions: "dimensions", sourceHeader: "sourceHeader" }, features: [i0.ɵɵNgOnChangesFeature], decls: 0, vars: 0, template: function TdDatasetComponent_Template(rf, ctx) { }, encapsulation: 2, changeDetection: 0 });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdDatasetComponent, [{
type: Component,
args: [{
template: '',
selector: 'td-chart-dataset',
changeDetection: ChangeDetectionStrategy.OnPush,
}]
}], () => [{ type: TdChartOptionsService }], { id: [{
type: Input
}], config: [{
type: Input
}], source: [{
type: Input
}], dimensions: [{
type: Input
}], sourceHeader: [{
type: Input
}] }); })();
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TdDatasetComponent, { className: "TdDatasetComponent", filePath: "dataset/dataset.component.ts", lineNumber: 16 }); })();
const BASE_MODULE_COMPONENTS = [
TdChartComponent,
TdChartXAxisComponent,
TdChartYAxisComponent,
TdDatasetComponent,
];
registerDefaultThemes();
/**
* @deprecated This module is deprecated and will be removed in future versions.
* Please migrate to using standalone components as soon as possible.
*/
class CovalentBaseEchartsModule {
static ɵfac = function CovalentBaseEchartsModule_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || CovalentBaseEchartsModule)(); };
static ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: CovalentBaseEchartsModule });
static ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({});
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CovalentBaseEchartsModule, [{
type: NgModule,
args: [{
imports: [BASE_MODULE_COMPONENTS],
exports: [BASE_MODULE_COMPONENTS],
}]
}], null, null); })();
(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(CovalentBaseEchartsModule, { imports: [TdChartComponent,
TdChartXAxisComponent,
TdChartYAxisComponent,
TdDatasetComponent], exports: [TdChartComponent,
TdChartXAxisComponent,
TdChartYAxisComponent,
TdDatasetComponent] }); })();
class TdSeriesDirective {
optionsService;
_type;
get type() {
return this._type;
}
_state = {};
_options = {};
config = {};
id;
name;
color;
data;
animation;
animationThreshold;
animationDuration;
animationEasing;
animationDelay;
animationDurationUpdate;
animationEasingUpdate;
animationDelayUpdate;
tooltip;
constructor(type, optionsService) {
this.optionsService = optionsService;
this._type = type;
}
ngOnInit() {
this._setOptions();
}
ngOnChanges() {
this._setOptions();
}
ngOnDestroy() {
this._removeOption();
}
setStateOption(option, value) {
this._options[option] = value;
this._setOptions();
}
removeStateOption(option) {
/* tslint:disable-next-line */
this._options[option] = null;
this._setOptions();
}
_setOptions() {
const config = assignDefined(this._state, {
id: this.id,
type: this.type,
name: this.name,
color: this.color,
data: this.data,
animation: this.animation,
animationThreshold: this.animationThreshold,
animationDuration: this.animationDuration,
animationEasing: this.animationEasing,
animationDelay: this.animationDelay,
animationDurationUpdate: this.animationDurationUpdate,
animationEasingUpdate: this.animationEasingUpdate,
animationDelayUpdate: this.animationDelayUpdate,
tooltip: this.tooltip,
}, this.getConfig(), this._options, this.config ? this.config : {});
this.optionsService.setArrayOption('series', config);
}
_removeOption() {
this.optionsService.removeArrayOption('series', this._state);
}
static ɵfac = function TdSeriesDirective_Factory(__ngFactoryType__) { i0.ɵɵinvalidFactory(); };
static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: TdSeriesDirective, inputs: { config: "config", id: "id", name: "name", color: "color", data: "data", animation: "animation", animationThreshold: "animationThreshold", animationDuration: "animationDuration", animationEasing: "animationEasing", animationDelay: "animationDelay", animationDurationUpdate: "animationDurationUpdate", animationEasingUpdate: "animationEasingUpdate", animationDelayUpdate: "animationDelayUpdate", tooltip: "tooltip" }, features: [i0.ɵɵNgOnChangesFeature] });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdSeriesDirective, [{
type: Directive
}], () => [{ type: undefined }, { type: TdChartOptionsService }], { config: [{
type: Input
}], id: [{
type: Input
}], name: [{
type: Input
}], color: [{
type: Input
}], data: [{
type: Input
}], animation: [{
type: Input
}], animationThreshold: [{
type: Input
}], animationDuration: [{
type: Input
}], animationEasing: [{
type: Input
}], animationDelay: [{
type: Input
}], animationDurationUpdate: [{
type: Input
}], animationEasingUpdate: [{
type: Input
}], animationDelayUpdate: [{
type: Input
}], tooltip: [{
type: Input
}] }); })();
/**
* Generated bundle index. Do not edit.
*/
export { BASE_MODULE_COMPONENTS, CovalentBaseEchartsModule, TdChartAxisDirective, TdChartComponent, TdChartOptionsService, TdChartXAxisComponent, TdChartYAxisComponent, TdDatasetComponent, TdSeriesDirective, assignDefined, getThemes, registerDefaultThemes, registerTheme };
//# sourceMappingURL=covalent-echarts-base.mjs.map