add timestamp toggle in chart options (Table Viz) (#439)

* add timestamp toggle in chart options (Table Viz)

* refactor timestamp choices

* fix build error

caravel/assets/visualizations/table.js

@@ -1,6 +1,7 @@
 var $ = window.$ = require('jquery');
 var jQuery = window.jQuery = $;
 var d3 = require('d3');
+var px = window.px || require('../javascripts/modules/caravel.js');
 
 require('./table.css');
 require('datatables.net-bs');
@@ -11,6 +12,7 @@ function tableVis(slice) {
   var form_data = data.form_data;
   var f = d3.format('.3s');
   var fC = d3.format('0,000');
+  var timestampFormatter;
 
   function refresh() {
     $.getJSON(slice.jsonEndpoint(), onSuccess).fail(onError);
@@ -35,6 +37,12 @@ function tableVis(slice) {
         maxes[metrics[i]] = d3.max(col(metrics[i]));
       }
 
+      if (json.form_data.table_timestamp_format === 'smart_date') {
+        timestampFormatter = px.formatDate;
+      } else if (json.form_data.table_timestamp_format !== undefined) {
+        timestampFormatter = px.timeFormatFactory(json.form_data.table_timestamp_format);
+      }
+
       var table = d3.select(slice.selector).html('').append('table')
         .classed('dataframe dataframe table table-striped table-bordered table-condensed table-hover dataTable no-footer', true)
         .attr('width', '100%');
@@ -54,9 +62,13 @@ function tableVis(slice) {
         .selectAll('td')
         .data(function (row, i) {
           return data.columns.map(function (c) {
+            var val = row[c];
+            if (c === 'timestamp') {
+              val = timestampFormatter(val);
+            }
             return {
               col: c,
-              val: row[c],
+              val: val,
               isMetric: metrics.indexOf(c) >= 0
             };
           });
@@ -123,4 +135,4 @@ function tableVis(slice) {
   };
 }
 
-module.exports = tableVis;
+module.exports = tableVis;

caravel/forms.py

@@ -17,6 +17,15 @@ from caravel import app
 
 config = app.config
 
+TIMESTAMP_CHOICES = [
+    ('smart_date', 'Adaptative formating'),
+    ("%m/%d/%Y", '"%m/%d/%Y" | 01/14/2019'),
+    ("%Y-%m-%d", '"%Y-%m-%d" | 2019-01-14'),
+    ("%Y-%m-%d %H:%M:%S",
+     '"%Y-%m-%d %H:%M:%S" | 2019-01-14 01:32:10'),
+    ("%H:%M:%S", '"%H:%M:%S" | 01:32:10'),
+]
+
 
 class BetterBooleanField(BooleanField):
 
@@ -430,17 +439,15 @@ class FormFactory(object):
             'compare_suffix': TextField(
                 'Comparison suffix',
                 description="Suffix to apply after the percentage display"),
+            'table_timestamp_format': FreeFormSelectField(
+                'Table Timestamp Format',
+                default='smart_date',
+                choices=TIMESTAMP_CHOICES,
+                description="Timestamp Format"),
             'x_axis_format': FreeFormSelectField(
                 'X axis format',
                 default='smart_date',
-                choices=[
-                    ('smart_date', 'Adaptative formating'),
-                    ("%m/%d/%Y", '"%m/%d/%Y" | 01/14/2019'),
-                    ("%Y-%m-%d", '"%Y-%m-%d" | 2019-01-14'),
-                    ("%Y-%m-%d %H:%M:%S",
-                        '"%Y-%m-%d %H:%M:%S" | 2019-01-14 01:32:10'),
-                    ("%H:%M:%S", '"%H:%M:%S" | 01:32:10'),
-                ],
+                choices=TIMESTAMP_CHOICES,
                 description="D3 format syntax for y axis "
                             "https://github.com/mbostock/\n"
                             "d3/wiki/Formatting"),

caravel/viz.py

@@ -323,6 +323,7 @@ class TableViz(BaseViz):
     fieldsets = ({
         'label': "Chart Options",
         'fields': (
+            'table_timestamp_format',
             'row_limit',
             ('include_search', None),
         )