cats-charts 0.0.95 → 0.0.97

package/fesm2022/cats-charts.mjs

@@ -6,7 +6,7 @@ import { LineChart, BarChart as BarChart$1, PieChart as PieChart$1, CustomChart,
 import { GridComponent, TooltipComponent, LegendComponent, TitleComponent, ToolboxComponent, DataZoomInsideComponent, DataZoomComponent, MarkAreaComponent, MarkLineComponent, DatasetComponent, VisualMapComponent, GraphicComponent } from 'echarts/components';
 import { CanvasRenderer } from 'echarts/renderers';
 import * as i2 from '@angular/common';
-import { isPlatformBrowser, CommonModule } from '@angular/common';
+import { isPlatformBrowser, CommonModule, DOCUMENT } from '@angular/common';
 
 class RightClickCard {
     cardPosition;
@@ -1046,7 +1046,7 @@ class Charts {
         color:#434A51;
         padding-top: 0.5rem;
       ">
-        ${data[0]}: <b style="color:#111;font-weight:600;">${data[1]}</b>
+        ${data[0]}: <b style="color:#111;font-weight:600;">${this.formatTooltipValue(data[1], config?.tooltipCompactValue)}</b>
       </div>`;
             });
         }
@@ -1085,7 +1085,7 @@ class Charts {
           font-size: 12px;
           color: #434A51;
         ">
-          ${name}: <b style="color:#111; font-weight:600;">${config.valueFormatter ? config.valueFormatter(value) : this.formatTooltipValue(value, config.tooltipCompactValue)}</b> ${config.showTooltipPercent ? '(' + percent + '%)' : ''}
+          ${name}: <b style="color:#111; font-weight:600;">${config.valueFormatter ? config.valueFormatter(value) : this.formatTooltipValue(value, config?.tooltipCompactValue)}</b> ${config.showTooltipPercent ? '(' + percent + '%)' : ''}
         </span>
       </div>
        ${extraTooltipDataTemplate}
@@ -1110,7 +1110,7 @@ class Charts {
         color:#434A51;
         padding-top: 0.5rem;
       ">
-        ${data[0]}: <b style="color:#111;font-weight:600;">${data[1]}</b>
+        ${data[0]}: <b style="color:#111;font-weight:600;">${this.formatTooltipValue(data[1], config?.tooltipCompactValue)}</b>
       </div>`;
             });
         }
@@ -1198,6 +1198,8 @@ class Charts {
         return `${scaled}${units[unitIndex].suffix}`;
     }
     formatTooltipValue(value, compact = false) {
+        if (typeof Number(value) !== 'number')
+            return value;
         const roundedValue = this.toMaxDecimals(value);
         return compact ? this.compactValueFormat(roundedValue) : roundedValue;
     }
