# 🚀 dpChart

<p align="center">
  <img src="https://raw.githubusercontent.com/passariello/container/ef3fa0eb45da8d9925e31fd29173375ee741f318/dpchart/assets/logos/dpchart.svg" alt="dpChart Logo" width="200"/>
</p>

<p align="center">
  <strong>Beautiful Charts Made Simple</strong>
</p>

<p align="center">

  ![Version](https://img.shields.io/badge/version-2.0.0-blue)
  ![License](https://img.shields.io/badge/license-MIT-green)
  ![TypeScript](https://img.shields.io/badge/TypeScript-5.9-blue?logo=TypeScript&logoColor=white)
  ![React](https://img.shields.io/badge/React-19-blue?logo=React&logoColor=white)
  ![eCharts](https://img.shields.io/badge/eCharts-6.0-orange?logo=apache&logoColor=white)
  ![esbuild](https://img.shields.io/badge/esbuild-0.25-yellow?logo=esbuild&logoColor=white)
  ![npm](https://img.shields.io/badge/npm-10-red?logo=npm&logoColor=white)
  ![Bundle Size](https://img.shields.io/badge/bundle-~50KB-gree)

</p>

---

## 📋 Table of Contents

- [About](#about-)
- [Features](#features-)
- [Quick Start](#quick-start-)
- [Installation](#installation-)
- [Usage](#usage-)
- [Examples](#examples-)
- [API](#api-)
- [License](#license-)

---

## 🔥 About

**dpChart** is a lightweight, powerful charting library built on top of [Apache ECharts](https://echarts.apache.org/). It provides a simplified API for creating beautiful, interactive charts with minimal code.

Created by [Dario Passariello](https://dario.passariello.ca) with ❤️

---

## ✨ Features

- 🚀 **Lightweight** - ~50KB minified bundle
- ⚡ **Fast** - Built with esbuild for lightning-fast builds
- 🎨 **Beautiful** - Stunning default styles and animations
- 📱 **Responsive** - Charts automatically resize
- 🔄 **Reactive** - Real-time data updates
- 🎯 **TypeScript** - Full type support
- 🔧 **Flexible** - Full ECharts power when you need it

---

## ⚡ Quick Start

```javascript
import "dpchart";

dpchart.draw({
  id: "my-chart",
  appendTo: "#chart-container",
  option: {
    xAxis: { data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'] },
    yAxis: {},
    series: [{ data: [10, 22, 28, 43, 49], type: 'line' }]
  }
});
```

---

## 📦 Installation

```bash
npm install dpchart --save
```

Or for the latest version:

```bash
npm install dpchart@latest --save
```

---

## 💻 Usage

### JavaScript/TypeScript (React, Vue, etc.)

```javascript
import "dpchart";

// Create a simple line chart
dpchart.draw({
  id: "chart_001",
  appendTo: "#chart-container",
  option: {
    tooltip: { trigger: 'axis' },
    xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] },
    yAxis: { type: 'value' },
    series: [{
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      type: 'line',
      smooth: true
    }]
  }
});
```

### HTML (No build required)

```html
<script src="https://unpkg.com/dpchart@latest/index.js"></script>

<div id="chart-container" style="width: 100%; height: 400px;"></div>

<script>
  dpchart.draw({
    id: "my-chart",
    appendTo: "#chart-container",
    option: {
      series: [{ data: [10, 20, 30], type: 'bar' }]
    }
  });
</script>
```

---

## 📊 Examples

### Line Chart

```javascript
dpchart.draw({
  id: "chart_001",
  appendTo: "#chart_001",
  option: {
    tooltip: { trigger: 'axis' },
    xAxis: { data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] },
    yAxis: {},
    series: [
      { name: 'Sales', type: 'bar', data: [820, 932, 901, 934, 1290, 1330, 1320] }
    ]
  }
});
```

![Line Chart](https://raw.githubusercontent.com/passariello/container/refs/heads/main/dpchart/assets/images/001.jpg)

### Polar Chart

```javascript
dpchart.draw({
  id: "chart_100",
  appendTo: "#chart_100",
  option: {
    angleAxis: {},
    radiusAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu'], z: 10 },
    polar: {},
    series: [
      { type: 'bar', data: [1, 2, 3, 4], coordinateSystem: 'polar', name: 'A', stack: 'a' },
      { type: 'bar', data: [2, 4, 6, 8], coordinateSystem: 'polar', name: 'B', stack: 'a' }
    ],
    legend: { show: true, data: ['A', 'B'] }
  }
});
```

![Polar Chart](https://raw.githubusercontent.com/passariello/container/refs/heads/main/dpchart/assets/images/002.jpg)

---

## 🛠️ API

### `dpchart.draw(options)`

Creates and renders a chart.

| Parameter | Type | Description |
|-----------|------|-------------|
| `id` | `string` | Unique identifier for the chart |
| `appendTo` | `string` | CSS selector or DOM element to append to |
| `option` | `object` | ECharts configuration object |
| `style` | `object` | Optional CSS styles (width, height) |
| `api` | `string` | Optional API endpoint for dynamic data |

---

## 🔌 Utilities

### `dpchart.update({ id, data })`

Update chart data:

```javascript
dpchart.update({
  id: "my-chart",
  data: { series: [{ data: [50, 60, 70] }] }
});
```

### `dpchart.fakeData(count, max, steps)`

Generate random time series data:

```javascript
const [dates, values] = dpchart.fakeData('2024-01-01', 100, 30);
// Returns: [['2024/1/1', '2024/1/2', ...], [random values]]
```

### `dpchart.cvs.processData(csvString)`

Parse CSV data:

```javascript
const data = dpchart.cvs.processData("name,value,date\nA,10,2024-01-01\nB,20,2024-01-02");
```

---

## 📄 License

MIT License - Copyright (c) [Dario Passariello](https://dario.passariello.ca)

---

Made with ❤️ and a lot of caffe' espesso!