cats-charts 0.0.28 → 0.0.29

package/fesm2022/cats-charts.mjs

@@ -1,11 +1,33 @@
 import * as i0 from '@angular/core';
-import { Injectable, EventEmitter, Output, Input, ChangeDetectionStrategy, Component, HostListener } from '@angular/core';
+import { EventEmitter, Output, Input, Component, Injectable, HostListener, ChangeDetectionStrategy } from '@angular/core';
 import * as echarts from 'echarts/core';
 import { NgxEchartsDirective, provideEchartsCore } from 'ngx-echarts';
 import { LineChart, BarChart as BarChart$1, PieChart as PieChart$1, CustomChart, SankeyChart as SankeyChart$1 } from 'echarts/charts';
 import { GridComponent, TooltipComponent, LegendComponent, TitleComponent, DatasetComponent, GraphicComponent } from 'echarts/components';
 import { CanvasRenderer } from 'echarts/renderers';
 
+class RightClickCard {
+    cardPosition;
+    cardOptions;
+    contextMenuClick = new EventEmitter();
+    onMenuClick(item) {
+        this.contextMenuClick.emit(item);
+        // this.closeMenu();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: RightClickCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: RightClickCard, isStandalone: true, selector: "lib-right-click-card", inputs: { cardPosition: "cardPosition", cardOptions: "cardOptions" }, outputs: { contextMenuClick: "contextMenuClick" }, ngImport: i0, template: "<div\n  class=\"context-card\"\n  [style.left.px]=\"cardPosition.x\"\n  [style.top.px]=\"cardPosition.y\"\n  (click)=\"$event.stopPropagation()\"\n>\n  @for (item of cardOptions; track item.value) {\n    <div class=\"context-item\" (click)=\"onMenuClick(item)\">\n      @if (item.icon) {\n        <img [src]=\"item.icon\" alt=\"icon\" />\n      }\n\n      <span>{{ item.label }}</span>\n    </div>\n  }\n</div>\n", styles: [".context-card{position:absolute;background:#fff;border-radius:10px;padding:6px 0;min-width:160px;box-shadow:0 10px 25px #00000026;z-index:9999}.context-item{display:flex;align-items:center;gap:8px;padding:8px 14px;cursor:pointer;transition:background .2s ease}.context-item:hover{background:#f3f3f3}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: RightClickCard, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-right-click-card', imports: [], template: "<div\n  class=\"context-card\"\n  [style.left.px]=\"cardPosition.x\"\n  [style.top.px]=\"cardPosition.y\"\n  (click)=\"$event.stopPropagation()\"\n>\n  @for (item of cardOptions; track item.value) {\n    <div class=\"context-item\" (click)=\"onMenuClick(item)\">\n      @if (item.icon) {\n        <img [src]=\"item.icon\" alt=\"icon\" />\n      }\n\n      <span>{{ item.label }}</span>\n    </div>\n  }\n</div>\n", styles: [".context-card{position:absolute;background:#fff;border-radius:10px;padding:6px 0;min-width:160px;box-shadow:0 10px 25px #00000026;z-index:9999}.context-item{display:flex;align-items:center;gap:8px;padding:8px 14px;cursor:pointer;transition:background .2s ease}.context-item:hover{background:#f3f3f3}\n"] }]
+        }], propDecorators: { cardPosition: [{
+                type: Input
+            }], cardOptions: [{
+                type: Input
+            }], contextMenuClick: [{
+                type: Output
+            }] } });
+
 class Charts {
     legendSelected = {};
     defaultColors = ['#22c55e', '#3b82f6', '#ef4444', '#6b7280'];
@@ -478,64 +500,74 @@ echarts.use([
 ]);
 class LinesChart {
     chartService;
+    cdr;
     config;
     theme;
     events = [];
+    contextMenuOptions = [];
+    showContextMenu = false;
+    contextMenuClick = new EventEmitter();
     chartEvent = new EventEmitter();
     chartOption = {};
     chartInstance;
-    constructor(chartService) {
+    cardPosition = { x: 0, y: 0 };
+    openCard = false;
+    constructor(chartService, cdr) {
         this.chartService = chartService;
+        this.cdr = cdr;
     }
     /* ------------------ CHANGE HANDLING ------------------ */
     ngOnChanges(changes) {
         if (!this.config)
             return;
-        this.chartOption = this.buildOption(this.config);
-        if (this.chartInstance) {
-            this.chartInstance.setOption(this.chartOption, true);
+        if (changes['theme'] && this.chartInstance) {
+            this.chartInstance.dispose();
         }
+        this.buildOption();
     }
     /* ------------------ OPTION BUILDER ------------------ */
-    buildOption(config) {
-        const total = config.series?.reduce((seriesSum, series) => {
-            const dataSum = series.data?.reduce((sum, value) => sum + value, 0) || 0;
-            return seriesSum + dataSum;
-        }, 0);
-        return {
-            backgroundColor: config.backgroundColor || 'transparent',
+    buildOption() {
+        this.chartOption = {
+            backgroundColor: this.config.backgroundColor || 'transparent',
+            color: this.config.colors || this.chartService.defaultColors,
             title: {
-                show: config.showTitle ?? !!config.title,
-                text: config.title,
-                left: 'center',
+                show: this.config.showTitle ?? !!this.config.title,
+                text: this.config.title,
+                left: this.config.titlePosition || 'center',
             },
             tooltip: {
+                show: this.config.showTooltip,
                 trigger: 'axis',
+                backgroundColor: 'transparent', // remove default box
+                borderWidth: 0,
                 padding: 0,
-                formatter: (params) => this.chartService.barLineTooltipFormatter(params),
+                confine: true,
+                formatter: (params) => this.config.tooltipFormatter
+                    ? this.config.tooltipFormatter(params)
+                    : this.chartService.barLineTooltipFormatter(params),
             },
-            legend: {
+            legends: {
                 show: false,
             },
             // graphic: this.chartService?.buildGraphicLegend(total, this.config, this.chartInstance),
             grid: this.config.isTrendChart
                 ? { left: 0, right: 0, top: 0, bottom: 0 }
                 : {
-                    left: config.grid?.left ?? '3%',
-                    right: config.grid?.right ?? '4%',
-                    bottom: config.grid?.bottom ?? '3%',
-                    top: config.grid?.top ?? '10%',
+                    left: this.config.gridLeft ?? 0,
+                    right: this.config.gridRight ?? 0,
+                    bottom: this.config.gridBottom ?? 0,
+                    top: this.config.gridTop ?? 0,
                     containLabel: true,
                 },
             xAxis: {
                 show: !this.config.isTrendChart,
                 type: 'category',
                 boundaryGap: false,
-                data: config.xAxisData,
+                data: this.config.xAxisData,
                 axisLine: {
                     show: this.config.showXAxisLine ?? true,
                 },
-                ...config.xAxis,
+                ...this.config.xAxis,
             },
             yAxis: {
                 show: !this.config.isTrendChart,
@@ -544,15 +576,13 @@ class LinesChart {
                 axisLine: {
                     show: this.config.showYAxisLine ?? true,
                 },
-                ...config.yAxis,
+                ...this.config.yAxis,
             },
-            series: config.series.map((s) => {
-                const lineColor = s.color || '#3b82f6';
+            series: this.config.series.map((s) => {
+                const lineColor = s.areaColor || '#3b82f6';
                 return {
-                    name: s.name,
                     type: 'line',
                     smooth: s.smooth ?? true,
-                    data: s.data,
                     areaStyle: s.area
                         ? {
                             color: {
@@ -575,8 +605,16 @@ class LinesChart {
                             opacity: 0.4,
                         }
                         : undefined,
-                    color: s.color,
-                    symbol: s.symbol,
+                    ...s,
+                    label: {
+                        show: this.config.showLabel ?? false,
+                        position: this.config.labelPosition ?? 'top',
+                        ...(s['label'] ? s['label'] : {}),
+                    },
+                    itemStyle: {
+                        borderRadius: this.config.borderRadius ?? 0,
+                        ...(s['itemStyle'] ? s['itemStyle'] : {}),
+                    },
                 };
             }),
         };
@@ -584,6 +622,7 @@ class LinesChart {
     /* ------------------ INIT ------------------ */
     onChartInit(ec) {
         this.chartInstance = ec;
+        this.buildOption();
         this.bindEvents();
     }
     /* ------------------ EVENTS ------------------ */
@@ -595,6 +634,14 @@ class LinesChart {
             this.chartInstance.on(eventName, (params) => {
                 if (eventName === 'contextmenu' && params.event?.event) {
                     params.event.event.preventDefault();
+                    const container = this.chartInstance.getDom();
+                    const rect = container.getBoundingClientRect();
+                    this.cardPosition = {
+                        x: params.event.event.clientX - rect.left,
+                        y: params.event.event.clientY - rect.top,
+                    };
+                    this.openCard = true;
+                    this.cdr.markForCheck();
                 }
                 this.chartEvent.emit({
                     type: eventName,
@@ -603,46 +650,43 @@ class LinesChart {
             });
         });
     }
+    onMenuClick(item) {
+        this.contextMenuClick.emit(item);
+        this.closeCard();
+    }
+    closeCard() {
+        this.openCard = false;
+    }
     /* ------------------ DESTROY ------------------ */
     ngOnDestroy() {
-        this.chartInstance?.dispose();
+        if (this.chartInstance) {
+            this.chartInstance.off();
+            this.chartInstance.dispose();
+        }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: LinesChart, deps: [{ token: Charts }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: LinesChart, isStandalone: true, selector: "lib-line-chart", inputs: { config: "config", theme: "theme", events: "events" }, outputs: { chartEvent: "chartEvent" }, providers: [provideEchartsCore({ echarts })], usesOnChanges: true, ngImport: i0, template: "\n<div\n  echarts\n [options]=\"chartOption\"\n  [theme]=\"theme\"\n  (chartInit)=\"onChartInit($event)\"\n  class=\"chart-container\">\n</div>\n", styles: [".chart-container{width:100%;height:100%}\n"], dependencies: [{ kind: "directive", type: NgxEchartsDirective, selector: "echarts, [echarts]", inputs: ["options", "theme", "initOpts", "merge", "autoResize", "loading", "loadingType", "loadingOpts"], outputs: ["chartInit", "optionsError", "chartClick", "chartDblClick", "chartMouseDown", "chartMouseMove", "chartMouseUp", "chartMouseOver", "chartMouseOut", "chartGlobalOut", "chartContextMenu", "chartHighlight", "chartDownplay", "chartSelectChanged", "chartLegendSelectChanged", "chartLegendSelected", "chartLegendUnselected", "chartLegendLegendSelectAll", "chartLegendLegendInverseSelect", "chartLegendScroll", "chartDataZoom", "chartDataRangeSelected", "chartGraphRoam", "chartGeoRoam", "chartTreeRoam", "chartTimelineChanged", "chartTimelinePlayChanged", "chartRestore", "chartDataViewChanged", "chartMagicTypeChanged", "chartGeoSelectChanged", "chartGeoSelected", "chartGeoUnselected", "chartAxisAreaSelected", "chartBrush", "chartBrushEnd", "chartBrushSelected", "chartGlobalCursorTaken", "chartRendered", "chartFinished"], exportAs: ["echarts"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: LinesChart, deps: [{ token: Charts }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: LinesChart, isStandalone: true, selector: "lib-line-chart", inputs: { config: "config", theme: "theme", events: "events", contextMenuOptions: "contextMenuOptions", showContextMenu: "showContextMenu" }, outputs: { contextMenuClick: "contextMenuClick", chartEvent: "chartEvent" }, host: { listeners: { "document:click": "closeCard()" } }, providers: [provideEchartsCore({ echarts })], usesOnChanges: true, ngImport: i0, template: "<div\n  echarts\n  [options]=\"chartOption\"\n  [theme]=\"theme\"\n  (chartInit)=\"onChartInit($event)\"\n  class=\"chart-container\"\n></div>\n@if (openCard) {\n  <lib-right-click-card\n    [cardOptions]=\"contextMenuOptions\"\n    (contextMenuClick)=\"onMenuClick($event)\"\n    [cardPosition]=\"cardPosition\"\n  ></lib-right-click-card>\n}\n", styles: [".chart-container{width:100%;height:100%}\n"], dependencies: [{ kind: "directive", type: NgxEchartsDirective, selector: "echarts, [echarts]", inputs: ["options", "theme", "initOpts", "merge", "autoResize", "loading", "loadingType", "loadingOpts"], outputs: ["chartInit", "optionsError", "chartClick", "chartDblClick", "chartMouseDown", "chartMouseMove", "chartMouseUp", "chartMouseOver", "chartMouseOut", "chartGlobalOut", "chartContextMenu", "chartHighlight", "chartDownplay", "chartSelectChanged", "chartLegendSelectChanged", "chartLegendSelected", "chartLegendUnselected", "chartLegendLegendSelectAll", "chartLegendLegendInverseSelect", "chartLegendScroll", "chartDataZoom", "chartDataRangeSelected", "chartGraphRoam", "chartGeoRoam", "chartTreeRoam", "chartTimelineChanged", "chartTimelinePlayChanged", "chartRestore", "chartDataViewChanged", "chartMagicTypeChanged", "chartGeoSelectChanged", "chartGeoSelected", "chartGeoUnselected", "chartAxisAreaSelected", "chartBrush", "chartBrushEnd", "chartBrushSelected", "chartGlobalCursorTaken", "chartRendered", "chartFinished"], exportAs: ["echarts"] }, { kind: "component", type: RightClickCard, selector: "lib-right-click-card", inputs: ["cardPosition", "cardOptions"], outputs: ["contextMenuClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: LinesChart, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-line-chart', standalone: true, imports: [NgxEchartsDirective], providers: [provideEchartsCore({ echarts })], changeDetection: ChangeDetectionStrategy.OnPush, template: "\n<div\n  echarts\n [options]=\"chartOption\"\n  [theme]=\"theme\"\n  (chartInit)=\"onChartInit($event)\"\n  class=\"chart-container\">\n</div>\n", styles: [".chart-container{width:100%;height:100%}\n"] }]
-        }], ctorParameters: () => [{ type: Charts }], propDecorators: { config: [{
+            args: [{ selector: 'lib-line-chart', standalone: true, imports: [NgxEchartsDirective, RightClickCard], providers: [provideEchartsCore({ echarts })], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  echarts\n  [options]=\"chartOption\"\n  [theme]=\"theme\"\n  (chartInit)=\"onChartInit($event)\"\n  class=\"chart-container\"\n></div>\n@if (openCard) {\n  <lib-right-click-card\n    [cardOptions]=\"contextMenuOptions\"\n    (contextMenuClick)=\"onMenuClick($event)\"\n    [cardPosition]=\"cardPosition\"\n  ></lib-right-click-card>\n}\n", styles: [".chart-container{width:100%;height:100%}\n"] }]
+        }], ctorParameters: () => [{ type: Charts }, { type: i0.ChangeDetectorRef }], propDecorators: { config: [{
                 type: Input
             }], theme: [{
                 type: Input
             }], events: [{
                 type: Input
-            }], chartEvent: [{
-                type: Output
-            }] } });
-
-class RightClickCard {
-    cardPosition;
-    cardOptions;
-    contextMenuClick = new EventEmitter();
-    onMenuClick(item) {
-        this.contextMenuClick.emit(item);
-        // this.closeMenu();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: RightClickCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: RightClickCard, isStandalone: true, selector: "lib-right-click-card", inputs: { cardPosition: "cardPosition", cardOptions: "cardOptions" }, outputs: { contextMenuClick: "contextMenuClick" }, ngImport: i0, template: "<div\n  class=\"context-card\"\n  [style.left.px]=\"cardPosition.x\"\n  [style.top.px]=\"cardPosition.y\"\n  (click)=\"$event.stopPropagation()\"\n>\n  @for (item of cardOptions; track item.value) {\n    <div class=\"context-item\" (click)=\"onMenuClick(item)\">\n      @if (item.icon) {\n        <img [src]=\"item.icon\" alt=\"icon\" />\n      }\n\n      <span>{{ item.label }}</span>\n    </div>\n  }\n</div>\n", styles: [".context-card{position:absolute;background:#fff;border-radius:10px;padding:6px 0;min-width:160px;box-shadow:0 10px 25px #00000026;z-index:9999}.context-item{display:flex;align-items:center;gap:8px;padding:8px 14px;cursor:pointer;transition:background .2s ease}.context-item:hover{background:#f3f3f3}\n"] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: RightClickCard, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-right-click-card', imports: [], template: "<div\n  class=\"context-card\"\n  [style.left.px]=\"cardPosition.x\"\n  [style.top.px]=\"cardPosition.y\"\n  (click)=\"$event.stopPropagation()\"\n>\n  @for (item of cardOptions; track item.value) {\n    <div class=\"context-item\" (click)=\"onMenuClick(item)\">\n      @if (item.icon) {\n        <img [src]=\"item.icon\" alt=\"icon\" />\n      }\n\n      <span>{{ item.label }}</span>\n    </div>\n  }\n</div>\n", styles: [".context-card{position:absolute;background:#fff;border-radius:10px;padding:6px 0;min-width:160px;box-shadow:0 10px 25px #00000026;z-index:9999}.context-item{display:flex;align-items:center;gap:8px;padding:8px 14px;cursor:pointer;transition:background .2s ease}.context-item:hover{background:#f3f3f3}\n"] }]
-        }], propDecorators: { cardPosition: [{
+            }], contextMenuOptions: [{
                 type: Input
-            }], cardOptions: [{
+            }], showContextMenu: [{
                 type: Input
             }], contextMenuClick: [{
                 type: Output
+            }], chartEvent: [{
+                type: Output
+            }], closeCard: [{
+                type: HostListener,
+                args: ['document:click']
             }] } });
 
 echarts.use([
@@ -686,35 +730,36 @@ class BarChart {
         // Common chart option
         this.chartOption = {
             backgroundColor: this.config.backgroundColor || 'transparent',
+            color: this.config.colors || this.chartService.defaultColors,
             title: {
                 show: this.config.showTitle ?? !!this.config.title,
                 text: this.config.title,
                 left: this.config.titlePosition || 'center',
             },
-            // tooltip: {
-            //   show: this.config.showTooltip ?? true,
-            //   trigger: 'axis',
-            // },
             tooltip: {
+                show: this.config.showTooltip,
                 trigger: 'axis',
                 backgroundColor: 'transparent', // remove default box
                 borderWidth: 0,
                 padding: 0,
                 confine: true,
-                formatter: (params) => this.chartService.barLineTooltipFormatter(params),
+                formatter: (params) => this.config.tooltipFormatter
+                    ? this.config.tooltipFormatter(params)
+                    : this.chartService.barLineTooltipFormatter(params),
             },
             legends: {
                 show: false,
             },
             grid: {
-                left: this.config.gridLeft ?? '',
-                right: this.config.gridRight ?? '',
-                bottom: this.config.gridBottom ?? '',
+                left: this.config.gridLeft ?? 0,
+                right: this.config.gridRight ?? 0,
+                bottom: this.config.gridBottom ?? 0,
+                top: this.config.gridTop ?? 0,
                 containLabel: true,
             },
             xAxis: {
                 type: 'category',
-                data: this.config.categories,
+                data: this.config.xAxisData,
                 axisLine: { show: this.config.showXAxisLine ?? true },
                 ...this.config.xAxis,
             },
@@ -723,58 +768,26 @@ class BarChart {
                 axisLine: { show: this.config.showYAxisLine ?? true },
                 ...this.config.yAxis,
             },
-            // Handle both single-series and multi-series dynamically
-            series: (() => {
-                if (this.config.series && this.config.series.length) {
-                    // Multi-series (stacked or grouped)
-                    return this.config.series.map((s) => ({
-                        type: this.config.type ?? 'bar',
-                        name: s.name,
-                        data: s.data,
-                        stack: s.stack ?? undefined,
-                        barWidth: this.config.barWidth ?? '60%',
-                        color: s.color || this.config.colors,
-                        label: {
-                            show: this.config.showLabel ?? false,
-                            position: this.config.labelPosition ?? 'top',
-                        },
-                        itemStyle: {
-                            borderRadius: this.config.borderRadius ?? 0,
-                        },
-                        emphasis: {
-                            scale: false,
-                        },
-                        ...s,
-                    }));
-                }
-                else if (this.config.data) {
-                    // Single-series
-                    return [
-                        {
-                            type: this.config.type ?? 'bar',
-                            name: this.config.seriesName,
-                            data: this.config.data,
-                            barWidth: this.config.barWidth ?? 20,
-                            color: this.config.colors,
-                            label: {
-                                show: this.config.showLabel ?? false,
-                                position: this.config.labelPosition ?? 'top',
-                            },
-                            itemStyle: {
-                                borderRadius: this.config.borderRadius ?? 0,
-                            },
-                            emphasis: {
-                                focus: 'series',
-                                show: false,
-                            },
-                            // ...this.config,
-                        },
-                    ];
-                }
-                else {
-                    return [];
-                }
-            })(),
+            series: (this.config.series || []).map((s) => {
+                return {
+                    type: 'bar',
+                    stack: this.config.stacked ? 'total' : undefined,
+                    emphasis: {
+                        scale: false,
+                    },
+                    ...(this.config.barWidth && { barWidth: this.config.barWidth }),
+                    ...s,
+                    label: {
+                        show: this.config.showLabel ?? false,
+                        position: this.config.labelPosition ?? 'top',
+                        ...(s['label'] ? s['label'] : {}),
+                    },
+                    itemStyle: {
+                        borderRadius: this.config.borderRadius ?? 0,
+                        ...(s['itemStyle'] ? s['itemStyle'] : {}),
+                    },
+                };
+            }),
         };
     }
     /* ------------------ INIT ------------------ */
@@ -1079,7 +1092,6 @@ class DoughnutChart {
                 },
             }), // grey
         }));
-        console.log(seriesData, 'seriesData');
         const innerRadius = this.config.innerRadius ?? '70%';
         const outerRadius = this.config.outerRadius ?? '90%';
         this.chartOption = {
@@ -1272,96 +1284,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 type: Input
             }] } });
 
-echarts.use([LineChart, GridComponent, TooltipComponent, LegendComponent, CanvasRenderer]);
-class AreaChart {
-    config;
-    theme;
-    chartInstance;
-    chartOption;
-    ngOnChanges(changes) {
-        if (changes['theme'] && !changes['theme'].firstChange) {
-            // Dispose and let ngx-echarts recreate chart with new theme
-            if (this.chartInstance) {
-                this.chartInstance.dispose();
-            }
-        }
-        if (this.config) {
-            this.buildOption();
-        }
-    }
-    onChartInit(ec) {
-        this.chartInstance = ec;
-    }
-    buildOption() {
-        this.chartOption = {
-            backgroundColor: this.config.backgroundColor || 'transparent',
-            tooltip: {
-                show: this.config.showTooltip ?? true,
-                trigger: 'axis',
-            },
-            legned: true,
-            grid: {
-                left: this.config.grid?.left ?? 20,
-                right: this.config.grid?.right ?? 20,
-                top: this.config.grid?.top ?? 20,
-                bottom: this.config.grid?.bottom ?? 20,
-                containLabel: true,
-            },
-            xAxis: {
-                type: 'category',
-                boundaryGap: false,
-                data: this.config.xAxisData,
-                show: this.config.showXAxis ?? true,
-                axisLine: { show: this.config.showXAxisLine ?? true },
-                axisTick: { show: this.config.showXAxisTick ?? true },
-                axisLabel: { show: this.config.showXAxisLabel ?? true },
-            },
-            yAxis: {
-                type: 'value',
-                show: this.config.showYAxis ?? true,
-                axisLine: { show: this.config.showYAxisLine ?? true },
-                axisTick: { show: this.config.showYAxisTick ?? true },
-                axisLabel: { show: this.config.showYAxisLabel ?? true },
-                splitLine: { show: this.config.showGridLines ?? true },
-            },
-            series: [
-                {
-                    type: 'line',
-                    data: this.config.seriesData,
-                    smooth: this.config.smooth ?? true,
-                    showSymbol: this.config.showSymbol ?? false,
-                    lineStyle: {
-                        width: this.config.lineWidth ?? 2,
-                        color: this.config.lineColor || '#16a34a',
-                    },
-                    itemStyle: {
-                        color: this.config.lineColor || '#16a34a',
-                    },
-                    areaStyle: {
-                        color: this.config.areaColor || 'rgba(22,163,74,0.25)',
-                        ...this.config.areaColor,
-                    },
-                },
-            ],
-        };
-    }
-    ngOnDestroy() {
-        if (this.chartInstance) {
-            this.chartInstance.dispose();
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AreaChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: AreaChart, isStandalone: true, selector: "lib-area-chart", inputs: { config: "config", theme: "theme" }, providers: [provideEchartsCore({ echarts })], usesOnChanges: true, ngImport: i0, template: "<div\n  echarts\n  [options]=\"chartOption\"\n     [theme]=\"theme\"\n   \n  class=\"chart-container\"\n>\n</div>\n", styles: [".chart-container{width:100%;height:400px}\n"], dependencies: [{ kind: "directive", type: NgxEchartsDirective, selector: "echarts, [echarts]", inputs: ["options", "theme", "initOpts", "merge", "autoResize", "loading", "loadingType", "loadingOpts"], outputs: ["chartInit", "optionsError", "chartClick", "chartDblClick", "chartMouseDown", "chartMouseMove", "chartMouseUp", "chartMouseOver", "chartMouseOut", "chartGlobalOut", "chartContextMenu", "chartHighlight", "chartDownplay", "chartSelectChanged", "chartLegendSelectChanged", "chartLegendSelected", "chartLegendUnselected", "chartLegendLegendSelectAll", "chartLegendLegendInverseSelect", "chartLegendScroll", "chartDataZoom", "chartDataRangeSelected", "chartGraphRoam", "chartGeoRoam", "chartTreeRoam", "chartTimelineChanged", "chartTimelinePlayChanged", "chartRestore", "chartDataViewChanged", "chartMagicTypeChanged", "chartGeoSelectChanged", "chartGeoSelected", "chartGeoUnselected", "chartAxisAreaSelected", "chartBrush", "chartBrushEnd", "chartBrushSelected", "chartGlobalCursorTaken", "chartRendered", "chartFinished"], exportAs: ["echarts"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AreaChart, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-area-chart', imports: [NgxEchartsDirective], providers: [provideEchartsCore({ echarts })], template: "<div\n  echarts\n  [options]=\"chartOption\"\n     [theme]=\"theme\"\n   \n  class=\"chart-container\"\n>\n</div>\n", styles: [".chart-container{width:100%;height:400px}\n"] }]
-        }], propDecorators: { config: [{
-                type: Input
-            }], theme: [{
-                type: Input
-            }] } });
-
 echarts.use([CustomChart, GridComponent, TooltipComponent, LegendComponent, CanvasRenderer]);
 class CustomChartComponent {
     chartService;
@@ -1675,8 +1597,10 @@ class CustomChartComponent {
             },
             xAxis: {
                 type: 'value',
-                min: this.config.startHour ?? 0,
-                max: this.config.endHour ?? 24,
+                min: this.config.startHour
+                    ? Math.floor(this.convertTimeToNumber(this.config.startHour))
+                    : 0,
+                max: this.config.endHour ? Math.ceil(this.convertTimeToNumber(this.config.endHour)) : 24,
                 axisLine: {
                     show: false,
                 },
@@ -1878,5 +1802,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AreaChart, BarChart, Charts, CustomChartComponent, DoughnutChart, LinesChart, PieChart, RightClickCard, SankeyChart, StackedAreaChart };
+export { BarChart, Charts, CustomChartComponent, DoughnutChart, LinesChart, PieChart, RightClickCard, SankeyChart, StackedAreaChart };
 //# sourceMappingURL=cats-charts.mjs.map