Merge pull request #3759 from pnrgenc/SER-254-tooltip-minimizer

[SER-254] Annotation plugin fixes
Countly · Dec 9, 2022 · 2e694a0 · 2e694a0
2 parents c28530b + bc9bfcb
commit 2e694a0
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 9 deletions.
diff --git a/frontend/express/public/javascripts/countly/vue/components/vis.js b/frontend/express/public/javascripts/countly/vue/components/vis.js
@@ -1047,8 +1047,23 @@
                 return notes;
             },
             graphNotesTooltipFormatter: function(arr, params) {
-                var template = "";
                 var filteredNotes = arr.filter(x=>x.dateStr === params.data.note.dateStr && x.times > 1);
+                var minimizeTooltip = false;
+                var template = "";
+                var conditionalClassName = "graph-notes-tooltip";
+
+                if ((this.$refs && this.$refs.echarts) && (this.$refs.echarts.getHeight() < 200 || this.$refs.echarts.getWidth() < 500)) {
+                    minimizeTooltip = true;
+                }
+
+
+                if (minimizeTooltip) {
+                    conditionalClassName = 'graph-notes-tooltip minimize';
+                }
+                else if (!minimizeTooltip && filteredNotes.length > 0) {
+                    conditionalClassName = 'graph-notes-tooltip bu-mb-4 bu-mx-2';
+                }
+
                 if (filteredNotes.length > 0) {
                     for (var i = 0; i < filteredNotes.length; i++) {
                         if (i === 0) {
@@ -1059,30 +1074,30 @@
                                         </div>\
                                         <div class="graph-tooltip-wrapper__container">';
                         }
-                        template += '<div class="graph-notes-tooltip bu-mb-4 bu-mx-2">\
+                        template += '<div class="' + conditionalClassName + '">\
                                         <div class="bu-mb-1"><span class="text-small color-cool-gray-50">#' + 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 color-cool-gray-50">' + moment.utc(filteredNotes[i].ts).format("MMM D, YYYY hh:mm A") + '</div>\
+                                                <div class="text-small color-cool-gray-50 note-date">' + moment.utc(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">' + filteredNotes[i].noteType + '</span>\
+                                                <span class="text-small color-cool-gray-50 bu-is-capitalized note-type">' + filteredNotes[i].noteType + '</span>\
                                             </div>\
                                         </div>\
-                                        <div class="bu-mt-2 graph-notes-tooltip__body"><span class="text-small input-notes">' + filteredNotes[i].note + '</span></div>\
+                                        <div class="bu-mt-2 graph-notes-tooltip__body"><span class="text-small input-notes input-minimizer">' + filteredNotes[i].note + '</span></div>\
                                     </div>';
                         if (i === filteredNotes.length) {
                             template = "</div>";
                         }
                     }
                 }
                 else {
-                    template = '<div class="graph-notes-tooltip">\
+                    template += '<div class="' + 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-small color-cool-gray-50">' + moment.utc(params.data.note.ts).format("MMM D, YYYY hh:mm A") + '</div>\
+                                            <div class="text-small color-cool-gray-50 note-date">' + moment.utc(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()">\
@@ -1091,7 +1106,7 @@
                                             <span class="text-small color-cool-gray-50 bu-is-capitalized note-type">' + params.data.note.noteType + '</span>\
                                         </div>\
                                     </div>\
-                                    <div class="bu-mt-3 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">' + params.data.note.note + '</span></div>\
                                 </div>';
                 }
                 return template;
@@ -1224,7 +1239,7 @@
                     this.seriesOptions.markPoint.data = [];
                 }
             },
-            onClick() {
+            onClick: function() {
                 if (!document.querySelectorAll(".graph-overlay").length) {
                     var overlay = document.createElement("div");
                     overlay.setAttribute("class", "graph-overlay");

diff --git a/frontend/express/public/stylesheets/styles/blocks/_vis.scss b/frontend/express/public/stylesheets/styles/blocks/_vis.scss
@@ -413,6 +413,8 @@
         }
     }
     &__body {
+        margin-top: 12px;
+
         .input-notes {
             word-break: break-word; 
             display: inline-block; 
@@ -421,6 +423,44 @@
     }
 }
 
+.graph-notes-tooltip.minimize {
+    width: 180px;
+
+    .input-owner {
+        font-size: 12px;
+    }
+
+    &__header {
+        margin-top: 0px;
+    }
+
+    .input-notes {
+        font-size: 12px;
+    }
+
+    .input-minimizer {
+        margin-bottom: 10px;
+    }
+
+    .graph-notes-tooltip__body {
+        margin-top: 5px;
+    }
+
+    .name-wrapper {
+        margin-top: 0px;
+    }
+
+    .note-date {
+        font-size: 11px;
+    }
+
+    .note-type {
+        margin-top: 2px;
+        font-size: 11px;
+        margin-right: 4px;
+    }
+}
+
 .graph-tooltip-wrapper {
     margin-right: 2px;
     margin-bottom: 4px;