@@ -1694,7 +1696,7 @@ class LinesChart {
                 confine: true,
                 formatter: (params) => this.config?.tooltipFormatter
                     ? this.config?.tooltipFormatter(params)
-                    : this.chartService.barLineTooltipFormatter(params, 'line'),
+                    : this.chartService.barLineTooltipFormatter(params, 'line', this.config),
             },
             legend: {
                 show: false,
@@ -2388,7 +2390,7 @@ class BarChart {
                 confine: true,
                 formatter: (params) => this.config.tooltipFormatter
                     ? this.config.tooltipFormatter(params)
-                    : this.chartService.barLineTooltipFormatter(params),
+                    : this.chartService.barLineTooltipFormatter(params, 'bar', this.config),
             },
             legend: {
                 show: false,
@@ -6330,6 +6332,7 @@ const COLLAPSED_GROUP_ICON = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org
 class GanttChart {
     chartService;
     cdr;
+    document;
     config = { series: [], groups: [] };
     theme;
     events = [];
@@ -6348,14 +6351,21 @@ class GanttChart {
     horizontalZoomLayoutFrame;
     isApplyingHorizontalZoomLayout = false;
     zoomWheelHandler;
+    dataZoomPointerDownHandler;
+    nativeDragStartHandler;
+    nativePointerEndHandler;
+    dataZoomGestureActive = false;
+    isBrowser;
     visibleRows = [];
     rowIndexMap = new Map();
-    constructor(chartService, cdr) {
+    constructor(chartService, cdr, document, platformId) {
         this.chartService = chartService;
         this.cdr = cdr;
+        this.document = document;
+        this.isBrowser = isPlatformBrowser(platformId);
     }
     get deafultColors() {
-        return this.chartService.defaultColors;
+        return this.chartService.defaultLegendColors;
     }
     get rowHeight() {
         const configuredHeight = Number(this.config?.rowHeight ?? DEFAULT_ROW_HEIGHT);
@@ -6365,6 +6375,12 @@ class GanttChart {
         const configuredGap = Number(this.config?.xAxisMinLabelGap ?? 100);
         return Number.isFinite(configuredGap) ? Math.max(1, configuredGap) : 100;
     }
+    get yAxisLabelWidth() {
+        const chartWidth = this.chartContainer?.nativeElement.getBoundingClientRect().width ||
+            this.chartInstance?.getWidth?.() ||
+            360;
+        return Math.max(100, Math.min(240, Math.round(chartWidth * 0.22)));
+    }
     getAggregationLabelCount() {
         const values = [];
         const addTimestamp = (value) => {
@@ -6438,7 +6454,7 @@ class GanttChart {
         return weekStart.getTime();
     }
     resolveSeriesColor(series, index) {
-        const colors = this.config?.colors || this.deafultColors;
+        const colors = this.config?.colors || this.chartService.defaultLegendColors;
         return series?.itemStyle?.color ?? colors[index % Math.max(colors.length, 1)] ?? '#64748b';
     }
     createBarLabel(label, rect) {
@@ -6550,6 +6566,7 @@ class GanttChart {
         if (this.horizontalZoomLayoutFrame) {
             cancelAnimationFrame(this.horizontalZoomLayoutFrame);
         }
+        this.unbindDataZoomDragIsolation();
         // ngx-echarts can dispose the ECharts instance before this component's
         // destroy hook runs. A disposed instance no longer has a ZRender surface,
         // so do not try to remove the wheel listener from it.
@@ -6567,6 +6584,7 @@ class GanttChart {
         this.rowIndexMap = new Map(this.visibleRows.map((row, index) => [row.name, index]));
         const selected = this.readLegendSelected();
         const selectedMode = this.config?.customLegend?.selectionMode === 'exclusive' ? 'single' : true;
+        const yAxisLabelWidth = this.yAxisLabelWidth;
         const option = {
             animation: false,
             backgroundColor: 'transparent',
@@ -6698,6 +6716,7 @@ class GanttChart {
                     axisLabel: {
                         show: this.config?.showYAxisLabel ?? true,
                         color: '#434A51',
+                        width: yAxisLabelWidth,
                         overflow: 'truncate',
                         align: 'right',
                         fontSize: 12,
@@ -6986,6 +7005,7 @@ class GanttChart {
         this.buildOption();
         this.bindEvents();
         this.bindZoomWheel();
+        this.bindDataZoomDragIsolation();
         this.chartInstance.on('finished', () => {
             this.scheduleVerticalZoomLayout();
             this.scheduleHorizontalZoomLayout();
@@ -7024,6 +7044,65 @@ class GanttChart {
         };
         zr.on('mousewheel', this.zoomWheelHandler);
     }
+    /**
+     * A native draggable ancestor starts its drag after the slider's mousedown
+     * event. Since the native `dragstart` targets that ancestor rather than the
+     * canvas, suppress it at document capture phase while a data-zoom gesture is
+     * active. This keeps the fix inside the chart library and leaves parent drag
+     * behaviour unchanged everywhere else.
+     */
+    bindDataZoomDragIsolation() {
+        if (!this.chartInstance || !this.isBrowser)
+            return;
+        const zr = this.chartInstance.getZr();
+        if (this.dataZoomPointerDownHandler) {
+            zr.off('mousedown', this.dataZoomPointerDownHandler);
+        }
+        this.dataZoomPointerDownHandler = (event) => {
+            this.dataZoomGestureActive = this.isDataZoomTarget(event?.target);
+        };
+        zr.on('mousedown', this.dataZoomPointerDownHandler);
+        if (!this.nativeDragStartHandler) {
+            this.nativeDragStartHandler = (event) => {
+                if (!this.dataZoomGestureActive)
+                    return;
+                event.preventDefault();
+                event.stopPropagation();
+                this.dataZoomGestureActive = false;
+            };
+            this.document.addEventListener('dragstart', this.nativeDragStartHandler, true);
+        }
+        if (!this.nativePointerEndHandler) {
+            this.nativePointerEndHandler = () => {
+                this.dataZoomGestureActive = false;
+            };
+            this.document.addEventListener('pointerup', this.nativePointerEndHandler, true);
+            this.document.addEventListener('pointercancel', this.nativePointerEndHandler, true);
+        }
+    }
+    unbindDataZoomDragIsolation() {
+        if (this.chartInstance && !this.chartInstance.isDisposed() && this.dataZoomPointerDownHandler) {
+            this.chartInstance.getZr()?.off('mousedown', this.dataZoomPointerDownHandler);
+        }
+        if (this.nativeDragStartHandler) {
+            this.document.removeEventListener('dragstart', this.nativeDragStartHandler, true);
+        }
+        if (this.nativePointerEndHandler) {
+            this.document.removeEventListener('pointerup', this.nativePointerEndHandler, true);
+            this.document.removeEventListener('pointercancel', this.nativePointerEndHandler, true);
+        }
+        this.dataZoomPointerDownHandler = undefined;
+        this.nativeDragStartHandler = undefined;
+        this.nativePointerEndHandler = undefined;
+        this.dataZoomGestureActive = false;
+    }
+    isDataZoomTarget(target) {
+        for (let element = target; element; element = element.parent) {
+            if (element.__ecComponentInfo?.mainType === 'dataZoom')
+                return true;
+        }
+        return false;
+    }
     moveDataZoomWindow(sliderId, insideId, delta) {
         const option = this.chartInstance.getOption();
         const slider = option.dataZoom?.find((zoom) => zoom['id'] === sliderId);
@@ -7159,7 +7238,8 @@ class GanttChart {
     refreshAxisNameSpace() {
         if (!this.chartInstance)
             return;
-        this.chartInstance.setOption({
+        const yAxisLabelWidth = this.yAxisLabelWidth;
+        const option = {
             xAxis: {
                 name: this.resolveAxisName(this.config?.xAxisName, 'x'),
                 nameTextStyle: this.resolveAxisNameTextStyle('x'),
@@ -7170,7 +7250,11 @@ class GanttChart {
                     nameTextStyle: this.resolveAxisNameTextStyle('y'),
                 },
             ],
-        });
+        };
+        if (this.config?.yAxis?.axisLabel?.width == null) {
+            option.yAxis[0].axisLabel = { width: yAxisLabelWidth };
+        }
+        this.chartInstance.setOption(option);
         this.scheduleVerticalZoomLayout();
         this.scheduleHorizontalZoomLayout();
     }
@@ -7352,13 +7436,19 @@ class GanttChart {
             ...(customStyle || {}),
         };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: GanttChart, deps: [{ token: Charts }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: GanttChart, deps: [{ token: Charts }, { token: i0.ChangeDetectorRef }, { token: DOCUMENT }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: GanttChart, isStandalone: true, selector: "lib-gantt-chart", inputs: { config: "config", theme: "theme", events: "events", contextMenuOptions: "contextMenuOptions", showContextMenu: "showContextMenu" }, outputs: { contextMenuClick: "contextMenuClick", chartEvent: "chartEvent", legendEvent: "legendEvent" }, host: { listeners: { "document:click": "closeCard()", "window:resize": "refreshAxisNameSpace()" } }, providers: [provideEchartsCore({ echarts })], viewQueries: [{ propertyName: "chartContainer", first: true, predicate: ["chartContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"gantt-chart-shell\"\n  [class.gantt-chart-shell--legend-left]=\"config.customLegend?.position === 'left'\"\n  [class.gantt-chart-shell--legend-right]=\"config.customLegend?.position === 'right'\"\n  [class.gantt-chart-shell--legend-bottom]=\"config.customLegend?.position === 'bottom'\"\n>\n  @if (\n    !config.hideLegend &&\n    config.customLegend?.position !== 'bottom' &&\n    config.customLegend?.position !== 'right'\n  ) {\n    <lib-chart-legend\n      class=\"gantt-chart-shell__legend\"\n      [class.gantt-chart-shell__legend--custom-width]=\"hasSideLegendWidth\"\n      [style.--gantt-chart-legend-max-width]=\"legendShellMaxWidth\"\n      [chart]=\"chartInstance\"\n      [series]=\"config.series\"\n      [colors]=\"config.colors || deafultColors\"\n      [config]=\"config.customLegend || {}\"\n      (legendEvent)=\"onLegendEvent($event)\"\n    ></lib-chart-legend>\n  }\n\n  <div\n    #chartContainer\n    echarts\n    [options]=\"chartOption\"\n    [theme]=\"theme\"\n    (chartInit)=\"onChartInit($event)\"\n    class=\"chart-container\"\n  ></div>\n\n  @if (\n    !config.hideLegend &&\n    (config.customLegend?.position === 'bottom' || config.customLegend?.position === 'right')\n  ) {\n    <lib-chart-legend\n      class=\"gantt-chart-shell__legend\"\n      [class.gantt-chart-shell__legend--custom-width]=\"hasSideLegendWidth\"\n      [style.--gantt-chart-legend-max-width]=\"legendShellMaxWidth\"\n      [chart]=\"chartInstance\"\n      [series]=\"config.series\"\n      [colors]=\"config.colors || deafultColors\"\n      [config]=\"config.customLegend || {}\"\n      (legendEvent)=\"onLegendEvent($event)\"\n    ></lib-chart-legend>\n  }\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: [".gantt-chart-shell{display:flex;flex-direction:column;gap:8px;height:100%;min-height:0;min-width:0;width:100%}.gantt-chart-shell--legend-left,.gantt-chart-shell--legend-right{flex-direction:row}.gantt-chart-shell--legend-bottom{flex-direction:column}.gantt-chart-shell__legend{flex:0 0 auto;min-width:0}.gantt-chart-shell--legend-left .gantt-chart-shell__legend,.gantt-chart-shell--legend-right .gantt-chart-shell__legend{height:100%;max-width:min(var(--gantt-chart-legend-max-width, 360px),70%);min-height:0}.chart-container{width:100%;height:100%;position:relative;flex:1 1 auto;min-height:0;min-width:0}@media (max-width: 640px){.gantt-chart-shell,.gantt-chart-shell--legend-left,.gantt-chart-shell--legend-right{flex-direction:column}.gantt-chart-shell--legend-left .gantt-chart-shell__legend,.gantt-chart-shell--legend-right .gantt-chart-shell__legend{flex-basis:auto;max-width:none;width:auto}}\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"] }, { kind: "component", type: ChartLegendComponent, selector: "lib-chart-legend", inputs: ["chart", "series", "colors", "config", "itemTemplate"], outputs: ["legendEvent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: GanttChart, decorators: [{
             type: Component,
             args: [{ selector: 'lib-gantt-chart', imports: [NgxEchartsDirective, RightClickCard, ChartLegendComponent], providers: [provideEchartsCore({ echarts })], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"gantt-chart-shell\"\n  [class.gantt-chart-shell--legend-left]=\"config.customLegend?.position === 'left'\"\n  [class.gantt-chart-shell--legend-right]=\"config.customLegend?.position === 'right'\"\n  [class.gantt-chart-shell--legend-bottom]=\"config.customLegend?.position === 'bottom'\"\n>\n  @if (\n    !config.hideLegend &&\n    config.customLegend?.position !== 'bottom' &&\n    config.customLegend?.position !== 'right'\n  ) {\n    <lib-chart-legend\n      class=\"gantt-chart-shell__legend\"\n      [class.gantt-chart-shell__legend--custom-width]=\"hasSideLegendWidth\"\n      [style.--gantt-chart-legend-max-width]=\"legendShellMaxWidth\"\n      [chart]=\"chartInstance\"\n      [series]=\"config.series\"\n      [colors]=\"config.colors || deafultColors\"\n      [config]=\"config.customLegend || {}\"\n      (legendEvent)=\"onLegendEvent($event)\"\n    ></lib-chart-legend>\n  }\n\n  <div\n    #chartContainer\n    echarts\n    [options]=\"chartOption\"\n    [theme]=\"theme\"\n    (chartInit)=\"onChartInit($event)\"\n    class=\"chart-container\"\n  ></div>\n\n  @if (\n    !config.hideLegend &&\n    (config.customLegend?.position === 'bottom' || config.customLegend?.position === 'right')\n  ) {\n    <lib-chart-legend\n      class=\"gantt-chart-shell__legend\"\n      [class.gantt-chart-shell__legend--custom-width]=\"hasSideLegendWidth\"\n      [style.--gantt-chart-legend-max-width]=\"legendShellMaxWidth\"\n      [chart]=\"chartInstance\"\n      [series]=\"config.series\"\n      [colors]=\"config.colors || deafultColors\"\n      [config]=\"config.customLegend || {}\"\n      (legendEvent)=\"onLegendEvent($event)\"\n    ></lib-chart-legend>\n  }\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: [".gantt-chart-shell{display:flex;flex-direction:column;gap:8px;height:100%;min-height:0;min-width:0;width:100%}.gantt-chart-shell--legend-left,.gantt-chart-shell--legend-right{flex-direction:row}.gantt-chart-shell--legend-bottom{flex-direction:column}.gantt-chart-shell__legend{flex:0 0 auto;min-width:0}.gantt-chart-shell--legend-left .gantt-chart-shell__legend,.gantt-chart-shell--legend-right .gantt-chart-shell__legend{height:100%;max-width:min(var(--gantt-chart-legend-max-width, 360px),70%);min-height:0}.chart-container{width:100%;height:100%;position:relative;flex:1 1 auto;min-height:0;min-width:0}@media (max-width: 640px){.gantt-chart-shell,.gantt-chart-shell--legend-left,.gantt-chart-shell--legend-right{flex-direction:column}.gantt-chart-shell--legend-left .gantt-chart-shell__legend,.gantt-chart-shell--legend-right .gantt-chart-shell__legend{flex-basis:auto;max-width:none;width:auto}}\n"] }]
-        }], ctorParameters: () => [{ type: Charts }, { type: i0.ChangeDetectorRef }], propDecorators: { config: [{
+        }], ctorParameters: () => [{ type: Charts }, { type: i0.ChangeDetectorRef }, { type: Document, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [PLATFORM_ID]
+                }] }], propDecorators: { config: [{
                 type: Input
             }], theme: [{
                 type: Input