ng-alain · cipchk · Oct 30, 2023 · Nov 6, 2023 · Nov 29, 2023
diff --git a/package.json b/package.json
@@ -68,7 +68,7 @@
     "express": "^4.18.2",
     "@angular/elements": "^17.0.0",
     "@antv/data-set": "^0.11.8",
-    "@antv/g2": "^4.2.10",
+    "@antv/g2": "^5.1.6",
     "echarts": "^5.4.3",
     "@stackblitz/sdk": "^1.9.0",
     "codesandbox": "^2.2.3",

diff --git a/packages/chart/bar/bar.component.ts b/packages/chart/bar/bar.component.ts
@@ -9,9 +9,9 @@ import {
 } from '@angular/core';
 import { fromEvent, debounceTime, filter, takeUntil } from 'rxjs';
 
-import type { Chart, Event } from '@antv/g2';
+import type { Chart, InteractionTypes } from '@antv/g2';
 
-import { G2BaseComponent, G2InteractionType } from '@delon/chart/core';
+import { G2BaseComponent } from '@delon/chart/core';
 import { BooleanInput, InputBoolean, InputNumber, NumberInput } from '@delon/util/decorator';
 import type { NzSafeAny } from 'ng-zorro-antd/core/types';
 
@@ -26,7 +26,7 @@ export interface G2BarData {
 
 export interface G2BarClickItem {
   item: G2BarData;
-  ev: Event;
+  ev: NzSafeAny;
 }
 
 @Component({
@@ -60,7 +60,7 @@ export class G2BarComponent extends G2BaseComponent {
   @Input() padding: number | number[] | 'auto' = 'auto';
   @Input() data: G2BarData[] = [];
   @Input() @InputBoolean() autoLabel = true;
-  @Input() interaction: G2InteractionType = 'none';
+  @Input() interaction?: InteractionTypes;
   @Output() readonly clickItem = new EventEmitter<G2BarClickItem>();
 
   // #endregion
@@ -70,7 +70,7 @@ export class G2BarComponent extends G2BaseComponent {
   }
 
   install(): void {
-    const { node, padding, interaction, theme } = this;
+    const { node, padding, theme, interaction } = this;
 
     const container = node.nativeElement as HTMLElement;
     const chart: Chart = (this._chart = new this.winG2.Chart({
@@ -80,42 +80,30 @@ export class G2BarComponent extends G2BaseComponent {
       padding,
       theme
     }));
-    this.updatelabel();
-    chart.axis('y', {
-      title: null,
-      line: null,
-      tickLine: null
-    });
-    chart.scale({
-      x: {
-        type: 'cat'
-      },
-      y: {
-        min: 0
-      }
-    });
-    chart.tooltip({
-      showTitle: false
-    });
-    if (interaction !== 'none') {
-      chart.interaction(interaction);
-    }
-    chart.legend(false);
-    chart
-      .interval()
-      .position('x*y')
-      .color('x*y', (x, y) => {
-        const colorItem = this.data.find(w => w.x === x && w.y === y);
-        return colorItem && colorItem.color ? colorItem.color : this.color;
+    this.mark = chart.interval();
+    this.mark
+      .legend(false)
+      .interaction(interaction)
+      .encode('x', 'x')
+      .encode('y', 'y')
+      .encode('color', 'x')
+      .axis('x', { title: null })
+      .axis('y', { title: null, line: null, tickLine: null })
+      .scale('color', {
+        range: this.data.map(({ color }) => color ?? this.color)
       })
-      .tooltip('x*y', (x, y) => ({ name: x, value: y }));
+      .tooltip({
+        title: '',
+        items: [(_, i, ___, column) => ({ name: column.x.value[i!], value: column.y.value[i!] })]
+      });
 
-    chart.on(`interval:click`, (ev: Event) => {
+    chart.on(`interval:click`, (ev: NzSafeAny) => {
       this.ngZone.run(() => this.clickItem.emit({ item: ev.data?.data, ev }));
     });
 
     this.ready.next(chart);
 
+    this.updatelabel();
     this.changeData();
     chart.render();
     this.installResizeEvent();
@@ -129,10 +117,10 @@ export class G2BarComponent extends G2BaseComponent {
   }
 
   private updatelabel(): void {
-    const { node, data, _chart } = this;
+    const { node, data } = this;
     const canvasWidth = node.nativeElement.clientWidth;
     const minWidth = data.length * 30;
-    _chart.axis('x', canvasWidth > minWidth).render();
+    this.mark?.axis('x', canvasWidth > minWidth ? { title: null } : false);
   }
 
   private installResizeEvent(): void {

diff --git a/packages/chart/core/g2.base.component.ts b/packages/chart/core/g2.base.component.ts
@@ -15,7 +15,7 @@ import {
 } from '@angular/core';
 import { Subject, Subscription, filter, takeUntil } from 'rxjs';
 
-import type { Chart, Types } from '@antv/g2';
+import type { Chart, MarkNode } from '@antv/g2';
 
 import { BooleanInput, InputBoolean, InputNumber, NumberInput, ZoneOutside } from '@delon/util/decorator';
 import type { NzSafeAny } from 'ng-zorro-antd/core/types';
@@ -39,7 +39,7 @@ export abstract class G2BaseComponent implements OnInit, OnChanges, OnDestroy {
     protected platform: Platform,
     protected cdr: ChangeDetectorRef
   ) {
-    this.theme = srv.cog.theme!;
+    // this.theme = srv.cog.theme!;
     this.srv.notify
       .pipe(
         takeUntil(this.destroy$),
@@ -55,10 +55,11 @@ export abstract class G2BaseComponent implements OnInit, OnChanges, OnDestroy {
   protected resize$?: Subscription;
   protected destroy$ = new Subject<void>();
   protected _chart!: Chart;
+  protected mark?: MarkNode;
   loaded = false;
 
   @Input() @InputNumber() delay = 0;
-  @Input() theme: string | Types.LooseObject;
+  @Input() theme?: string;
   @Output() readonly ready = new EventEmitter<Chart>();
 
   /** 检查是否只变更数据 */
@@ -102,7 +103,7 @@ export abstract class G2BaseComponent implements OnInit, OnChanges, OnDestroy {
     const isOnlyChangeData = this.onlyChangeData
       ? this.onlyChangeData(changes)
       : Object.keys(changes).length === 1 && !!changes.data;
-    if (isOnlyChangeData) {
+    if (this.chart && isOnlyChangeData) {
       this.changeData();
       return;
     }
@@ -114,9 +115,7 @@ export abstract class G2BaseComponent implements OnInit, OnChanges, OnDestroy {
 
   @ZoneOutside()
   protected destroyChart(): this {
-    if (this._chart) {
-      this._chart.destroy();
-    }
+    this._chart?.destroy();
     return this;
   }
 

diff --git a/packages/chart/core/g2.servicce.ts b/packages/chart/core/g2.servicce.ts
@@ -20,7 +20,8 @@ export class G2Service implements OnDestroy {
       {
         theme: '',
         libs: [
-          'https://gw.alipayobjects.com/os/lib/antv/g2/4.1.46/dist/g2.min.js',
+          // 'https://gw.alipayobjects.com/os/lib/antv/g2/4.1.46/dist/g2.min.js',
+          'https://unpkg.com/@antv/g2/dist/g2.min.js',
           'https://gw.alipayobjects.com/os/lib/antv/data-set/0.11.8/dist/data-set.js'
         ]
       } as AlainChartConfig,

diff --git a/packages/chart/core/utils.ts b/packages/chart/core/utils.ts
@@ -1,23 +1,25 @@
-import type { Types } from '@antv/g2';
+// import type { Types } from '@antv/g2';
 
-export function genMiniTooltipOptions(type: 'mini' | 'default', options?: Types.TooltipCfg): Types.TooltipCfg {
-  const res: Types.TooltipCfg = {
-    showTitle: false,
-    showMarkers: true,
-    enterable: true,
-    domStyles: {
-      'g2-tooltip': { padding: '0px' },
-      'g2-tooltip-title': { display: 'none' },
-      'g2-tooltip-list-item': { margin: '4px' }
-    },
-    ...options
-  };
-  if (type === 'mini') {
-    res.position = 'top';
-    res.domStyles!['g2-tooltip'] = { padding: '0px', backgroundColor: 'transparent', boxShadow: 'none' };
-    res.itemTpl = `<li>{value}</li>`;
-    res.offset = 8;
-  }
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function genMiniTooltipOptions(): any {
+  // const res: Types.TooltipCfg = {
+  //   showTitle: false,
+  //   showMarkers: true,
+  //   enterable: true,
+  //   domStyles: {
+  //     'g2-tooltip': { padding: '0px' },
+  //     'g2-tooltip-title': { display: 'none' },
+  //     'g2-tooltip-list-item': { margin: '4px' }
+  //   },
+  //   ...options
+  // };
+  // if (type === 'mini') {
+  //   res.position = 'top';
+  //   res.domStyles!['g2-tooltip'] = { padding: '0px', backgroundColor: 'transparent', boxShadow: 'none' };
+  //   res.itemTpl = `<li>{value}</li>`;
+  //   res.offset = 8;
+  // }
 
-  return res;
+  // return res;
+  return {};
 }
diff --git a/packages/chart/custom/demo/basic.md b/packages/chart/custom/demo/basic.md
@@ -15,11 +15,14 @@ Copy [Basic Funnel Chart](https://antv.alipay.com/zh-cn/g2/3.x/demo/funnel/basic
 
 ```ts
 import { Component, ElementRef, NgZone } from '@angular/core';
+
 import type { Chart } from '@antv/g2';
 
+import type { NzSafeAny } from 'ng-zorro-antd/core/types';
+
 @Component({
   selector: 'chart-custom-basic',
-  template: ` <g2-custom delay="100" (render)="render($event)"></g2-custom> `,
+  template: `<g2-custom delay="100" (render)="render($event)" />`
 })
 export class DemoComponent {
   constructor(private ngZone: NgZone) {}
@@ -29,99 +32,38 @@ export class DemoComponent {
   }
 
   private init(el: HTMLElement): void {
-    const data: Array<{ action: string; pv: number; percent: number }> = [
-      { action: '浏览网站', pv: 50000, percent: 0 },
-      { action: '放入购物车', pv: 35000, percent: 0 },
-      { action: '生成订单', pv: 25000, percent: 0 },
-      { action: '支付订单', pv: 15000, percent: 0 },
-      { action: '完成交易', pv: 8000, percent: 0 },
-    ].map(row => {
-      row.percent = row.pv / 50000;
-      return row;
-    });
-    const chart: Chart = new (window as any).G2.Chart({
+    const data: Array<{ action: string; pv: number }> = [
+      { action: '浏览网站', pv: 50000 },
+      { action: '放入购物车', pv: 35000 },
+      { action: '生成订单', pv: 25000 },
+      { action: '支付订单', pv: 15000 },
+      { action: '完成交易', pv: 8000 }
+    ];
+
+    const chart: Chart = new (window as NzSafeAny).G2.Chart({
       container: el,
-      autoFit: true,
-      height: 500,
-      width: el.clientWidth,
-      padding: [20, 120, 95],
+      autoFit: true
     });
-    chart.data(data);
-    chart.axis(false);
-    chart.tooltip({
-      showTitle: false,
-      showMarkers: false,
-      itemTpl:
-        '<li style="margin-bottom:4px;list-style-type:none;padding: 0;">' +
-        '<span style="background-color:{color};" class="g2-tooltip-marker"></span>' +
-        '{name}<br/>' +
-        '<span style="padding-left: 16px;line-height: 16px;">浏览人数：{pv}</span><br/>' +
-        '<span style="padding-left: 16px;line-height: 16px;">占比：{percent}</span><br/>' +
-        '</li>',
+    chart.coordinate({
+      transform: [{ type: 'transpose' }]
     });
+    chart.data(data);
 
-    chart.coordinate('rect').transpose().scale(1, -1);
     chart
       .interval()
-      .adjust('symmetric')
-      .position('action*percent')
-      .shape('funnel')
-      .color('action', ['#0050B3', '#1890FF', '#40A9FF', '#69C0FF', '#BAE7FF'])
-      .label(
-        'action*pv',
-        (action, pv) => {
-          return {
-            content: `${action} ${pv}`,
-          };
-        },
-        {
-          offset: 35,
-          labelLine: {
-            style: {
-              lineWidth: 1,
-              stroke: 'rgba(0, 0, 0, 0.15)',
-            },
-          },
-        },
-      )
-      .tooltip('action*pv*percent', (action, pv, percent) => {
-        return {
-          name: action,
-          percent: +percent * 100 + '%',
-          pv,
-        };
+      .encode('x', 'action')
+      .encode('y', 'pv')
+      .encode('color', 'action')
+      .encode('shape', 'funnel')
+      .transform({ type: 'symmetryY' })
+      .scale('x', { padding: 0 })
+      .animate('enter', { type: 'fadeIn' })
+      .label({
+        text: (d: { action: string; pv: number }) => `${d.action}\n${d.pv}`,
+        position: 'inside',
+        transform: [{ type: 'contrastReverse' }]
       })
-      .animate({
-        appear: {
-          animation: 'fade-in',
-        },
-        update: {
-          // annotation: 'fade-in'
-        },
-      });
-
-    chart.interaction('element-active');
-
-    chart.on('beforepaint', () => {
-      chart.annotation().clear(true);
-      const chartData = chart.getData();
-      // 中间标签文本
-      chartData.forEach(obj => {
-        chart.annotation().text({
-          top: true,
-          position: {
-            action: obj.action,
-            percent: 'median',
-          },
-          content: +obj.percent * 100 + '%', // 显示的文本内容
-          style: {
-            stroke: null,
-            fill: '#fff',
-            textAlign: 'center',
-          },
-        });
-      });
-    });
+      .axis(false);
 
     chart.render();
   }