Browse Source

HUE-3467 [editor] Autodetect and transform dates for X-Axis of line charts

Enrico Berti 9 years ago
parent
commit
d666a91ba1

+ 13 - 1
desktop/core/src/desktop/static/desktop/js/ko.charts.js

@@ -309,6 +309,14 @@
       if (_chart) {
         window.setTimeout(function () {
           var _d3 = d3.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 d3.time.format("%Y-%m-%d %H:%M:%S")(new Date(d)); })
+            _chart.onChartUpdate(function () {
+              _d3.selectAll("g.nv-x.nv-axis g text").each(function (d){
+                insertLinebreaks(d, this);
+              });
+            });
+          }
           _d3.datum(_datum)
             .transition().duration(150)
             .each("end", function () {
@@ -851,7 +859,11 @@
         var _chart = nv.models.lineWithBrushChart();
         $(element).data("chart", _chart);
         _chart.transitionDuration(0);
-        if (_datum.length > 0 && _datum[0].values.length > 10) {
+        var enableSelection = true;
+        if (typeof options.enableSelection !== 'undefined') {
+          enableSelection = options.enableSelection;
+        }
+        if (_datum.length > 0 && _datum[0].values.length > 10 && enableSelection) {
           _chart.enableSelection();
         }
         if (options.showControls != null) {

+ 4 - 2
desktop/libs/notebook/src/notebook/templates/editor_components.mako

@@ -904,7 +904,7 @@ ${ hueIcons.symbols() }
                       transformer: multiSerieDataTransformer, stacked: false, showLegend: true},  stacked: true, showLegend: true, visible: chartType() == ko.HUE_CHARTS.TYPES.BARCHART" class="chart"></div>
 
                 <div data-bind="attr:{'id': 'lineChart_'+id()}, lineChart: {datum: {counts: result.data, sorting: chartSorting(), snippet: $data},
-                      transformer: multiSerieDataTransformer, showControls: false }, visible: chartType() == ko.HUE_CHARTS.TYPES.LINECHART" class="chart"></div>
+                      transformer: multiSerieDataTransformer, showControls: false, enableSelection: false }, visible: chartType() == ko.HUE_CHARTS.TYPES.LINECHART" class="chart"></div>
 
                 <div data-bind="attr:{'id': 'leafletMapChart_'+id()}, leafletMapChart: {datum: {counts: result.data, sorting: chartSorting(), snippet: $data},
                       transformer: leafletMapChartDataTransformer, showControls: false, height: 380, visible: chartType() == ko.HUE_CHARTS.TYPES.MAP, forceRedraw: true}" class="chart"></div>
@@ -1731,8 +1731,10 @@ ${ hueIcons.symbols() }
       rawDatum.snippet.chartYMulti().forEach(function (col) {
         var _idxValue = -1;
         var _idxLabel = -1;
+        var _isXDate = false;
         rawDatum.snippet.result.meta().forEach(function (icol, idx) {
           if (icol.name == rawDatum.snippet.chartX()) {
+            _isXDate = icol.type.toUpperCase().indexOf('DATE') > -1;
             _idxLabel = idx;
           }
           if (icol.name == col) {
@@ -1745,7 +1747,7 @@ ${ hueIcons.symbols() }
           $(rawDatum.counts()).each(function (cnt, item) {
             _data.push({
               series: _plottedSerie,
-              x: hueUtils.html2text(item[_idxLabel]),
+              x: _isXDate ? moment(item[_idxLabel]) : hueUtils.html2text(item[_idxLabel]),
               y: item[_idxValue],
               obj: item
             });