diff --git a/caravel/assets/visualizations/table.js b/caravel/assets/visualizations/table.js index 8987e5dac51b3..061706b25325d 100644 --- a/caravel/assets/visualizations/table.js +++ b/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; \ No newline at end of file diff --git a/caravel/forms.py b/caravel/forms.py index c6c96665298ee..089a689fc5ed9 100644 --- a/caravel/forms.py +++ b/caravel/forms.py @@ -17,6 +17,15 @@ 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 @@ def __init__(self, viz): '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"), diff --git a/caravel/viz.py b/caravel/viz.py index ed5d7419f48d7..bf82808a77870 100644 --- a/caravel/viz.py +++ b/caravel/viz.py @@ -323,6 +323,7 @@ class TableViz(BaseViz): fieldsets = ({ 'label': "Chart Options", 'fields': ( + 'table_timestamp_format', 'row_limit', ('include_search', None), )