Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[SER-1086] Chart tooltip injection #4839

Merged
merged 2 commits into from
Jan 15, 2024
Merged

[SER-1086] Chart tooltip injection #4839

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2b2826c
[SER-1086] Chart tooltip injection
pnrgenc Jan 12, 2024
f8a8f61
[SER-1086] Chart tooltip injection
pnrgenc Jan 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 19 additions & 18 deletions frontend/express/public/javascripts/countly/vue/components/vis.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -446,6 +446,7 @@
returnObj.grid = {bottom: 40};

returnObj.xAxis.axisLabel.formatter = function(value) {
value = countlyCommon.encodeHtml(value);
var ellipsis = "...";
var lengthToTruncate = (Math.floor(maxLen / Math.ceil(longestLabelTextW / labelW)) * 2);
if (value.length > lengthToTruncate) {
Expand Down Expand Up @@ -622,16 +623,16 @@
cap: "round"
}
},
formatter: function(params) {
formatter: (params) => {
var template = "";
let formatter = self.valFormatter;
if (params.seriesType === 'pie') {
template += '<div class="bu-is-flex">\
<div class="chart-tooltip__bar bu-mr-2 bu-mt-1" style="background-color: ' + params.color + ';"></div>\
<div>\
<div class="chart-tooltip__header text-smaller font-weight-bold bu-mb-3">' + params.seriesName + '</div>\
<div class="text-small"> ' + params.data.name + '</div>\
<div class="text-big">' + formatter(params.data.value) + '</div>\
<div class="chart-tooltip__header text-smaller font-weight-bold bu-mb-3">' + countlyCommon.encodeHtml(params.seriesName) + '</div>\
<div class="text-small"> ' + countlyCommon.encodeHtml(params.data.name) + '</div>\
<div class="text-big">' + formatter(countlyCommon.encodeHtml(params.data.value)) + '</div>\
</div>\
</div>';

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

if (self.sortBy === "index") {
Expand Down Expand Up @@ -669,10 +670,10 @@
template += '<div class="chart-tooltip__body' + ((params.length > 4) ? " chart-tooltip__single-row" : " ") + '">\
<div class="chart-tooltip__bar" style="background-color: ' + params[i].color + ';"></div>\
<div class="chart-tooltip__series">\
<span class="text-small">' + params[i].seriesName + '</span>\
<span class="text-small">' + countlyCommon.encodeHtml(params[i].seriesName) + '</span>\
</div>\
<div class="chart-tooltip__value">\
<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>\
<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>\
</div>\
</div>';
}
Expand Down Expand Up @@ -728,7 +729,7 @@
fontSize: 12,
formatter: function(value) {
if (typeof value === "number") {
return countlyCommon.getShortNumber(value);
return countlyCommon.getShortNumber(countlyCommon.encodeHtml(value));
}
return value;
}
Expand Down Expand Up @@ -865,7 +866,7 @@
this.patchLegend(options);

return options;
}
},
}
});

Expand Down Expand Up @@ -1112,39 +1113,39 @@
</div>\
<div class="graph-tooltip-wrapper__container">';
}
template += '<div class="' + conditionalClassName + '">\
<div class="bu-mb-1"><span class="text-small color-cool-gray-50">#' + filteredNotes[i].indicator + '</span></div>\
template += '<div class="' + countlyCommon.encodeHtml(conditionalClassName) + '">\
<div class="bu-mb-1"><span class="text-small color-cool-gray-50">#' + countlyCommon.encodeHtml(filteredNotes[i].indicator) + '</span></div>\
<div class="bu-is-flex bu-is-justify-content-space-between graph-notes-tooltip__header">\
<div class="bu-is-flex bu-is-flex-direction-column">\
<div class="text-small input-owner">' + filteredNotes[i].owner_name + '</div>\
<div class="text-small input-owner">' + countlyCommon.encodeHtml(filteredNotes[i].owner_name) + '</div>\
<div class="text-small color-cool-gray-50 note-date">' + moment(filteredNotes[i].ts).format("MMM D, YYYY hh:mm A") + '</div>\
</div>\
<div class="bu-is-flex bu-is-flex-direction-column bu-is-align-items-flex-end">\
<span class="text-small color-cool-gray-50 bu-is-capitalized note-type">' + filteredNotes[i].noteType + '</span>\
<span class="text-small color-cool-gray-50 bu-is-capitalized note-type">' + countlyCommon.encodeHtml(filteredNotes[i].noteType) + '</span>\
</div>\
</div>\
<div class="bu-mt-2 graph-notes-tooltip__body"><span class="text-small input-notes input-minimizer">' + filteredNotes[i].note + '</span></div>\
<div class="bu-mt-2 graph-notes-tooltip__body"><span class="text-small input-notes input-minimizer">' + countlyCommon.encodeHtml(filteredNotes[i].note) + '</span></div>\
</div>';
if (i === filteredNotes.length) {
template = "</div>";
}
}
}
else {
template += '<div class="' + conditionalClassName + '">\
template += '<div class="' + countlyCommon.encodeHtml(conditionalClassName) + '">\
<div class="bu-is-flex bu-is-justify-content-space-between graph-notes-tooltip__header">\
<div class="bu-is-flex bu-is-flex-direction-column name-wrapper">\
<div class="text-medium input-owner">' + params.data.note.owner_name + '</div>\
<div class="text-medium input-owner">' + countlyCommon.encodeHtml(params.data.note.owner_name) + '</div>\
<div class="text-small color-cool-gray-50 note-date">' + moment(params.data.note.ts).format("MMM D, YYYY hh:mm A") + '</div>\
</div>\
<div class="bu-is-flex bu-is-flex-direction-column bu-is-align-items-flex-end">\
<span onClick="window.hideGraphTooltip()">\
<i class="el-icon-close"></i>\
</span>\
<span class="text-small color-cool-gray-50 bu-is-capitalized note-type">' + params.data.note.noteType + '</span>\
<span class="text-small color-cool-gray-50 bu-is-capitalized note-type">' + countlyCommon.encodeHtml(params.data.note.noteType) + '</span>\
</div>\
</div>\
<div class="graph-notes-tooltip__body"><span class="text-medium input-notes">' + params.data.note.note + '</span></div>\
<div class="graph-notes-tooltip__body"><span class="text-medium input-notes">' + countlyCommon.encodeHtml(params.data.note.note) + '</span></div>\
</div>';
}
return template;
Expand Down