Agent skill

delon-chart

@delon/chart skill - G2Plot enterprise charting components with @delon/chart. For ng-events construction site progress tracking system.

View SKILL.md on GitHub Repository
Stars 232
Forks 15

Install this agent skill to your Project

npx add-skill https://github.com/aiskillstore/marketplace/tree/main/skills/7spade/delon-chart

SKILL.md

@delon/chart - Enterprise Chart Components

Trigger patterns: "chart", "graph", "visualization", "@delon/chart", "G2Plot", "G2"

Overview

@delon/chart provides enterprise-grade charting components built on G2Plot for data visualization in ng-alain applications.

Package: @delon/chart@20.1.0
Dependencies: @ant-design/charts (G2Plot wrapper)

Core Components

1. chart-card - Chart Card Container

typescript
import { ChartCardComponent } from '@delon/chart/chart-card';

<chart-card 
  [title]="'進度統計'" 
  [total]="totalTasks()"
  [action]="action"
  [footer]="footer"
>
  <trend flag="up" style="margin-right: 16px;">
    <span>週成長</span><span>12%</span>
  </trend>
  <trend flag="down">
    <span>日成長</span><span>11%</span>
  </trend>
</chart-card>

Features:

  • Title, total, action, footer slots
  • Integrated trend indicators
  • Responsive layout
  • Loading states

2. g2-bar - Bar Charts

typescript
import { G2BarComponent } from '@delon/chart/bar';

@Component({
  standalone: true,
  imports: [G2BarComponent],
  template: `
    <g2-bar 
      [data]="barData()"
      [height]="300"
      [padding]="[20, 40, 50, 40]"
    />
  `
})
export class TaskChartComponent {
  barData = signal([
    { x: '待辦', y: 12 },
    { x: '進行中', y: 8 },
    { x: '已完成', y: 25 }
  ]);
}

Options:

  • height (number) - Chart height in pixels
  • padding (number[]) - [top, right, bottom, left]
  • color (string) - Bar color
  • autoLabel (boolean) - Auto label positioning

3. g2-mini-bar - Mini Bar Charts (Sparkline)

typescript
<g2-mini-bar 
  [data]="miniData()"
  [height]="50"
  [color]="'#1890ff'"
/>

miniData = signal([
  { x: '2024-01', y: 5 },
  { x: '2024-02', y: 8 },
  { x: '2024-03', y: 12 }
]);

4. g2-pie - Pie/Donut Charts

typescript
import { G2PieComponent } from '@delon/chart/pie';

<g2-pie
  [data]="pieData()"
  [height]="300"
  [hasLegend]="true"
  [subTitle]="'總任務數'"
  [total]="totalTasks()"
  [inner]="0.8"
/>

pieData = signal([
  { x: '待辦', y: 12 },
  { x: '進行中', y: 8 },
  { x: '已完成', y: 25 }
]);

Options:

  • inner (number) - 0-1, 0=pie, >0=donut
  • hasLegend (boolean) - Show legend
  • subTitle (string) - Center subtitle
  • total (string) - Center total display

5. g2-radar - Radar Charts

typescript
import { G2RadarComponent } from '@delon/chart/radar';

<g2-radar 
  [data]="radarData()"
  [height]="300"
  [hasLegend]="true"
/>

radarData = signal([
  { name: '設計', label: '計畫', value: 85 },
  { name: '設計', label: '執行', value: 70 },
  { name: '開發', label: '計畫', value: 90 },
  { name: '開發', label: '執行', value: 80 }
]);

6. timeline - Timeline Charts

typescript
import { TimelineComponent } from '@delon/chart/timeline';

<timeline 
  [data]="timelineData()"
  [title]="'施工進度'"
  [maxAxis]="5"
/>

timelineData = signal([
  { x: new Date('2024-01-01'), y1: 10, y2: 20 },
  { x: new Date('2024-02-01'), y1: 15, y2: 25 },
  { x: new Date('2024-03-01'), y1: 20, y2: 30 }
]);

7. trend - Trend Indicator

typescript
import { TrendComponent } from '@delon/chart/trend';

