chore: add chart

ng-alain · Dec 8, 2023 · b05cf33 · b05cf33
1 parent 7b5dc38
commit b05cf33
Show file tree

Hide file tree

Showing 32 changed files with 261 additions and 127 deletions.
diff --git a/packages/chart/bar/demo/basic.md b/packages/chart/bar/demo/basic.md
@@ -8,27 +8,31 @@ 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: `
     <button nz-button (click)="refresh()" nzType="primary">Refresh</button>
-    <g2-bar height="200" [title]="'销售额趋势'" [data]="salesData" (clickItem)="handleClick($event)"></g2-bar>
+    <g2-bar height="200" [title]="'销售额趋势'" [data]="salesData" (clickItem)="handleClick($event)" />
   `,
+  standalone: true,
+  imports: [NzButtonModule, G2BarModule]
 })
 export class DemoComponent {
-  constructor(private msg: NzMessageService) {}
+  private readonly msg = inject(NzMessageService);
 
   salesData = this.genData();
 
   private genData(): G2BarData[] {
     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
@@ -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: `
-    <g2-card [title]="'销售额'" [bordered]="true" [total]="'¥ 126,560.00'" footer="日访问量 12,423" contentHeight="46" [action]="action">
+    <g2-card
+      [title]="'销售额'"
+      [bordered]="true"
+      [total]="'¥ 126,560.00'"
+      footer="日访问量 12,423"
+      contentHeight="46"
+      [action]="action"
+    >
       <ng-template #action>
         <i nz-tooltip nzTooltipTitle="指标说明" nz-icon nzType="info-circle"></i>
       </ng-template>
@@ -23,6 +34,8 @@ import { Component } from '@angular/core';
       <trend flag="down" style="margin: 0 0 0 8px; color: rgba(0,0,0,.85)">11%</trend>
     </g2-card>
   `,
+  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
@@ -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: `
-    <g2-card [title]="'移动指标'" [bordered]="true" [total]="'¥ 126,560.00'" footer="日访问量 12,423" [avatar]="avatar" [action]="action">
+    <g2-card
+      [title]="'移动指标'"
+      [bordered]="true"
+      [total]="'¥ 126,560.00'"
+      footer="日访问量 12,423"
+      [avatar]="avatar"
+      [action]="action"
+    >
       <ng-template #avatar><img style="width:56px; height: 56px" src="./assets/img/logo-color.svg" /></ng-template>
       <ng-template #action>
         <i nz-tooltip nzTooltipTitle="指标说明" nz-icon nzType="info-circle"></i>
       </ng-template>
     </g2-card>
   `,
+  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
@@ -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';
       </ng-template>
     </g2-card>
   `,
+  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
@@ -15,62 +15,68 @@ 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: `
     <div class="mb-md">
-      <nz-switch [(ngModel)]="dark"></nz-switch> Dark
+      <nz-switch [(ngModel)]="dark" /> Dark
       <button nz-button (click)="two = !two" nzType="primary">Change Option</button>
     </div>
-    <chart-echarts [option]="two ? option1 : option2" [theme]="dark ? 'dark' : null" (events)="handleEvents($event)"></chart-echarts>
+    <chart-echarts [option]="two ? option1 : option2" [theme]="dark ? 'dark' : null" (events)="handleEvents($event)" />
   `,
+  standalone: true,
+  imports: [FormsModule, NzSwitchModule, NzButtonModule, ChartEChartsModule]
 })
 export class DemoComponent {
   dark = false;
   two = false;
 
   option1: ChartEChartsOption = {
     tooltip: {
-      formatter: '{a} <br/>{b} : {c}%',
+      formatter: '{a} <br/>{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
@@ -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: ` <chart-echarts [option]="option" [on]="on"></chart-echarts> `
+  template: ` <chart-echarts [option]="option" [on]="on" /> `,
+  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
@@ -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: ` <g2-custom delay="100" (render)="render($event)"></g2-custom> `,
+  template: ` <g2-custom delay="100" (render)="render($event)" /> `,
+  standalone: true,
+  imports: [G2CustomModule]
 })
 export class DemoComponent {
-  constructor(private ngZone: NgZone) {}
+  private readonly ngZone = inject(NgZone);
 
   render(el: ElementRef<HTMLDivElement>): 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}<br/>' +
         '<span style="padding-left: 16px;line-height: 16px;">浏览人数：{pv}</span><br/>' +
         '<span style="padding-left: 16px;line-height: 16px;">占比：{percent}</span><br/>' +
-        '</li>',
+        '</li>'
     });
 
     chart.coordinate('rect').transpose().scale(1, -1);
@@ -71,33 +77,33 @@ export class DemoComponent {
         'action*pv',
         (action, pv) => {
           return {
-            content: `${action} ${pv}`,
+            content: `${action} ${pv}`
           };
         },
         {
           offset: 35,
           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
@@ -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: ` <g2-gauge [title]="'核销率'" height="164" [percent]="percent" [color]="color"></g2-gauge> `,
-  changeDetection: ChangeDetectionStrategy.OnPush
+  template: ` <g2-gauge [title]="'核销率'" height="164" [percent]="percent" [color]="color" /> `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [G2GaugeModule]
 })
 export class DemoComponent implements OnDestroy {
   percent = 36;