Skip to content

Commit

Permalink
Merge pull request #3701 from pnrgenc/SER-254-fixes
Browse files Browse the repository at this point in the history 
[SER-254] Annotation (Add Note) feature for time series graphs
  • Loading branch information
@Cookiezaurs
Cookiezaurs authored Nov 25, 2022
2 parents 8c5d5b3 + 3fdc06f commit 47b33c2
Show file tree
Hide file tree
Showing 5 changed files with 73 additions and 121 deletions.
2 changes: 1 addition & 1 deletion api/parts/mgmt/users.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -790,7 +790,7 @@ usersApi.saveNote = async function(params) {
const noteValidation = common.validateArgs(args, argProps, true);
if (noteValidation) {
const note = {
app_id: params.qstring.app_id,
app_id: args.app_id,
note: args.note,
ts: args.ts,
noteType: args.noteType,
Expand Down
9 changes: 7 additions & 2 deletions frontend/express/public/core/notes/javascripts/countly.models.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,15 +12,20 @@
if (data.noteType === 'shared') {
args.emails = data.emails;
}
if (data.appIds) {
args.app_id = data.appIds;
}
else {
args.app_id = countlyCommon.ACTIVE_APP_ID;
}

if (data._id) {
args._id = data._id;
return $.ajax({
type: "POST",
url: countlyCommon.API_PARTS.data.w + '/notes/save',
data: {
args: JSON.stringify(args),
app_id: countlyCommon.ACTIVE_APP_ID,
args: JSON.stringify(args)
},
dataType: "json",
success: function() {
Expand Down
179 changes: 63 additions & 116 deletions frontend/express/public/javascripts/countly/vue/components/vis.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -937,9 +937,35 @@
this.getGraphNotes();
}
},
getDateFormat: function(date) {
var dateFormats = {
"yyyy-mm-d-hh-mm": "YYYY-MM-D HH:00",
"yyyy-mm-d-h-mm": "YYYY-MM-D H:00",
"d-mmm": "D MMM",
"dd-mmm": "DD MMM",
"d-mmm-yyyy": "D MMM YYYY",
"yyyy-mm-d": "YYYY-MM-D",
"yyyy-m-d": "YYYY-M-D",
"yyyy-mm-dd": "YYYY-MM-DD",
"yyyy-mm": "YYYY-MM",
"yyyy-m": "YYYY-M",
"mmm-yyyy": "MMM YYYY",
"h-00": "H:00",
"hh-00": "HH:00",
"dd/mm/yyyy": "DD/MM/YY"
//define other well known formats
};

for (var prop in dateFormats) {
if (moment(date, dateFormats[prop], true).isValid()) {
return dateFormats[prop];
}
}
return null;
},
graphNotesTimeConverter: function(ts) {
var currentPeriod = countlyCommon.periodObj._period;
var graphNoteDate = new Date(ts);

if (this.category === "drill" || this.category === "formulas") {
if (this.notationSelectedBucket === "hourly") {
return countlyCommon.formatDate(moment(graphNoteDate), "D MMM YYYY hh:00") || 0;
Expand All @@ -954,35 +980,24 @@
return countlyCommon.formatDate(moment(graphNoteDate), "MMM YYYY");
}
}
else {
if (this.$parent && this.$parent.data && this.$parent.data.custom_period && this.$parent.data.custom_period.length) {
if (this.category !== "active-users") {
return countlyCommon.formatDate(moment(ts), "YYYY-MM-D") || 0;
}
else {
return countlyCommon.formatDate(moment(ts), "DD/MM/YY") || 0;
}
}
else if (currentPeriod === "hour") {
return graphNoteDate.getUTCHours();
}
else if (currentPeriod === "yesterday") {
return moment.utc(ts).format("D MMM, hh:00");
else if (this.category === "push-notification") {
if (this.notationSelectedBucket === "weekly") {
return "W" + moment(graphNoteDate).isoWeek();
}
else if (currentPeriod === "day") {
return moment.utc(ts).format("D MMM");
else if (this.notationSelectedBucket === "monthly") {
return countlyCommon.formatDate(moment(graphNoteDate), "YYYY MMM");
}
else if (currentPeriod === "month") {
if (this.category === "session" || this.category === "crashes") {
return countlyCommon.formatDate(moment(ts), "MMM") || 0;
}
else {
return countlyCommon.formatDate(moment(ts), "MMM YYYY") || 0;
}
}
else {
var xAxisLabel = null;
if (this.$refs.echarts && this.$refs.echarts.option && this.$refs.echarts.option.xAxis.data) {
xAxisLabel = this.$refs.echarts.option.xAxis.data[0];
}
else {
return countlyCommon.formatDate(moment(graphNoteDate), "D MMM") || 0;
return null;
}
var formatType = this.getDateFormat(xAxisLabel);
return countlyCommon.formatDate(moment(ts), formatType) || 0;
}
},
mergeGraphNotesByDate: function(notes) {
Expand Down Expand Up @@ -1080,6 +1095,7 @@
}
}
}

if ((this.category === "formulas" || this.category === "drill") && (this.$parent && this.$parent.data)) {
var xAxisLabels = this.option.xAxis.data;
var customPeriodStartDate;
Expand All @@ -1094,9 +1110,6 @@
customPeriodEndDate = this.weekCountToDate(xAxisLabels[xAxisLabels.length - 1].split(' ')[1], xAxisLabels[xAxisLabels.length - 1].split(' ')[0].split('W')[1], 7);
filter.customPeriod = [customPeriodStartDate.getTime(), customPeriodEndDate.getTime()];
}
else if (this.$parent.data.bucket === "monthly") {
return;
}
}
returnedObj.appIds = appIds;
returnedObj.customPeriod = filter;
Expand Down Expand Up @@ -1128,20 +1141,22 @@
}
self.mergedNotes = self.mergeGraphNotesByDate(self.notes);
self.mergedNotes.forEach(function(note, index) {
if (chartHeight < 250) {
if (note.hasCloseDate && note.times === 1) {
yAxisHeight = '65%';
}
else {
yAxisHeight = '60%';
}
}
else {
if (note.hasCloseDate && note.times === 1) {
yAxisHeight = '80%';
if (note.dateStr) {
if (chartHeight < 250 && chartHeight !== 100) {
if (note.hasCloseDate && note.times === 1) {
yAxisHeight = '65%';
}
else {
yAxisHeight = '60%';
}
}
else {
yAxisHeight = '75%';
if (note.hasCloseDate && note.times === 1) {
yAxisHeight = '80%';
}
else {
yAxisHeight = '75%';
}
}
}

Expand Down Expand Up @@ -1169,59 +1184,6 @@
confine: true,
extraCssText: 'z-index: 1000',
alwaysShowContent: true,
position: function(canvasMousePos, params, tooltipDom, rect, sizes) {
if (params.value !== " ") {
return "top";
// return 'left';
}
else {
var margin = 10; // How far away from the mouse should the tooltip be
var overflowMargin = 5; // If no satisfactory position can be found, how far away from the edge of the window should the tooltip be kept

// The chart canvas position
var canvasRect = tooltipDom.parentElement.getElementsByTagName('canvas')[0].getBoundingClientRect();
// The mouse coordinates relative to the whole window
// The first parameter to the position function is the mouse position relative to the canvas
var mouseX = canvasMousePos[0] + canvasRect.x;
var mouseY = canvasMousePos[1] + canvasRect.y;
// The width and height of the tooltip dom element
var tooltipWidth = sizes.contentSize[0];
var tooltipHeight = sizes.contentSize[1];

// Start by placing the tooltip top and right relative to the mouse position
var xPos = mouseX + margin;
var yPos = mouseY - margin - tooltipHeight;

// The tooltip is overflowing past the right edge of the window
if (xPos + tooltipWidth >= document.documentElement.clientWidth) {

// Attempt to place the tooltip to the left of the mouse position
xPos = mouseX - margin - tooltipWidth;

// The tooltip is overflowing past the left edge of the window
if (xPos <= 0) {
// Place the tooltip a fixed distance from the left edge of the window
xPos = overflowMargin;
}
}

// The tooltip is overflowing past the top edge of the window
if (yPos <= 0) {

// Attempt to place the tooltip to the bottom of the mouse position
yPos = mouseY + margin;

// The tooltip is overflowing past the bottom edge of the window
if (yPos + tooltipHeight >= document.documentElement.clientHeight) {

// Place the tooltip a fixed distance from the top edge of the window
yPos = overflowMargin;
}
}
// Return the position (converted back to a relative position on the canvas)
return [xPos - canvasRect.x, yPos - canvasRect.y];
}
},
formatter: function(params) {
return self.graphNotesTooltipFormatter(self.mergedNotes, params);
}
Expand Down Expand Up @@ -1260,31 +1222,15 @@
}
}

if (document.querySelector('x-vue-echarts > div:has(> .graph-notes-tooltip)')) {
document.querySelector('x-vue-echarts > div:has(> .graph-notes-tooltip)').addEventListener('mouseleave', function(event) {
if (localStorage.getItem('showTooltipFlag')) {
event.stopImmediatePropagation();
}
}, true);
}

if (document.querySelector('x-vue-echarts > div:has(> .graph-tooltip-wrapper)')) {
document.querySelector('x-vue-echarts > div:has(> .graph-tooltip-wrapper)').addEventListener('mouseleave', function(event) {
if (localStorage.getItem('showTooltipFlag')) {
event.stopImmediatePropagation();
}
}, true);

}

if (document.querySelector('x-vue-echarts > div:has(> .graph-notes-tooltip)')) {
if (document.querySelector('x-vue-echarts div .graph-notes-tooltip')) {
localStorage.setItem('showTooltipFlag', true);
document.querySelector('x-vue-echarts > div:has(> .graph-notes-tooltip)').addEventListener('mouseleave', window.hideTooltip, true);
document.querySelector('x-vue-echarts div .graph-notes-tooltip').parentNode.addEventListener('mouseleave', window.hideTooltip, true);
}

if (document.querySelector('x-vue-echarts > div:has(> .graph-tooltip-wrapper)')) {
if (document.querySelector('x-vue-echarts div .graph-tooltip-wrapper')) {
localStorage.setItem('showTooltipFlag', true);
document.querySelector('x-vue-echarts > div:has(> .graph-tooltip-wrapper)').addEventListener('mouseleave', window.hideTooltip, true);
document.querySelector('x-vue-echarts div .graph-tooltip-wrapper').parentNode.addEventListener('mouseleave', window.hideTooltip, true);
}
countlyCommon.DISABLE_AUTO_REFRESH = true;
}
Expand Down Expand Up @@ -1320,11 +1266,11 @@
}


if (document.querySelector('x-vue-echarts > div:has(> .graph-notes-tooltip)')) {
if (document.querySelector('x-vue-echarts div .graph-notes-tooltip')) {
localStorage.removeItem('showTooltipFlag');
}

if (document.querySelector('x-vue-echarts > div:has(> .graph-tooltip-wrapper)')) {
if (document.querySelector('x-vue-echarts div .graph-tooltip-wrapper')) {
localStorage.removeItem('showTooltipFlag');
}
countlyCommon.DISABLE_AUTO_REFRESH = false;
Expand Down Expand Up @@ -1767,7 +1713,8 @@
ts: Date.now(),
color: {value: 1, label: '#39C0C8'},
emails: [],
category: this.category
category: this.category,
appIds: this.data ? this.data.apps : null
});
}
else if (event === "manage") {
Expand Down
2 changes: 1 addition & 1 deletion plugins/dashboards/frontend/public/templates/widgets/analytics/widget.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<div class="bu-level-left bu-is-flex-shrink-1" style="min-width: 0">
<clyd-widget-title class="bu-level-item" :title="title" :labels="metricLabels"></clyd-widget-title>
</div>
<div class="bu-level-right" style="padding-right: 20px" v-if="isAllowed">
<div class="bu-level-right" v-if="isAllowed">
<div class="bu-level-item">
<clyd-bucket v-if="showBuckets" :widget-id="data._id" v-model="selectedBucket"></clyd-bucket>
</div>
Expand Down
2 changes: 1 addition & 1 deletion plugins/push/frontend/public/templates/push-notification-tab.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@
</div>
</div>
<cly-section>
<cly-chart-time :bucket="selectedPeriodFilter" :option="pushNotificationOptions" :height="400" v-loading="isDashboardLoading" :force-loading="isDashboardLoading" :legend="legend" class="cly-vue-push-notification-chart" category="push-notification">
<cly-chart-time :bucket="selectedPeriodFilter" :notation-selected-bucket="selectedPeriodFilter" :option="pushNotificationOptions" :hideNotation="selectedPushNotificationType === 'automatic' ? true : false" :height="400" v-loading="isDashboardLoading" :force-loading="isDashboardLoading" :legend="legend" class="cly-vue-push-notification-chart" category="push-notification">
<template v-slot:chart-left="scope">
<span class="cly-vue-push-notification-chart__left-text bu-mr-2">{{i18n('push-notification.time-period')}}</span>
<div style="width:100px;">
Expand Down

0 comments on commit 47b33c2

Please sign in to comment.