Skip to content

Commit

Permalink
feat(chart): upgrade antv/g2 to 5.x
Browse files Browse the repository at this point in the history
  • Loading branch information
@cipchk
cipchk committed Oct 30, 2023
1 parent d9ea22f commit cb4ef36
Show file tree
Hide file tree
Showing 14 changed files with 646 additions and 853 deletions.
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@
"@angular/platform-server": "^16.2.0",
"@angular/elements": "^16.2.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",
Expand Down
60 changes: 24 additions & 36 deletions packages/chart/bar/bar.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand All @@ -26,7 +26,7 @@ export interface G2BarData {

export interface G2BarClickItem {
item: G2BarData;
ev: Event;
ev: NzSafeAny;
}

@Component({
Expand Down Expand Up @@ -58,7 +58,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
Expand All @@ -68,7 +68,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({
Expand All @@ -78,42 +78,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();
Expand All @@ -127,10 +115,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 {
Expand Down
13 changes: 6 additions & 7 deletions packages/chart/core/g2.base.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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$),
Expand All @@ -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>();

/** 检查是否只变更数据 */
Expand Down Expand Up @@ -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;
}
Expand All @@ -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;
}

Expand Down
3 changes: 2 additions & 1 deletion packages/chart/core/g2.servicce.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
42 changes: 22 additions & 20 deletions packages/chart/core/utils.ts
View file
Original file line number Diff line number Diff line change
@@ -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 {};
}
116 changes: 29 additions & 87 deletions packages/chart/custom/demo/basic.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) {}
Expand All @@ -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();
}
Expand Down
Loading

0 comments on commit cb4ef36

Please sign in to comment.