cats-charts 0.0.96 → 0.0.98

package/fesm2022/cats-charts.mjs

@@ -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;
     }
@@ -4558,49 +4560,53 @@ class SankeyChart {
         this.chartInstance.off();
         this.bindSankeyDragBounds();
         this.events.forEach((eventName) => {
-            this.chartInstance.on(eventName, (params) => {
-                const event = params?.event?.event;
-                if (eventName === 'contextmenu' && event) {
-                    params.event.event.preventDefault();
-                    const container = this.chartInstance.getDom();
-                    const rect = container.getBoundingClientRect();
-                    this.cardPosition = {
-                        x: event.clientX - rect.left,
-                        y: event.clientY - rect.top,
-                    };
-                    this.openCard = true;
-                    this.cdr.markForCheck();
+            if (eventName === 'contextmenu') {
+                this.chartInstance.on(eventName, (params) => {
+                    const event = params?.event?.event;
+                    if (event) {
+                        params.event.event.preventDefault();
+                        const container = this.chartInstance.getDom();
+                        const rect = container.getBoundingClientRect();
+                        this.cardPosition = {
+                            x: event.clientX - rect.left,
+                            y: event.clientY - rect.top,
+                        };
+                        this.openCard = true;
+                        this.cdr.markForCheck();
+                    }
                     this.chartEvent.emit({
                         type: eventName,
                         data: params,
                     });
-                }
-                else if (eventName === 'click') {
-                    this.chartInstance.on('click', (params) => {
+                });
+            }
+            else if (eventName === 'click') {
+                this.chartInstance.on('click', (params) => {
+                    this.chartEvent.emit({
+                        type: 'click',
+                        data: params,
+                    });
+                });
+                const zr = this.chartInstance.getZr();
+                zr.on('click', (zrEvent) => {
+                    if (!zrEvent.target) {
+                        const nativeEvent = zrEvent.event;
+                        nativeEvent.preventDefault();
                         this.chartEvent.emit({
-                            type: 'click',
-                            data: params,
+                            type: 'blur',
+                            data: { ...zrEvent, type: 'blur' },
                         });
-                    });
-                    const zr = this.chartInstance.getZr();
-                    zr.on('click', (zrEvent) => {
-                        if (!zrEvent.target) {
-                            const nativeEvent = zrEvent.event;
-                            nativeEvent.preventDefault();
-                            this.chartEvent.emit({
-                                type: 'blur',
-                                data: { ...zrEvent, type: 'blur' },
-                            });
-                        }
-                    });
-                }
-                else {
+                    }
+                });
+            }
+            else {
+                this.chartInstance.on(eventName, (params) => {
                     this.chartEvent.emit({
                         type: eventName,
                         data: params,
                     });
-                }
-            });
+                });
+            }
         });
     }
     /**
@@ -6363,7 +6369,7 @@ class GanttChart {
         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);
@@ -6373,6 +6379,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) => {
@@ -6446,7 +6458,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) {
@@ -6576,6 +6588,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',
@@ -6707,6 +6720,7 @@ class GanttChart {
                     axisLabel: {
                         show: this.config?.showYAxisLabel ?? true,
                         color: '#434A51',
+                        width: yAxisLabelWidth,
                         overflow: 'truncate',
                         align: 'right',
                         fontSize: 12,
@@ -7228,7 +7242,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'),
@@ -7239,7 +7254,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();
     }