Fixing table and pivot_table

panoramix/assets/javascripts/explore.js

@@ -34,7 +34,7 @@ var sourceMap = {
   markup:         'markup.js',
   para:           'parallel_coordinates.js',
   pie:            'nvd3_vis.js',
-  // pivot_table:    undefined,
+  pivot_table:    'pivot_table.js',
   sankey:         'sankey.js',
   sunburst:       'sunburst.js',
   table:          'table.js',

panoramix/assets/visualizations/pivot_table.css

@@ -2,7 +2,7 @@
     overflow: auto !important;
 }
 
-.widget.table td {
+.widget.pivot_table td,th {
     padding: 1px 5px;
     font-size: small;
 }

panoramix/assets/visualizations/pivot_table.js

@@ -1,40 +1,32 @@
-// // This is a hack because shimming for $ extensions is not working.
-// $('body').append([
-//   '<script type="text/javascript" src="/static/refactor/vendor/dataTables/jquery.dataTables.min.js"></script>',
-//   '<script type="text/javascript" src="/static/refactor/vendor/dataTables/dataTables.bootstrap.js"></script>',
-// ]);
 
-// // require('datatables');
-// // console.log(jQuery.fn.dataTable);
-// // require('../vendor/dataTables/jquery.dataTables.min.js');
-// // require('../vendor/dataTables/dataTables.bootstrap.js');
+var $ = window.$ = require('jquery');
+var jQuery = window.jQuery = $;
 
-// // CSS
-// require('./pivot_table.css');
-// require('../vendor/dataTables/dataTables.bootstrap.css');
+require('datatables');
+require('./pivot_table.css');
+require('../vendor/dataTables/dataTables.bootstrap.css');
 
-// module.exports = function(slice) {
-//   var container = slice.container;
-//   var form_data = slice.data.form_data;
+module.exports = function(slice) {
+  var container = slice.container;
+  var form_data = slice.data.form_data;
 
-//   function refresh() {
-//     $.getJSON(slice.jsonEndpoint(), function(json){
-//       container.html(json.data);
-//       if (form_data.groupby.length == 1){
-//         var table = container.find('table').DataTable({
-//           paging: false,
-//           searching: false,
-//         });
-//         table.column('-1').order( 'desc' ).draw();
-//       }
-//       slice.done(json);
-//     }).fail(function(xhr){
-//         slice.error(xhr.responseText);
-//     });
-//   }
-//   return {
-//     render: refresh,
-//     resize: refresh,
-//   };
-
-// };
+  function refresh() {
+    $.getJSON(slice.jsonEndpoint(), function(json){
+      container.html(json.data);
+      if (form_data.groupby.length == 1){
+        var table = container.find('table').DataTable({
+          paging: false,
+          searching: false,
+        });
+        table.column('-1').order( 'desc' ).draw();
+      }
+      slice.done(json);
+    }).fail(function(xhr){
+        slice.error(xhr.responseText);
+    });
+  }
+  return {
+    render: refresh,
+    resize: refresh,
+  };
+};

panoramix/assets/visualizations/table.js

@@ -1,17 +1,10 @@
-// This is a hack because shimming for $ extensions is not working.
-$('head').append([
-  '<script type="text/javascript" src="/static/refactor/vendor/dataTables/jquery.dataTables.min.js"></script>',
-  '<script type="text/javascript" src="/static/refactor/vendor/dataTables/dataTables.bootstrap.js"></script>',
-]);
-
-// require('datatables');
-// console.log(jQuery.fn.dataTable);
-// require('../vendor/dataTables/jquery.dataTables.min.js');
-// require('../vendor/dataTables/dataTables.bootstrap.js');
+var $ = window.$ = require('jquery');
+var jQuery = window.jQuery = $;
 
+require('datatables');
 // CSS
 require('./table.css');
-require('../vendor/dataTables/dataTables.bootstrap.css');
+//require('../node_modules/datatables-bootstrap3-plugin/media/css/datatables-bootstrap3.css')
 
 function tableVis(slice) {
   var data = slice.data;