<trend flag="up">
  <span>週成長</span>
  <span class="pl-sm">12%</span>
</trend>

<trend flag="down" colorful="false">
  <span>日成長</span>
  <span class="pl-sm">11%</span>
</trend>

Flags: up | down
Colorful: true (green/red) | false (gray)

Real-World Examples

Dashboard Stats with Charts

typescript
import { Component, signal, computed, inject } from '@angular/core';
import { ChartCardComponent } from '@delon/chart/chart-card';
import { G2BarComponent } from '@delon/chart/bar';
import { G2PieComponent } from '@delon/chart/pie';
import { TrendComponent } from '@delon/chart/trend';
import { TaskService } from '@core/services/task.service';

@Component({
  selector: 'app-dashboard',
  standalone: true,
  imports: [
    ChartCardComponent,
    G2BarComponent,
    G2PieComponent,
    TrendComponent
  ],
  template: `
    <div nz-row [nzGutter]="24">
      <div nz-col [nzXl]="6" [nzLg]="12" [nzMd]="12" [nzSm]="24">
        <chart-card 
          [title]="'總任務數'" 
          [total]="totalTasks()"
          contentHeight="46px"
        >
          <trend flag="up" style="margin-right: 16px;">
            <span>週成長</span><span>{{ weeklyGrowth() }}%</span>
          </trend>
        </chart-card>
      </div>
      
      <div nz-col [nzSpan]="24">
        <nz-card [nzTitle]="'任務狀態分佈'">
          <g2-bar 
            [data]="taskStatusData()"
            [height]="300"
            [padding]="[20, 40, 50, 60]"
          />
        </nz-card>
      </div>
      
      <div nz-col [nzSpan]="12">
        <nz-card [nzTitle]="'任務類型比例'">
          <g2-pie
            [data]="taskTypeData()"
            [height]="300"
            [hasLegend]="true"
            [inner]="0.6"
            [total]="totalTasks()"
          />
        </nz-card>
      </div>
    </div>
  `
})
export class DashboardComponent {
  private taskService = inject(TaskService);
  
  // Signals for reactive data
  tasks = this.taskService.tasks;
  
  totalTasks = computed(() => this.tasks().length);
  
  weeklyGrowth = computed(() => {
    // Calculate growth percentage
    const thisWeek = this.tasks().filter(t => 
      this.isThisWeek(t.createdAt)
    ).length;
    const lastWeek = this.tasks().filter(t => 
      this.isLastWeek(t.createdAt)
    ).length;
    
    return lastWeek > 0 ? 
      Math.round((thisWeek - lastWeek) / lastWeek * 100) : 0;
  });
  
  taskStatusData = computed(() => [
    { x: '待辦', y: this.tasks().filter(t => t.status === 'pending').length },
    { x: '進行中', y: this.tasks().filter(t => t.status === 'in-progress').length },
    { x: '已完成', y: this.tasks().filter(t => t.status === 'completed').length }
  ]);
  
  taskTypeData = computed(() => [
    { x: '設計', y: this.tasks().filter(t => t.type === 'design').length },
    { x: '開發', y: this.tasks().filter(t => t.type === 'development').length },
    { x: '測試', y: this.tasks().filter(t => t.type === 'testing').length }
  ]);
  
  private isThisWeek(date: Date): boolean {
    const now = new Date();
    const weekStart = new Date(now.setDate(now.getDate() - now.getDay()));
    return date >= weekStart;
  }
  
  private isLastWeek(date: Date): boolean {
    const now = new Date();
    const weekStart = new Date(now.setDate(now.getDate() - now.getDay() - 7));
    const weekEnd = new Date(now.setDate(now.getDate() - now.getDay()));
    return date >= weekStart && date < weekEnd;
  }
}

Best Practices

1. Use Signals for Reactive Charts

✅ DO:

typescript
chartData = computed(() => 
  this.tasks().map(t => ({ x: t.name, y: t.value }))
);

❌ DON'T:

typescript
chartData: any[] = [];
ngOnInit() {
  this.taskService.getTasks().subscribe(tasks => {
    this.chartData = tasks.map(t => ({ x: t.name, y: t.value }));
  });
}

