From 744764403c0abeb9402d3f8c79c9ae10ea4dd45d Mon Sep 17 00:00:00 2001 From: ayasayadi1 Date: Tue, 12 Nov 2024 21:58:38 +0000 Subject: [PATCH 1/2] Made graph annotations work for bar charts --- .../javascripts/countly/vue/components/vis.js | 830 ++++++++++-------- 1 file changed, 479 insertions(+), 351 deletions(-) diff --git a/frontend/express/public/javascripts/countly/vue/components/vis.js b/frontend/express/public/javascripts/countly/vue/components/vis.js index 2b516b53f2e..ded07527cd3 100644 --- a/frontend/express/public/javascripts/countly/vue/components/vis.js +++ b/frontend/express/public/javascripts/countly/vue/components/vis.js @@ -462,6 +462,417 @@ } }; + var GraphNotesMixin = { + data: function() { + return { + notes: [], + mergedNotes: [], + }; + }, + computed: { + areNotesHidden: function() { + return this.$store.getters['countlyCommon/getAreNotesHidden']; + } + }, + methods: { + dateChanged: function() { + if (!this.areNotesHidden) { + this.seriesOptions.markPoint.data = []; + var self = this; + setTimeout(() => { + self.getGraphNotes(); + }, 500); + } + }, + 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", + "mmm": "MMM" + //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 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; + } + else if (this.notationSelectedBucket === "daily") { + return countlyCommon.formatDate(moment(graphNoteDate), "D MMM YYYY") || 0; + } + else if (this.notationSelectedBucket === "weekly") { + return "W" + moment(graphNoteDate).isoWeek() + " " + moment(graphNoteDate).isoWeekYear(); + } + else if (this.notationSelectedBucket === "monthly") { + return countlyCommon.formatDate(moment(graphNoteDate), "MMM YYYY"); + } + } + else if (this.category === "push-notification") { + if (this.notationSelectedBucket === "weekly") { + return "W" + moment(graphNoteDate).isoWeek(); + } + else if (this.notationSelectedBucket === "monthly") { + return countlyCommon.formatDate(moment(graphNoteDate), "YYYY MMM"); + } + } + 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 null; + } + var formatType = this.getDateFormat(xAxisLabel); + return countlyCommon.formatDate(moment(ts), formatType) || 0; + } + }, + mergeGraphNotesByDate: function(notes, mergeByWeek) { + var self = this; + const oneDay = 24 * 60 * 60 * 1000; // hours*minutes*seconds*milliseconds + var multiplierCount = 2; + if (this.$refs.echarts && (this.$refs.echarts.getWidth() < 500 && this.$refs.echarts.getWidth() !== 100)) { + multiplierCount = 8; + } + notes.forEach(function(orderedItem) { + orderedItem.dateStr = self.graphNotesTimeConverter(orderedItem.ts); + orderedItem.weekCount = moment(orderedItem.ts).year() - moment(orderedItem.ts).week(); + }); + + if (mergeByWeek) { + for (var k = 1; k < notes.length; k++) { + for (var m = 0; m < k; m++) { + if (notes[k].weekCount === notes[m].weekCount) { + notes[k].dateStr = notes[m].dateStr; + } + } + } + } + + notes.map(function(item) { + item.times = notes.filter(obj => obj.dateStr === item.dateStr).length; + }); + + notes = notes.sort(function(a, b) { + return new Date(b.ts) - new Date(a.ts); + }); + for (var i = 0; i < notes.length - 1; i++) { + if ((i !== notes.length - 1) && (Math.round(Math.abs((notes[i].ts - notes[i + 1].ts) / oneDay)) > 0 && Math.round(Math.abs((notes[i].ts - notes[i + 1].ts) / oneDay)) < multiplierCount)) { + notes[i].hasCloseDate = true; + } + } + return notes; + }, + graphNotesTooltipFormatter: function(arr, params) { + 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) { + template = '
\ + \ + \ + \ +
\ +
'; + } + template += '
\ +
#' + this.sanitizeHtml(filteredNotes[i].indicator) + '
\ +
\ +
\ +
' + this.sanitizeHtml(filteredNotes[i].owner_name) + '
\ +
' + moment(filteredNotes[i].ts).format("MMM D, YYYY hh:mm A") + '
\ +
\ +
\ + ' + this.sanitizeHtml(filteredNotes[i].noteType) + '\ +
\ +
\ +
' + this.sanitizeHtml(filteredNotes[i].note) + '
\ +
'; + if (i === filteredNotes.length) { + template = "
"; + } + } + } + else { + template += '
\ +
\ +
\ +
' + this.sanitizeHtml(params.data.note.owner_name) + '
\ +
' + moment(params.data.note.ts).format("MMM D, YYYY hh:mm A") + '
\ +
\ +
\ + \ + \ + \ + ' + this.sanitizeHtml(params.data.note.noteType) + '\ +
\ +
\ +
' + this.sanitizeHtml(params.data.note.note) + '
\ +
'; + } + return template; + }, + weekCountToDate: function(year, week, day) { + const firstDayOfYear = new Date(year, 0, 1); + const days = 2 + day + (week - 1) * 7 - firstDayOfYear.getDay(); + return new Date(year, 0, days); + }, + graphNotesFilterChecks: function() { + var returnedObj = {}; + var filter = {}; + var appIds = [countlyCommon.ACTIVE_APP_ID]; + if (this.$parent && this.$parent.data) { + if (this.$parent.data.apps) { + appIds = this.$parent.data.apps; + } + if (this.$parent.data.custom_period && this.$parent.data.custom_period.length) { + if (typeof this.$parent.data.custom_period === "string") { + var convertedTimeObj = countlyCommon.getPeriodObj(this.$parent.data.custom_period); + filter.customPeriod = [convertedTimeObj.start, convertedTimeObj.end]; + } + else if (Array.isArray(this.$parent.data.custom_period)) { + filter.customPeriod = [this.$parent.data.custom_period[0], this.$parent.data.custom_period[1]]; + } + } + } + + if ((this.category === "formulas" || this.category === "drill") && (this.$parent && this.$parent.data)) { + var xAxisLabels = this.option.xAxis.data; + var customPeriodStartDate; + var customPeriodEndDate; + if (this.$parent.data.bucket === "daily") { + customPeriodStartDate = new Date(xAxisLabels[0]).getTime(); + customPeriodEndDate = new Date(xAxisLabels[xAxisLabels.length - 1]).setHours(23, 59); + filter.customPeriod = [customPeriodStartDate, customPeriodEndDate]; + } + else if (this.$parent.data.bucket === "weekly") { + customPeriodStartDate = this.weekCountToDate(xAxisLabels[0].split(' ')[1], xAxisLabels[0].split(' ')[0].split('W')[1], 7); + 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") { + customPeriodStartDate = new Date(xAxisLabels[0]).getTime(); + customPeriodEndDate = new Date(xAxisLabels[xAxisLabels.length - 1]).getTime(); + customPeriodEndDate = moment(customPeriodEndDate).endOf('month')._d.valueOf(); + filter.customPeriod = [customPeriodStartDate, customPeriodEndDate]; + } + } + returnedObj.appIds = appIds; + returnedObj.customPeriod = filter; + return returnedObj; + }, + getGraphNotes: function() { + if (!this.hideNotation && !this.areNotesHidden) { + var self = this; + var chartHeight = 300; + var yAxisHeight = ''; + var filter = {}; + var mergeByDate = false; + + filter = this.graphNotesFilterChecks(); + countlyCommon.getGraphNotes(filter.appIds, filter.customPeriod /*{category: categories.length ? categories : [this.category]}*/).then(function(data) { + self.notes = data.aaData; + }).then(function() { + self.seriesOptions.markPoint.data = []; + if (self.notes && self.notes.length) { + if (self.$refs.echarts) { + chartHeight = self.$refs.echarts.getHeight(); + } + // if custom range date is bigger than 30days, then group notes by week + if ((Array.isArray(countlyCommon.periodObj._period) && countlyCommon.periodObj.currentPeriodArr.length > 30)) { + mergeByDate = true; + } + self.mergedNotes = self.mergeGraphNotesByDate(self.notes, mergeByDate); + self.mergedNotes.forEach(function(note, index) { + if (note.dateStr) { + if (chartHeight < 250 && chartHeight !== 100) { + if (note.hasCloseDate && note.times === 1) { + yAxisHeight = '65%'; + } + else { + yAxisHeight = '60%'; + } + } + else { + if (note.hasCloseDate && note.times === 1) { + yAxisHeight = '80%'; + } + else { + yAxisHeight = '75%'; + } + } + } + + self.seriesOptions.markPoint.data.push({ + note: note, + value: note.times > 1 ? ' ' : note.indicator, + xAxis: note.dateStr, + y: yAxisHeight, + symbolRotate: -20, + symbolSize: note.indicator.length === 1 ? 30 : 40, + }); + + self.seriesOptions.markPoint.data[index].itemStyle = { + color: note.times > 1 ? countlyGraphNotesCommon.COLOR_TAGS[0].label : countlyGraphNotesCommon.COLOR_TAGS.find(x=>x.value === note.color).label + }; + self.seriesOptions.markPoint.emphasis.itemStyle = { + borderColor: "#c5c5c5", + borderWidth: 4 + }; + }); + + self.seriesOptions.markPoint.tooltip = { + transitionDuration: 1, + show: true, + trigger: "item", + confine: true, + extraCssText: 'z-index: 1000', + alwaysShowContent: true, + formatter: function(params) { + return self.graphNotesTooltipFormatter(self.mergedNotes, params); + } + }; + } + }); + } + else { + this.seriesOptions.markPoint.data = []; + } + }, + onClick: function() { + if (!document.querySelectorAll(".graph-overlay").length) { + var overlay = document.createElement("div"); + overlay.setAttribute("class", "graph-overlay"); + overlay.setAttribute("style", "width: 100%; height: 100%; top: 0px; background-color: black; position: absolute; z-index: 999; opacity: 0; display: none;"); + var echarts = document.querySelectorAll('.echarts'); + for (var i = 0; i < echarts.length; i++) { + if (typeof echarts[i] !== 'undefined') { + echarts[i].appendChild(overlay.cloneNode(true)); + } + } + } + if (document.querySelectorAll(".graph-overlay")) { + for (var j = 0; j < document.querySelectorAll(".graph-overlay").length; j++) { + document.querySelectorAll(".graph-overlay")[j].style.display = "block"; + } + } + if (document.querySelectorAll(".graph-notes-tooltip")) { + for (var z = 0; z < document.querySelectorAll(".graph-notes-tooltip").length; z++) { + document.querySelectorAll(".graph-notes-tooltip")[z].parentNode.style.opacity = 1; + } + } + + if (document.querySelectorAll(".graph-tooltip-wrapper")) { + for (var k = 0; k < document.querySelectorAll(".graph-tooltip-wrapper").length; k++) { + document.querySelectorAll(".graph-tooltip-wrapper")[k].parentNode.style.opacity = 1; + } + } + + + if (document.querySelector('x-vue-echarts div .graph-notes-tooltip')) { + localStorage.setItem('showTooltipFlag', true); + document.querySelector('x-vue-echarts div .graph-notes-tooltip').parentNode.addEventListener('mouseleave', window.hideTooltip, true); + } + + if (document.querySelector('x-vue-echarts div .graph-tooltip-wrapper')) { + localStorage.setItem('showTooltipFlag', true); + document.querySelector('x-vue-echarts div .graph-tooltip-wrapper').parentNode.addEventListener('mouseleave', window.hideTooltip, true); + } + countlyCommon.DISABLE_AUTO_REFRESH = true; + } + }, + watch: { + notationSelectedBucket: function() { + this.seriesOptions.markPoint.data = []; + var self = this; + setTimeout(() => { + self.getGraphNotes(); + }, 0); + }, + category: function() { + this.getGraphNotes(); + }, + areNotesHidden: function() { + this.getGraphNotes(); + } + }, + created: function() { + this.getGraphNotes(); + }, + mounted: function() { + window.hideGraphTooltip = function() { + if (typeof document.querySelectorAll(".graph-overlay") !== 'undefined') { + for (var j = 0; j < document.querySelectorAll(".graph-overlay").length; j++) { + document.querySelectorAll(".graph-overlay")[j].style.display = "none"; + } + } + if (typeof document.querySelectorAll(".graph-notes-tooltip") !== 'undefined') { + for (var z = 0; z < document.querySelectorAll(".graph-notes-tooltip").length; z++) { + document.querySelectorAll(".graph-notes-tooltip")[z].parentNode.style.opacity = 0; + } + } + + if (typeof document.querySelectorAll(".graph-tooltip-wrapper") !== 'undefined') { + for (var k = 0; k < document.querySelectorAll(".graph-tooltip-wrapper").length; k++) { + document.querySelectorAll(".graph-tooltip-wrapper")[k].parentNode.style.opacity = 0; + } + } + + + if (document.querySelector('x-vue-echarts div .graph-notes-tooltip')) { + localStorage.removeItem('showTooltipFlag'); + } + + if (document.querySelector('x-vue-echarts div .graph-tooltip-wrapper')) { + localStorage.removeItem('showTooltipFlag'); + } + countlyCommon.DISABLE_AUTO_REFRESH = false; + }; + + window.hideTooltip = function(event) { + if (localStorage.getItem('showTooltipFlag')) { + event.stopImmediatePropagation(); + } + return; + }; + } + }; /* Use xAxis.axisLabel.showMinLabel to change visibility of minimum label @@ -903,7 +1314,8 @@ var BaseLineChart = BaseChart.extend({ mixins: [ - countlyVue.mixins.autoRefresh + countlyVue.mixins.autoRefresh, + GraphNotesMixin ], props: { showToggle: { @@ -936,7 +1348,6 @@ data: function() { return { mixinOptions: {}, - notes: [], seriesOptions: { type: 'line', markPoint: { @@ -956,261 +1367,32 @@ }, animation: false }, - }, - mergedNotes: [], - }; - }, - computed: { - mergedOptions: function() { - var opt = _mergeWith({}, this.baseOptions, this.mixinOptions, this.option, mergeWithCustomizer); - var series = opt.series || []; - for (var i = 0; i < series.length; i++) { - series[i] = _mergeWith({}, this.baseSeriesOptions, this.seriesOptions, series[i]); - } - this.setCalculatedLegendData(opt, series); - - opt.series = series; - - if (this.legendOptions.position !== "bottom") { - opt.grid.right = 0; - } - - if (typeof window.hideGraphTooltip !== "undefined") { - window.hideGraphTooltip(); - } - - return opt; - }, - areNotesHidden: function() { - return this.$store.getters['countlyCommon/getAreNotesHidden']; - } - }, - methods: { - dateChanged: function() { - if (!this.areNotesHidden) { - this.seriesOptions.markPoint.data = []; - var self = this; - setTimeout(() => { - self.getGraphNotes(); - }, 500); - } - }, - 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", - "mmm": "MMM" - //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 graphNoteDate = new Date(ts); - if (this.seriesType === "bar") { - return null; - } - else if (this.category === "drill" || this.category === "formulas") { - if (this.notationSelectedBucket === "hourly") { - return countlyCommon.formatDate(moment(graphNoteDate), "D MMM YYYY hh:00") || 0; - } - else if (this.notationSelectedBucket === "daily") { - return countlyCommon.formatDate(moment(graphNoteDate), "D MMM YYYY") || 0; - } - else if (this.notationSelectedBucket === "weekly") { - return "W" + moment(graphNoteDate).isoWeek() + " " + moment(graphNoteDate).isoWeekYear(); - } - else if (this.notationSelectedBucket === "monthly") { - return countlyCommon.formatDate(moment(graphNoteDate), "MMM YYYY"); - } - } - else if (this.category === "push-notification") { - if (this.notationSelectedBucket === "weekly") { - return "W" + moment(graphNoteDate).isoWeek(); - } - else if (this.notationSelectedBucket === "monthly") { - return countlyCommon.formatDate(moment(graphNoteDate), "YYYY MMM"); - } - } - 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 null; - } - var formatType = this.getDateFormat(xAxisLabel); - return countlyCommon.formatDate(moment(ts), formatType) || 0; - } - }, - mergeGraphNotesByDate: function(notes, mergeByWeek) { - var self = this; - const oneDay = 24 * 60 * 60 * 1000; // hours*minutes*seconds*milliseconds - var multiplierCount = 2; - if (this.$refs.echarts && (this.$refs.echarts.getWidth() < 500 && this.$refs.echarts.getWidth() !== 100)) { - multiplierCount = 8; - } - notes.forEach(function(orderedItem) { - orderedItem.dateStr = self.graphNotesTimeConverter(orderedItem.ts); - orderedItem.weekCount = moment(orderedItem.ts).year() - moment(orderedItem.ts).week(); - }); - - if (mergeByWeek) { - for (var k = 1; k < notes.length; k++) { - for (var m = 0; m < k; m++) { - if (notes[k].weekCount === notes[m].weekCount) { - notes[k].dateStr = notes[m].dateStr; - } - } - } - } - - notes.map(function(item) { - item.times = notes.filter(obj => obj.dateStr === item.dateStr).length; - }); - - notes = notes.sort(function(a, b) { - return new Date(b.ts) - new Date(a.ts); - }); - for (var i = 0; i < notes.length - 1; i++) { - if ((i !== notes.length - 1) && (Math.round(Math.abs((notes[i].ts - notes[i + 1].ts) / oneDay)) > 0 && Math.round(Math.abs((notes[i].ts - notes[i + 1].ts) / oneDay)) < multiplierCount)) { - notes[i].hasCloseDate = true; - } - } - return notes; - }, - graphNotesTooltipFormatter: function(arr, params) { - 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; + }, + }; + }, + computed: { + mergedOptions: function() { + var opt = _mergeWith({}, this.baseOptions, this.mixinOptions, this.option, mergeWithCustomizer); + var series = opt.series || []; + for (var i = 0; i < series.length; i++) { + series[i] = _mergeWith({}, this.baseSeriesOptions, this.seriesOptions, series[i]); } + this.setCalculatedLegendData(opt, series); + opt.series = series; - if (minimizeTooltip) { - conditionalClassName = 'graph-notes-tooltip minimize'; - } - else if (!minimizeTooltip && filteredNotes.length > 0) { - conditionalClassName = 'graph-notes-tooltip bu-mb-4 bu-mx-2'; + if (this.legendOptions.position !== "bottom") { + opt.grid.right = 0; } - if (filteredNotes.length > 0) { - for (var i = 0; i < filteredNotes.length; i++) { - if (i === 0) { - template = '
\ - \ - \ - \ -
\ -
'; - } - template += '
\ -
#' + this.sanitizeHtml(filteredNotes[i].indicator) + '
\ -
\ -
\ -
' + this.sanitizeHtml(filteredNotes[i].owner_name) + '
\ -
' + moment(filteredNotes[i].ts).format("MMM D, YYYY hh:mm A") + '
\ -
\ -
\ - ' + this.sanitizeHtml(filteredNotes[i].noteType) + '\ -
\ -
\ -
' + this.sanitizeHtml(filteredNotes[i].note) + '
\ -
'; - if (i === filteredNotes.length) { - template = "
"; - } - } - } - else { - template += '
\ -
\ -
\ -
' + this.sanitizeHtml(params.data.note.owner_name) + '
\ -
' + moment(params.data.note.ts).format("MMM D, YYYY hh:mm A") + '
\ -
\ -
\ - \ - \ - \ - ' + this.sanitizeHtml(params.data.note.noteType) + '\ -
\ -
\ -
' + this.sanitizeHtml(params.data.note.note) + '
\ -
'; - } - return template; - }, - weekCountToDate: function(year, week, day) { - const firstDayOfYear = new Date(year, 0, 1); - const days = 2 + day + (week - 1) * 7 - firstDayOfYear.getDay(); - return new Date(year, 0, days); - }, - graphNotesFilterChecks: function() { - var returnedObj = {}; - var filter = {}; - var appIds = [countlyCommon.ACTIVE_APP_ID]; - if (this.$parent && this.$parent.data) { - if (this.$parent.data.apps) { - appIds = this.$parent.data.apps; - } - if (this.$parent.data.custom_period && this.$parent.data.custom_period.length) { - if (typeof this.$parent.data.custom_period === "string") { - var convertedTimeObj = countlyCommon.getPeriodObj(this.$parent.data.custom_period); - filter.customPeriod = [convertedTimeObj.start, convertedTimeObj.end]; - } - else if (Array.isArray(this.$parent.data.custom_period)) { - filter.customPeriod = [this.$parent.data.custom_period[0], this.$parent.data.custom_period[1]]; - } - } + if (typeof window.hideGraphTooltip !== "undefined") { + window.hideGraphTooltip(); } - if ((this.category === "formulas" || this.category === "drill") && (this.$parent && this.$parent.data)) { - var xAxisLabels = this.option.xAxis.data; - var customPeriodStartDate; - var customPeriodEndDate; - if (this.$parent.data.bucket === "daily") { - customPeriodStartDate = new Date(xAxisLabels[0]).getTime(); - customPeriodEndDate = new Date(xAxisLabels[xAxisLabels.length - 1]).setHours(23, 59); - filter.customPeriod = [customPeriodStartDate, customPeriodEndDate]; - } - else if (this.$parent.data.bucket === "weekly") { - customPeriodStartDate = this.weekCountToDate(xAxisLabels[0].split(' ')[1], xAxisLabels[0].split(' ')[0].split('W')[1], 7); - 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") { - customPeriodStartDate = new Date(xAxisLabels[0]).getTime(); - customPeriodEndDate = new Date(xAxisLabels[xAxisLabels.length - 1]).getTime(); - customPeriodEndDate = moment(customPeriodEndDate).endOf('month')._d.valueOf(); - filter.customPeriod = [customPeriodStartDate, customPeriodEndDate]; - } - } - returnedObj.appIds = appIds; - returnedObj.customPeriod = filter; - return returnedObj; - }, + return opt; + } + }, + methods: { getGraphNotes: function() { if (!this.hideNotation && !this.areNotesHidden) { var self = this; @@ -1295,103 +1477,7 @@ else { this.seriesOptions.markPoint.data = []; } - }, - onClick: function() { - if (!document.querySelectorAll(".graph-overlay").length) { - var overlay = document.createElement("div"); - overlay.setAttribute("class", "graph-overlay"); - overlay.setAttribute("style", "width: 100%; height: 100%; top: 0px; background-color: black; position: absolute; z-index: 999; opacity: 0; display: none;"); - var echarts = document.querySelectorAll('.echarts'); - for (var i = 0; i < echarts.length; i++) { - if (typeof echarts[i] !== 'undefined') { - echarts[i].appendChild(overlay.cloneNode(true)); - } - } - } - if (document.querySelectorAll(".graph-overlay")) { - for (var j = 0; j < document.querySelectorAll(".graph-overlay").length; j++) { - document.querySelectorAll(".graph-overlay")[j].style.display = "block"; - } - } - if (document.querySelectorAll(".graph-notes-tooltip")) { - for (var z = 0; z < document.querySelectorAll(".graph-notes-tooltip").length; z++) { - document.querySelectorAll(".graph-notes-tooltip")[z].parentNode.style.opacity = 1; - } - } - - if (document.querySelectorAll(".graph-tooltip-wrapper")) { - for (var k = 0; k < document.querySelectorAll(".graph-tooltip-wrapper").length; k++) { - document.querySelectorAll(".graph-tooltip-wrapper")[k].parentNode.style.opacity = 1; - } - } - - - if (document.querySelector('x-vue-echarts div .graph-notes-tooltip')) { - localStorage.setItem('showTooltipFlag', true); - document.querySelector('x-vue-echarts div .graph-notes-tooltip').parentNode.addEventListener('mouseleave', window.hideTooltip, true); - } - - if (document.querySelector('x-vue-echarts div .graph-tooltip-wrapper')) { - localStorage.setItem('showTooltipFlag', true); - document.querySelector('x-vue-echarts div .graph-tooltip-wrapper').parentNode.addEventListener('mouseleave', window.hideTooltip, true); - } - countlyCommon.DISABLE_AUTO_REFRESH = true; - } - }, - watch: { - notationSelectedBucket: function() { - this.seriesOptions.markPoint.data = []; - var self = this; - setTimeout(() => { - self.getGraphNotes(); - }, 0); - }, - category: function() { - this.getGraphNotes(); - }, - areNotesHidden: function() { - this.getGraphNotes(); } - }, - created: function() { - this.getGraphNotes(); - }, - mounted: function() { - window.hideGraphTooltip = function() { - if (typeof document.querySelectorAll(".graph-overlay") !== 'undefined') { - for (var j = 0; j < document.querySelectorAll(".graph-overlay").length; j++) { - document.querySelectorAll(".graph-overlay")[j].style.display = "none"; - } - } - if (typeof document.querySelectorAll(".graph-notes-tooltip") !== 'undefined') { - for (var z = 0; z < document.querySelectorAll(".graph-notes-tooltip").length; z++) { - document.querySelectorAll(".graph-notes-tooltip")[z].parentNode.style.opacity = 0; - } - } - - if (typeof document.querySelectorAll(".graph-tooltip-wrapper") !== 'undefined') { - for (var k = 0; k < document.querySelectorAll(".graph-tooltip-wrapper").length; k++) { - document.querySelectorAll(".graph-tooltip-wrapper")[k].parentNode.style.opacity = 0; - } - } - - - if (document.querySelector('x-vue-echarts div .graph-notes-tooltip')) { - localStorage.removeItem('showTooltipFlag'); - } - - if (document.querySelector('x-vue-echarts div .graph-tooltip-wrapper')) { - localStorage.removeItem('showTooltipFlag'); - } - countlyCommon.DISABLE_AUTO_REFRESH = false; - }; - - window.hideTooltip = function(event) { - if (localStorage.getItem('showTooltipFlag')) { - event.stopImmediatePropagation(); - } - return; - }; } }); @@ -1408,12 +1494,33 @@ because the y axis does not adjusts itself when the series changes */ var BaseBarChart = BaseChart.extend({ + mixins: [ + countlyVue.mixins.autoRefresh, + GraphNotesMixin + ], data: function() { return { mixinOptions: {}, seriesOptions: { - type: 'bar' - } + type: 'bar', + markPoint: { + data: [], + label: { + normal: { + show: true, + color: "rgba(255, 251, 251, 1)", + fontWeight: "500", + align: "center", + padding: [1, 1, 1, 2], + }, + }, + emphasis: { + itemStyle: { + } + }, + animation: false + }, + }, }; }, computed: { @@ -1820,7 +1927,7 @@ }, methods: { refreshNotes: function() { - if (this.$refs.echartRef && this.$refs.echartRef.seriesOptions.type === "line") { + if (this.$refs.echartRef) { this.$refs.echartRef.getGraphNotes(); } }, @@ -2687,6 +2794,11 @@ type: String, default: "cly-chart-bar-test-id", required: false + }, + hideNotation: { + type: Boolean, + default: true, + required: false } }, components: { @@ -2703,9 +2815,24 @@ return opt; } }, + methods: { + refresh: function() { + if (!this.areNotesHidden) { + this.getGraphNotes(); + } + }, + notesVisibility: function() { + if (!this.areNotesHidden) { + this.getGraphNotes(); + } + else { + this.seriesOptions.markPoint.data = []; + } + } + }, template: '
\
\ - \ + \ \ @@ -2720,7 +2847,8 @@ :option="chartOptions"\ :autoresize="autoresize"\ @finished="onChartFinished"\ - @datazoom="onDataZoom">\ + @datazoom="onDataZoom"\ + @click="onClick">\ \
\ \ From 555c2e3c319c6f4f2d43567a60ec68fb8251829a Mon Sep 17 00:00:00 2001 From: ayasayadi1 Date: Tue, 12 Nov 2024 21:58:55 +0000 Subject: [PATCH 2/2] Show graph annotations on analytics stacked bar charts --- .../frontend/public/templates/widgets/analytics/widget.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plugins/dashboards/frontend/public/templates/widgets/analytics/widget.html b/plugins/dashboards/frontend/public/templates/widgets/analytics/widget.html index 6da38f9f9f6..ab0321d70f5 100644 --- a/plugins/dashboards/frontend/public/templates/widgets/analytics/widget.html +++ b/plugins/dashboards/frontend/public/templates/widgets/analytics/widget.html @@ -57,7 +57,7 @@

{{formatNumber(number.total)}}

- +