@delon/chart 12.4.1 → 13.0.0

package/fesm2020/single-bar.mjs

@@ -0,0 +1,149 @@
+import { __decorate } from 'tslib';
+import * as i0 from '@angular/core';
+import { Component, ChangeDetectionStrategy, ViewEncapsulation, Input, NgModule } from '@angular/core';
+import { G2BaseComponent } from '@delon/chart/core';
+import { InputNumber, InputBoolean } from '@delon/util/decorator';
+import { CommonModule } from '@angular/common';
+
+class G2SingleBarComponent extends G2BaseComponent {
+    constructor() {
+        super(...arguments);
+        // #region fields
+        this.plusColor = '#40a9ff';
+        this.minusColor = '#ff4d4f';
+        this.height = 60;
+        this.barSize = 30;
+        this.min = 0;
+        this.max = 100;
+        this.value = 0;
+        this.line = false;
+        this.padding = 0;
+        this.textStyle = { fontSize: 12, color: '#595959' };
+        this.onlyChangeData = (changes) => {
+            return Object.keys(changes).length === 1 && !!changes.value;
+        };
+    }
+    // #endregion
+    install() {
+        const { el, height, padding, textStyle, line, format, theme, min, max, plusColor, minusColor, barSize } = this;
+        const chart = (this._chart = new window.G2.Chart({
+            container: el.nativeElement,
+            autoFit: true,
+            height,
+            padding,
+            theme
+        }));
+        chart.legend(false);
+        chart.axis(false);
+        chart.scale({ value: { max, min } });
+        chart.tooltip(false);
+        chart.coordinate().transpose();
+        chart
+            .interval()
+            .position('1*value')
+            .color('value', (val) => (val > 0 ? plusColor : minusColor))
+            .size(barSize)
+            .label('value', () => ({
+            formatter: format,
+            style: {
+                ...textStyle
+            }
+        }));
+        if (line) {
+            chart.annotation().line({
+                start: ['50%', '0%'],
+                end: ['50%', '100%'],
+                style: {
+                    stroke: '#e8e8e8',
+                    lineDash: [0, 0]
+                }
+            });
+        }
+        this.changeData();
+        chart.render();
+    }
+    changeData() {
+        const { _chart, value } = this;
+        if (!_chart)
+            return;
+        _chart.changeData([{ value }]);
+    }
+}
+G2SingleBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: G2SingleBarComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+G2SingleBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: G2SingleBarComponent, selector: "g2-single-bar", inputs: { plusColor: "plusColor", minusColor: "minusColor", height: "height", barSize: "barSize", min: "min", max: "max", value: "value", line: "line", format: "format", padding: "padding", textStyle: "textStyle" }, host: { properties: { "style.height.px": "height" } }, exportAs: ["g2SingleBar"], usesInheritance: true, ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+__decorate([
+    InputNumber()
+], G2SingleBarComponent.prototype, "height", void 0);
+__decorate([
+    InputNumber()
+], G2SingleBarComponent.prototype, "barSize", void 0);
+__decorate([
+    InputNumber()
+], G2SingleBarComponent.prototype, "min", void 0);
+__decorate([
+    InputNumber()
+], G2SingleBarComponent.prototype, "max", void 0);
+__decorate([
+    InputNumber()
+], G2SingleBarComponent.prototype, "value", void 0);
+__decorate([
+    InputBoolean()
+], G2SingleBarComponent.prototype, "line", void 0);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: G2SingleBarComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'g2-single-bar',
+                    exportAs: 'g2SingleBar',
+                    template: ``,
+                    host: {
+                        '[style.height.px]': 'height'
+                    },
+                    preserveWhitespaces: false,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None
+                }]
+        }], propDecorators: { plusColor: [{
+                type: Input
+            }], minusColor: [{
+                type: Input
+            }], height: [{
+                type: Input
+            }], barSize: [{
+                type: Input
+            }], min: [{
+                type: Input
+            }], max: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], line: [{
+                type: Input
+            }], format: [{
+                type: Input
+            }], padding: [{
+                type: Input
+            }], textStyle: [{
+                type: Input
+            }] } });
+
+const COMPONENTS = [G2SingleBarComponent];
+class G2SingleBarModule {
+}
+G2SingleBarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: G2SingleBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+G2SingleBarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: G2SingleBarModule, declarations: [G2SingleBarComponent], imports: [CommonModule], exports: [G2SingleBarComponent] });
+G2SingleBarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: G2SingleBarModule, imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: G2SingleBarModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule],
+                    declarations: COMPONENTS,
+                    exports: COMPONENTS
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { G2SingleBarComponent, G2SingleBarModule };
+//# sourceMappingURL=single-bar.mjs.map

