소스 검색

[spark] Toggle result columns

Enrico Berti 11 년 전
부모
커밋
a896919
2개의 변경된 파일183개의 추가작업 그리고 28개의 파일을 삭제
  1. 153 13
      apps/spark/src/spark/templates/editor.mako
  2. 30 15
      desktop/core/static/js/jquery.tableextender.js

+ 153 - 13
apps/spark/src/spark/templates/editor.mako

@@ -137,6 +137,9 @@ ${ commonheader(_('Query'), app_name, user, "68px") | n,unicode }
         <select data-bind="options: availableSnippets, value: selectedSnippet">
         </select>
       </div>
+      <div id='chart'>
+        <svg style='height:300px'> </svg>
+      </div>
     </div>
   </div>
 
@@ -207,23 +210,33 @@ ${ commonheader(_('Query'), app_name, user, "68px") | n,unicode }
         </div>
       </div>
 
+
       <div data-bind="visible: showLogs, css: resultsKlass">
         <span data-bind="text: result.logs"></span>
       </div>
 
-      <div data-bind="css: resultsKlass">
-        <table class="table table-condensed">
-          <thead>
-            <tr data-bind="foreach: result.meta">
-              <th data-bind="text: $data.name"></th>
-            </tr>
-          </thead>
-          <tbody data-bind="foreach: result.data">
-            <tr data-bind="foreach: $data">
-              <td data-bind="text: $data"></td>
-            </tr>
-          </tbody>
-        </table>
+      <div class="row-fluid">
+        <div class="span2">
+          <ul class="unstyled" data-bind="foreach: result.meta">
+            <li><a class="pointer" data-bind="text: $data.name, click: function(){ toggleColumn($element, $index()); }"></a></li>
+          </ul>
+        </div>
+        <div class="span10">
+          <div data-bind="css: resultsKlass">
+            <table class="table table-condensed">
+              <thead>
+                <tr data-bind="foreach: {data: result.meta, afterAdd: waitForDatatable}">
+                  <th data-bind="text: $data.name"></th>
+                </tr>
+              </thead>
+              <tbody data-bind="foreach: {data: result.data, afterAdd: waitForDatatable}">
+                <tr data-bind="foreach: $data">
+                  <td data-bind="text: $data"></td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
       </div>
     </div>
   </div>
@@ -740,8 +753,135 @@ ${ commonheader(_('Query'), app_name, user, "68px") | n,unicode }
 
   $(document).ready(function(){
     resizeAssist();
+
+
+    /*These lines are all chart setup.  Pick and choose which chart features you want to utilize. */
+nv.addGraph(function() {
+  var chart = nv.models.lineChart()
+                .margin({left: 100})  //Adjust chart margins to give the x-axis some breathing room.
+                .useInteractiveGuideline(true)  //We want nice looking tooltips and a guideline!
+                .transitionDuration(350)  //how fast do you want the lines to transition?
+                .showLegend(true)       //Show the legend, allowing users to turn on/off line series.
+                .showYAxis(true)        //Show the y-axis
+                .showXAxis(true)        //Show the x-axis
+  ;
+
+  chart.xAxis     //Chart x-axis settings
+      .axisLabel('Time (ms)')
+      .tickFormat(d3.format(',r'));
+
+  chart.yAxis     //Chart y-axis settings
+      .axisLabel('Voltage (v)')
+      .tickFormat(d3.format('.02f'));
+
+  /* Done setting the chart up? Time to render it!*/
+  var myData = sinAndCos();   //You need data...
+
+  d3.select('#chart svg')    //Select the <svg> element you want to render the chart in.
+      .datum(myData)         //Populate the <svg> element with chart data...
+      .call(chart);          //Finally, render the chart!
+
+  //Update the chart when window resizes.
+  nv.utils.windowResize(function() { chart.update() });
+  return chart;
+});
+/**************************************
+ * Simple test data generator
+ */
+function sinAndCos() {
+  var sin = [],sin2 = [],
+      cos = [];
+
+  //Data is represented as an array of {x,y} pairs.
+  for (var i = 0; i < 100; i++) {
+    sin.push({x: i, y: Math.sin(i/10)});
+    sin2.push({x: i, y: Math.sin(i/10) *0.25 + 0.5});
+    cos.push({x: i, y: .5 * Math.cos(i/10)});
+  }
+
+  //Line chart data should be sent as an array of series objects.
+  return [
+    {
+      values: sin,      //values - represents the array of {x,y} data points
+      key: 'Sine Wave', //key  - the name of the series.
+      color: '#ff7f0e'  //color - optional: choose your own line color.
+    },
+    {
+      values: cos,
+      key: 'Cosine Wave',
+      color: '#2ca02c'
+    },
+    {
+      values: sin2,
+      key: 'Another sine wave',
+      color: '#7777ff',
+      area: true      //area - set to true if you want this line to turn into a filled area chart.
+    }
+  ];
+}
+
   });
 
