cats-charts 0.0.81 → 0.0.83

package/assets/images/arrow-right.svg

@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.5 6H9.5M6 9.5L9.5 6L6 2.5" stroke="#434A51" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/fesm2022/cats-charts.mjs

@@ -1324,39 +1324,38 @@ class Charts {
         }
         return Math.max(...levelMap.values());
     }
-    sankeyTooltipFormatter(params) {
+    sankeyTooltipFormatter(params, config) {
         if (params.dataType === 'edge') {
-            const { source, target, sourceDesc, targetDesc } = params.data;
+            const { source, target, value, tooltip } = params.data;
+            const escape = (item) => String(item ?? '').replace(/[&<>"']/g, char => ({
+                '&': '&amp;',
+                '<': '&lt;',
+                '>': '&gt;',
+                '"': '&quot;',
+                "'": '&#39;',
+            })[char] ?? char);
+            const formatKey = (key) => key ? key.charAt(0).toUpperCase() + key.slice(1) : key;
+            const tooltipRows = tooltip && typeof tooltip === 'object'
+                ? Object.entries(tooltip)
+                    .map(([key, item]) => {
+                    const value = Array.isArray(item) ? item.map(escape).join(', ') : escape(item);
+                    return `<div style="font-size:12px;font-weight:600">${escape(formatKey(key))}: <span style="font-size:12px;font-weight:400">${value}</span></div>`;
+                })
+                    .join('')
+                : '';
             return `
-          <div style="
-            background: #fff;
-            padding: 12px 14px;
-            border-radius: 10px;
-            box-shadow: 0 4px 14px rgba(0,0,0,0.15);
-            min-width: 220px;
-            font-family: sans-serif;
-          ">
-            <div style="margin-bottom:10px;">
-              <div style="font-size:12px; color:#777;">Source: 
-                <span style="font-weight:600; color:#000">${source}</span>
-              </div>
-              ${sourceDesc
-                ? `<div style="font-size:11px; color:#aaa;">
-                ${sourceDesc}
-              </div>`
-                : ''}
-            </div>
-  
-            <div>
-              <div style="font-size:12px; color:#777;">Destination: 
-                <span style="font-weight:600; color:#000">${target}</span>
-              </div>
-              ${targetDesc
-                ? `<div style="font-size:11px; color:#aaa;">
-                ${targetDesc}
-              </div>`
-                : ''}
-            </div>
+          <div style="background:#FFFFFF;padding:12px;border:1px solid #d9e1ea;border-radius:8px;min-width:150px;">
+        <div style="display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;">
+  <span>${escape(source)}</span>
+  <img
+    src="images/arrow-right.svg"
+    alt=""
+    style="width:14px;height:14px;display:block;"
+  />
+  <span>${escape(target)}</span>
+</div>
+            <div style="font-size:12px;font-weight:600"">${formatKey(config?.activeMetric) || 'Value'}: <span style="font-size:12px;font-weight:400">${escape(value)}</span></div>
+            ${tooltipRows}
           </div>
         `;
         }
@@ -3712,6 +3711,12 @@ class CustomChartComponent {
                     const tooltipCategories = this.config.tooltipCategories;
                     if (tooltipCategories?.length && !tooltipCategories.includes(params.data?.category))
                         return '';
+                    if (this.config.tooltipFormatter) {
+                        const formattedString = this.config.tooltipFormatter(params, this.config);
+                        if (this.config.darkTooltip)
+                            return `<div style="background-color: #111827; color: #fff; padding: 6px 12px; border-radius: 6px; font-size: 13px; font-family: inherit; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); white-space: nowrap;">${formattedString}</div>`;
+                        return formattedString;
+                    }
                     return this.chartService.timelineChartTooltipFormatter(params);
                 },
                 ...this.config.tooltip,
@@ -3895,7 +3900,7 @@ class SankeyChart {
                 extraCssText: 'box-shadow:none;', // remove default shadow
                 formatter: (params) => this.config.tooltipFormatter
                     ? this.config.tooltipFormatter(params)
-                    : this.chartService.sankeyTooltipFormatter(params),
+                    : this.chartService.sankeyTooltipFormatter(params, this.config),
             },
             series: [
                 {
@@ -3905,8 +3910,16 @@ class SankeyChart {
                     bottom: legendEnabled && legendConfig?.position === 'bottom' ? 32 : 16,
                     ...this.config.seriesOption,
                     type: 'sankey',
-                    nodeWidth: this.clamp(styling?.node?.thickness ?? this.config.seriesOption?.nodeWidth, 1, 50),
-                    nodeGap: this.clamp(styling?.node?.padding ?? this.config.seriesOption?.nodeGap, 0, 100),
+                    ...(styling?.node?.thickness ?? this.config.seriesOption?.nodeWidth
+                        ? {
+                            nodeWidth: this.clamp(styling?.node?.thickness ?? this.config.seriesOption?.nodeWidth, 1, 50)
+                        }
+                        : {}),
+                    ...(styling?.node?.padding ?? this.config.seriesOption?.nodeGap
+                        ? {
+                            nodeGap: this.clamp(styling?.node?.padding ?? this.config.seriesOption?.nodeGap, 0, 100)
+                        }
+                        : {}),
                     data: visibleNodes.map((n, index) => {
                         const nodeStyle = this.resolveSingleNodeStyle(n.name);
                         return {
@@ -5248,8 +5261,10 @@ class GaugeChart {
                             },
                             pointer: {
                                 show: true,
-                                width: 3,
-                                length: '72%',
+                                icon: 'rect',
+                                width: 6,
+                                length: '18%',
+                                offsetCenter: [0, '-91%'],
                                 itemStyle: {
                                     color: '#374151',
                                 },