package/fesm2020/single-bar.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"single-bar.mjs","sources":["../../../../packages/chart/single-bar/single-bar.component.ts","../../../../packages/chart/single-bar/single-bar.module.ts","../../../../packages/chart/single-bar/single-bar.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, Input, SimpleChanges, ViewEncapsulation } from '@angular/core';\n\nimport type { Chart } from '@antv/g2';\n\nimport { G2BaseComponent } from '@delon/chart/core';\nimport { BooleanInput, InputBoolean, InputNumber, NumberInput } from '@delon/util/decorator';\nimport type { NzSafeAny } from 'ng-zorro-antd/core/types';\n\n@Component({\n  selector: 'g2-single-bar',\n  exportAs: 'g2SingleBar',\n  template: ``,\n  host: {\n    '[style.height.px]': 'height'\n  },\n  preserveWhitespaces: false,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None\n})\nexport class G2SingleBarComponent extends G2BaseComponent {\n  static ngAcceptInputType_height: NumberInput;\n  static ngAcceptInputType_barSize: NumberInput;\n  static ngAcceptInputType_min: NumberInput;\n  static ngAcceptInputType_max: NumberInput;\n  static ngAcceptInputType_value: NumberInput;\n  static ngAcceptInputType_line: BooleanInput;\n\n  // #region fields\n\n  @Input() plusColor = '#40a9ff';\n  @Input() minusColor = '#ff4d4f';\n  @Input() @InputNumber() height = 60;\n  @Input() @InputNumber() barSize = 30;\n  @Input() @InputNumber() min = 0;\n  @Input() @InputNumber() max = 100;\n  @Input() @InputNumber() value = 0;\n  @Input() @InputBoolean() line = false;\n  @Input() format?: (value: number, item: NzSafeAny, index: number) => string;\n  @Input() padding: number | number[] | 'auto' = 0;\n  @Input() textStyle: { [key: string]: NzSafeAny } = { fontSize: 12, color: '#595959' };\n\n  // #endregion\n\n  install(): void {\n    const { el, height, padding, textStyle, line, format, theme, min, max, plusColor, minusColor, barSize } = this;\n    const chart: Chart = (this._chart = new (window as NzSafeAny).G2.Chart({\n      container: el.nativeElement,\n      autoFit: true,\n      height,\n      padding,\n      theme\n    }));\n    chart.legend(false);\n    chart.axis(false);\n    chart.scale({ value: { max, min } });\n    chart.tooltip(false);\n    chart.coordinate().transpose();\n    chart\n      .interval()\n      .position('1*value')\n      .color('value', (val: number) => (val > 0 ? plusColor : minusColor))\n      .size(barSize)\n      .label('value', () => ({\n        formatter: format,\n        style: {\n          ...textStyle\n        }\n      }));\n\n    if (line) {\n      chart.annotation().line({\n        start: ['50%', '0%'],\n        end: ['50%', '100%'],\n        style: {\n          stroke: '#e8e8e8',\n          lineDash: [0, 0]\n        }\n      });\n    }\n\n    this.changeData();\n\n    chart.render();\n  }\n\n  onlyChangeData = (changes: SimpleChanges): boolean => {\n    return Object.keys(changes).length === 1 && !!changes.value;\n  };\n\n  changeData(): void {\n    const { _chart, value } = this;\n    if (!_chart) return;\n    _chart.changeData([{ value }]);\n  }\n}\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\n\nimport { G2SingleBarComponent } from './single-bar.component';\n\nconst COMPONENTS = [G2SingleBarComponent];\n\n@NgModule({\n  imports: [CommonModule],\n  declarations: COMPONENTS,\n  exports: COMPONENTS\n})\nexport class G2SingleBarModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}

package/fesm2020/tag-cloud.mjs

@@ -0,0 +1,185 @@
+import { __decorate } from 'tslib';
+import * as i0 from '@angular/core';
+import { EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, Output, NgModule } from '@angular/core';
+import { fromEvent } from 'rxjs';
+import { filter, debounceTime } from 'rxjs/operators';
+import { G2BaseComponent } from '@delon/chart/core';
+import { InputNumber } from '@delon/util/decorator';
+import * as i1 from 'ng-zorro-antd/skeleton';
+import { NzSkeletonModule } from 'ng-zorro-antd/skeleton';
+import * as i2 from '@angular/common';
+import { CommonModule } from '@angular/common';
+
+class G2TagCloudComponent extends G2BaseComponent {
+    constructor() {
+        super(...arguments);
+        // #region fields
+        this.width = 0;
+        this.height = 200;
+        this.padding = 0;
+        this.data = [];
+        this.clickItem = new EventEmitter();
+    }
+    // #endregion
+    initTagCloud() {
+        window.G2.registerShape('point', 'cloud', {
+            draw(cfg, container) {
+                const data = cfg.data;
+                const textShape = container.addShape({
+                    type: 'text',
+                    name: 'tag-cloud-text',
+                    attrs: {
+                        ...cfg.style,
+                        fontSize: data.size,
+                        text: data.text,
+                        textAlign: 'center',
+                        fontFamily: data.font,
+                        fill: cfg.color,
+                        textBaseline: 'Alphabetic',
+                        x: cfg.x,
+                        y: cfg.y
+                    }
+                });
+                if (data.rotate) {
+                    window.G2.Util.rotate(textShape, (data.rotate * Math.PI) / 180);
+                }
+                return textShape;
+            }
+        });
+    }
+    install() {
+        this.initTagCloud();
+        const { el, padding, theme } = this;
+        if (this.height === 0) {
+            this.height = this.el.nativeElement.clientHeight;
+        }
+        if (this.width === 0) {
+            this.width = this.el.nativeElement.clientWidth;
+        }
+        const chart = (this._chart = new window.G2.Chart({
+            container: el.nativeElement,
+            autoFit: false,
+            padding,
+            height: this.height,
+            width: this.width,
+            theme
+        }));
+        chart.scale({
+            x: { nice: false },
+            y: { nice: false }
+        });
+        chart.legend(false);
+        chart.axis(false);
+        chart.tooltip({
+            showTitle: false,
+            showMarkers: false
+        });
+        chart.coordinate().reflect();
+        chart
+            .point()
+            .position('x*y')
+            .color('text')
+            .shape('cloud')
+            .state({
+            active: {
+                style: {
+                    fillOpacity: 0.4
+                }
+            }
+        });
+        chart.interaction('element-active');
+        chart.on('tag-cloud-text:click', (ev) => {
+            this.ngZone.run(() => this.clickItem.emit({ item: ev.data?.data, ev }));
+        });
+        this.changeData();
+        chart.render();
+    }
+    changeData() {
+        const { _chart, data } = this;
+        if (!_chart || !Array.isArray(data) || data.length <= 0)
+            return;
+        const dv = new window.DataSet.View().source(data);
+        const range = dv.range('value');
+        const min = range[0];
+        const max = range[1];
+        dv.transform({
+            type: 'tag-cloud',
+            fields: ['name', 'value'],
+            // imageMask,
+            font: 'Verdana',
+            size: [this.width, this.height],
+            padding: 0,
+            timeInterval: 5000,
+            rotate() {
+                let random = ~~(Math.random() * 4) % 4;
+                if (random === 2) {
+                    random = 0;
+                }
+                return random * 90; // 0, 90, 270
+            },
+            fontSize(d) {
+                return ((d.value - min) / (max - min)) * (32 - 8) + 8;
+            }
+        });
+        _chart.changeData(dv.rows);
+    }
+    installResizeEvent() {
+        this.resize$ = fromEvent(window, 'resize')
+            .pipe(filter(() => !!this._chart), debounceTime(200))
+            .subscribe(() => this.changeData());
+    }
+    onInit() {
+        this.installResizeEvent();
+    }
+}
+G2TagCloudComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: G2TagCloudComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+G2TagCloudComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: G2TagCloudComponent, selector: "g2-tag-cloud", inputs: { width: "width", height: "height", padding: "padding", data: "data" }, outputs: { clickItem: "clickItem" }, exportAs: ["g2TagCloud"], usesInheritance: true, ngImport: i0, template: `<nz-skeleton *ngIf="!loaded"></nz-skeleton>`, isInline: true, components: [{ type: i1.NzSkeletonComponent, selector: "nz-skeleton", inputs: ["nzActive", "nzLoading", "nzRound", "nzTitle", "nzAvatar", "nzParagraph"], exportAs: ["nzSkeleton"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+__decorate([
+    InputNumber()
+], G2TagCloudComponent.prototype, "width", void 0);
+__decorate([
+    InputNumber()
+], G2TagCloudComponent.prototype, "height", void 0);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: G2TagCloudComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'g2-tag-cloud',
+                    exportAs: 'g2TagCloud',
+                    template: `<nz-skeleton *ngIf="!loaded"></nz-skeleton>`,
+                    preserveWhitespaces: false,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None
+                }]
+        }], propDecorators: { width: [{
+                type: Input
+            }], height: [{
+                type: Input
+            }], padding: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], clickItem: [{
+                type: Output
+            }] } });
+
+const COMPONENTS = [G2TagCloudComponent];
+class G2TagCloudModule {
+}
+G2TagCloudModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: G2TagCloudModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+G2TagCloudModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: G2TagCloudModule, declarations: [G2TagCloudComponent], imports: [CommonModule, NzSkeletonModule], exports: [G2TagCloudComponent] });
+G2TagCloudModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: G2TagCloudModule, imports: [[CommonModule, NzSkeletonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: G2TagCloudModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, NzSkeletonModule],
+                    declarations: COMPONENTS,
+                    exports: COMPONENTS
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { G2TagCloudComponent, G2TagCloudModule };
+//# sourceMappingURL=tag-cloud.mjs.map

package/fesm2020/tag-cloud.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tag-cloud.mjs","sources":["../../../../packages/chart/tag-cloud/tag-cloud.component.ts","../../../../packages/chart/tag-cloud/tag-cloud.module.ts","../../../../packages/chart/tag-cloud/tag-cloud.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, ViewEncapsulation } from '@angular/core';\nimport { fromEvent } from 'rxjs';\nimport { debounceTime, filter } from 'rxjs/operators';\n\nimport type { Chart, Event } from '@antv/g2';\n\nimport { G2BaseComponent } from '@delon/chart/core';\nimport { InputNumber, NumberInput } from '@delon/util/decorator';\nimport type { NzSafeAny } from 'ng-zorro-antd/core/types';\n\nexport interface G2TagCloudData {\n  value?: number;\n  name?: string;\n  [key: string]: NzSafeAny;\n}\n\nexport interface G2TagCloudClickItem {\n  item: G2TagCloudData;\n  ev: Event;\n}\n\n@Component({\n  selector: 'g2-tag-cloud',\n  exportAs: 'g2TagCloud',\n  template: `<nz-skeleton *ngIf=\"!loaded\"></nz-skeleton>`,\n  preserveWhitespaces: false,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None\n})\nexport class G2TagCloudComponent extends G2BaseComponent {\n  static ngAcceptInputType_height: NumberInput;\n  static ngAcceptInputType_width: NumberInput;\n\n  // #region fields\n\n  @Input() @InputNumber() width = 0;\n  @Input() @InputNumber() height = 200;\n  @Input() padding: number | number[] | 'auto' = 0;\n  @Input() data: G2TagCloudData[] = [];\n  @Output() readonly clickItem = new EventEmitter<G2TagCloudClickItem>();\n\n  // #endregion\n\n  private initTagCloud(): void {\n    (window as NzSafeAny).G2.registerShape('point', 'cloud', {\n      draw(cfg: NzSafeAny, container: NzSafeAny) {\n        const data = cfg.data as NzSafeAny;\n        const textShape = container.addShape({\n          type: 'text',\n          name: 'tag-cloud-text',\n          attrs: {\n            ...cfg.style,\n            fontSize: data.size,\n            text: data.text,\n            textAlign: 'center',\n            fontFamily: data.font,\n            fill: cfg.color,\n            textBaseline: 'Alphabetic',\n            x: cfg.x,\n            y: cfg.y\n          } as NzSafeAny\n        });\n        if (data.rotate) {\n          (window as NzSafeAny).G2.Util.rotate(textShape, (data.rotate * Math.PI) / 180);\n        }\n        return textShape;\n      }\n    });\n  }\n\n  install(): void {\n    this.initTagCloud();\n\n    const { el, padding, theme } = this;\n    if (this.height === 0) {\n      this.height = this.el.nativeElement.clientHeight;\n    }\n    if (this.width === 0) {\n      this.width = this.el.nativeElement.clientWidth;\n    }\n\n    const chart: Chart = (this._chart = new (window as NzSafeAny).G2.Chart({\n      container: el.nativeElement,\n      autoFit: false,\n      padding,\n      height: this.height,\n      width: this.width,\n      theme\n    }));\n    chart.scale({\n      x: { nice: false },\n      y: { nice: false }\n    });\n    chart.legend(false);\n    chart.axis(false);\n    chart.tooltip({\n      showTitle: false,\n      showMarkers: false\n    });\n    (chart.coordinate() as NzSafeAny).reflect();\n    chart\n      .point()\n      .position('x*y')\n      .color('text')\n      .shape('cloud')\n      .state({\n        active: {\n          style: {\n            fillOpacity: 0.4\n          }\n        }\n      });\n    chart.interaction('element-active');\n\n    chart.on('tag-cloud-text:click', (ev: Event) => {\n      this.ngZone.run(() => this.clickItem.emit({ item: ev.data?.data, ev }));\n    });\n\n    this.changeData();\n    chart.render();\n  }\n\n  changeData(): void {\n    const { _chart, data } = this;\n    if (!_chart || !Array.isArray(data) || data.length <= 0) return;\n\n    const dv = new (window as NzSafeAny).DataSet.View().source(data);\n    const range = dv.range('value');\n    const min = range[0];\n    const max = range[1];\n\n    dv.transform({\n      type: 'tag-cloud',\n      fields: ['name', 'value'],\n      // imageMask,\n      font: 'Verdana',\n      size: [this.width, this.height], // 宽高设置最好根据 imageMask 做调整\n      padding: 0,\n      timeInterval: 5000, // max execute time\n      rotate() {\n        let random = ~~(Math.random() * 4) % 4;\n        if (random === 2) {\n          random = 0;\n        }\n        return random * 90; // 0, 90, 270\n      },\n      fontSize(d: NzSafeAny) {\n        return ((d.value - min) / (max - min)) * (32 - 8) + 8;\n      }\n    } as NzSafeAny);\n\n    _chart.changeData(dv.rows);\n  }\n\n  private installResizeEvent(): void {\n    this.resize$ = fromEvent(window, 'resize')\n      .pipe(\n        filter(() => !!this._chart),\n        debounceTime(200)\n      )\n      .subscribe(() => this.changeData());\n  }\n\n  onInit(): void {\n    this.installResizeEvent();\n  }\n}\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\n\nimport { NzSkeletonModule } from 'ng-zorro-antd/skeleton';\n\nimport { G2TagCloudComponent } from './tag-cloud.component';\n\nconst COMPONENTS = [G2TagCloudComponent];\n\n@NgModule({\n  imports: [CommonModule, NzSkeletonModule],\n  declarations: COMPONENTS,\n  exports: COMPONENTS\n})\nexport class G2TagCloudModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}

package/fesm2020/timeline.mjs

@@ -0,0 +1,229 @@
+import { __decorate } from 'tslib';
+import * as i0 from '@angular/core';
+import { EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, Output, NgModule } from '@angular/core';
+import { format } from 'date-fns';
+import { G2BaseComponent } from '@delon/chart/core';
+import { toDate } from '@delon/util/date-time';
+import { InputNumber, InputBoolean } from '@delon/util/decorator';
+import * as i1 from 'ng-zorro-antd/skeleton';
+import { NzSkeletonModule } from 'ng-zorro-antd/skeleton';
+import * as i2 from 'ng-zorro-antd/core/outlet';
+import { NzOutletModule } from 'ng-zorro-antd/core/outlet';
+import * as i3 from '@angular/common';
+import { CommonModule } from '@angular/common';
+
+class G2TimelineComponent extends G2BaseComponent {
+    constructor() {
+        super(...arguments);
+        this.maxAxis = 2;
+        this.data = [];
+        this.colorMap = { y1: '#5B8FF9', y2: '#5AD8A6', y3: '#5D7092', y4: '#F6BD16', y5: '#E86452' };
+        this.mask = 'HH:mm';
+        this.maskSlider = 'HH:mm';
+        this.position = 'top';
+        this.height = 450;
+        this.padding = [40, 8, 64, 40];
+        this.borderWidth = 2;
+        this.slider = true;
+        this.clickItem = new EventEmitter();
+        // #endregion
+        this.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 window.G2.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.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);
+    }
+}
+G2TimelineComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: G2TimelineComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+G2TimelineComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: G2TimelineComponent, selector: "g2-timeline", inputs: { title: "title", maxAxis: "maxAxis", data: "data", titleMap: "titleMap", colorMap: "colorMap", mask: "mask", maskSlider: "maskSlider", position: "position", height: "height", padding: "padding", borderWidth: "borderWidth", slider: "slider" }, outputs: { clickItem: "clickItem" }, exportAs: ["g2Timeline"], usesInheritance: true, ngImport: i0, template: `
+    <ng-container *nzStringTemplateOutlet="title">
+      <h4>{{ title }}</h4>
+    </ng-container>
+    <nz-skeleton *ngIf="!loaded"></nz-skeleton>
+    <div #container></div>
+  `, isInline: true, components: [{ type: i1.NzSkeletonComponent, selector: "nz-skeleton", inputs: ["nzActive", "nzLoading", "nzRound", "nzTitle", "nzAvatar", "nzParagraph"], exportAs: ["nzSkeleton"] }], directives: [{ type: i2.NzStringTemplateOutletDirective, selector: "[nzStringTemplateOutlet]", inputs: ["nzStringTemplateOutletContext", "nzStringTemplateOutlet"], exportAs: ["nzStringTemplateOutlet"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+__decorate([
+    InputNumber()
+], G2TimelineComponent.prototype, "maxAxis", void 0);
+__decorate([
+    InputNumber()
+], G2TimelineComponent.prototype, "height", void 0);
+__decorate([
+    InputNumber()
+], G2TimelineComponent.prototype, "borderWidth", void 0);
+__decorate([
+    InputBoolean()
+], G2TimelineComponent.prototype, "slider", void 0);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: G2TimelineComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'g2-timeline',
+                    exportAs: 'g2Timeline',
+                    template: `
+    <ng-container *nzStringTemplateOutlet="title">
+      <h4>{{ title }}</h4>
+    </ng-container>
+    <nz-skeleton *ngIf="!loaded"></nz-skeleton>
+    <div #container></div>
+  `,
+                    preserveWhitespaces: false,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None
+                }]
+        }], propDecorators: { title: [{
+                type: Input
+            }], maxAxis: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], titleMap: [{
+                type: Input
+            }], colorMap: [{
+                type: Input
+            }], mask: [{
+                type: Input
+            }], maskSlider: [{
+                type: Input
+            }], position: [{
+                type: Input
+            }], height: [{
+                type: Input
+            }], padding: [{
+                type: Input
+            }], borderWidth: [{
+                type: Input
+            }], slider: [{
+                type: Input
+            }], clickItem: [{
+                type: Output
+            }] } });
+
+const COMPONENTS = [G2TimelineComponent];
+class G2TimelineModule {
+}
+G2TimelineModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: G2TimelineModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+G2TimelineModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: G2TimelineModule, declarations: [G2TimelineComponent], imports: [CommonModule, NzOutletModule, NzSkeletonModule], exports: [G2TimelineComponent] });
+G2TimelineModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: G2TimelineModule, imports: [[CommonModule, NzOutletModule, NzSkeletonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: G2TimelineModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, NzOutletModule, NzSkeletonModule],
+                    declarations: COMPONENTS,
+                    exports: COMPONENTS
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { G2TimelineComponent, G2TimelineModule };
+//# sourceMappingURL=timeline.mjs.map

package/fesm2020/timeline.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"timeline.mjs","sources":["../../../../packages/chart/timeline/timeline.component.ts","../../../../packages/chart/timeline/timeline.module.ts","../../../../packages/chart/timeline/timeline.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  EventEmitter,\n  Input,\n  Output,\n  SimpleChanges,\n  TemplateRef,\n  ViewEncapsulation\n} from '@angular/core';\n\nimport type { Chart, Event, Types } from '@antv/g2';\nimport { format } from 'date-fns';\n\nimport { G2BaseComponent, G2Time } from '@delon/chart/core';\nimport { toDate } from '@delon/util/date-time';\nimport { BooleanInput, InputBoolean, InputNumber, NumberInput } from '@delon/util/decorator';\nimport type { NzSafeAny } from 'ng-zorro-antd/core/types';\n\nexport interface G2TimelineData {\n  /**\n   * 时间值\n   */\n  time?: G2Time;\n  /** 指标1数据 */\n  y1: number;\n  /** 指标2数据 */\n  y2: number;\n  /** 指标3数据 */\n  y3?: number;\n  /** 指标4数据 */\n  y4?: number;\n  /** 指标5数据 */\n  y5?: number;\n  [key: string]: NzSafeAny;\n}\n\nexport interface G2TimelineMap {\n  /** 指标1 */\n  y1: string;\n  /** 指标 */\n  y2: string;\n  /** 指标3 */\n  y3?: string;\n  /** 指标4 */\n  y4?: string;\n  /** 指标5 */\n  y5?: string;\n\n  [key: string]: string | undefined;\n}\n\nexport interface G2TimelineClickItem {\n  item: G2TimelineData;\n  ev: Event;\n}\n\n@Component({\n  selector: 'g2-timeline',\n  exportAs: 'g2Timeline',\n  template: `\n    <ng-container *nzStringTemplateOutlet=\"title\">\n      <h4>{{ title }}</h4>\n    </ng-container>\n    <nz-skeleton *ngIf=\"!loaded\"></nz-skeleton>\n    <div #container></div>\n  `,\n  preserveWhitespaces: false,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None\n})\nexport class G2TimelineComponent extends G2BaseComponent {\n  static ngAcceptInputType_height: NumberInput;\n  static ngAcceptInputType_maxAxis: NumberInput;\n  static ngAcceptInputType_borderWidth: NumberInput;\n  static ngAcceptInputType_slider: BooleanInput;\n\n  // #region fields\n\n  @Input() title?: string | TemplateRef<void> | null;\n  @Input() @InputNumber() maxAxis = 2;\n  @Input() data: G2TimelineData[] = [];\n  @Input() titleMap?: G2TimelineMap | null;\n  @Input() colorMap: G2TimelineMap = { y1: '#5B8FF9', y2: '#5AD8A6', y3: '#5D7092', y4: '#F6BD16', y5: '#E86452' };\n  @Input() mask: string = 'HH:mm';\n  @Input() maskSlider: string = 'HH:mm';\n  @Input() position: 'top' | 'right' | 'bottom' | 'left' = 'top';\n  @Input() @InputNumber() height = 450;\n  @Input() padding: number[] = [40, 8, 64, 40];\n  @Input() @InputNumber() borderWidth = 2;\n  @Input() @InputBoolean() slider = true;\n  @Output() readonly clickItem = new EventEmitter<G2TimelineClickItem>();\n\n  // #endregion\n\n  onlyChangeData = (changes: SimpleChanges): boolean => {\n    const tm = changes.titleMap;\n    return !(tm && !tm.firstChange && tm.currentValue !== tm.previousValue);\n  };\n\n  install(): void {\n    const { node, height, padding, slider, maxAxis, theme, maskSlider } = this;\n    const chart: Chart = (this._chart = new (window as NzSafeAny).G2.Chart({\n      container: node.nativeElement,\n      autoFit: true,\n      height,\n      padding,\n      theme\n    }));\n    chart.axis('time', { title: null });\n    chart.axis('y1', { title: null });\n    for (let i = 2; i <= maxAxis; i++) {\n      chart.axis(`y${i}`, false);\n    }\n\n    chart.line().position('time*y1');\n    for (let i = 2; i <= maxAxis; i++) {\n      chart.line().position(`time*y${i}`);\n    }\n\n    chart.tooltip({\n      showCrosshairs: true,\n      shared: true\n    });\n\n    const sliderPadding = { ...[], ...padding };\n    sliderPadding[0] = 0;\n    if (slider) {\n      chart.option('slider', {\n        height: 26,\n        start: 0,\n        end: 1,\n        trendCfg: {\n          isArea: false\n        },\n        minLimit: 2,\n        formatter: (val: Date) => format(val, maskSlider)\n      });\n    }\n\n    chart.on(`plot:click`, (ev: Event) => {\n      const records = this._chart.getSnapRecords({ x: ev.x, y: ev.y });\n      this.ngZone.run(() => this.clickItem.emit({ item: records[0]._origin, ev }));\n    });\n\n    chart.on(`legend-item:click`, (ev: Event) => {\n      const item = ev?.target?.get('delegateObject').item;\n      const id = item?.id;\n      const line = chart.geometries.find(w => w.getAttribute('position').getFields()[1] === id);\n      if (line) {\n        line.changeVisible(!item.unchecked);\n      }\n    });\n\n    this.changeData();\n\n    chart.render();\n  }\n\n  changeData(): void {\n    const { _chart, height, padding, mask, titleMap, position, colorMap, borderWidth, maxAxis } = this;\n    let data = [...this.data];\n    if (!_chart || data.length <= 0) return;\n\n    const arrAxis = [...Array(maxAxis)].map((_, index) => index + 1);\n\n    _chart.legend({\n      position,\n      custom: true,\n      items: arrAxis.map(id => {\n        const key = `y${id}`;\n        return {\n          id: key,\n          name: titleMap![key],\n          value: key,\n          marker: { style: { fill: colorMap[key] } }\n        } as Types.LegendItem;\n      })\n    });\n\n    // border\n    _chart.geometries.forEach((v, idx: number) => {\n      v.color((colorMap as NzSafeAny)[`y${idx + 1}`]).size(borderWidth);\n    });\n    _chart.height = height;\n    _chart.padding = padding;\n\n    // 转换成日期类型\n    data = data\n      .map(item => {\n        item.time = toDate(item.time!);\n        item._time = +item.time;\n        return item;\n      })\n      .sort((a, b) => a._time - b._time);\n\n    const max = Math.max(...arrAxis.map(id => [...data].sort((a, b) => b[`y${id}`] - a[`y${id}`])[0][`y${id}`]));\n    const scaleOptions: Record<string, Types.ScaleOption> = {};\n    arrAxis.forEach(id => {\n      const key = `y${id}`;\n      scaleOptions[key] = {\n        alias: titleMap![key],\n        max,\n        min: 0\n      };\n    });\n    _chart.scale({\n      time: {\n        type: 'time',\n        mask,\n        range: [0, 1]\n      },\n      ...scaleOptions\n    });\n\n    const initialRange = {\n      start: data[0]._time,\n      end: data[data.length - 1]._time\n    };\n    const filterData = data.filter(val => val._time >= initialRange.start && val._time <= initialRange.end);\n    _chart.changeData(filterData);\n  }\n}\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\n\nimport { NzOutletModule } from 'ng-zorro-antd/core/outlet';\nimport { NzSkeletonModule } from 'ng-zorro-antd/skeleton';\n\nimport { G2TimelineComponent } from './timeline.component';\n\nconst COMPONENTS = [G2TimelineComponent];\n\n@NgModule({\n  imports: [CommonModule, NzOutletModule, NzSkeletonModule],\n  declarations: COMPONENTS,\n  exports: COMPONENTS\n})\nexport class G2TimelineModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}