+  var _datatableCreationTimeout = -1;
+  function waitForDatatable(el) {
+    if ($(el).is("tr") && $(el).parents("table").length > 0){
+      window.clearTimeout(_datatableCreationTimeout);
+      _datatableCreationTimeout = window.setTimeout(function(){
+        $(el).parents("table").dataTable({
+        "bPaginate": false,
+        "bLengthChange": false,
+        "bInfo": false,
+        "bDestroy": true,
+        "bAutoWidth": false,
+        "oLanguage": {
+          "sEmptyTable": "${_('No data available')}",
+          "sZeroRecords": "${_('No matching records')}"
+        },
+        "fnDrawCallback": function (oSettings) {
+          $(el).parents("table").find(".dataTables_wrapper").jHueTableScroller({
+            minHeight: $(window).height() - 400,
+            heightAfterCorrection: 0
+          });
+
+          $(el).parents("table").jHueTableExtender({
+            fixedHeader: true,
+            includeNavigator: false
+          });
+        },
+        "aoColumnDefs": [
+          {
+            "sType": "numeric",
+            "aTargets": [ "sort-numeric" ]
+          },
+          {
+            "sType": "string",
+            "aTargets": [ "sort-string" ]
+          },
+          {
+            "sType": "date",
+            "aTargets": [ "sort-date" ]
+          }
+        ]
+      });
+      $(el).parents(".dataTables_wrapper").jHueTableScroller({
+          minHeight: $(window).height() - 400,
+          heightAfterCorrection: 0
+        });
+
+        $(el).parents("table").jHueTableExtender({
+          fixedHeader: true,
+          includeNavigator: false
+        });
+        $(".dataTables_filter").hide();
+      }, 100);
+    }
+  }
+
+  function toggleColumn(linkElement, index){
+    var _dt = $(linkElement).parents(".snippet").find("table:eq(1)").dataTable();
+    _dt.fnSetColumnVis( index, !_dt.fnSettings().aoColumns[index].bVisible);
+  }
+
 </script>
 
 ${ commonfooter(messages) | n,unicode }

+ 30 - 15
desktop/core/static/js/jquery.tableextender.js

@@ -159,12 +159,27 @@
 
   };
 
-  function drawHeader(_this) {
-    $("#" + $(_this.element).attr("id") + "jHueTableExtenderClonedContainer").remove();
-    var clonedTable = $(_this.element).clone();
+  function s4() {
+  return Math.floor((1 + Math.random()) * 0x10000)
+        .toString(16)
+        .substring(1);
+  }
+
+
+  function UUID() {
+    return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4();
+  }
+
+
+  function drawHeader(plugin) {
+    if (!$(plugin.element).attr("id")){
+      $(plugin.element).attr("id", "eT" + UUID());
+    }
+    $("#" + $(plugin.element).attr("id") + "jHueTableExtenderClonedContainer").remove();
+    var clonedTable = $(plugin.element).clone();
     clonedTable.css("margin-bottom", "0").css("table-layout", "fixed");
     clonedTable.removeAttr("id").removeClass("resultTable").find("tbody").remove();
-    $(_this.element).find("thead>tr th").each(function (i) {
+    $(plugin.element).find("thead>tr th").each(function (i) {
       var originalTh = $(this);
       clonedTable.find("thead>tr th:eq(" + i + ")").width(originalTh.width()).css("background-color", "#FFFFFF");
       clonedTable.find("thead>tr th:eq(" + i + ")").click(function () {
@@ -173,37 +188,37 @@
         $(this).attr("class", originalTh.attr("class"));
       });
     });
-    var clonedTableContainer = $("<div>").width($(_this.element).outerWidth());
+    var clonedTableContainer = $("<div>").width($(plugin.element).outerWidth());
     clonedTable.appendTo(clonedTableContainer);
 
-    var clonedTableVisibleContainer = $("<div>").attr("id", $(_this.element).attr("id") + "jHueTableExtenderClonedContainer").addClass("jHueTableExtenderClonedContainer").width($(_this.element).parent().width()).css("overflow-x", "hidden").css("top", ($(_this.element).parent().offset().top - $(window).scrollTop()) + "px");
+    var clonedTableVisibleContainer = $("<div>").attr("id", $(plugin.element).attr("id") + "jHueTableExtenderClonedContainer").addClass("jHueTableExtenderClonedContainer").width($(plugin.element).parent().width()).css("overflow-x", "hidden").css("top", ($(plugin.element).parent().offset().top - $(window).scrollTop()) + "px");
     clonedTableVisibleContainer.css("position", "fixed");
 
     clonedTableContainer.appendTo(clonedTableVisibleContainer);
-    clonedTableVisibleContainer.prependTo($(_this.element).parent());
+    clonedTableVisibleContainer.prependTo($(plugin.element).parent());
 
-    $(_this.element).parent().scroll(function () {
+    $(plugin.element).parent().scroll(function () {
       clonedTableVisibleContainer.scrollLeft($(this).scrollLeft());
     });
 
-    $(_this.element).parent().data("w", clonedTableVisibleContainer.width());
+    $(plugin.element).parent().data("w", clonedTableVisibleContainer.width());
 
     window.setInterval(function () {
-      if ($(_this.element).parent().width() != $(_this.element).parent().data("w")) {
-        clonedTableVisibleContainer.width($(_this.element).parent().width());
-        $(_this.element).parent().data("w", clonedTableVisibleContainer.width());
-        $(_this.element).find("thead>tr th").each(function (i) {
+      if ($(plugin.element).parent().width() != $(plugin.element).parent().data("w")) {
+        clonedTableVisibleContainer.width($(plugin.element).parent().width());
+        $(plugin.element).parent().data("w", clonedTableVisibleContainer.width());
+        $(plugin.element).find("thead>tr th").each(function (i) {
           clonedTable.find("thead>tr th:eq(" + i + ")").width($(this).width()).css("background-color", "#FFFFFF");
         });
       }
     }, 250);
 
-    $(_this.element).parent().resize(function () {
+    $(plugin.element).parent().resize(function () {
       clonedTableVisibleContainer.width($(this).width());
     });
 
     $(window).scroll(function () {
-      clonedTableVisibleContainer.css("top", ($(_this.element).parent().offset().top - $(window).scrollTop()) + "px");
+      clonedTableVisibleContainer.css("top", ($(plugin.element).parent().offset().top - $(window).scrollTop()) + "px");
     });
   }