Merge pull request #146 from jenkinsci/clickable-chart

Add an event listener for chart click events
jenkinsci · Aug 4, 2021 · ab29e6e · ab29e6e
2 parents 4d0f861 + 653d6ae
commit ab29e6e
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 4 deletions.
diff --git a/src/main/webapp/css/jenkins-style.css b/src/main/webapp/css/jenkins-style.css
@@ -3,8 +3,6 @@
     min-height: 256px;
     min-width: 256px;
     display: block;
-    padding-left: 20px;
-    padding-right: 20px;
 }
 
 .range-slider {

diff --git a/src/main/webapp/js/configurable-trend-chart.js b/src/main/webapp/js/configurable-trend-chart.js
@@ -4,9 +4,12 @@
  *
  * @param {String} chartDivId - the ID of the div where the chart should be shown in
  * @param {String} model - the line chart model
- * @param {String} settingsDialogId - the optional ID of the div that provides a settings dialog
+ * @param {String} settingsDialogId - the optional ID of the div that provides a settings dialog (might be set to null
+ *     if there is no such dialog)
+ * @param {String} chartClickedEventHandler - the optional ID of the event handler that receives click events
  */
-EChartsJenkinsApi.prototype.renderConfigurableZoomableTrendChart = function (chartDivId, model, settingsDialogId) {
+EChartsJenkinsApi.prototype.renderConfigurableZoomableTrendChart
+    = function (chartDivId, model, settingsDialogId, chartClickedEventHandler) {
     const chartModel = JSON.parse(model);
     const chartPlaceHolder = document.getElementById(chartDivId);
     const chart = echarts.init(chartPlaceHolder);
@@ -15,6 +18,13 @@ EChartsJenkinsApi.prototype.renderConfigurableZoomableTrendChart = function (cha
     const textColor = getComputedStyle(document.body).getPropertyValue('--text-color') || '#333';
     const showSettings = document.getElementById(settingsDialogId);
 
+    let selectedXAxisElement; // global variable: the tooltip formatter will change this value while hoovering
+    chartPlaceHolder.onclick = function () {
+        if (selectedXAxisElement !== null && chartClickedEventHandler !== null) {
+            chartClickedEventHandler(selectedXAxisElement);
+        }
+    };
+
     const options = {
         tooltip: {
             trigger: 'axis',
@@ -23,6 +33,33 @@ EChartsJenkinsApi.prototype.renderConfigurableZoomableTrendChart = function (cha
                 label: {
                     backgroundColor: '#6a7985'
                 }
+            },
+            formatter: function (params, ticket, callback) {
+                if (params.componentType === 'legend') {
+                    selectedXAxisElement = null;
+                    return params.name;
+                }
+                const builds = chartModel.buildNumbers;
+                const labels = chartModel.domainAxisLabels;
+                let selectedBuild;
+                for (let i = 0; i < builds.length; i++) {
+                    if (params[0].name === labels[i]) {
+                        selectedBuild = builds[i];
+                        break;
+                    }
+                }
+                if (selectedBuild) {
+                    selectedXAxisElement = selectedBuild;
+                }
+                else {
+                    selectedXAxisElement = params[0].name;
+                }
+                let text = chartModel.domainAxisItemName + ' `' + params[0].name.escapeHTML() + '`';
+                for (let i = 0, l = params.length; i < l; i++) {
+                    text += '<br/>' + params[i].marker + params[i].seriesName + ' : ' + params[i].value;
+                }
+                text += '<br />';
+                return '<div style="text-align:left">' + text + '</div>';
             }
         },
         toolbox: {