cats-charts 0.0.71 → 0.0.73
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/cats-charts.mjs +39 -2
- package/fesm2022/cats-charts.mjs.map +1 -1
- package/index.d.ts +7 -2
- package/package.json +1 -1
package/fesm2022/cats-charts.mjs
CHANGED
|
@@ -1033,12 +1033,30 @@ class Charts {
|
|
|
1033
1033
|
const name = params.name;
|
|
1034
1034
|
const value = params.value;
|
|
1035
1035
|
const percent = params.percent;
|
|
1036
|
+
let extraTooltipData = [];
|
|
1037
|
+
if (typeof params?.data === 'object') {
|
|
1038
|
+
extraTooltipData = Object.entries(params.data?.[config?.extraTooltipKey || 'tooltip'] || {});
|
|
1039
|
+
}
|
|
1040
|
+
let extraTooltipDataTemplate = '';
|
|
1041
|
+
if (extraTooltipData.length) {
|
|
1042
|
+
extraTooltipData.forEach((data) => {
|
|
1043
|
+
extraTooltipDataTemplate += `<div style="
|
|
1044
|
+
font-size:13px;
|
|
1045
|
+
color:#434A51;
|
|
1046
|
+
padding-top: 0.5rem;
|
|
1047
|
+
">
|
|
1048
|
+
${data[0]}: <b style="color:#111;font-weight:600;">${data[1]}</b>
|
|
1049
|
+
</div>`;
|
|
1050
|
+
});
|
|
1051
|
+
}
|
|
1036
1052
|
return `<div style="
|
|
1037
1053
|
position: relative;
|
|
1038
1054
|
background-color: #fff;
|
|
1039
1055
|
padding: 8px 16px;
|
|
1040
1056
|
border-radius: 8px;
|
|
1041
1057
|
box-shadow: 0 4px 16px rgba(0,0,0,0.08);
|
|
1058
|
+
">
|
|
1059
|
+
<div style="
|
|
1042
1060
|
display: flex;
|
|
1043
1061
|
align-items: center;
|
|
1044
1062
|
gap: 10px;
|
|
@@ -1069,14 +1087,32 @@ class Charts {
|
|
|
1069
1087
|
${name}: <b style="color:#111; font-weight:600;">${config.valueFormatter ? config.valueFormatter(value) : value}</b> ${config.showTooltipPercent ? '(' + percent + '%)' : ''}
|
|
1070
1088
|
</span>
|
|
1071
1089
|
</div>
|
|
1090
|
+
${extraTooltipDataTemplate}
|
|
1091
|
+
</div>
|
|
1072
1092
|
`;
|
|
1073
1093
|
}
|
|
1074
|
-
barLineTooltipFormatter(params, chartType) {
|
|
1094
|
+
barLineTooltipFormatter(params, chartType, config) {
|
|
1075
1095
|
if (!params || !params.length)
|
|
1076
1096
|
return '';
|
|
1077
1097
|
const date = params[0].axisValueLabel || params[0].name;
|
|
1078
1098
|
let total = 0;
|
|
1079
1099
|
let rows = '';
|
|
1100
|
+
let extraTooltipData = [];
|
|
1101
|
+
if (typeof params?.[0]?.data === 'object') {
|
|
1102
|
+
extraTooltipData = Object.entries(params[0].data?.[config?.extraTooltipKey || 'tooltip'] || {});
|
|
1103
|
+
}
|
|
1104
|
+
let extraTooltipDataTemplate = '';
|
|
1105
|
+
if (extraTooltipData.length) {
|
|
1106
|
+
extraTooltipData.forEach((data) => {
|
|
1107
|
+
extraTooltipDataTemplate += `<div style="
|
|
1108
|
+
font-size:13px;
|
|
1109
|
+
color:#434A51;
|
|
1110
|
+
padding-top: 0.5rem;
|
|
1111
|
+
">
|
|
1112
|
+
${data[0]}: <b style="color:#111;font-weight:600;">${data[1]}</b>
|
|
1113
|
+
</div>`;
|
|
1114
|
+
});
|
|
1115
|
+
}
|
|
1080
1116
|
params?.forEach((item) => {
|
|
1081
1117
|
const color = item.color;
|
|
1082
1118
|
const name = item.seriesName;
|
|
@@ -1128,6 +1164,7 @@ class Charts {
|
|
|
1128
1164
|
padding-top: 0.5rem;
|
|
1129
1165
|
">
|
|
1130
1166
|
Total: <b style="color:#111;font-weight:600;">${total}</b>
|
|
1167
|
+
${extraTooltipDataTemplate}
|
|
1131
1168
|
</div>
|
|
1132
1169
|
|
|
1133
1170
|
</div>
|
|
@@ -1694,7 +1731,7 @@ class LinesChart {
|
|
|
1694
1731
|
},
|
|
1695
1732
|
],
|
|
1696
1733
|
},
|
|
1697
|
-
opacity: 0.4,
|
|
1734
|
+
opacity: s.areaOpacity ?? 0.4,
|
|
1698
1735
|
}
|
|
1699
1736
|
: undefined,
|
|
1700
1737
|
...s,
|