2. Responsive Chart Heights

✅ DO:

typescript
@Component({
  template: `
    <g2-bar 
      [data]="data()"
      [height]="isMobile() ? 200 : 300"
    />
  `
})

3. Loading States

✅ DO:

typescript
@if (loading()) {
  <nz-spin nzSimple />
} @else if (chartData().length > 0) {
  <g2-bar [data]="chartData()" />
} @else {
  <nz-empty nzNotFoundContent="沒有資料" />
}

Performance Tips

  1. Data Transformation: Transform data in computed signals, not in templates
  2. Chart Reuse: Reuse chart components with different data props
  3. Lazy Loading: Load chart module only when needed
  4. Height Optimization: Use fixed heights for better performance
  5. Data Limits: Limit chart data points (recommend < 100 for bar/pie)

Integration Checklist

  • Install @delon/chart@20.1.0
  • Import chart components in standalone components
  • Use signals for reactive chart data
  • Handle loading and empty states
  • Set responsive chart heights
  • Add proper TypeScript types for chart data
  • Test with empty/large datasets
  • Optimize data transformation with computed()

Anti-Patterns

❌ Mutating Chart Data Directly:

typescript
this.chartData.push({ x: 'new', y: 10 }); // Won't trigger change detection

✅ Use Signal Updates:

typescript
this.chartData.update(data => [...data, { x: 'new', y: 10 }]);

❌ Complex Logic in Templates:

typescript
<g2-bar [data]="tasks.filter(t => t.status === 'completed').map(t => ({x: t.name, y: t.value}))" />

✅ Use Computed Signals:

typescript
completedTasksData = computed(() => 
  this.tasks()
    .filter(t => t.status === 'completed')
    .map(t => ({ x: t.name, y: t.value }))
);

Cross-References

  • ng-alain-component - ST Table for data tables
  • delon-theme - Page layout and theme customization
  • angular-component - Signals and computed for reactive charts
  • .github/instructions/angular.instructions.md - Angular 20 patterns

Package Information

Version: 1.0
Created: 2025-12-25
Maintainer: ng-events(GigHub) Development Team

Recommended Agent Skills

Expand your agent's capabilities with these related and highly-rated skills.

aiskillstore/marketplace

perigon-backend

Perigon ASP.NET Core + EF Core + Aspire conventions

232 15
Explore
aiskillstore/marketplace

perigon-agent

Pointers for Copilot/agents to apply Perigon conventions

232 15
Explore
aiskillstore/marketplace

perigon-angular

Angular 21+ standalone/Material/signal conventions for Perigon WebApp

232 15
Explore
aiskillstore/marketplace

fastapi-mastery

Comprehensive FastAPI development skill covering REST API creation, routing, request/response handling, validation, authentication, database integration, middleware, and deployment. Use when working with FastAPI projects, building APIs, implementing CRUD operations, setting up authentication/authorization, integrating databases (SQL/NoSQL), adding middleware, handling WebSockets, or deploying FastAPI applications. Triggered by requests involving .py files with FastAPI code, API endpoint creation, Pydantic models, or FastAPI-specific features.

232 15
Explore
aiskillstore/marketplace

context7-efficient

Token-efficient library documentation fetcher using Context7 MCP with 86.8% token savings through intelligent shell pipeline filtering. Fetches code examples, API references, and best practices for JavaScript, Python, Go, Rust, and other libraries. Use when users ask about library documentation, need code examples, want API usage patterns, are learning a new framework, need syntax reference, or troubleshooting with library-specific information. Triggers include questions like "Show me React hooks", "How do I use Prisma", "What's the Next.js routing syntax", or any request for library/framework documentation.

232 15
Explore
aiskillstore/marketplace

browser-use

Browser automation using Playwright MCP. Navigate websites, fill forms, click elements, take screenshots, and extract data. Use when tasks require web browsing, form submission, web scraping, UI testing, or any browser interaction.

232 15
Explore

Didn't find tool you were looking for?

Be as detailed as possible for better results