Skip to content

Commit 763b6b7

Browse files
CookiezaursCookiezaurs
authored
Merge pull request #4839 from pnrgenc/SER-1086
[SER-1086] Chart tooltip injection
2 parents eb57e89 + f8a8f61 commit 763b6b7

File tree

1 file changed

+19
-18
lines changed
  • frontend/express/public/javascripts/countly/vue/components

1 file changed

+19
-18
lines changed

‎frontend/express/public/javascripts/countly/vue/components/vis.js

+19-18
Original file line numberDiff line numberDiff line change
@@ -446,6 +446,7 @@
446446
returnObj.grid = {bottom: 40};
447447

448448
returnObj.xAxis.axisLabel.formatter = function(value) {
449+
value = countlyCommon.encodeHtml(value);
449450
var ellipsis = "...";
450451
var lengthToTruncate = (Math.floor(maxLen / Math.ceil(longestLabelTextW / labelW)) * 2);
451452
if (value.length > lengthToTruncate) {
@@ -622,16 +623,16 @@
622623
cap: "round"
623624
}
624625
},
625-
formatter: function(params) {
626+
formatter: (params) => {
626627
var template = "";
627628
let formatter = self.valFormatter;
628629
if (params.seriesType === 'pie') {
629630
template += '<div class="bu-is-flex">\
630631
<div class="chart-tooltip__bar bu-mr-2 bu-mt-1" style="background-color: ' + params.color + ';"></div>\
631632
<div>\
632-
<div class="chart-tooltip__header text-smaller font-weight-bold bu-mb-3">' + params.seriesName + '</div>\
633-
<div class="text-small"> ' + params.data.name + '</div>\
634-
<div class="text-big">' + formatter(params.data.value) + '</div>\
633+
<div class="chart-tooltip__header text-smaller font-weight-bold bu-mb-3">' + countlyCommon.encodeHtml(params.seriesName) + '</div>\
634+
<div class="text-small"> ' + countlyCommon.encodeHtml(params.data.name) + '</div>\
635+
<div class="text-big">' + formatter(countlyCommon.encodeHtml(params.data.value)) + '</div>\
635636
</div>\
636637
</div>';
637638

@@ -640,7 +641,7 @@
640641
else {
641642
template = "<div class='chart-tooltip" + ((params.length > 10) ? " chart-tooltip__has-scroll" : "") + "'>";
642643
if (params.length > 0) {
643-
template += "<span class='chart-tooltip__header text-smaller font-weight-bold'>" + params[0].axisValueLabel + "</span></br>";
644+
template += "<span class='chart-tooltip__header text-smaller font-weight-bold'>" + countlyCommon.encodeHtml(params[0].axisValueLabel) + "</span></br>";
644645
}
645646

646647
if (self.sortBy === "index") {
@@ -669,10 +670,10 @@
669670
template += '<div class="chart-tooltip__body' + ((params.length > 4) ? " chart-tooltip__single-row" : " ") + '">\
670671
<div class="chart-tooltip__bar" style="background-color: ' + params[i].color + ';"></div>\
671672
<div class="chart-tooltip__series">\
672-
<span class="text-small">' + params[i].seriesName + '</span>\
673+
<span class="text-small">' + countlyCommon.encodeHtml(params[i].seriesName) + '</span>\
673674
</div>\
674675
<div class="chart-tooltip__value">\
675-
<span class="text-big">' + (typeof params[i].value === 'object' ? formatter((isNaN(params[i].value[1]) ? 0 : params[i].value[1]), params[i].value, i) : formatter((isNaN(params[i].value) ? 0 : params[i].value), null, i)) + '</span>\
676+
<span class="text-big">' + (typeof params[i].value === 'object' ? formatter((isNaN(countlyCommon.encodeHtml(params[i].value[1])) ? 0 : countlyCommon.encodeHtml(params[i].value[1])), countlyCommon.encodeHtml(params[i].value), i) : formatter((isNaN(params[i].value) ? 0 : countlyCommon.encodeHtml(params[i].value)), null, i)) + '</span>\
676677
</div>\
677678
</div>';
678679
}
@@ -728,7 +729,7 @@
728729
fontSize: 12,
729730
formatter: function(value) {
730731
if (typeof value === "number") {
731-
return countlyCommon.getShortNumber(value);
732+
return countlyCommon.getShortNumber(countlyCommon.encodeHtml(value));
732733
}
733734
return value;
734735
}
@@ -865,7 +866,7 @@
865866
this.patchLegend(options);
866867

867868
return options;
868-
}
869+
},
869870
}
870871
});
871872

