@yelon/chart
Version:
Cache the dictionary, city data etc.
221 lines (216 loc) • 9.31 kB
JavaScript
import * as i0 from '@angular/core';
import { EventEmitter, booleanAttribute, numberAttribute, Output, Input, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
import { format } from 'date-fns';
import { G2BaseComponent } from '@yelon/chart/core';
import { toDate } from '@yelon/util/date-time';
import { NzStringTemplateOutletDirective, NzOutletModule } from 'ng-zorro-antd/core/outlet';
import { NzSkeletonComponent, NzSkeletonModule } from 'ng-zorro-antd/skeleton';
import { CommonModule } from '@angular/common';
class G2TimelineComponent extends G2BaseComponent {
// #region fields
title;
maxAxis = 2;
data = [];
titleMap;
colorMap = { y1: '#5B8FF9', y2: '#5AD8A6', y3: '#5D7092', y4: '#F6BD16', y5: '#E86452' };
mask = 'HH:mm';
maskSlider = 'HH:mm';
position = 'top';
height = 450;
padding = [40, 8, 64, 40];
borderWidth = 2;
slider = true;
clickItem = new EventEmitter();
// #endregion
onlyChangeData = (changes) => {
const tm = changes.titleMap;
return !(tm && !tm.firstChange && tm.currentValue !== tm.previousValue);
};
install() {
const { node, height, padding, slider, maxAxis, theme, maskSlider } = this;
const chart = (this._chart = new this.winG2.Chart({
container: node.nativeElement,
autoFit: true,
height,
padding,
theme
}));
chart.axis('time', { title: null });
chart.axis('y1', { title: null });
for (let i = 2; i <= maxAxis; i++) {
chart.axis(`y${i}`, false);
}
chart.line().position('time*y1');
for (let i = 2; i <= maxAxis; i++) {
chart.line().position(`time*y${i}`);
}
chart.tooltip({
showCrosshairs: true,
shared: true
});
const sliderPadding = { ...[], ...padding };
sliderPadding[0] = 0;
if (slider) {
chart.option('slider', {
height: 26,
start: 0,
end: 1,
trendCfg: {
isArea: false
},
minLimit: 2,
formatter: (val) => format(val, maskSlider)
});
}
chart.on(`plot:click`, (ev) => {
const records = this._chart.getSnapRecords({ x: ev.x, y: ev.y });
this.ngZone.run(() => this.clickItem.emit({ item: records[0]._origin, ev }));
});
chart.on(`legend-item:click`, (ev) => {
const item = ev?.target?.get('delegateObject').item;
const id = item?.id;
const line = chart.geometries.find(w => w.getAttribute('position').getFields()[1] === id);
if (line) {
line.changeVisible(!item.unchecked);
}
});
this.ready.next(chart);
this.changeData();
chart.render();
}
changeData() {
const { _chart, height, padding, mask, titleMap, position, colorMap, borderWidth, maxAxis } = this;
let data = [...this.data];
if (!_chart || data.length <= 0)
return;
const arrAxis = [...Array(maxAxis)].map((_, index) => index + 1);
_chart.legend({
position,
custom: true,
items: arrAxis.map(id => {
const key = `y${id}`;
return {
id: key,
name: titleMap[key],
value: key,
marker: { style: { fill: colorMap[key] } }
};
})
});
// border
_chart.geometries.forEach((v, idx) => {
v.color(colorMap[`y${idx + 1}`]).size(borderWidth);
});
_chart.height = height;
_chart.padding = padding;
// 转换成日期类型
data = data
.map(item => {
item.time = toDate(item.time);
item._time = +item.time;
return item;
})
.sort((a, b) => a._time - b._time);
const max = Math.max(...arrAxis.map(id => [...data].sort((a, b) => b[`y${id}`] - a[`y${id}`])[0][`y${id}`]));
const scaleOptions = {};
arrAxis.forEach(id => {
const key = `y${id}`;
scaleOptions[key] = {
alias: titleMap[key],
max,
min: 0
};
});
_chart.scale({
time: {
type: 'time',
mask,
range: [0, 1]
},
...scaleOptions
});
const initialRange = {
start: data[0]._time,
end: data[data.length - 1]._time
};
const filterData = data.filter(val => val._time >= initialRange.start && val._time <= initialRange.end);
_chart.changeData(filterData);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: G2TimelineComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: G2TimelineComponent, isStandalone: true, selector: "g2-timeline", inputs: { title: "title", maxAxis: ["maxAxis", "maxAxis", numberAttribute], data: "data", titleMap: "titleMap", colorMap: "colorMap", mask: "mask", maskSlider: "maskSlider", position: "position", height: ["height", "height", numberAttribute], padding: "padding", borderWidth: ["borderWidth", "borderWidth", numberAttribute], slider: ["slider", "slider", booleanAttribute] }, outputs: { clickItem: "clickItem" }, exportAs: ["g2Timeline"], usesInheritance: true, ngImport: i0, template: `
<ng-container *nzStringTemplateOutlet="title">
<h4>{{ title }}</h4>
</ng-container>
@if (!loaded) {
<nz-skeleton />
}
<div #container></div>
`, isInline: true, dependencies: [{ kind: "directive", type: NzStringTemplateOutletDirective, selector: "[nzStringTemplateOutlet]", inputs: ["nzStringTemplateOutletContext", "nzStringTemplateOutlet"], exportAs: ["nzStringTemplateOutlet"] }, { kind: "component", type: NzSkeletonComponent, selector: "nz-skeleton", inputs: ["nzActive", "nzLoading", "nzRound", "nzTitle", "nzAvatar", "nzParagraph"], exportAs: ["nzSkeleton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: G2TimelineComponent, decorators: [{
type: Component,
args: [{
selector: 'g2-timeline',
exportAs: 'g2Timeline',
template: `
<ng-container *nzStringTemplateOutlet="title">
<h4>{{ title }}</h4>
</ng-container>
@if (!loaded) {
<nz-skeleton />
}
<div #container></div>
`,
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
imports: [NzStringTemplateOutletDirective, NzSkeletonComponent]
}]
}], propDecorators: { title: [{
type: Input
}], maxAxis: [{
type: Input,
args: [{ transform: numberAttribute }]
}], data: [{
type: Input
}], titleMap: [{
type: Input
}], colorMap: [{
type: Input
}], mask: [{
type: Input
}], maskSlider: [{
type: Input
}], position: [{
type: Input
}], height: [{
type: Input,
args: [{ transform: numberAttribute }]
}], padding: [{
type: Input
}], borderWidth: [{
type: Input,
args: [{ transform: numberAttribute }]
}], slider: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], clickItem: [{
type: Output
}] } });
const COMPONENTS = [G2TimelineComponent];
class G2TimelineModule {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: G2TimelineModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.3", ngImport: i0, type: G2TimelineModule, imports: [CommonModule, NzOutletModule, NzSkeletonModule, G2TimelineComponent], exports: [G2TimelineComponent] });
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: G2TimelineModule, imports: [CommonModule, NzOutletModule, NzSkeletonModule, COMPONENTS] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: G2TimelineModule, decorators: [{
type: NgModule,
args: [{
imports: [CommonModule, NzOutletModule, NzSkeletonModule, ...COMPONENTS],
exports: COMPONENTS
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { G2TimelineComponent, G2TimelineModule };
//# sourceMappingURL=timeline.mjs.map