cats-charts 0.0.71 → 0.0.72

package/fesm2022/cats-charts.mjs

@@ -1033,12 +1033,30 @@ class Charts {
         const name = params.name;
         const value = params.value;
         const percent = params.percent;
+        let extraTooltipData = [];
+        if (typeof params?.data === 'object') {
+            extraTooltipData = Object.entries(params.data?.[config?.extraTooltipKey || 'tooltip'] || {});
+        }
+        let extraTooltipDataTemplate = '';
+        if (extraTooltipData.length) {
+            extraTooltipData.forEach((data) => {
+                extraTooltipDataTemplate += `<div style="
+        font-size:13px;
+        color:#434A51;
+        padding-top: 0.5rem;
+      ">
+        ${data[0]}: <b style="color:#111;font-weight:600;">${data[1]}</b>
+      </div>`;
+            });
+        }
         return `<div style="
         position: relative;
         background-color: #fff;
         padding: 8px 16px;
         border-radius: 8px;
         box-shadow: 0 4px 16px rgba(0,0,0,0.08);
+      ">
+    <div style="
         display: flex;
         align-items: center;
         gap: 10px;
@@ -1069,14 +1087,32 @@ class Charts {
           ${name}: <b style="color:#111; font-weight:600;">${config.valueFormatter ? config.valueFormatter(value) : value}</b> ${config.showTooltipPercent ? '(' + percent + '%)' : ''}
         </span>
       </div>
+       ${extraTooltipDataTemplate}
+      </div>
     `;
     }
-    barLineTooltipFormatter(params, chartType) {
+    barLineTooltipFormatter(params, chartType, config) {
         if (!params || !params.length)
             return '';
         const date = params[0].axisValueLabel || params[0].name;
         let total = 0;
         let rows = '';
+        let extraTooltipData = [];
+        if (typeof params?.[0]?.data === 'object') {
+            extraTooltipData = Object.entries(params[0].data?.[config?.extraTooltipKey || 'tooltip'] || {});
+        }
+        let extraTooltipDataTemplate = '';
+        if (extraTooltipData.length) {
+            extraTooltipData.forEach((data) => {
+                extraTooltipDataTemplate += `<div style="
+        font-size:13px;
+        color:#434A51;
+        padding-top: 0.5rem;
+      ">
+        ${data[0]}: <b style="color:#111;font-weight:600;">${data[1]}</b>
+      </div>`;
+            });
+        }
         params?.forEach((item) => {
             const color = item.color;
             const name = item.seriesName;
@@ -1128,6 +1164,7 @@ class Charts {
         padding-top: 0.5rem;
       ">
         Total: <b style="color:#111;font-weight:600;">${total}</b>
+        ${extraTooltipDataTemplate}
       </div>
 
     </div>