浏览代码

HUE-8408 [report] Add message for missing configuration.

jdesjean 7 年之前
父节点
当前提交
2928a2f

+ 7 - 7
desktop/core/src/desktop/static/desktop/js/ko.charts.js

@@ -43,9 +43,6 @@
       window.setTimeout(function(){
         var _options = valueAccessor();
         var _data = _options.transformer(_options.data);
-        _data = _data.filter(function (val) {
-          return val.value >= 0;
-        });
         $(element).css("marginLeft", "auto");
         $(element).css("marginRight", "auto");
         if (typeof _options.maxWidth != "undefined") {
@@ -76,7 +73,7 @@
                 .tooltipContent(function (key, y, e, graph) {
                   return '<h3>' + hueUtils.htmlEncode(key) + '</h3><p>' + y + '</p>'
                 });
-
+            _chart.noData(_data.message || window.HUE_I18n.chart.noData);
             var _d3 = ($(element).find("svg").length > 0) ? d3v3.select($(element).find("svg")[0]) : d3v3.select($(element)[0]).append("svg");
 
             _d3.datum(_data)
@@ -136,11 +133,9 @@
     update: function (element, valueAccessor) {
       var _options = valueAccessor();
       var _data = _options.transformer(_options.data);
-      _data = _data.filter(function (val) {
-        return val.value >= 0;
-      });
       var _chart = $(element).data("chart");
       if (_chart) {
+        _chart.noData(_data.message || window.HUE_I18n.chart.noData);
         var _d3 = d3v3.select($(element).find("svg")[0]);
         _d3.datum(_data)
               .transition().duration(150)
@@ -203,6 +198,7 @@
       var _isPivot = _options.isPivot != null ? _options.isPivot : false;
 
       if (_chart) {
+        _chart.noData(_datum.message || window.HUE_I18n.chart.noData);
         if (_chart.multibar){
           _chart.multibar.stacked(typeof _options.stacked != "undefined" ? _options.stacked : false);
         }
@@ -273,6 +269,7 @@
       var _chart = $(element).data("chart");
       if (_chart) {
         window.setTimeout(function () {
+          _chart.noData(_datum.message || window.HUE_I18n.chart.noData);
           if (_chart.multibar) {
             _chart.multibar.stacked(typeof _options.stacked != "undefined" ? _options.stacked : false);
           }
@@ -306,6 +303,7 @@
       var _chart = $(element).data("chart");
       if (_chart) {
         window.setTimeout(function () {
+          _chart.noData(_datum.message || window.HUE_I18n.chart.noData);
           var _d3 = d3v3.select($(element).find("svg")[0]);
           if (_datum.length > 0 && _datum[0].values.length > 0 && typeof _datum[0].values[0].x.isValid === 'function'){
             _chart.xAxis.tickFormat(function(d) { return d3v3.time.format("%Y-%m-%d %H:%M:%S")(new Date(d)); })
@@ -805,6 +803,7 @@
     if ($(element).is(":visible")) {
       nv.addGraph(function () {
         var _chart = nv.models.lineWithBrushChart();
+        _chart.noData(_data.message || window.HUE_I18n.chart.noData);
         $(element).data("chart", _chart);
         _chart.transitionDuration(0);
         _chart.convert = function (d) {
@@ -1036,6 +1035,7 @@
         $(element).find("svg").empty();
       }
       _chart = nv.models.multiBarWithBrushChart();
+      _chart.noData(_datum.message || window.HUE_I18n.chart.noData);
       if (_datum.length > 0) $(element).data('chart_type', 'multibar_brush');
       _chart.onSelectRange(function (from, to) {
         huePubSub.publish('charts.state', { updating: true });

+ 3 - 3
desktop/core/src/desktop/static/desktop/js/ko.charts.leaflet.js

@@ -22,15 +22,15 @@
       var _data = _options.transformer(valueAccessor().datum);
 
       function toggleVisibility() {
-        if (((_options.visible != null && _options.visible) || _options.visible == null || typeof _options == "undefined")) {
+        if (!_data.message && ((_options.visible != null && _options.visible) || _options.visible == null || typeof _options == "undefined")) {
           $(element).show();
           $(element).siblings(".leaflet-nodata").remove();
         }
         else {
           $(element).hide();
-          if ((_options.visible != null && _options.visible) && !_options.isLoading) {
+          if ((_data.message || (_options.visible != null && _options.visible)) && !_options.isLoading) {
             $(element).siblings(".leaflet-nodata").remove();
-            $(element).before($("<div>").addClass("leaflet-nodata").css({ "textAlign": "center", "fontSize": "18px", "fontWeight": 700, "marginTop": "20px"}).text("No Data Available."));
+            $(element).before($("<div>").addClass("leaflet-nodata").css({ "textAlign": "center", "fontSize": "18px", "fontWeight": 700, "marginTop": "20px"}).text(_data.message || window.HUE_I18n.chart.noData));
           }
         }
       }

+ 11 - 0
desktop/core/src/desktop/templates/global_js_constants.mako

@@ -159,6 +159,17 @@
     queryBuilder: {
       insertValueHere: "${ _('Insert value here') }",
       queryRequire: "${ _('Query requires a select or aggregate.') }"
+    },
+    chart: {
+      noData: "${ _('No Data Available.') }",
+      missingLegend: "${ _('Missing legend configuration.') }",
+      missingValue: "${ _('Missing value configuration.') }",
+      missingX: "${ _('Missing x axis configuration.') }",
+      missingY: "${ _('Missing y axis configuration.') }",
+      missingLatitude: "${ _('Missing latitude configuration.') }",
+      missingLongitude: "${ _('Missing longitude configuration.') }",
+      missingLabel: "${ _('Missing label configuration.') }",
+      missingRegion: "${ _('Missing region configuration.') }",
     }
   };
 

+ 58 - 15
desktop/libs/dashboard/src/dashboard/templates/common_search.mako

@@ -1773,24 +1773,31 @@ ${ dashboard.layout_skeleton(suffix='search') }
         <!-- /ko -->
 
         <!-- ko if: widgetType() == 'resultset-widget' -->
+          <!-- ko if: $root.collection.template.chartSettings.chartType() == ko.HUE_CHARTS.TYPES.PIECHART -->
           <div data-bind="attr:{'id': 'pieChart_'+id()}, pieChart: {data: {counts: $root.results(), sorting: $root.collection.template.chartSettings.chartSorting(), snippet: $data}, fqs: ko.observableArray([]),
-                transformer: pieChartDataTransformerGrid, maxWidth: 350, parentSelector: '.chart-container' }, visible: $root.collection.template.chartSettings.chartType() == ko.HUE_CHARTS.TYPES.PIECHART" class="chart"></div>
-
+                transformer: pieChartDataTransformerGrid, maxWidth: 350, parentSelector: '.chart-container' }" class="chart"></div>
+          <!-- /ko -->
+          <!-- ko if: $root.collection.template.chartSettings.chartType() == ko.HUE_CHARTS.TYPES.BARCHART -->
           <div data-bind="attr:{'id': 'barChart_'+id()}, barChart: {datum: {counts: $root.results(), sorting: $root.collection.template.chartSettings.chartSorting(), snippet: $data}, fqs: ko.observableArray([]), hideSelection: true, enableSelection: false, hideStacked: $root.collection.template.chartSettings.hideStacked,
-                transformer: multiSerieDataTransformerGrid, stacked: false, showLegend: true, type: $root.collection.template.chartSettings.chartSelectorType},  stacked: true, showLegend: true, visible: $root.collection.template.chartSettings.chartType() == ko.HUE_CHARTS.TYPES.BARCHART" class="chart"></div>
-
+                transformer: multiSerieDataTransformerGrid, stacked: false, showLegend: true, type: $root.collection.template.chartSettings.chartSelectorType},  stacked: true, showLegend: true" class="chart"></div>
+          <!-- /ko -->
+          <!-- ko if: $root.collection.template.chartSettings.chartType() == ko.HUE_CHARTS.TYPES.LINECHART -->
           <div data-bind="attr:{'id': 'lineChart_'+id()}, lineChart: {datum: {counts: $root.results(), sorting: $root.collection.template.chartSettings.chartSorting(), snippet: $data},
-                transformer: multiSerieDataTransformerGrid, showControls: false }, visible: $root.collection.template.chartSettings.chartType() == ko.HUE_CHARTS.TYPES.LINECHART" class="chart"></div>
-
+                transformer: multiSerieDataTransformerGrid, showControls: false }" class="chart"></div>
+          <!-- /ko -->
+          <!-- ko if: $root.collection.template.chartSettings.chartType() == ko.HUE_CHARTS.TYPES.MAP -->
           <div data-bind="attr: {'id': 'leafletMapChart_'+id()}, leafletMapChart: {datum: {counts: $root.results(), sorting: $root.collection.template.chartSettings.chartSorting(), snippet: $data},
-                transformer: leafletMapChartDataTransformerGrid, showControls: false, height: 380, visible: $root.collection.template.chartSettings.chartType() == ko.HUE_CHARTS.TYPES.MAP, forceRedraw: true}" class="chart"></div>
-
+                transformer: leafletMapChartDataTransformerGrid, showControls: false, height: 380, forceRedraw: true}" class="chart"></div>
+          <!-- /ko -->
+          <!-- ko if: $root.collection.template.chartSettings.chartType() == ko.HUE_CHARTS.TYPES.TIMELINECHART -->
           <div data-bind="attr:{'id': 'timelineChart_'+id()}, timelineChart: {datum: {counts: $root.results(), sorting: $root.collection.template.chartSettings.chartSorting(), snippet: $data}, fqs: ko.observableArray([]), hideSelection: true, enableSelection: false, hideStacked: $root.collection.template.chartSettings.hideStacked,
-                transformer: multiSerieDataTransformerGrid, showControls: false }, visible: $root.collection.template.chartSettings.chartType() == ko.HUE_CHARTS.TYPES.TIMELINECHART" class="chart"></div>
-
+                transformer: multiSerieDataTransformerGrid, showControls: false }" class="chart"></div>
+          <!-- /ko -->
+          <!-- ko if: $root.collection.template.chartSettings.chartType() == ko.HUE_CHARTS.TYPES.GRADIENTMAP -->
           <div data-bind="attr:{'id': 'gradientMapChart_'+id()}, mapChart: {data: {counts: $root.results(), scope: $root.collection.template.chartSettings.chartScope(), snippet: $data},
-              transformer: gradientMapChartDataTransformerGrid, maxWidth: 750, isScale: true}, visible: template.chartSettings.chartType() == ko.HUE_CHARTS.TYPES.GRADIENTMAP" />
+              transformer: gradientMapChartDataTransformerGrid, maxWidth: 750, isScale: true}" />
           <div class="clearfix"></div>
+          <!-- /ko -->
         <!-- /ko -->
 
        </div>
@@ -3386,7 +3393,9 @@ function pieChartDataTransformer(data) {
       obj: item
     });
   });
-  return _data;
+  return _data.filter(function (val) {
+    return val.value >= 0;
+  });
 }
 
 function _rangePieChartDataTransformer(data, isUp) {
@@ -3402,7 +3411,9 @@ function _rangePieChartDataTransformer(data, isUp) {
       obj: item
     });
   });
-  return _data;
+  return _data.filter(function (val) {
+    return val.value >= 0;
+  });
 }
 
 
