cats-charts 0.0.6 → 0.0.8

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

@@ -66,6 +66,22 @@ class ContextMenuListItem {
     action;
     disabled = false;
 }
+class PieChartOptionsConfig {
+    title = {
+        show: true,
+        text: '',
+        left: 'center',
+        textStyle: { fontSize: 16 },
+    };
+    legend = { show: true };
+    tooltip = { trigger: 'item' };
+    series = [];
+    grid = {
+        left: '5%',
+        right: '5%',
+        containLabel: true,
+    };
+}
 
 class ChartService {
     themeSignal = signal('default', ...(ngDevMode ? [{ debugName: "themeSignal" }] : []));
@@ -3338,6 +3354,250 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                 args: ['areaChartContainer', { static: false }]
             }] } });
 
+class PieChart {
+    cdr;
+    title = '';
+    height = '600px';
+    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 PieChartOptionsConfig();
+    optionsConfig = {};
+    chartContainer;
+    chartInstance = null;
+    chartService = inject(ChartService);
+    destroy$ = new Subject();
+    currentData = [];
+    currentColumns = [];
+    boundHandleContextMenu;
+    constructor(cdr) {
+        this.cdr = cdr;
+        this.boundHandleContextMenu = this.handleContextMenu.bind(this);
+        // Effect for theme changes
+        effect(() => {
+            this.chartService.theme(); // Read signal
+            if (this.chartInstance) {
+                this.reinitializeChart();
+            }
+        });
+        // Effect for data changes
+        effect(() => {
+            const data = this.chartService.data(); // Read signal
+            const columns = this.chartService.columns();
+            this.currentColumns = columns;
+            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) {
+            this.processAndUpdateData();
+        }
+    }
+    ngAfterViewInit() {
+        this.initializeChart();
+        if (this.currentData.length > 0) {
+            this.updateChartWithData();
+        }
+        this.isLoading = false;
+        this.cdr.markForCheck();
+    }
+    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();
+        if (this.currentData.length > 0) {
+            this.updateChartWithData();
+        }
+        this.cdr.markForCheck();
+    }
+    initializeChart() {
+        if (!this.chartContainer) {
+            return;
+        }
+        const chartDom = this.chartContainer.nativeElement;
+        chartDom.innerHTML = '';
+        if (this.chartInstance) {
+            this.chartInstance.dispose();
+            this.chartInstance = null;
+        }
+        this.chartInstance = echarts.init(chartDom, this.chartService.theme()); // Init ECharts
+        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 },
+            // No dataZoom for pie charts
+            grid: {
+                ...this.defaultConfig.grid,
+                ...this.optionsConfig.grid,
+            },
+            // No xAxis or yAxis for pie charts
+            series: [],
+        });
+        // Responsive: Resize on window change
+        window.addEventListener('resize', () => this.chartInstance?.resize(), { passive: true });
+        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) {
+            const updatedOptions = {
+                series: this.getProcessedValues(),
+            };
+            this.chartInstance.setOption(updatedOptions, {
+                notMerge: false,
+                lazyUpdate: true,
+                silent: false,
+                replaceMerge: ['series'],
+            });
+        }
+    }
+    processedData = [];
+    processedColumns = [];
+    getProcessedValues() {
+        // For pie chart, assume single series using the first value column (index 1)
+        // If multiple value columns, you could sum them or create multiple pies, but here we use the first one
+        const columnList = [...this.processedColumns];
+        columnList.shift();
+        const seriesData = columnList.map((column, index) => ({
+            name: column, // Category from first column
+            value: this.processedData[0][index + 1] || 0, // Value from second column
+        }));
+        return [
+            {
+                name: `${this.processedColumns[0]}: ${this.processedData[0][0]}`,
+                type: 'pie',
+                data: seriesData,
+                radius: '50%', // Default radius, can be customized via optionsConfig
+                // Add other pie-specific options as needed
+                itemStyle: {
+                // color: '#5470c6', // Slice color, can be customized
+                },
+                emphasis: {
+                    itemStyle: {
+                        shadowBlur: 10,
+                        shadowOffsetX: 0,
+                        shadowColor: 'rgba(0, 0, 0, 0.5)',
+                    },
+                },
+                animation: true,
+            },
+        ];
+    }
+    processData() {
+        let dataToProcess = this.currentData;
+        // if (this.enableSampling && this.currentData.length > this.sampleThreshold) {
+        //   const step = Math.ceil(this.currentData.length / this.sampleThreshold);
+        //   dataToProcess = this.currentData.filter((_, index) => index % step === 0);
+        // }
+        this.processedData = dataToProcess; // Cache processed
+        this.processedColumns = this.currentColumns;
+    }
+    processAndUpdateData() {
+        this.processData();
+        if (this.chartInstance) {
+            this.updateChartWithData();
+        }
+    }
+    handleResize() {
+        if (this.chartInstance) {
+            this.chartInstance.resize();
+        }
+    }
+    disposeChart() {
+        if (this.chartInstance) {
+            this.chartInstance.dispose();
+            this.chartInstance.off('click');
+            this.chartInstance = null;
+            // console.log('ECharts instance disposed');
+        }
+        window.removeEventListener('resize', this.handleResize.bind(this));
+    }
+    // Public method: Update data externally (e.g., from API)
+    updateData(newData) {
+        this.currentData = newData;
+        this.processAndUpdateData();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: PieChart, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: PieChart, isStandalone: true, selector: "lib-pie-chart", inputs: { title: "title", height: "height", enableSampling: "enableSampling", sampleThreshold: "sampleThreshold", isLoading: "isLoading" }, viewQueries: [{ propertyName: "chartContainer", first: true, predicate: ["pieChartContainer"], descendants: true }], ngImport: i0, template: "<div #pieChartContainer style=\"width: 100%; height: 100%\"></div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: PieChart, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-pie-chart', imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div #pieChartContainer style=\"width: 100%; height: 100%\"></div>\n" }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { title: [{
+                type: Input
+            }], height: [{
+                type: Input
+            }], enableSampling: [{
+                type: Input
+            }], sampleThreshold: [{
+                type: Input
+            }], isLoading: [{
+                type: Input
+            }], chartContainer: [{
+                type: ViewChild,
+                args: ['pieChartContainer', { static: false }]
+            }] } });
+
 class ChartsLib {
     chartService;
     differs;
@@ -3417,6 +3677,8 @@ class ChartsLib {
                 return LineChart;
             case 'area':
                 return AreaChart;
+            case 'pie':
+                return PieChart;
             default:
                 return null;
         }
@@ -3457,5 +3719,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ChartsLib, ChartsLibType, ClickEvent, ContextMenuListItem, OptionsConfig };
+export { ChartsLib, ChartsLibType, ClickEvent, ContextMenuListItem, OptionsConfig, PieChartOptionsConfig };
 //# sourceMappingURL=cats-charts.mjs.map