Browse Source

HUE-8649 [frontend] Add Y axis labels to the performance graph

Johan Ahlen 7 years ago
parent
commit
0bc55aa5c9

+ 40 - 0
desktop/core/src/desktop/templates/ko_components/ko_performance_graph.mako

@@ -364,6 +364,45 @@
                 .attr('transform', 'translate(0,' + subHeight + ')')
                 .attr('transform', 'translate(0,' + subHeight + ')')
                 .call(subXAxis);
                 .call(subXAxis);
 
 
+        mainGroup
+                .append("text")
+                .attr("class", "y-label y-label-queries")
+                .attr("transform", "rotate(-90)")
+                .attr("x", - mainHeight/2)
+                .attr("y", - 45)
+                .attr("dy", "1em")
+                .style("text-anchor", "middle");
+
+        mainGroup
+                .append("text")
+                .attr("class", "y-label y-label-resources")
+                .attr("transform", "rotate(90)")
+                .attr("x", mainHeight/2)
+                .attr("y", - width - 55)
+                .attr("dy", "1em")
+                .style("text-anchor", "middle");
+
+        var updateAxesLabels = function () {
+          var queriesLabel = '';
+          var resourcesLabel = '';
+          for (var i = 0; i < graphs.length; i++) {
+            if (i === 0 && graphs[i].enabled()) {
+              queriesLabel = graphs[i].label;
+            } else if (graphs[i].enabled()) {
+              if (resourcesLabel !== '') {
+                resourcesLabel += ' ';
+              }
+              resourcesLabel += graphs[i].label;
+            }
+          }
+          mainGroup.select('.y-label-queries').text(queriesLabel);
+          mainGroup.select('.y-label-resources').text(resourcesLabel);
+          mainGroup.select('.main-axis-query-count').attr('display', queriesLabel === '' ? 'none' : null);
+          mainGroup.select('.main-axis-percentage').attr('display', resourcesLabel === '' ? 'none' : null);
+        };
+
+        updateAxesLabels();
+
 
 
         // Add brush
         // Add brush
         var brush = d3.brushX()
         var brush = d3.brushX()
@@ -458,6 +497,7 @@
           var legendSerie = legend.append('g')
           var legendSerie = legend.append('g')
                   .on('click', function (d, j) {
                   .on('click', function (d, j) {
                     graph.toggle();
                     graph.toggle();
+                    updateAxesLabels();
                   });
                   });
 
 
           legendSerie.append('circle')
           legendSerie.append('circle')