@@ -1112,39 +1113,39 @@
11121113
</div>\
11131114
<div class="graph-tooltip-wrapper__container">';
11141115
}
1115-
template += '<div class="' + conditionalClassName + '">\
1116-
<div class="bu-mb-1"><span class="text-small color-cool-gray-50">#' + filteredNotes[i].indicator + '</span></div>\
1116+
template += '<div class="' + countlyCommon.encodeHtml(conditionalClassName) + '">\
1117+
<div class="bu-mb-1"><span class="text-small color-cool-gray-50">#' + countlyCommon.encodeHtml(filteredNotes[i].indicator) + '</span></div>\
11171118
<div class="bu-is-flex bu-is-justify-content-space-between graph-notes-tooltip__header">\
11181119
<div class="bu-is-flex bu-is-flex-direction-column">\
1119-
<div class="text-small input-owner">' + filteredNotes[i].owner_name + '</div>\
1120+
<div class="text-small input-owner">' + countlyCommon.encodeHtml(filteredNotes[i].owner_name) + '</div>\
11201121
<div class="text-small color-cool-gray-50 note-date">' + moment(filteredNotes[i].ts).format("MMM D, YYYY hh:mm A") + '</div>\
11211122
</div>\
11221123
<div class="bu-is-flex bu-is-flex-direction-column bu-is-align-items-flex-end">\
1123-
<span class="text-small color-cool-gray-50 bu-is-capitalized note-type">' + filteredNotes[i].noteType + '</span>\
1124+
<span class="text-small color-cool-gray-50 bu-is-capitalized note-type">' + countlyCommon.encodeHtml(filteredNotes[i].noteType) + '</span>\
11241125
</div>\
11251126
</div>\
1126-
<div class="bu-mt-2 graph-notes-tooltip__body"><span class="text-small input-notes input-minimizer">' + filteredNotes[i].note + '</span></div>\
1127+
<div class="bu-mt-2 graph-notes-tooltip__body"><span class="text-small input-notes input-minimizer">' + countlyCommon.encodeHtml(filteredNotes[i].note) + '</span></div>\
11271128
</div>';
11281129
if (i === filteredNotes.length) {
11291130
template = "</div>";
11301131
}
11311132
}
11321133
}
11331134
else {
1134-
template += '<div class="' + conditionalClassName + '">\
1135+
template += '<div class="' + countlyCommon.encodeHtml(conditionalClassName) + '">\
11351136
<div class="bu-is-flex bu-is-justify-content-space-between graph-notes-tooltip__header">\
11361137
<div class="bu-is-flex bu-is-flex-direction-column name-wrapper">\
1137-
<div class="text-medium input-owner">' + params.data.note.owner_name + '</div>\
1138+
<div class="text-medium input-owner">' + countlyCommon.encodeHtml(params.data.note.owner_name) + '</div>\
11381139
<div class="text-small color-cool-gray-50 note-date">' + moment(params.data.note.ts).format("MMM D, YYYY hh:mm A") + '</div>\
11391140
</div>\
11401141
<div class="bu-is-flex bu-is-flex-direction-column bu-is-align-items-flex-end">\
11411142
<span onClick="window.hideGraphTooltip()">\
11421143
<i class="el-icon-close"></i>\
11431144
</span>\
1144-
<span class="text-small color-cool-gray-50 bu-is-capitalized note-type">' + params.data.note.noteType + '</span>\
1145+
<span class="text-small color-cool-gray-50 bu-is-capitalized note-type">' + countlyCommon.encodeHtml(params.data.note.noteType) + '</span>\
11451146
</div>\
11461147
</div>\
1147-
<div class="graph-notes-tooltip__body"><span class="text-medium input-notes">' + params.data.note.note + '</span></div>\
1148+
<div class="graph-notes-tooltip__body"><span class="text-medium input-notes">' + countlyCommon.encodeHtml(params.data.note.note) + '</span></div>\
11481149
</div>';
11491150
}
11501151
return template;

0 commit comments

Comments
 (0)