Bläddra i källkod

HUE-8178 [charts] Fixed chart legend missing x axis name

jdesjean 7 år sedan
förälder
incheckning
7ee75e28b0

+ 5 - 0
desktop/core/src/desktop/static/desktop/js/ko.charts.js

@@ -959,6 +959,7 @@
     var _enableSelection = typeof _options.enableSelection !== 'undefined' ? typeof _options.enableSelection === 'function' ? _options.enableSelection() : _options.enableSelection : true;
     _enableSelection = _enableSelection && numeric(_datum);
     var _hideStacked = _options.hideStacked !== null ? typeof _options.hideStacked === 'function' ? _options.hideStacked() : _options.hideStacked : false;
+    var _displayValuesInLegend = _options.displayValuesInLegend !== null ? typeof _options.displayValuesInLegend === 'function' ? _options.displayValuesInLegend() : _options.displayValuesInLegend : false;
     var fHideSelection = _isPivot || _hideSelection ? _chart.hideSelection : _chart.showSelection;
     if (fHideSelection) {
       fHideSelection.call(_chart);
@@ -971,6 +972,10 @@
     if (fHideStacked) {
       fHideStacked.call(_chart);
     }
+    var fDisplayValuesInLegend = _displayValuesInLegend ? _chart.hideStacked : _chart.showStacked;
+    if (_chart.displayValuesInLegend) {
+      _chart.displayValuesInLegend(_displayValuesInLegend);
+    }
     if (_chart.selectBars) {
       var _field = (typeof _options.field == "function") ? _options.field() : _options.field;
       var bHasSelection = false;

+ 10 - 4
desktop/core/src/desktop/static/desktop/js/nv.d3.lineWithBrushChart.js

@@ -47,7 +47,7 @@ nv.models.lineWithBrushChart = function() {
     , useInteractiveGuideline = false
     , tooltips = true
     , tooltip = null
-    , displayValuesInLegend = true
+    , displayValuesInLegend = false
     , tooltipSimple = function(value) {
       return '<h3>' + hueUtils.htmlEncode(value.key) + '</h3>' +
         '<p>' + hueUtils.htmlEncode(value.x) + '</p>';
@@ -105,13 +105,13 @@ nv.models.lineWithBrushChart = function() {
       values = (e.list || [e]).map(function (e) {
         var x = xAxis.tickFormat()(lines.x()(e.point, e.pointIndex)),
         y = yAxis.tickFormat()(lines.y()(e.point, e.pointIndex));
-        return {x: x, y: y, key: displayValuesInLegend ? e.point.obj.field : e.series.key};
+        return {x: x, y: y, key: displayValuesInLegend && (e.point.obj.field || e.point.obj.fq_fields && e.point.obj.fq_fields[0]) || e.series.key};
       });
     } else {
       values = tooltip((e.list || [e]).map(function (e) {
         var x = lines.x()(e.point, e.pointIndex),
         y = lines.y()(e.point, e.pointIndex);
-        return {x: x, y: y, key: displayValuesInLegend ? e.point.obj.field : e.series.key};
+        return {x: x, y: y, key: displayValuesInLegend && (e.point.obj.field || e.point.obj.fq_fields && e.point.obj.fq_fields[0]) || e.series.key};
       }));
     }
 
@@ -133,7 +133,7 @@ nv.models.lineWithBrushChart = function() {
 
       var availableWidth = (width  || parseInt(container.style('width')) || 960)
                              - margin.left - margin.right,
-          availableChartWidth = Math.max(availableWidth - legendWidth, 0),
+          availableChartWidth = Math.max(availableWidth - showLegend * legendWidth, 0),
           availableHeight = (height || parseInt(container.style('height')) || 400)
                              - margin.top - margin.bottom;
 
@@ -921,6 +921,12 @@ nv.models.lineWithBrushChart = function() {
     return chart;
   };
 
+  chart.displayValuesInLegend = function(_) {
+    if (!arguments.length) return displayValuesInLegend;
+    displayValuesInLegend = _;
+    return chart;
+  };
+
   chart.brush = function(_) {
     if (!arguments.length) return brush;
     brush = _;

+ 10 - 4
desktop/core/src/desktop/static/desktop/js/nv.d3.multiBarWithBrushChart.js

@@ -50,7 +50,7 @@ nv.models.multiBarWithBrushChart = function() {
     , tooltips = true
     , tooltip = null
     , minTickWidth = 60
-    , displayValuesInLegend = true
+    , displayValuesInLegend = false
     , tooltipContent = null
     , tooltipSimple = function(value) {
       return '<h3>' + hueUtils.htmlEncode(value.key) + '</h3>' +
@@ -118,13 +118,13 @@ nv.models.multiBarWithBrushChart = function() {
       values = (e.list || [e]).map(function (e) {
         var x = xAxis.tickFormat()(multibar.x()(e.point, e.pointIndex)),
         y = yAxis.tickFormat()(multibar.y()(e.point, e.pointIndex));
-        return {x: x, y: y, key: displayValuesInLegend ? e.point.obj.field : e.series.key};
+        return {x: x, y: y, key: displayValuesInLegend && (e.point.obj.field || e.point.obj.fq_fields && e.point.obj.fq_fields[0]) || e.series.key};
       });
     } else {
       values = tooltipContent((e.list || [e]).map(function (e) {
         var x = multibar.x()(e.point, e.pointIndex),
         y = multibar.y()(e.point, e.pointIndex);
-        return {x: x, y: y, key: displayValuesInLegend ? e.point.obj.field : e.series.key};
+        return {x: x, y: y, key: displayValuesInLegend && (e.point.obj.field || e.point.obj.fq_fields && e.point.obj.fq_fields[0]) || e.series.key};
       }));
     }
 
@@ -146,7 +146,7 @@ nv.models.multiBarWithBrushChart = function() {
 
       var availableWidth = (width  || parseInt(container.style('width')) || 960)
                              - margin.left - margin.right,
-          availableChartWidth = Math.max(availableWidth - legendWidth, 0),
+          availableChartWidth = Math.max(availableWidth - showLegend * legendWidth, 0),
           availableHeight = (height || parseInt(container.style('height')) || 400)
                              - margin.top - margin.bottom;
 
@@ -1031,6 +1031,12 @@ nv.models.multiBarWithBrushChart = function() {
     return chart;
   };
 
+  chart.displayValuesInLegend = function(_) {
+    if (!arguments.length) return displayValuesInLegend;
+    displayValuesInLegend = _;
+    return chart;
+  };
+
   chart.brush = function(_) {
     if (!arguments.length) return brush;
     brush = _;

+ 4 - 1
desktop/libs/dashboard/src/dashboard/static/dashboard/js/search.ko.js

@@ -2588,7 +2588,10 @@ var SearchViewModel = function (collection_json, query_json, initial_json, has_g
         facet.dimension(new_facet.dimension);
         facet.extraSeries(typeof new_facet.extraSeries != 'undefined' ? new_facet.extraSeries : []);
         facet.hideStacked = ko.computed(function () {
-          return !facet.extraSeries() || !facet.extraSeries().length;
+          return facet.dimension() != 2 && !facet.extraSeries().length;
+        });
+        facet.displayValuesInLegend = ko.computed(function () {
+          return !facet.hideStacked();
         });
         facet.selectedSerie = ko.observable({});
         facet.resultHash(_hash);

+ 6 - 0
desktop/libs/dashboard/src/dashboard/templates/common_search.mako

@@ -1266,6 +1266,7 @@ ${ dashboard.layout_skeleton(suffix='search') }
         type: $root.collection.getFacetById($parent.id()).properties.timelineChartType,
         hideSelection: true,
         hideStacked: hideStacked,
+        displayValuesInLegend: displayValuesInLegend,
         selectedSerie: selectedSerie,
         fqs: $root.query.fqs,
         slot: $root.collection.getFacetById($parent.id()).properties.slot,
@@ -1349,6 +1350,7 @@ ${ dashboard.layout_skeleton(suffix='search') }
       enableSelection: true,
       hideSelection: true,
       hideStacked: hideStacked,
+      displayValuesInLegend: displayValuesInLegend,
       slot: $root.collection.getFacetById($parent.id()).properties.slot,
       transformer: ($data.type == 'range-up' ? barChartRangeUpDataTransformer : barChartDataTransformer),
       onStateChange: function(state){ $root.collection.getFacetById($parent.id()).properties.stacked(state.stacked); },
@@ -1621,6 +1623,7 @@ ${ dashboard.layout_skeleton(suffix='search') }
               enableSelection: true,
               hideSelection: true,
               hideStacked: hideStacked,
+              displayValuesInLegend: displayValuesInLegend,
               slot: $root.collection.getFacetById($parent.id()).properties.slot,
               transformer: barChartDataTransformer2,
               onStateChange: function(state){ $root.collection.getFacetById($parent.id()).properties.stacked(state.stacked); },
@@ -1649,6 +1652,7 @@ ${ dashboard.layout_skeleton(suffix='search') }
               enableSelection: true,
               hideSelection: true,
               hideStacked: hideStacked,
+              displayValuesInLegend: displayValuesInLegend,
               slot: $root.collection.getFacetById($parent.id()).properties.slot,
               transformer: pivotChartDataTransformer,
               onSelectRange: function(from, to){ $root.collection.selectTimelineFacet2({from: from, to: to, cat: field, widget_id: $parent.id()}) },
@@ -1670,6 +1674,7 @@ ${ dashboard.layout_skeleton(suffix='search') }
             hideSelection: true,
             hideStacked: hideStacked,
             selectedSerie: selectedSerie,
+            displayValuesInLegend: displayValuesInLegend,
             slot: $root.collection.getFacetById($parent.id()).properties.facets()[0].slot,
             onSelectRange: function(from, to){ $root.collection.selectTimelineFacet2({from: from, to: to, cat: field, widget_id: $parent.id()}) },
             onStateChange: function(state){ $root.collection.getFacetById($parent.id()).properties.stacked(state.stacked); },
@@ -1702,6 +1707,7 @@ ${ dashboard.layout_skeleton(suffix='search') }
             enableSelection: true,
             hideSelection: true,
             hideStacked: hideStacked,
+            displayValuesInLegend: displayValuesInLegend,
             selectedSerie: selectedSerie,
             slot: $root.collection.getFacetById($parent.id()).properties.slot,
             onSelectRange: function(from, to){ $root.collection.selectTimelineFacet2({from: from, to: to, cat: field, widget_id: $parent.id()}) },