Prizm ECharts Components

Angular components library for ECharts integration with Prizm UI design system.

Features

• 🎨 Prizm UI Integration: Built with Prizm UI design system
• 📊 ECharts Support: Full ECharts integration with ngx-echarts
• 🛠️ Interactive Toolbox: Built-in zoom, reset, and configuration tools
• 📱 Responsive: Mobile-friendly chart components
• 🎯 TypeScript: Full TypeScript support with type definitions
• 🎨 Customizable: Extensive configuration options

Installation

npm install prizm-echarts-components echarts

Peer Dependencies

Make sure you have the following peer dependencies installed:

npm install @angular/common@^18.2.0 @angular/core@^18.2.0 echarts@^5.4.0

Quick Start

1. Import the Module

import { PrizmDateChartComponent } from 'prizm-echarts-components';

@Component({
  selector: 'app-example',
  standalone: true,
  imports: [PrizmDateChartComponent],
  template: `
    <prizm-date-chart [series]="chartData"></prizm-date-chart>
  `
})
export class ExampleComponent {
  chartData = [
    {
      name: 'Series 1',
      unit: 'units',
      points: [
        { d: '2024-01-01', v: 100 },
        { d: '2024-01-02', v: 150 },
        { d: '2024-01-03', v: 200 }
      ]
    }
  ];
}

2. Include Prizm UI Styles

Add Prizm UI styles to your angular.json:

{
  "styles": [
    "node_modules/@prizm-ui/theme/src/styles/styles.less",
    "node_modules/@prizm-ui/components/src/styles/styles.less"
  ]
}

Components

PrizmDateChartComponent

A comprehensive date-based chart component with built-in toolbox features.

Properties

| Property | Type | Description | |----------|------|-------------| | series | PrizmEchartSeries[] | Array of chart series data |

Types

interface Point {
  d: string; // Date string
  v: number; // Value
}

interface PrizmEchartSeries {
  name: string;    // Series name
  points: Point[]; // Data points
  unit: string;    // Unit of measurement
}

Features

• Interactive Toolbox: Settings, zoom, reset, export/import
• Data Zoom: Slider and inside zoom controls
• Responsive Design: Adapts to container size
• Customizable: Extensive configuration options

Configuration

Chart Presets

The library includes predefined configurations:

import { ECHARTS_CONFIG_PRESETS, COLOR_PALETTE } from 'prizm-echarts-components';

// Use predefined color palette
const colors = COLOR_PALETTE;

// Access chart configuration presets
const config = ECHARTS_CONFIG_PRESETS;

Usage Examples

Basic Line Chart

export class MyComponent {
  chartData: PrizmEchartSeries[] = [
    {
      name: 'Sales',
      unit: '$',
      points: [
        { d: '2024-01-01', v: 1000 },
        { d: '2024-01-02', v: 1200 },
        { d: '2024-01-03', v: 1100 },
        { d: '2024-01-04', v: 1300 }
      ]
    }
  ];
}

Multiple Series

export class MyComponent {
  chartData: PrizmEchartSeries[] = [
    {
      name: 'Revenue',
      unit: '$',
      points: [
        { d: '2024-01-01', v: 1000 },
        { d: '2024-01-02', v: 1200 }
      ]
    },
    {
      name: 'Profit',
      unit: '$',
      points: [
        { d: '2024-01-01', v: 200 },
        { d: '2024-01-02', v: 300 }
      ]
    }
  ];
}

Toolbox Features

The chart includes a built-in toolbox with the following features:

• Settings: Configure chart appearance and behavior
• Data Zoom: Area zooming and reset functionality
• Restore: Reset chart to original state
• Export: Export chart configuration as JSON
• Import: Import chart configuration from JSON

Development

Building the Library

npm run build

Running Storybook

npm run storybook

Building Storybook

npm run build-storybook

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details.

Support

For support and questions:

• Create an issue on GitHub
• Check the documentation

Changelog

See CHANGELOG.md for a list of changes and version history.