From b05cf33b527f7215c3e31ac7d8cba4d51bd6211c Mon Sep 17 00:00:00 2001 From: cipchk Date: Sat, 9 Dec 2023 00:14:04 +0800 Subject: [PATCH] chore: add chart --- packages/chart/bar/demo/basic.md | 14 ++++--- packages/chart/card/demo/style1.md | 15 ++++++- packages/chart/card/demo/style2.md | 15 ++++++- packages/chart/card/demo/style3.md | 6 +++ packages/chart/chart-echarts/demo/basic.md | 38 ++++++++++------- packages/chart/chart-echarts/demo/on.md | 11 ++--- packages/chart/custom/demo/basic.md | 46 ++++++++++++--------- packages/chart/gauge/demo/basic.md | 7 +++- packages/chart/mini-area/demo/basic.md | 16 ++++--- packages/chart/mini-area/demo/mini.md | 10 +++-- packages/chart/mini-area/demo/tooltip.md | 10 +++-- packages/chart/mini-bar/demo/basic.md | 17 +++++--- packages/chart/mini-bar/demo/mini.md | 10 +++-- packages/chart/mini-bar/demo/tooltip.md | 10 +++-- packages/chart/mini-progress/demo/basic.md | 6 ++- packages/chart/number-info/demo/basic.md | 6 ++- packages/chart/number-info/demo/multiple.md | 10 +++-- packages/chart/number-info/demo/theme.md | 6 ++- packages/chart/pie/demo/basic.md | 24 ++++++----- packages/chart/pie/demo/mini.md | 6 ++- packages/chart/radar/demo/basic.md | 19 +++++---- packages/chart/single-bar/demo/basic.md | 13 ++++-- packages/chart/tag-cloud/demo/basic.md | 12 ++++-- packages/chart/timeline/demo/basic.md | 14 ++++--- packages/chart/timeline/demo/mask.md | 14 ++++--- packages/chart/timeline/demo/max-axis.md | 7 +++- packages/chart/trend/demo/basic.md | 4 ++ packages/chart/trend/demo/reverse.md | 4 ++ packages/chart/water-wave/demo/basic.md | 10 +++-- src/app/core/code/code.service.ts | 3 +- src/app/routes/routes.ts | 2 +- src/site.config.js | 3 +- 32 files changed, 261 insertions(+), 127 deletions(-) diff --git a/packages/chart/bar/demo/basic.md b/packages/chart/bar/demo/basic.md index 1d523cbfd..2bb5e4116 100644 --- a/packages/chart/bar/demo/basic.md +++ b/packages/chart/bar/demo/basic.md @@ -8,19 +8,23 @@ title: 通过设置 `x`，`y` 属性，可以快速的构建出一个漂亮的柱状图，各种纬度的关系则是通过自定义的数据展现。 ```ts -import { Component } from '@angular/core'; -import { G2BarClickItem, G2BarData } from '@delon/chart/bar'; +import { Component, inject } from '@angular/core'; + +import { G2BarClickItem, G2BarData, G2BarModule } from '@delon/chart/bar'; +import { NzButtonModule } from 'ng-zorro-antd/button'; import { NzMessageService } from 'ng-zorro-antd/message'; @Component({ selector: 'app-demo', template: ` - + `, + standalone: true, + imports: [NzButtonModule, G2BarModule] }) export class DemoComponent { - constructor(private msg: NzMessageService) {} + private readonly msg = inject(NzMessageService); salesData = this.genData(); @@ -28,7 +32,7 @@ export class DemoComponent { return new Array(12).fill({}).map((_i, idx) => ({ x: `${idx + 1}月`, y: Math.floor(Math.random() * 1000) + 200, - color: idx > 5 ? '#f50' : undefined, + color: idx > 5 ? '#f50' : undefined })); } diff --git a/packages/chart/card/demo/style1.md b/packages/chart/card/demo/style1.md index 54e58cdd1..8f532ee4e 100644 --- a/packages/chart/card/demo/style1.md +++ b/packages/chart/card/demo/style1.md @@ -10,10 +10,21 @@ title: ```ts import { Component } from '@angular/core'; +import { G2CardModule } from '@delon/chart/card'; +import { TrendModule } from '@delon/chart/trend'; +import { NzToolTipModule } from 'ng-zorro-antd/tooltip'; + @Component({ selector: 'app-demo', template: ` - + @@ -23,6 +34,8 @@ import { Component } from '@angular/core'; 11% `, + standalone: true, + imports: [G2CardModule, NzToolTipModule, TrendModule] }) export class DemoComponent {} ``` diff --git a/packages/chart/card/demo/style2.md b/packages/chart/card/demo/style2.md index bdca7efeb..512d2def2 100644 --- a/packages/chart/card/demo/style2.md +++ b/packages/chart/card/demo/style2.md @@ -10,16 +10,29 @@ title: ```ts import { Component } from '@angular/core'; +import { G2CardModule } from '@delon/chart/card'; +import { NzIconModule } from 'ng-zorro-antd/icon'; +import { NzToolTipModule } from 'ng-zorro-antd/tooltip'; + @Component({ selector: 'app-demo', template: ` - + `, + standalone: true, + imports: [G2CardModule, NzToolTipModule, NzIconModule] }) export class DemoComponent {} ``` diff --git a/packages/chart/card/demo/style3.md b/packages/chart/card/demo/style3.md index be3a5860b..1fbc0a7a8 100644 --- a/packages/chart/card/demo/style3.md +++ b/packages/chart/card/demo/style3.md @@ -10,6 +10,10 @@ title: ```ts import { Component } from '@angular/core'; +import { G2CardModule } from '@delon/chart/card'; +import { NzIconModule } from 'ng-zorro-antd/icon'; +import { NzToolTipModule } from 'ng-zorro-antd/tooltip'; + @Component({ selector: 'app-demo', template: ` @@ -20,6 +24,8 @@ import { Component } from '@angular/core'; `, + standalone: true, + imports: [G2CardModule, NzToolTipModule, NzIconModule] }) export class DemoComponent {} ``` diff --git a/packages/chart/chart-echarts/demo/basic.md b/packages/chart/chart-echarts/demo/basic.md index ff0b5097d..1c2ae76ce 100644 --- a/packages/chart/chart-echarts/demo/basic.md +++ b/packages/chart/chart-echarts/demo/basic.md @@ -15,17 +15,23 @@ Simplest of usage. ```ts import { Component } from '@angular/core'; -import { ChartEChartsEvent, ChartEChartsOption } from '@delon/chart/chart-echarts'; +import { FormsModule } from '@angular/forms'; + +import { ChartEChartsEvent, ChartEChartsModule, ChartEChartsOption } from '@delon/chart/chart-echarts'; +import { NzButtonModule } from 'ng-zorro-antd/button'; +import { NzSwitchModule } from 'ng-zorro-antd/switch'; @Component({ selector: 'app-demo', template: `
- Dark + Dark
- + `, + standalone: true, + imports: [FormsModule, NzSwitchModule, NzButtonModule, ChartEChartsModule] }) export class DemoComponent { dark = false; @@ -33,44 +39,44 @@ export class DemoComponent { option1: ChartEChartsOption = { tooltip: { - formatter: '{a}
{b} : {c}%', + formatter: '{a}
{b} : {c}%' }, series: [ { name: 'Pressure', type: 'gauge', detail: { - formatter: '{value}', + formatter: '{value}' }, data: [ { value: 50, - name: 'SCORE', - }, - ], - }, - ], + name: 'SCORE' + } + ] + } + ] }; option2: ChartEChartsOption = { title: { - text: 'ECharts 入门示例', + text: 'ECharts 入门示例' }, tooltip: {}, legend: { - data: ['销量'], + data: ['销量'] }, xAxis: { - data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'], + data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'] }, yAxis: {}, series: [ { name: '销量', type: 'bar', - data: [5, 20, 36, 10, 10, 20], - }, - ], + data: [5, 20, 36, 10, 10, 20] + } + ] }; handleEvents(ev: ChartEChartsEvent): void { diff --git a/packages/chart/chart-echarts/demo/on.md b/packages/chart/chart-echarts/demo/on.md index 2b7ae8f04..6bf0e830b 100644 --- a/packages/chart/chart-echarts/demo/on.md +++ b/packages/chart/chart-echarts/demo/on.md @@ -14,16 +14,19 @@ title: Using the `on` attribute is equivalent to ECharts [on](https://echarts.apache.org/zh/api.html#echartsInstance.on). ```ts -import { Component } from '@angular/core'; +import { Component, inject } from '@angular/core'; -import { ChartEChartsOn, ChartEChartsOption } from '@delon/chart/chart-echarts'; +import { ChartEChartsModule, ChartEChartsOn, ChartEChartsOption } from '@delon/chart/chart-echarts'; import { NzMessageService } from 'ng-zorro-antd/message'; @Component({ selector: 'app-demo', - template: ` ` + template: ` `, + standalone: true, + imports: [ChartEChartsModule] }) export class DemoComponent { + private readonly msg = inject(NzMessageService); dark = false; two = false; @@ -51,7 +54,5 @@ export class DemoComponent { } ] }; - - constructor(private msg: NzMessageService) {} } ``` diff --git a/packages/chart/custom/demo/basic.md b/packages/chart/custom/demo/basic.md index 74f78c9f1..7e9aa18a0 100644 --- a/packages/chart/custom/demo/basic.md +++ b/packages/chart/custom/demo/basic.md @@ -14,15 +14,21 @@ title: Copy [Basic Funnel Chart](https://antv.alipay.com/zh-cn/g2/3.x/demo/funnel/basic.html)。 ```ts -import { Component, ElementRef, NgZone } from '@angular/core'; +import { Component, ElementRef, NgZone, inject } from '@angular/core'; + import type { Chart } from '@antv/g2'; +import { G2CustomModule } from '@delon/chart/custom'; +import type { NzSafeAny } from 'ng-zorro-antd/core/types'; + @Component({ selector: 'chart-custom-basic', - template: ` `, + template: ` `, + standalone: true, + imports: [G2CustomModule] }) export class DemoComponent { - constructor(private ngZone: NgZone) {} + private readonly ngZone = inject(NgZone); render(el: ElementRef): void { this.ngZone.runOutsideAngular(() => this.init(el.nativeElement)); @@ -34,17 +40,17 @@ export class DemoComponent { { action: '放入购物车', pv: 35000, percent: 0 }, { action: '生成订单', pv: 25000, percent: 0 }, { action: '支付订单', pv: 15000, percent: 0 }, - { action: '完成交易', pv: 8000, 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 chart: Chart = new (window as NzSafeAny).G2.Chart({ container: el, autoFit: true, height: 500, width: el.clientWidth, - padding: [20, 120, 95], + padding: [20, 120, 95] }); chart.data(data); chart.axis(false); @@ -57,7 +63,7 @@ export class DemoComponent { '{name}
' + '浏览人数：{pv}
' + '占比：{percent}
' + - '', + '' }); chart.coordinate('rect').transpose().scale(1, -1); @@ -71,7 +77,7 @@ export class DemoComponent { 'action*pv', (action, pv) => { return { - content: `${action} ${pv}`, + content: `${action} ${pv}` }; }, { @@ -79,25 +85,25 @@ export class DemoComponent { labelLine: { style: { lineWidth: 1, - stroke: 'rgba(0, 0, 0, 0.15)', - }, - }, - }, + stroke: 'rgba(0, 0, 0, 0.15)' + } + } + } ) .tooltip('action*pv*percent', (action, pv, percent) => { return { name: action, - percent: +percent * 100 + '%', - pv, + percent: `${+percent * 100}%`, + pv }; }) .animate({ appear: { - animation: 'fade-in', + animation: 'fade-in' }, update: { // annotation: 'fade-in' - }, + } }); chart.interaction('element-active'); @@ -111,14 +117,14 @@ export class DemoComponent { top: true, position: { action: obj.action, - percent: 'median', + percent: 'median' }, - content: +obj.percent * 100 + '%', // 显示的文本内容 + content: `${+obj.percent * 100}%`, // 显示的文本内容 style: { stroke: null, fill: '#fff', - textAlign: 'center', - }, + textAlign: 'center' + } }); }); }); diff --git a/packages/chart/gauge/demo/basic.md b/packages/chart/gauge/demo/basic.md index c3b3719d9..c573d9fa0 100644 --- a/packages/chart/gauge/demo/basic.md +++ b/packages/chart/gauge/demo/basic.md @@ -11,12 +11,15 @@ title: import { Platform } from '@angular/cdk/platform'; import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy } from '@angular/core'; +import { G2GaugeModule } from '@delon/chart/gauge'; import type { NzSafeAny } from 'ng-zorro-antd/core/types'; @Component({ selector: 'app-demo', - template: ` `, - changeDetection: ChangeDetectionStrategy.OnPush + template: ` `, + changeDetection: ChangeDetectionStrategy.OnPush, + standalone: true, + imports: [G2GaugeModule] }) export class DemoComponent implements OnDestroy { percent = 36; diff --git a/packages/chart/mini-area/demo/basic.md b/packages/chart/mini-area/demo/basic.md index 6032ba512..cd7cf84f9 100644 --- a/packages/chart/mini-area/demo/basic.md +++ b/packages/chart/mini-area/demo/basic.md @@ -8,30 +8,34 @@ title: 基础用法。 ```ts -import { Component } from '@angular/core'; -import { G2MiniAreaClickItem, G2MiniAreaData } from '@delon/chart/mini-area'; +import { Component, inject } from '@angular/core'; + import { format } from 'date-fns'; + +import { G2MiniAreaClickItem, G2MiniAreaData, G2MiniAreaModule } from '@delon/chart/mini-area'; +import { NzButtonModule } from 'ng-zorro-antd/button'; import { NzMessageService } from 'ng-zorro-antd/message'; @Component({ selector: 'app-demo', template: ` - + `, + standalone: true, + imports: [NzButtonModule, G2MiniAreaModule] }) export class DemoComponent { + private readonly msg = inject(NzMessageService); visitData = this.genData(); - constructor(private msg: NzMessageService) {} - private genData(): G2MiniAreaData[] { const beginDay = new Date().getTime(); const res: G2MiniAreaData[] = []; for (let i = 0; i < 20; i += 1) { res.push({ x: format(new Date(beginDay + 1000 * 60 * 60 * 24 * i), 'yyyy-MM-dd'), - y: Math.floor(Math.random() * 100) + 10, + y: Math.floor(Math.random() * 100) + 10 }); } return res; diff --git a/packages/chart/mini-area/demo/mini.md b/packages/chart/mini-area/demo/mini.md index 108db4edc..30a341176 100644 --- a/packages/chart/mini-area/demo/mini.md +++ b/packages/chart/mini-area/demo/mini.md @@ -7,12 +7,16 @@ title: Mini tooltip ```ts import { Component, OnInit } from '@angular/core'; -import { G2MiniAreaData } from '@delon/chart/mini-area'; + import { format } from 'date-fns'; +import { G2MiniAreaData, G2MiniAreaModule } from '@delon/chart/mini-area'; + @Component({ selector: 'app-demo', - template: ` `, + template: ` `, + standalone: true, + imports: [G2MiniAreaModule] }) export class DemoComponent implements OnInit { visitData: G2MiniAreaData[] = []; @@ -21,7 +25,7 @@ export class DemoComponent implements OnInit { for (let i = 0; i < 20; i += 1) { this.visitData.push({ x: format(new Date(beginDay + 1000 * 60 * 60 * 24 * i), 'yyyy-MM-dd'), - y: Math.floor(Math.random() * 100) + 10, + y: Math.floor(Math.random() * 100) + 10 }); } } diff --git a/packages/chart/mini-area/demo/tooltip.md b/packages/chart/mini-area/demo/tooltip.md index ad624ca8d..3e08108a7 100644 --- a/packages/chart/mini-area/demo/tooltip.md +++ b/packages/chart/mini-area/demo/tooltip.md @@ -7,12 +7,16 @@ title: Tooltip ```ts import { Component, OnInit } from '@angular/core'; -import { G2MiniAreaData } from '@delon/chart/mini-area'; + import { format } from 'date-fns'; +import { G2MiniAreaData, G2MiniAreaModule } from '@delon/chart/mini-area'; + @Component({ selector: 'app-demo', - template: ` `, + template: ` `, + standalone: true, + imports: [G2MiniAreaModule] }) export class DemoComponent implements OnInit { visitData: G2MiniAreaData[] = []; @@ -21,7 +25,7 @@ export class DemoComponent implements OnInit { for (let i = 0; i < 20; i += 1) { this.visitData.push({ x: format(new Date(beginDay + 1000 * 60 * 60 * 24 * i), 'yyyy-MM-dd'), - y: Math.floor(Math.random() * 100) + 10, + y: Math.floor(Math.random() * 100) + 10 }); } } diff --git a/packages/chart/mini-bar/demo/basic.md b/packages/chart/mini-bar/demo/basic.md index 7aaa10756..09fba73ea 100644 --- a/packages/chart/mini-bar/demo/basic.md +++ b/packages/chart/mini-bar/demo/basic.md @@ -8,30 +8,35 @@ title: 基础用法。 ```ts -import { Component } from '@angular/core'; -import { G2MiniAreaClickItem, G2MiniAreaData } from '@delon/chart/mini-area'; +import { Component, inject } from '@angular/core'; + import { format } from 'date-fns'; + +import { G2MiniAreaClickItem, G2MiniAreaData } from '@delon/chart/mini-area'; +import { G2MiniBarModule } from '@delon/chart/mini-bar'; +import { NzButtonModule } from 'ng-zorro-antd/button'; import { NzMessageService } from 'ng-zorro-antd/message'; @Component({ selector: 'app-demo', template: ` - + `, + standalone: true, + imports: [NzButtonModule, G2MiniBarModule] }) export class DemoComponent { + private readonly msg = inject(NzMessageService); visitData = this.genData(); - constructor(private msg: NzMessageService) {} - private genData(): G2MiniAreaData[] { const beginDay = new Date().getTime(); const res: G2MiniAreaData[] = []; for (let i = 0; i < 20; i += 1) { res.push({ x: format(new Date(beginDay + 1000 * 60 * 60 * 24 * i), 'yyyy-MM-dd'), - y: Math.floor(Math.random() * 100) + 10, + y: Math.floor(Math.random() * 100) + 10 }); } return res; diff --git a/packages/chart/mini-bar/demo/mini.md b/packages/chart/mini-bar/demo/mini.md index df9370632..1c9f9dc23 100644 --- a/packages/chart/mini-bar/demo/mini.md +++ b/packages/chart/mini-bar/demo/mini.md @@ -7,12 +7,16 @@ title: Mini tooltip ```ts import { Component, OnInit } from '@angular/core'; -import { G2MiniBarData } from '@delon/chart/mini-bar'; + import { format } from 'date-fns'; +import { G2MiniBarData, G2MiniBarModule } from '@delon/chart/mini-bar'; + @Component({ selector: 'app-demo', - template: ` `, + template: ` `, + standalone: true, + imports: [G2MiniBarModule] }) export class DemoComponent implements OnInit { visitData: G2MiniBarData[] = []; @@ -21,7 +25,7 @@ export class DemoComponent implements OnInit { for (let i = 0; i < 20; i += 1) { this.visitData.push({ x: format(new Date(beginDay + 1000 * 60 * 60 * 24 * i), 'yyyy-MM-dd'), - y: Math.floor(Math.random() * 100) + 10, + y: Math.floor(Math.random() * 100) + 10 }); } } diff --git a/packages/chart/mini-bar/demo/tooltip.md b/packages/chart/mini-bar/demo/tooltip.md index 4004120b4..50496be3c 100644 --- a/packages/chart/mini-bar/demo/tooltip.md +++ b/packages/chart/mini-bar/demo/tooltip.md @@ -7,12 +7,16 @@ title: Tooltip ```ts import { Component, OnInit } from '@angular/core'; -import { G2MiniBarData } from '@delon/chart/mini-bar'; + import { format } from 'date-fns'; +import { G2MiniBarData, G2MiniBarModule } from '@delon/chart/mini-bar'; + @Component({ selector: 'app-demo', - template: ` `, + template: ` `, + standalone: true, + imports: [G2MiniBarModule] }) export class DemoComponent implements OnInit { visitData: G2MiniBarData[] = []; @@ -21,7 +25,7 @@ export class DemoComponent implements OnInit { for (let i = 0; i < 20; i += 1) { this.visitData.push({ x: format(new Date(beginDay + 1000 * 60 * 60 * 24 * i), 'yyyy-MM-dd'), - y: Math.floor(Math.random() * 100) + 10, + y: Math.floor(Math.random() * 100) + 10 }); } } diff --git a/packages/chart/mini-progress/demo/basic.md b/packages/chart/mini-progress/demo/basic.md index 3c0c6aae2..a0ba6305f 100644 --- a/packages/chart/mini-progress/demo/basic.md +++ b/packages/chart/mini-progress/demo/basic.md @@ -10,9 +10,13 @@ title: ```ts import { Component } from '@angular/core'; +import { G2MiniProgressModule } from '@delon/chart/mini-progress'; + @Component({ selector: 'app-demo', - template: ` `, + template: ` `, + standalone: true, + imports: [G2MiniProgressModule] }) export class DemoComponent {} ``` diff --git a/packages/chart/number-info/demo/basic.md b/packages/chart/number-info/demo/basic.md index 1d8dfa72f..e3c2312e4 100644 --- a/packages/chart/number-info/demo/basic.md +++ b/packages/chart/number-info/demo/basic.md @@ -10,9 +10,13 @@ title: ```ts import { Component } from '@angular/core'; +import { NumberInfoModule } from '@delon/chart/number-info'; + @Component({ selector: 'app-demo', - template: ` `, + template: ` `, + standalone: true, + imports: [NumberInfoModule] }) export class DemoComponent {} ``` diff --git a/packages/chart/number-info/demo/multiple.md b/packages/chart/number-info/demo/multiple.md index b47393bc8..4089e4177 100644 --- a/packages/chart/number-info/demo/multiple.md +++ b/packages/chart/number-info/demo/multiple.md @@ -16,13 +16,17 @@ Should be show a separator when multiple `number-info` components. ```ts import { Component } from '@angular/core'; +import { NumberInfoModule } from '@delon/chart/number-info'; + @Component({ selector: 'app-demo', template: ` - - - + + + `, + standalone: true, + imports: [NumberInfoModule] }) export class DemoComponent {} ``` diff --git a/packages/chart/number-info/demo/theme.md b/packages/chart/number-info/demo/theme.md index ef34b2005..4efcf5f57 100644 --- a/packages/chart/number-info/demo/theme.md +++ b/packages/chart/number-info/demo/theme.md @@ -8,9 +8,13 @@ title: 主题 ```ts import { Component } from '@angular/core'; +import { NumberInfoModule } from '@delon/chart/number-info'; + @Component({ selector: 'app-demo', - template: ` `, + template: ` `, + standalone: true, + imports: [NumberInfoModule] }) export class DemoComponent {} ``` diff --git a/packages/chart/pie/demo/basic.md b/packages/chart/pie/demo/basic.md index bf4c647a6..4aa70c2bc 100644 --- a/packages/chart/pie/demo/basic.md +++ b/packages/chart/pie/demo/basic.md @@ -9,7 +9,9 @@ title: ```ts import { Component, ViewChild } from '@angular/core'; -import { G2PieClickItem, G2PieComponent, G2PieData } from '@delon/chart/pie'; + +import { G2PieClickItem, G2PieComponent, G2PieData, G2PieModule } from '@delon/chart/pie'; +import { NzButtonModule } from 'ng-zorro-antd/button'; import { NzMessageService } from 'ng-zorro-antd/message'; @Component({ @@ -27,8 +29,10 @@ import { NzMessageService } from 'ng-zorro-antd/message'; height="294" repaint="false" (clickItem)="handleClick($event)" - > + /> `, + standalone: true, + imports: [NzButtonModule, G2PieModule] }) export class DemoComponent { @ViewChild('pie', { static: false }) readonly pie!: G2PieComponent; @@ -40,33 +44,33 @@ export class DemoComponent { } refresh(): void { - const rv = (min: number = 0, max: number = 5000) => Math.floor(Math.random() * (max - min + 1) + min); + const rv = (min: number = 0, max: number = 5000): number => Math.floor(Math.random() * (max - min + 1) + min); this.salesPieData = [ { x: '家用电器', - y: rv(), + y: rv() }, { x: '食用酒水', - y: rv(), + y: rv() }, { x: '个护健康', - y: rv(), + y: rv() }, { x: '服饰箱包', - y: rv(), + y: rv() }, { x: '母婴产品', - y: rv(), - }, + y: rv() + } ]; if (Math.random() > 0.5) { this.salesPieData.push({ x: '其他', - y: rv(), + y: rv() }); } this.total = `¥ ${this.salesPieData.reduce((pre, now) => now.y + pre, 0).toFixed(2)}`; diff --git a/packages/chart/pie/demo/mini.md b/packages/chart/pie/demo/mini.md index 153c8ef96..a99967499 100644 --- a/packages/chart/pie/demo/mini.md +++ b/packages/chart/pie/demo/mini.md @@ -10,13 +10,17 @@ title: ```ts import { Component } from '@angular/core'; +import { G2PieModule } from '@delon/chart/pie'; + @Component({ selector: 'app-demo', template: `
- +
`, + standalone: true, + imports: [G2PieModule] }) export class DemoComponent {} ``` diff --git a/packages/chart/radar/demo/basic.md b/packages/chart/radar/demo/basic.md index 44cd65447..37bd25e86 100644 --- a/packages/chart/radar/demo/basic.md +++ b/packages/chart/radar/demo/basic.md @@ -9,15 +9,20 @@ title: ```ts import { Component } from '@angular/core'; -import { G2RadarClickItem, G2RadarData } from '@delon/chart/radar'; + +import { G2RadarClickItem, G2RadarData, G2RadarModule } from '@delon/chart/radar'; +import { NzButtonModule } from 'ng-zorro-antd/button'; +import type { NzSafeAny } from 'ng-zorro-antd/core/types'; import { NzMessageService } from 'ng-zorro-antd/message'; @Component({ selector: 'app-demo', template: ` - + `, + standalone: true, + imports: [NzButtonModule, G2RadarModule] }) export class DemoComponent { radarData: G2RadarData[] = []; @@ -27,33 +32,33 @@ export class DemoComponent { } refresh(): void { - const rv = (min: number = 1, max: number = 10) => Math.floor(Math.random() * (max - min + 1) + min); + const rv = (min: number = 1, max: number = 10): number => Math.floor(Math.random() * (max - min + 1) + min); const radarOriginData = ['个人', '团队', '部门'].map(name => ({ name, ref: rv(), koubei: rv(), output: rv(), contribute: rv(), - hot: rv(), + hot: rv() })); const radarTitleMap: { [key: string]: string } = { ref: '引用', koubei: '口碑', output: '产量', contribute: '贡献', - hot: '热度', + hot: '热度' }; if (Math.random() > 0.5) { delete radarTitleMap.hot; } const res: G2RadarData[] = []; - radarOriginData.forEach((item: { [key: string]: any }) => { + radarOriginData.forEach((item: { [key: string]: NzSafeAny }) => { Object.keys(item).forEach(key => { if (key !== 'name') { res.push({ name: item.name, label: radarTitleMap[key], - value: item[key], + value: item[key] }); } }); diff --git a/packages/chart/single-bar/demo/basic.md b/packages/chart/single-bar/demo/basic.md index 10ec47b01..2f4ca8b3e 100644 --- a/packages/chart/single-bar/demo/basic.md +++ b/packages/chart/single-bar/demo/basic.md @@ -10,6 +10,10 @@ title: ```ts import { Component, ViewEncapsulation } from '@angular/core'; +import { G2SingleBarModule } from '@delon/chart/single-bar'; +import { NzButtonModule } from 'ng-zorro-antd/button'; +import { NzTableModule } from 'ng-zorro-antd/table'; + @Component({ selector: 'app-demo', template: ` @@ -42,21 +46,24 @@ import { Component, ViewEncapsulation } from '@angular/core'; :host ::ng-deep .ant-table tbody > tr > td { padding: 0; } - `, + ` ], encapsulation: ViewEncapsulation.Emulated, + standalone: true, + imports: [NzButtonModule, NzTableModule, G2SingleBarModule] }) export class DemoComponent { list: Array<{ id: number; value: number; other: number }> = new Array(5).fill({}).map(() => ({ id: Math.floor(Math.random() * 10000), value: Math.floor(Math.random() * 100), - other: Math.floor(Math.random() * 100) > 50 ? Math.floor(Math.random() * 100) : -Math.floor(Math.random() * 100), + other: Math.floor(Math.random() * 100) > 50 ? Math.floor(Math.random() * 100) : -Math.floor(Math.random() * 100) })); refresh(): void { this.list.forEach(v => { v.value = Math.floor(Math.random() * 100); - v.other = Math.floor(Math.random() * 100) > 50 ? Math.floor(Math.random() * 100) : -Math.floor(Math.random() * 100); + v.other = + Math.floor(Math.random() * 100) > 50 ? Math.floor(Math.random() * 100) : -Math.floor(Math.random() * 100); }); } } diff --git a/packages/chart/tag-cloud/demo/basic.md b/packages/chart/tag-cloud/demo/basic.md index 5e54467ae..bdcd62073 100644 --- a/packages/chart/tag-cloud/demo/basic.md +++ b/packages/chart/tag-cloud/demo/basic.md @@ -9,15 +9,19 @@ title: ```ts import { Component } from '@angular/core'; -import { G2TagCloudClickItem, G2TagCloudData } from '@delon/chart/tag-cloud'; + +import { G2TagCloudClickItem, G2TagCloudData, G2TagCloudModule } from '@delon/chart/tag-cloud'; +import { NzButtonModule } from 'ng-zorro-antd/button'; import { NzMessageService } from 'ng-zorro-antd/message'; @Component({ selector: 'app-demo', template: ` - + `, + standalone: true, + imports: [NzButtonModule, G2TagCloudModule] }) export class DemoComponent { tags: G2TagCloudData[] = []; @@ -27,7 +31,7 @@ export class DemoComponent { } refresh(): void { - const rv = (min: number = 1, max: number = 10) => Math.floor(Math.random() * (max - min + 1) + min); + const rv = (min: number = 1, max: number = 10): number => Math.floor(Math.random() * (max - min + 1) + min); this.tags = [ { value: rv(), name: 'NG-ALAIN' }, @@ -209,7 +213,7 @@ export class DemoComponent { { value: rv(), name: 'Tableau' }, { value: rv(), name: 'D3' }, { value: rv(), name: 'Vega' }, - { value: rv(), name: '统计图表' }, + { value: rv(), name: '统计图表' } ]; } diff --git a/packages/chart/timeline/demo/basic.md b/packages/chart/timeline/demo/basic.md index 438f35606..54f57a516 100644 --- a/packages/chart/timeline/demo/basic.md +++ b/packages/chart/timeline/demo/basic.md @@ -8,8 +8,9 @@ title: 带有时间轴的图表。 ```ts -import { Component, OnInit } from '@angular/core'; -import { G2TimelineClickItem, G2TimelineData } from '@delon/chart/timeline'; +import { Component, OnInit, inject } from '@angular/core'; + +import { G2TimelineClickItem, G2TimelineData, G2TimelineModule } from '@delon/chart/timeline'; import { NzMessageService } from 'ng-zorro-antd/message'; @Component({ @@ -19,19 +20,20 @@ import { NzMessageService } from 'ng-zorro-antd/message'; [titleMap]="{ y1: '客流量', y2: '支付笔数' }" [height]="200" (clickItem)="handleClick($event)" - >`, + />`, + standalone: true, + imports: [G2TimelineModule] }) export class DemoComponent implements OnInit { + private readonly msg = inject(NzMessageService); chartData: G2TimelineData[] = []; - constructor(private msg: NzMessageService) {} - ngOnInit(): void { for (let i = 0; i < 20; i += 1) { this.chartData.push({ time: new Date().getTime() + 1000 * 60 * 30 * i, y1: Math.floor(Math.random() * 100) + 1000, - y2: Math.floor(Math.random() * 100) + 10, + y2: Math.floor(Math.random() * 100) + 10 }); } } diff --git a/packages/chart/timeline/demo/mask.md b/packages/chart/timeline/demo/mask.md index e7a9a722b..bbd7a4743 100644 --- a/packages/chart/timeline/demo/mask.md +++ b/packages/chart/timeline/demo/mask.md @@ -8,8 +8,9 @@ title: 利用 `mask` 和 `maskSlider` 来改变时间格式。 ```ts -import { Component, OnInit } from '@angular/core'; -import { G2TimelineClickItem, G2TimelineData } from '@delon/chart/timeline'; +import { Component, OnInit, inject } from '@angular/core'; + +import { G2TimelineClickItem, G2TimelineData, G2TimelineModule } from '@delon/chart/timeline'; import { NzMessageService } from 'ng-zorro-antd/message'; @Component({ @@ -21,19 +22,20 @@ import { NzMessageService } from 'ng-zorro-antd/message'; mask="MM月DD日" maskSlider="MM月dd日" (clickItem)="handleClick($event)" - >`, + />`, + standalone: true, + imports: [G2TimelineModule] }) export class DemoComponent implements OnInit { + private readonly msg = inject(NzMessageService); chartData: G2TimelineData[] = []; - constructor(private msg: NzMessageService) {} - ngOnInit(): void { for (let i = 0; i < 20; i += 1) { this.chartData.push({ time: new Date().getTime() + 1000 * 60 * 60 * 24 * i, y1: Math.floor(Math.random() * 100) + 1000, - y2: Math.floor(Math.random() * 100) + 10, + y2: Math.floor(Math.random() * 100) + 10 }); } } diff --git a/packages/chart/timeline/demo/max-axis.md b/packages/chart/timeline/demo/max-axis.md index 9a4b80aec..9330d3e07 100644 --- a/packages/chart/timeline/demo/max-axis.md +++ b/packages/chart/timeline/demo/max-axis.md @@ -10,7 +10,8 @@ title: ```ts import { Component } from '@angular/core'; -import { G2TimelineData, G2TimelineMap } from '@delon/chart/timeline'; +import { G2TimelineData, G2TimelineMap, G2TimelineModule } from '@delon/chart/timeline'; +import { NzButtonModule } from 'ng-zorro-antd/button'; @Component({ selector: 'app-demo', @@ -20,7 +21,9 @@ import { G2TimelineData, G2TimelineMap } from '@delon/chart/timeline'; } - ` + `, + standalone: true, + imports: [G2TimelineModule, NzButtonModule] }) export class DemoComponent { chartData: G2TimelineData[] = []; diff --git a/packages/chart/trend/demo/basic.md b/packages/chart/trend/demo/basic.md index b468881c0..a95e549e4 100644 --- a/packages/chart/trend/demo/basic.md +++ b/packages/chart/trend/demo/basic.md @@ -8,12 +8,16 @@ title: 演示 ```ts import { Component } from '@angular/core'; +import { TrendModule } from '@delon/chart/trend'; + @Component({ selector: 'app-demo', template: ` 12% 11% `, + standalone: true, + imports: [TrendModule] }) export class DemoComponent {} ``` diff --git a/packages/chart/trend/demo/reverse.md b/packages/chart/trend/demo/reverse.md index 7d451308c..2fd0e5341 100644 --- a/packages/chart/trend/demo/reverse.md +++ b/packages/chart/trend/demo/reverse.md @@ -8,12 +8,16 @@ title: 颜色反转 ```ts import { Component } from '@angular/core'; +import { TrendModule } from '@delon/chart/trend'; + @Component({ selector: 'app-demo', template: ` 12% 11% `, + standalone: true, + imports: [TrendModule] }) export class DemoComponent {} ``` diff --git a/packages/chart/water-wave/demo/basic.md b/packages/chart/water-wave/demo/basic.md index 2de90b459..17b150203 100644 --- a/packages/chart/water-wave/demo/basic.md +++ b/packages/chart/water-wave/demo/basic.md @@ -10,14 +10,16 @@ title: ```ts import { Component } from '@angular/core'; +import { G2WaterWaveModule } from '@delon/chart/water-wave'; + @Component({ selector: 'chart-water-wave-basic', - template: ` - - `, + template: ` `, host: { '[class.d-block]': 'true' - } + }, + standalone: true, + imports: [G2WaterWaveModule] }) export class DemoComponent {} ``` diff --git a/src/app/core/code/code.service.ts b/src/app/core/code/code.service.ts index 075f5ac6f..c4e5e81b3 100644 --- a/src/app/core/code/code.service.ts +++ b/src/app/core/code/code.service.ts @@ -182,10 +182,9 @@ export class CodeService { if (code.includes(`standalone: true`)) return code; return `import { DemoDelonABCModule } from './delon-abc.module'; -import { DemoDelonChartModule } from './delon-chart.module'; import { DemoNgZorroAntdModule } from './ng-zorro-antd.module';\n${code.replace( `@Component({`, - `@Component({\n standalone: true,\n // Just automatically generated code, please import as needed\n imports: [DemoNgZorroAntdModule, DemoDelonABCModule, DemoDelonChartModule],` + `@Component({\n standalone: true,\n // Just automatically generated code, please import as needed\n imports: [DemoNgZorroAntdModule, DemoDelonABCModule],` )}`; } diff --git a/src/app/routes/routes.ts b/src/app/routes/routes.ts index 8d6b81e5b..625d7144a 100644 --- a/src/app/routes/routes.ts +++ b/src/app/routes/routes.ts @@ -22,7 +22,7 @@ export const routes: Routes = [ { path: 'cache', loadChildren: () => import('./gen/cache/routes').then(m => m.routes) }, { path: 'mock', loadChildren: () => import('./gen/mock/routes').then(m => m.routes) }, { path: 'util', loadChildren: () => import('./gen/util/routes').then(m => m.routes) }, - { path: 'chart', loadChildren: () => import('./gen/chart/chart.module').then(m => m.ChartModule) }, + { path: 'chart', loadChildren: () => import('./gen/chart/routes').then(m => m.routes) }, { path: 'form', loadChildren: () => import('./gen/form/routes').then(m => m.routes) }, { path: 'form-pages', diff --git a/src/site.config.js b/src/site.config.js index dc5284b8a..2b7686b6b 100644 --- a/src/site.config.js +++ b/src/site.config.js @@ -445,7 +445,8 @@ module.exports = { ignores: ['docs'], hasSubDir: true } - ] + ], + standalone: true }, { name: 'cli',