cats-charts 0.0.23 → 0.0.25

package/README.md

@@ -1,59 +1,192 @@
 # CATS4U Charts
 
-This library was generated using [Angular CLI](https://github.com/angular/angular-cli) version 20.3.0 and it also usages [Apache Echarts](https://www.npmjs.com/package/echarts) for charts.
+![npm](https://img.shields.io/npm/v/cats-charts)
+![npm downloads](https://img.shields.io/npm/dm/cats-charts)
+![license](https://img.shields.io/npm/l/cats-charts)
+![angular](https://img.shields.io/badge/angular-20-red)
 
-## Install
+**CATS4U Charts** is a reusable Angular chart library built on **Apache ECharts** and **ngx-echarts**.
+It provides easy-to-use components for rendering interactive charts such as **Bar, Line, Area, Pie, Doughnut, Sankey**, and more.
 
-```
-npm install cats-charts
-```
+---
 
-## Usages
+# ✨ Features
 
-### TS file
+* 📊 Multiple chart types
+* ⚡ Powered by Apache ECharts
+* 🔌 Angular Standalone Components
+* 🎨 Built-in theme support
+* 🖱 Click & drill-down events
+* 🧩 Easy integration
+* 📦 Lightweight and reusable
 
-```
-import { ChartsLib } from 'cats-charts';
-```
+---
 
-### HTML template
+# 📦 Installation
 
-```
-<lib-charts-lib></lib-charts-lib>
+Install the package along with required dependencies:
+
+```bash
+npm install cats-charts echarts ngx-echarts
 ```
 
-### Inputs
+---
 
-```
-chartOptionsConfig: {} // accepts all options accepted by echarts
-chartType: 'bar' | 'area' | 'line' | 'pie'  // by default chart type is bar
-columns: [] // list of columns
-contextMenuList: []  // list of context menu
-data: []  // list of set of data
-themeName: "default" | "dark" | "vintage" | "essos" | "chalk" | "roma"  // default theme is default
+# ⚙️ Setup ngx-echarts
+
+Configure **ECharts** in your Angular application.
 
+### app.config.ts or app.module.ts
+
+```ts
+import { provideEchartsCore } from 'ngx-echarts';
+import * as echarts from 'echarts/core';
+
+export const appConfig = {
+  providers: [
+    provideEchartsCore({ echarts })
+  ]
+};
 ```
 
-### Outputs
+---
+
+# 🚀 Usage
 
+## Import Library
+
+```ts
+import { ChartsLib } from 'cats-charts';
 ```
-handleSingleClick: (params) => {}
-handleDrillBy: (params) => {}
+
+---
+
+## HTML Example
+
+```html
+<lib-charts-lib
+  [chartType]="'bar'"
+  [columns]="columns"
+  [data]="data"
+  [themeName]="'default'"
+  [showContextMenu]="true"
+  [contextMenuOptions]="contextMenuOptions"
+  (contextMenuClick)="onContextMenuClick($event)"
+  (chartEvent)="onChartEvent($event)"
+></lib-charts-lib>>
 ```
 
-### Inputs Types
+---
+
+<!-- # 📊 Example
+
+### Component TypeScript
+
+```ts
+columns = ['Month', 'Sales'];
+
+data = [
+  ['Jan', 120],
+  ['Feb', 200],
+  ['Mar', 150],
+  ['Apr', 80]
+];
+``` -->
+
+---
+
+# ⚙️ Inputs
+
+| Input | Type | Description |
+|------|------|-------------|
+| chartOptionsConfig | OptionsConfig | Accepts all Apache ECharts configuration options |
+| chartType | 'bar' \| 'area' \| 'line' \| 'pie' | Chart type (default: `bar`) |
+| columns | string[] | List of column names |
+| data | any[][] | Dataset used for chart rendering |
+| themeName | 'default' \| 'dark' \ | Chart theme |
+| contextMenuList | ContextMenuListItem[] | Context menu configuration |
+| contextMenuOptions | any[] | List of context menu items to display on right-click |
+| showContextMenu | boolean | Whether to show the context menu on right-click (default: `false`) |
+
+---
 
+# 📤 Outputs
+
+| Output | Description |
+|------|-------------|
+| contextMenuClick | Triggered when a context menu item is clicked |
+| chartEvent | Emits any ECharts chart events. Includes `type` (event name) and `data` (event params). |
+
+### Example
+
+```ts
+onContextMenuClick(menuItem) {
+  console.log('Context menu clicked:', menuItem);
+}
+
+onChartEvent(event) {
+  console.log('Chart event:', event.type, event.data);
+}
 ```
+
+---
+
+# 🧠 Types
+
+```ts
 import type { ChartsLibType, OptionsConfig } from 'cats-charts';
 
 chartOptionsConfig: OptionsConfig
 chartType: ChartsLibType['chartType']
-columns:  string[]
+columns: string[]
 data: any[][]
 themeName: ChartsLibType['themeName']
 contextMenuList: ContextMenuListItem[]
 ```
 
-## Additional Resources
+---
+
+# 📊 Supported Charts
+
+* Bar Chart
+* Line Chart
+* Area Chart
+* Pie Chart
+* Doughnut Chart
+* Stacked Area Chart
+* Sankey Chart
+* Custom Charts
+
+---
+
+# 🎨 Themes
+
+Available chart themes:
+
+* default
+* dark
+* vintage
+* essos
+* chalk
+* roma
+
+---
+
+# 📚 Documentation
+
+Apache ECharts documentation:
+
+https://echarts.apache.org/en/api.html#echarts
+
+---
+
+# 🤝 Contributing
+
+Contributions, issues, and feature requests are welcome.
+Feel free to submit a pull request.
+
+---
+
+# 📄 License
 
-For more information on Echarts, including detailed references, visit the [Official Apache Echarts](https://echarts.apache.org/en/api.html#echarts) page.
+MIT License