cats-charts 0.0.98 → 0.1.0

package/fesm2022/cats-charts.mjs

@@ -3987,6 +3987,17 @@ class SankeyChart {
     legendSeries = [];
     previousReactiveSignature = '';
     resizeObserver;
+    stopNodeDragPropagation = (event) => {
+        // Labels can forward interaction to their node through __hostTarget.
+        const node = event.target?.__hostTarget ?? event.target;
+        if (!node?.draggable)
+            return;
+        // ZRender maps mouse, pointer, and touch starts to mousedown. Keep its
+        // node dragging active while blocking ancestor drag handlers and the
+        // browser's native drag of a draggable parent element.
+        event.event?.stopPropagation();
+        event.event?.preventDefault();
+    };
     /* ------------------ CHANGE HANDLING ------------------ */
     ngOnChanges(changes) {
         if (!this.config)
@@ -4024,11 +4035,39 @@ class SankeyChart {
         const totalValue = this.totalSourceValue(visibleLinks, visibleNodeMeta);
         this.legendSeries = this.buildLegendSeries(visibleNodeMeta, visibleLinks, palette);
         const selected = this.readLegendSelected();
-        const legendEnabled = this.isLegendEnabled();
-        const legendConfig = styling?.legend;
         const nodeOpacity = this.percentToRatio(styling?.node?.opacity, 100);
         const labelTypography = styling?.labels?.typography;
         const fontColor = this.withOpacity(labelTypography?.reset ? undefined : labelTypography?.color, this.percentToRatio(labelTypography?.reset ? undefined : labelTypography?.opacity, 100), '#333');
+        const label = {
+            show: styling?.labels?.showLabels ?? true,
+            // Keep labels within the space between Sankey columns. ECharts then
+            // adds an ellipsis whenever a larger font, wider node, or long name
+            // does not fit.
+            width: this.resolveSankeyLabelWidth(visibleNodeMeta),
+            overflow: 'truncate',
+            ellipsis: '...',
+            color: fontColor,
+            fontFamily: labelTypography?.reset ? undefined : labelTypography?.fontFamily,
+            fontSize: this.clamp(labelTypography?.reset ? undefined : labelTypography?.fontSize, 8, 40),
+            fontWeight: labelTypography?.reset
+                ? undefined
+                : labelTypography?.bold
+                    ? 'bold'
+                    : undefined,
+            fontStyle: labelTypography?.reset
+                ? undefined
+                : labelTypography?.italic
+                    ? 'italic'
+                    : undefined,
+            textDecoration: labelTypography?.reset
+                ? undefined
+                : labelTypography?.underline
+                    ? 'underline'
+                    : undefined,
+            position: this.resolveLabelPosition(),
+            formatter: (params) => this.formatNodeLabel(String(params.name ?? ''), visibleNodeMeta.get(String(params.name ?? '')), totalValue),
+        };
+        const labelMargins = this.resolveSankeyLabelMargins(visibleNodes, label, visibleNodeMeta);
         this.chartOption = {
             backgroundColor: this.config?.backgroundColor || 'transparent',
             color: palette,
@@ -4056,11 +4095,8 @@ class SankeyChart {
             },
             series: [
                 {
-                    left: 16,
-                    right: 16,
-                    top: legendEnabled && legendConfig?.position === 'top' ? 32 : 16,
-                    bottom: legendEnabled && legendConfig?.position === 'bottom' ? 32 : 16,
                     ...this.config.seriesOption,
+                    ...labelMargins,
                     type: 'sankey',
                     ...((styling?.node?.thickness ?? this.config.seriesOption?.nodeWidth)
                         ? {
@@ -4077,7 +4113,7 @@ class SankeyChart {
                         return {
                             ...n,
                             name: n.name,
-                            label: this.mergeSingleNodeLabel(n, nodeStyle?.label),
+                            label: this.mergeSingleNodeLabel(n, nodeStyle?.label, visibleNodeMeta.get(n.name)),
                             itemStyle: {
                                 color: this.resolveNodeColor(n, visibleNodeMeta.get(n.name), index, palette),
                                 opacity: nodeOpacity,
@@ -4114,35 +4150,7 @@ class SankeyChart {
                         ...(this.config.seriesOption?.lineStyle || {}),
                         ...(styling?.lineStyle || {}),
                     },
-                    label: {
-                        show: styling?.labels?.showLabels ?? true,
-                        // Keep labels within the space between Sankey columns. ECharts then
-                        // adds an ellipsis whenever a larger font, wider node, or long name
-                        // does not fit.
-                        width: this.resolveSankeyLabelWidth(visibleNodeMeta),
-                        overflow: 'truncate',
-                        ellipsis: '...',
-                        color: fontColor,
-                        fontFamily: labelTypography?.reset ? undefined : labelTypography?.fontFamily,
-                        fontSize: this.clamp(labelTypography?.reset ? undefined : labelTypography?.fontSize, 8, 40),
-                        fontWeight: labelTypography?.reset
-                            ? undefined
-                            : labelTypography?.bold
-                                ? 'bold'
-                                : undefined,
-                        fontStyle: labelTypography?.reset
-                            ? undefined
-                            : labelTypography?.italic
-                                ? 'italic'
-                                : undefined,
-                        textDecoration: labelTypography?.reset
-                            ? undefined
-                            : labelTypography?.underline
-                                ? 'underline'
-                                : undefined,
-                        align: styling?.labels?.alignment === 'default' ? undefined : styling?.labels?.alignment,
-                        formatter: (params) => this.formatNodeLabel(String(params.name ?? ''), visibleNodeMeta.get(String(params.name ?? '')), totalValue),
-                    },
+                    label,
                 },
             ],
         };
@@ -4349,10 +4357,14 @@ class SankeyChart {
             label: nodeStyle.label,
         };
     }
-    mergeSingleNodeLabel(node, label) {
-        if (!label && !node.label)
+    mergeSingleNodeLabel(node, label, meta) {
+        const alignment = this.config.styling?.labels?.alignment;
+        const defaultSourcePosition = meta?.role === 'source' &&
+            (!alignment || alignment === 'default');
+        if (!label && !node.label && !defaultSourcePosition)
             return undefined;
         return {
+            ...(defaultSourcePosition ? { position: 'right' } : {}),
             ...(label || {}),
             ...(node.label || {}),
         };
@@ -4410,9 +4422,70 @@ class SankeyChart {
         const nodeWidth = this.clamp(this.config.styling?.node?.thickness ?? this.config.seriesOption?.nodeWidth, 1, 50) ?? 20;
         const horizontalPadding = 32;
         const availableWidth = Math.max(chartWidth - horizontalPadding - levelCount * nodeWidth, 0);
-        // A label can occupy half of each gap between adjacent Sankey columns.
-        // Cap it so a simple two-column Sankey does not create excessively long labels.
-        return Math.max(32, Math.min(180, Math.floor(availableWidth / Math.max(levelCount * 2, 1))));
+        // Reserve room for labels at both outer edges as well as between columns.
+        return Math.max(0, Math.min(180, Math.floor(availableWidth / Math.max(levelCount * 2 + 2, 1))));
+    }
+    resolveSankeyLabelMargins(nodes, label, meta) {
+        const width = this.chartInstance?.getWidth() ?? 0;
+        const height = this.chartInstance?.getHeight() ?? 0;
+        const legend = this.config.styling?.legend;
+        const margin = (value, size, fallback) => {
+            if (typeof value === 'number')
+                return value;
+            if (typeof value === 'string' && value.endsWith('%')) {
+                const percent = Number.parseFloat(value);
+                if (Number.isFinite(percent))
+                    return (size * percent) / 100;
+            }
+            return fallback;
+        };
+        const series = this.config.seriesOption;
+        const margins = {
+            left: margin(series?.left, width, 16),
+            right: margin(series?.right, width, 16),
+            top: margin(series?.top, height, this.isLegendEnabled() && legend?.position === 'top' ? 32 : 16),
+            bottom: margin(series?.bottom, height, this.isLegendEnabled() && legend?.position === 'bottom' ? 32 : 16),
+        };
+        const measured = nodes.map((node) => {
+            const override = this.mergeSingleNodeLabel(node, this.resolveSingleNodeStyle(node.name)?.label, meta.get(node.name));
+            const effective = {
+                ...label,
+                ...override,
+            };
+            const font = `${effective.fontStyle ?? 'normal'} ${effective.fontWeight ?? 'normal'} ${effective.fontSize ?? 12}px ${effective.fontFamily ?? 'sans-serif'}`;
+            const text = typeof effective.formatter === 'function'
+                ? effective.formatter({ name: node.name, data: node })
+                : typeof effective.formatter === 'string'
+                    ? effective.formatter.replace(/\{b\}/g, node.name)
+                    : node.name;
+            const bounds = echarts.format.getTextRect(String(text), font, undefined, undefined, effective.padding, effective.rich, false, effective.lineHeight);
+            return { effective, bounds, customWidth: override?.width };
+        });
+        // Size the shared label box to the text, within the existing truncation cap.
+        // This makes outer node positions respond to font and formatted text changes.
+        const textWidths = measured
+            .filter(({ effective }) => effective.show !== false)
+            .map(({ bounds }) => bounds.width);
+        label.width = Math.min(label.width, Math.ceil(Math.max(0, ...textWidths)));
+        const alignment = this.config.styling?.labels?.alignment;
+        const useLabelMargins = alignment === 'left' || alignment === 'right';
+        for (const { effective, bounds, customWidth } of measured) {
+            if (effective.show === false)
+                continue;
+            const labelWidth = typeof customWidth === 'number' ? customWidth : label.width;
+            const distance = Number(effective.distance ?? 5);
+            if (effective.position === 'left' || effective.position === 'right') {
+                // Default labels face into the chart; keep the outer margins at 16px.
+                if (useLabelMargins) {
+                    const side = effective.position;
+                    margins[side] = Math.max(margins[side], Math.ceil(labelWidth + distance + 8));
+                }
+                // Split labels and large fonts also need room above and below nodes.
+                margins.top = Math.max(margins.top, Math.ceil(bounds.height / 2 + 8));
+                margins.bottom = Math.max(margins.bottom, Math.ceil(bounds.height / 2 + 8));
+            }
+        }
+        return margins;
     }
     totalSourceValue(links, meta) {
         const sourceNames = new Set([...meta.values()].filter((node) => node.role === 'source').map((node) => node.name));
@@ -4558,6 +4631,9 @@ class SankeyChart {
         if (!this.chartInstance)
             return;
         this.chartInstance.off();
+        const zr = this.chartInstance.getZr();
+        zr.off('mousedown', this.stopNodeDragPropagation);
+        zr.on('mousedown', this.stopNodeDragPropagation);
         this.bindSankeyDragBounds();
         this.events.forEach((eventName) => {
             if (eventName === 'contextmenu') {
@@ -4647,6 +4723,7 @@ class SankeyChart {
     ngOnDestroy() {
         this.resizeObserver?.disconnect();
         if (this.chartInstance) {
+            this.chartInstance.getZr().off('mousedown', this.stopNodeDragPropagation);
             this.chartInstance.off();
             this.chartInstance.dispose();
         }