@@ -3428,6 +3439,13 @@ function pieChartDataTransformerGrid(data) {
   } else if (!data.chartY) {
     chartY = searchViewModel.collection.template.chartSettings.chartYSingle();
   } // else we just take value as is
+  if (!chartX) {
+    _data.message = window.HUE_I18n.chart.missingLegend;
+    return _data;
+  } else if (!chartY) {
+    _data.message = window.HUE_I18n.chart.missingValue;
+    return _data;
+  }
 
   $(data.counts).each(function (cnt, item) {
     item.widget_id = data.widget_id;
@@ -3440,7 +3458,9 @@ function pieChartDataTransformerGrid(data) {
       });
     }
   });
-  return _data;
+  return _data.filter(function (val) {
+    return val.value >= 0;
+  });
 }
 
 function _barChartDataTransformer(rawDatum, isUp) {
@@ -3808,7 +3828,11 @@ function gradientMapChartDataTransformerGrid(data) {
     chartY = searchViewModel.collection.template.chartSettings.chartYSingle();
   } // else we just take value as is
   var _data = [];
-  if (!chartX || !chartY) {
+  if (!chartX) {
+    _data.message = window.HUE_I18n.chart.missingRegion;
+    return _data;
+  } else if (!chartY) {
+    _data.message = window.HUE_I18n.chart.missingY;
     return _data;
   }
   $(data.counts).each(function (cnt, item) {
@@ -3887,6 +3911,17 @@ function leafletMapChartDataTransformerGrid(data) {
     chartMapLabel = searchViewModel.collection.template.chartSettings.chartMapLabel();
   }
 
+  if (!chartX) {
+    _data.message = window.HUE_I18n.chart.missingLatitude;
+    return _data;
+  } else if (!chartY) {
+    _data.message = window.HUE_I18n.chart.missingLongitude;
+    return _data;
+  } else if (!chartMapLabel) {
+    _data.message = window.HUE_I18n.chart.missingLabel;
+    return _data;
+  }
+
   $(data.counts).each(function (cnt, item) {
     if (chartX != "" && item.item[chartX] && chartY != "" && item.item[chartY]) {
       var _obj = {
@@ -3967,6 +4002,14 @@ function multiSerieDataTransformerGrid(rawDatum, isTimeline) {
     chartY = searchViewModel.collection.template.chartSettings.chartYMulti();
   } // else we just take value as is
 
+  if (!chartX) {
+    _datum.message = window.HUE_I18n.chart.missingX;
+    return _datum;
+  } else if (!chartY || !chartY.length) {
+    _datum.message = window.HUE_I18n.chart.missingY;
+    return _datum;
+  }
+
   if (chartX != null && chartY.length > 0 && rawDatum.counts.length > 0) {
     var _plottedSerie = 0;
     chartY.forEach(function (col) {