cats-charts 0.0.90 → 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;
@@ -5299,7 +5327,10 @@ class GaugeChart {
     chartInstance;
     chartResizeObserver;
     previousReactiveSignature = '';
-    constructor(chartService) {
+    // Keep direct construction backwards compatible for consumers that build chart
+    // options outside Angular's DI context. Angular still injects the root service
+    // when this class is created as a component.
+    constructor(chartService = new Charts()) {
         this.chartService = chartService;
     }
     ngOnChanges(changes) {
@@ -5524,7 +5555,7 @@ class GaugeChart {
                             axisLine: {
                                 lineStyle: {
                                     width: 0,
-                                    color: [1, 'transparent'],
+                                    color: [[1, 'transparent']],
                                 },
                             },
                             pointer: {
@@ -6267,6 +6298,10 @@ class GanttChart {
     zoomWheelHandler;
     visibleRows = [];
     rowIndexMap = new Map();
+    constructor(chartService, cdr) {
+        this.chartService = chartService;
+        this.cdr = cdr;
+    }
     get deafultColors() {
         return this.chartService.defaultColors;
     }
@@ -6446,10 +6481,6 @@ class GanttChart {
         return (this.config?.customLegend?.position === 'left' ||
             this.config?.customLegend?.position === 'right');
     }
-    constructor(chartService, cdr) {
-        this.chartService = chartService;
-        this.cdr = cdr;
-    }
     /* ------------------ CHANGE HANDLING ------------------ */
     ngOnChanges(changes) {
         if (!this.config)