cats-charts 0.0.5 → 0.0.7

package/README.md

@@ -1,63 +1,59 @@
-# ChartsLib
+# CATS4U Charts
 
-This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 20.3.0.
+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.
 
-## Code scaffolding
+## Install
 
-Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
-
-```bash
-ng generate component component-name
 ```
-
-For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
-
-```bash
-ng generate --help
+npm install cats-charts
 ```
 
-## Building
+## Usages
 
-To build the library, run:
+### TS file
 
-```bash
-ng build charts-lib
+```
+import { ChartsLib } from 'cats-charts';
 ```
 
-This command will compile your project, and the build artifacts will be placed in the `dist/` directory.
-
-### Publishing the Library
+### HTML template
 
-Once the project is built, you can publish your library by following these steps:
+```
+<lib-charts-lib></lib-charts-lib>
+```
 
-1. Navigate to the `dist` directory:
-   ```bash
-   cd dist/charts-lib
-   ```
+### Inputs
 
-2. Run the `npm publish` command to publish your library to the npm registry:
-   ```bash
-   npm publish
-   ```
+```
+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
 
-## Running unit tests
+```
 
-To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
+### Outputs
 
-```bash
-ng test
+```
+handleSingleClick: (params) => {}
+handleDrillBy: (params) => {}
 ```
 
-## Running end-to-end tests
-
-For end-to-end (e2e) testing, run:
+### Inputs Types
 
-```bash
-ng e2e
 ```
