cats-charts 0.0.91 → 0.0.92

package/fesm2022/cats-charts.mjs

@@ -1447,6 +1447,19 @@ class Charts {
         return Math.max(...levelMap.values());
     }
     sankeyTooltipFormatter(params, config) {
+        const showPercentage = config.styling?.labels?.showPercentage === true;
+        const targetNames = new Set((config.links ?? []).map((link) => link.target));
+        const sourceTotal = (config.links ?? [])
+            .filter((link) => !targetNames.has(link.source))
+            .reduce((sum, link) => sum + Number(link.value || 0), 0);
+        const totalValue = sourceTotal || (config.links ?? []).reduce((sum, link) => sum + Number(link.value || 0), 0);
+        const percentageRow = (item) => {
+            const value = Number(item);
+            if (!showPercentage || !Number.isFinite(value))
+                return '';
+            const percentage = totalValue ? ((value / totalValue) * 100).toFixed(1) : '0.0';
+            return `${percentage}%`;
+        };
         if (params.dataType === 'edge') {
             const { source, target, value, tooltip } = params.data;
             const escape = (item) => String(item ?? '').replace(/[&<>"']/g, (char) => ({
@@ -1481,7 +1494,7 @@ class Charts {
   />
   <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(typeof value === 'number' ? this.formatTooltipValue(value, config.tooltipCompactValue) : value)}</span></div>
+            <div style="font-size:12px;font-weight:600">${formatKey(config?.activeMetric ?? '') || 'Value'}: <span style="font-size:12px;font-weight:400">${showPercentage ? '(' : ''}${escape(typeof value === 'number' ? this.formatTooltipValue(value, config.tooltipCompactValue) : value)}${showPercentage ? ')' : ''} ${showPercentage ? percentageRow(value) : ''}</span></div>
             ${tooltipRows}
           </div>
         `;
@@ -1493,7 +1506,8 @@ class Charts {
           border-radius: 8px;
           box-shadow: 0 4px 10px rgba(0,0,0,0.15);
         ">
-          ${params.name}: <b>${typeof params.value === 'number' ? this.formatTooltipValue(params.value, config.tooltipCompactValue) : params.value}</b>
+          ${params.name}: <b>${showPercentage ? '(' : ''}${typeof params.value === 'number' ? this.formatTooltipValue(params.value, config.tooltipCompactValue) : params.value}${showPercentage ? ')' : ''}</b>
+          ${percentageRow(params.value)}
         </div>
       `;
     }
@@ -4042,14 +4056,14 @@ class SankeyChart {
                     bottom: legendEnabled && legendConfig?.position === 'bottom' ? 32 : 16,
                     ...this.config.seriesOption,
                     type: 'sankey',
-                    ...(styling?.node?.thickness ?? this.config.seriesOption?.nodeWidth
+                    ...((styling?.node?.thickness ?? this.config.seriesOption?.nodeWidth)
                         ? {
-                            nodeWidth: this.clamp(styling?.node?.thickness ?? this.config.seriesOption?.nodeWidth, 1, 50)
+                            nodeWidth: this.clamp(styling?.node?.thickness ?? this.config.seriesOption?.nodeWidth, 1, 50),
                         }
                         : {}),
-                    ...(styling?.node?.padding ?? this.config.seriesOption?.nodeGap
+                    ...((styling?.node?.padding ?? this.config.seriesOption?.nodeGap)
                         ? {
-                            nodeGap: this.clamp(styling?.node?.padding ?? this.config.seriesOption?.nodeGap, 0, 100)
+                            nodeGap: this.clamp(styling?.node?.padding ?? this.config.seriesOption?.nodeGap, 0, 100),
                         }
                         : {}),
                     data: visibleNodes.map((n, index) => {
@@ -4105,8 +4119,16 @@ class SankeyChart {
                         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,
+                        fontWeight: labelTypography?.reset
+                            ? undefined
+                            : labelTypography?.bold
+                                ? 'bold'
+                                : undefined,
+                        fontStyle: labelTypography?.reset
+                            ? undefined
+                            : labelTypography?.italic
+                                ? 'italic'
+                                : undefined,
                         textDecoration: labelTypography?.reset
                             ? undefined
                             : labelTypography?.underline
@@ -4287,8 +4309,8 @@ class SankeyChart {
                 ? styling.individualColors?.source
                 : meta.role === 'destination'
                     ? styling.individualColors?.destination
-                    : styling.individualColors?.middle?.[meta.depth] ??
-                        styling.individualColors?.middle?.[String(meta.depth)];
+                    : (styling.individualColors?.middle?.[meta.depth] ??
+                        styling.individualColors?.middle?.[String(meta.depth)]);
             if (colorStop?.color) {
                 return this.withOpacity(colorStop.color, this.percentToRatio(colorStop.opacity, 100));
             }
@@ -4302,9 +4324,13 @@ class SankeyChart {
         return {
             itemStyle: {
                 ...(nodeStyle.color
-                    ? { color: this.withOpacity(nodeStyle.color, this.percentToRatio(nodeStyle.opacity, 100)) }
+                    ? {
+                        color: this.withOpacity(nodeStyle.color, this.percentToRatio(nodeStyle.opacity, 100)),
+                    }
+                    : {}),
+                ...(nodeStyle.opacity !== undefined
+                    ? { opacity: this.percentToRatio(nodeStyle.opacity, 100) }
                     : {}),
-                ...(nodeStyle.opacity !== undefined ? { opacity: this.percentToRatio(nodeStyle.opacity, 100) } : {}),
                 ...(nodeStyle.itemStyle || {}),
             },
             label: nodeStyle.label,
@@ -4348,14 +4374,16 @@ class SankeyChart {
         const text = this.applyCase(name, labels?.typography?.reset ? 'none' : labels?.typography?.case);
         const stats = [];
         if (labels?.showNumbers)
-            stats.push(String(meta?.value ?? 0));
+            stats.push(String(`${labels?.showPercentage ? `(${meta?.value ?? 0})` : (meta?.value ?? 0)}`));
         if (labels?.showPercentage) {
             const percentage = totalValue ? (((meta?.value ?? 0) / totalValue) * 100).toFixed(1) : '0.0';
             stats.push(`${percentage}%`);
         }
         if (!stats.length)
             return text;
-        return labels?.splitLabelsAndStats ? `${text}\n${stats.join(' ')}` : `${text} ${stats.join(' ')}`;
+        return labels?.splitLabelsAndStats
+            ? `${text}\n${stats.join(' ')}`
+            : `${text} ${stats.join(' ')}`;
     }
     resolveLabelPosition() {
         const alignment = this.config.styling?.labels?.alignment;