-
-Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
+import type { ChartsLibType, OptionsConfig } from 'cats-charts';
+
+chartOptionsConfig: OptionsConfig
+chartType: ChartsLibType['chartType']
+columns:  string[]
+data: any[][]
+themeName: ChartsLibType['themeName']
+contextMenuList: ContextMenuListItem[]
+```
 
 ## Additional Resources
 
-For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
+For more information on Echarts, including detailed references, visit the [Official Apache Echarts](https://echarts.apache.org/en/api.html#echarts) page.

package/fesm2022/cats-charts.mjs

@@ -1001,10 +1001,10 @@ const vintageTheme = {
         textStyle: {
             color: '#333333',
         },
-        left: 'center',
+        eft: 'center',
         right: 'auto',
-        top: 0,
-        bottom: 10,
+        top: 'auto',
+        bottom: 15,
     },
     tooltip: {
         axisPointer: {
@@ -2830,68 +2830,21 @@ class LineChart {
     enableSampling = true; // Sample data if > threshold for perf
     sampleThreshold = 10000; // Sample if data > 10k (keep full for 50k if hardware allows)
     isLoading = true;
+    defaultConfig = new OptionsConfig();
+    optionsConfig = {};
     chartContainer;
     chartInstance = null;
-    destroy$ = new Subject();
     chartService = inject(ChartService);
+    destroy$ = new Subject();
     currentData = [];
     currentColumns = [];
-    // ECharts options optimized for 50k+ data
-    chartOptions = {
-        title: {
-            text: this.title,
-            left: 'center',
-            textStyle: { fontSize: 16 },
-        },
-        tooltip: {
-            // Hover info (efficient for large data)
-            trigger: 'axis',
-            axisPointer: { type: 'shadow' },
-            // formatter: (params = [{ name: '', value: '' }]) => {
-            //   const param = params[0];
-            //   return `${param.name}<br/>Value: ${param.value}`;
-            // },
-        },
-        legend: { show: false }, // Disable for single series; add if multi-series
-        dataZoom: [
-            // Critical for large data: Zoom/slider to navigate 50k data points
-            {
-                type: 'slider', // Bottom slider
-                start: 0,
-                end: 100, // Initial view: First 10% (e.g., 5k of 50k)
-                height: 25,
-                bottom: 20,
-                textStyle: { fontSize: 12 },
-            },
-            {
-                type: 'inside', // Mouse wheel/pinch zoom
-                start: 0,
-                end: 10,
-            },
-        ],
-        grid: {
-            left: '5%',
-            right: '5%',
-            bottom: '80px', // Space for dataZoom slider
-            containLabel: true,
-        },
-        xAxis: {
-            type: 'category',
-            data: [], // Populated dynamically
-            axisLabel: { rotate: 45, fontSize: 10 },
-            axisTick: { show: false },
-        },
-        yAxis: {
-            type: 'value',
-            axisLabel: { fontSize: 12 },
-        },
-        series: [],
-    };
+    boundHandleContextMenu;
     constructor(cdr) {
         this.cdr = cdr;
+        this.boundHandleContextMenu = this.handleContextMenu.bind(this);
         // Effect for theme changes
         effect(() => {
-            const theme = this.chartService.theme(); // Read signal
+            this.chartService.theme(); // Read signal
             if (this.chartInstance) {
                 this.reinitializeChart();
             }
@@ -2904,6 +2857,12 @@ class LineChart {
             this.currentData = data;
             this.processAndUpdateData();
         });
+        // Effect for chartOptionsConfig changes
+        effect(() => {
+            this.chartService.chartOptionsConfig();
+            this.optionsConfig = this.chartService.chartOptionsConfig();
+            this.reinitializeChart();
+        });
     }
     ngOnInit() {
         if (this.currentData.length > 0) {
@@ -2921,10 +2880,18 @@ class LineChart {
     ngOnDestroy() {
         this.destroy$.next();
         this.destroy$.complete();
+        this.chartService.hideContextMenu();
         this.disposeChart();
         if (this.chartInstance) {
             this.chartInstance.dispose(); // Clean up to free memory
         }
+        if (this.chartContainer) {
+            this.chartContainer.nativeElement.removeEventListener('contextmenu', this.boundHandleContextMenu);
+        }
+        document.removeEventListener('click', () => {
+            this.chartService.hideContextMenu();
+            this.chartService.resetContextEvent();
+        });
     }
     reinitializeChart() {
         this.initializeChart();
@@ -2935,7 +2902,6 @@ class LineChart {
     }
     initializeChart() {
         if (!this.chartContainer) {
-            console.error('Chart container not found!');
             return;
         }
         const chartDom = this.chartContainer.nativeElement;
@@ -2945,7 +2911,38 @@ class LineChart {
             this.chartInstance = null;
         }
         this.chartInstance = echarts.init(chartDom, this.chartService.theme()); // Init ECharts
-        this.chartInstance.setOption(this.chartOptions);
+        this.chartInstance.setOption({
+            ...this.defaultConfig,
+            ...this.optionsConfig,
+            title: {
+                ...this.defaultConfig.title,
+                ...this.optionsConfig.title,
+                textStyle: {
+                    ...this.defaultConfig.title?.textStyle,
+                    ...this.optionsConfig.title?.textStyle,
+                },
+            },
+            tooltip: {
+                ...this.defaultConfig.tooltip,
+                ...this.optionsConfig.tooltip,
+            },
+            legend: { ...this.defaultConfig.legend, ...this.optionsConfig.legend },
+            dataZoom: this.optionsConfig.dataZoom || this.defaultConfig.dataZoom,
+            grid: {
+                ...this.defaultConfig.grid,
+                ...this.optionsConfig.grid,
+            },
+            xAxis: {
+                ...this.defaultConfig.xAxis,
+                ...this.optionsConfig.xAxis,
+                data: [],
+            },
+            yAxis: {
+                ...this.defaultConfig.yAxis,
+                ...this.optionsConfig.yAxis,
+            },
+            series: [],
+        });
         // Responsive: Resize on window change
         window.addEventListener('resize', () => this.chartInstance?.resize(), { passive: true });
         // Handle dataZoom events (optional: Log zoom changes)
@@ -2955,9 +2952,32 @@ class LineChart {
         this.chartInstance.on('rendered', () => {
             // console.log('Chart rendered successfully');
         });
+        this.chartInstance.on('click', (params) => {
+            this.chartService.hideContextMenu();
+            this.chartService.resetContextEvent();
+            this.chartService.handleClick(params);
+        });
+        this.chartInstance.on('contextmenu', (params) => {
+            this.chartService.openContextMenu(params, this.chartContainer);
+        });
+        chartDom.addEventListener('contextmenu', this.boundHandleContextMenu);
+        document.addEventListener('click', () => {
+            this.chartService.hideContextMenu();
+            this.chartService.resetContextEvent();
+        }, {
+            passive: true,
+        });
         this.isLoading = false;
         this.cdr.markForCheck();
     }
+    handleContextMenu(event) {
+        event.preventDefault();
+        setTimeout(() => {
+            if (!this.chartService.contextMenuEvent().seriesName) {
+                this.chartService.openContextMenu(null, this.chartContainer, event);
+            }
+        }, 0);
+    }
     updateChartWithData() {
         this.processData(); // Process without updating yet
         if (this.chartInstance) {
@@ -3028,6 +3048,7 @@ class LineChart {
     disposeChart() {
         if (this.chartInstance) {
             this.chartInstance.dispose();
+            this.chartInstance.off('click');
             this.chartInstance = null;
             // console.log('ECharts instance disposed');
         }
@@ -3066,67 +3087,21 @@ class AreaChart {
     enableSampling = true; // Sample data if > threshold for perf
     sampleThreshold = 10000; // Sample if data > 10k (keep full for 50k if hardware allows)
     isLoading = true;
+    defaultConfig = new OptionsConfig();
+    optionsConfig = {};
     chartContainer;
     chartInstance = null;
     chartService = inject(ChartService);
     destroy$ = new Subject();
     currentData = [];
     currentColumns = [];
-    // ECharts options optimized for 50k+ data
-    chartOptions = {
-        title: {
-            text: this.title,
-            left: 'center',
-            textStyle: { fontSize: 16 },
-        },
-        tooltip: {
-            // Hover info (efficient for large data)
-            trigger: 'axis',
-            axisPointer: { type: 'shadow' },
-            // formatter: (params = [{ name: '', value: '' }]) => {
-            //   const param = params[0];
-            //   return `${param.name}<br/>Value: ${param.value}`;
-            // },
-        },
-        legend: { show: false }, // Disable for single series; add if multi-series
-        dataZoom: [
-            // Critical for large data: Zoom/slider to navigate 50k data points
-            {
-                type: 'slider', // Bottom slider
-                start: 0,
-                end: 100, // Initial view: First 10% (e.g., 5k of 50k)
-                height: 25,
-                bottom: 20,
-                textStyle: { fontSize: 12 },
-            },
-            {
-                type: 'inside', // Mouse wheel/pinch zoom
-                start: 0,
-                end: 10,
-            },
-        ],
-        grid: {
-            left: '5%',
-            right: '5%',
-            bottom: '80px', // Space for dataZoom slider
-            containLabel: true,
-        },
-        xAxis: {
-            type: 'category',
-            data: [], // Populated dynamically
-            axisLabel: { rotate: 45, fontSize: 10 },
-            axisTick: { show: false },
-        },
-        yAxis: {
-            type: 'value',
-            axisLabel: { fontSize: 12 },
-        },
-        series: [],
-    };
+    boundHandleContextMenu;
     constructor(cdr) {
         this.cdr = cdr;
+        this.boundHandleContextMenu = this.handleContextMenu.bind(this);
+        // Effect for theme changes
         effect(() => {
-            const theme = this.chartService.theme(); // Read signal
+            this.chartService.theme(); // Read signal
             if (this.chartInstance) {
                 this.reinitializeChart();
             }
@@ -3139,6 +3114,12 @@ class AreaChart {
             this.currentData = data;
             this.processAndUpdateData();
         });
+        // Effect for chartOptionsConfig changes
+        effect(() => {
+            this.chartService.chartOptionsConfig();
+            this.optionsConfig = this.chartService.chartOptionsConfig();
+            this.reinitializeChart();
+        });
     }
     ngOnInit() {
         if (this.currentData.length > 0) {
@@ -3156,10 +3137,18 @@ class AreaChart {
     ngOnDestroy() {
         this.destroy$.next();
         this.destroy$.complete();
+        this.chartService.hideContextMenu();
         this.disposeChart();
         if (this.chartInstance) {
             this.chartInstance.dispose(); // Clean up to free memory
         }
+        if (this.chartContainer) {
+            this.chartContainer.nativeElement.removeEventListener('contextmenu', this.boundHandleContextMenu);
+        }
+        document.removeEventListener('click', () => {
+            this.chartService.hideContextMenu();
+            this.chartService.resetContextEvent();
+        });
     }
     reinitializeChart() {
         this.initializeChart();
@@ -3170,7 +3159,6 @@ class AreaChart {
     }
     initializeChart() {
         if (!this.chartContainer) {
-            console.error('Chart container not found!');
             return;
         }
         const chartDom = this.chartContainer.nativeElement;
@@ -3180,7 +3168,38 @@ class AreaChart {
             this.chartInstance = null;
         }
         this.chartInstance = echarts.init(chartDom, this.chartService.theme()); // Init ECharts
-        this.chartInstance.setOption(this.chartOptions);
+        this.chartInstance.setOption({
+            ...this.defaultConfig,
+            ...this.optionsConfig,
+            title: {
+                ...this.defaultConfig.title,
+                ...this.optionsConfig.title,
+                textStyle: {
+                    ...this.defaultConfig.title?.textStyle,
+                    ...this.optionsConfig.title?.textStyle,
+                },
+            },
+            tooltip: {
+                ...this.defaultConfig.tooltip,
+                ...this.optionsConfig.tooltip,
+            },
+            legend: { ...this.defaultConfig.legend, ...this.optionsConfig.legend },
+            dataZoom: this.optionsConfig.dataZoom || this.defaultConfig.dataZoom,
+            grid: {
+                ...this.defaultConfig.grid,
+                ...this.optionsConfig.grid,
+            },
+            xAxis: {
+                ...this.defaultConfig.xAxis,
+                ...this.optionsConfig.xAxis,
+                data: [],
+            },
+            yAxis: {
+                ...this.defaultConfig.yAxis,
+                ...this.optionsConfig.yAxis,
+            },
+            series: [],
+        });
         // Responsive: Resize on window change
         window.addEventListener('resize', () => this.chartInstance?.resize(), { passive: true });
         // Handle dataZoom events (optional: Log zoom changes)
@@ -3190,9 +3209,32 @@ class AreaChart {
         this.chartInstance.on('rendered', () => {
             // console.log('Chart rendered successfully');
         });
+        this.chartInstance.on('click', (params) => {
+            this.chartService.hideContextMenu();
+            this.chartService.resetContextEvent();
+            this.chartService.handleClick(params);
+        });
+        this.chartInstance.on('contextmenu', (params) => {
+            this.chartService.openContextMenu(params, this.chartContainer);
+        });
+        chartDom.addEventListener('contextmenu', this.boundHandleContextMenu);
+        document.addEventListener('click', () => {
+            this.chartService.hideContextMenu();
+            this.chartService.resetContextEvent();
+        }, {
+            passive: true,
+        });
         this.isLoading = false;
         this.cdr.markForCheck();
     }
+    handleContextMenu(event) {
+        event.preventDefault();
+        setTimeout(() => {
+            if (!this.chartService.contextMenuEvent().seriesName) {
+                this.chartService.openContextMenu(null, this.chartContainer, event);
+            }
+        }, 0);
+    }
     updateChartWithData() {
         this.processData(); // Process without updating yet
         if (this.chartInstance) {
@@ -3264,6 +3306,7 @@ class AreaChart {
     disposeChart() {
         if (this.chartInstance) {
             this.chartInstance.dispose();
+            this.chartInstance.off('click');
             this.chartInstance = null;
             // console.log('ECharts instance disposed');
         }