From ba1dfcb8456e225c055069ce021f2333c6920445 Mon Sep 17 00:00:00 2001 From: Maxime Beauchemin Date: Sat, 16 Jan 2016 14:01:05 -0800 Subject: [PATCH] Refactor + timeformating options --- panoramix/forms.py | 12 +++++++++ panoramix/static/panoramix.js | 8 ++++++ panoramix/static/widgets/viz_nvd3.js | 40 +++++++++++----------------- panoramix/viz.py | 10 ++++--- 4 files changed, 42 insertions(+), 28 deletions(-) diff --git a/panoramix/forms.py b/panoramix/forms.py index 29592ca9efe24..d999a4fefa9d7 100644 --- a/panoramix/forms.py +++ b/panoramix/forms.py @@ -305,6 +305,18 @@ def __init__(self, viz): description="Based on granularity, number of time periods to compare against"), 'compare_suffix': TextField('Comparison suffix', description="Suffix to apply after the percentage display"), + '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'), + ], + description="D3 format syntax for y axis " + "https://github.com/mbostock/\n" + "d3/wiki/Formatting"), 'y_axis_format': FreeFormSelectField('Y axis format', default='.3s', choices=[ diff --git a/panoramix/static/panoramix.js b/panoramix/static/panoramix.js index 9e8996f0071b0..df585fae7a183 100644 --- a/panoramix/static/panoramix.js +++ b/panoramix/static/panoramix.js @@ -20,6 +20,13 @@ var px = (function() { //d = new Date(d.getTime() - 1 * 60 * 60 * 1000); return tickMultiFormat(d); } + function timeFormatFactory(d3timeFormat) { + var f = d3.time.format(d3timeFormat) + return function(dttm){ + var d = UTC(new Date(dttm)); + return f(d); + }; + } colors = [ "#FF5A5F", "#007A87", "#7B0051", "#00D1C1", "#8CE071", "#FFB400", "#FFAA91", "#B4A76C", "#9CA299", "#565A5C" @@ -447,5 +454,6 @@ var px = (function() { initDashboardView: initDashboardView, formatDate: formatDate, colors: colors, + timeFormatFactory: timeFormatFactory, } })(); diff --git a/panoramix/static/widgets/viz_nvd3.js b/panoramix/static/widgets/viz_nvd3.js index c84da4f5142fa..b9ebf14bd4f9b 100644 --- a/panoramix/static/widgets/viz_nvd3.js +++ b/panoramix/static/widgets/viz_nvd3.js @@ -11,11 +11,9 @@ function viz_nvd3(slice) { if (viz_type === 'line') { if (fd.show_brush) { chart = nv.models.lineWithFocusChart(); - //chart.lines2.xScale( d3.time.scale.utc()); chart.lines2.xScale(d3.time.scale.utc()); chart.x2Axis .showMaxMin(fd.x_axis_showminmax) - .tickFormat(px.formatDate) .staggerLabels(true); } else { chart = nv.models.lineChart() @@ -26,30 +24,17 @@ function viz_nvd3(slice) { chart.interpolate(fd.line_interpolation); chart.xAxis .showMaxMin(fd.x_axis_showminmax) - .tickFormat(px.formatDate) .staggerLabels(true); chart.showLegend(fd.show_legend); - chart.yAxis.tickFormat(d3.format('.3s')); - if (chart.y2Axis != undefined) { - chart.y2Axis.tickFormat(d3.format('.3s')); - } - if (fd.contribution || fd.num_period_compare) { - chart.yAxis.tickFormat(d3.format('.3p')); - if (chart.y2Axis != undefined) { - chart.y2Axis.tickFormat(d3.format('.3p')); - } - } } else if (viz_type === 'bar') { chart = nv.models.multiBarChart() .showControls(true) .groupSpacing(0.1); chart.xAxis .showMaxMin(false) - .tickFormat(px.formatDate) .staggerLabels(true); chart.showLegend(fd.show_legend); chart.stacked(fd.bar_stacked); - chart.yAxis.tickFormat(d3.format('.3s')); } else if (viz_type === 'dist_bar') { chart = nv.models.multiBarChart() @@ -60,7 +45,6 @@ function viz_nvd3(slice) { chart.xAxis .showMaxMin(false); chart.stacked(fd.bar_stacked); - chart.yAxis.tickFormat(d3.format('.3s')); } else if (viz_type === 'pie') { chart = nv.models.pieChart() @@ -76,17 +60,14 @@ function viz_nvd3(slice) { chart = nv.models.multiBarChart() .reduceXTicks(false) .rotateLabels(45) ; - chart.yAxis.tickFormat(d3.format('.3s')); } else if (viz_type === 'compare') { chart = nv.models.cumulativeLineChart(); chart.xScale(d3.time.scale.utc()); chart.xAxis .showMaxMin(false) - .tickFormat(px.formatDate) .staggerLabels(true); chart.showLegend(fd.show_legend); - chart.yAxis.tickFormat(d3.format('.3p')); } else if (viz_type === 'bubble') { var row = function(col1, col2){ @@ -95,8 +76,6 @@ function viz_nvd3(slice) { chart = nv.models.scatterChart(); chart.showDistX(true); chart.showDistY(true); - chart.xAxis.tickFormat(d3.format('.3s')); - chart.yAxis.tickFormat(d3.format('.3s')); chart.showLegend(fd.show_legend); chart.tooltip.contentGenerator(function (obj) { p = obj.point; @@ -116,10 +95,8 @@ function viz_nvd3(slice) { chart.xScale(d3.time.scale.utc()); chart.xAxis .showMaxMin(false) - .tickFormat(px.formatDate) .staggerLabels(true); chart.showLegend(fd.show_legend); - chart.yAxis.tickFormat(d3.format('.3s')); } // make space for labels on right @@ -136,7 +113,22 @@ function viz_nvd3(slice) { if (fd.x_log_scale) { chart.xScale(d3.scale.log()); } - if (fd.y_axis_format) { + if (viz_type === 'bubble') { + chart.xAxis.tickFormat(d3.format('.3s')); + } + else if (fd.x_axis_format == 'smart_date') { + chart.xAxis.tickFormat(px.formatDate); + } + else if (fd.x_axis_format !== undefined) { + chart.xAxis.tickFormat(px.timeFormatFactory(fd.x_axis_format)); + } + if (fd.contribution || fd.num_period_compare) { + chart.yAxis.tickFormat(d3.format('.3p')); + if (chart.y2Axis != undefined) { + chart.y2Axis.tickFormat(d3.format('.3p')); + } + } + else if (fd.y_axis_format) { chart.yAxis.tickFormat(d3.format(fd.y_axis_format)); if (chart.y2Axis != undefined) { diff --git a/panoramix/viz.py b/panoramix/viz.py index 7ac8781c6fc7f..9e513be6667c4 100644 --- a/panoramix/viz.py +++ b/panoramix/viz.py @@ -615,8 +615,8 @@ class NVD3TimeSeriesViz(NVD3Viz): ('show_brush', 'show_legend'), ('rich_tooltip', 'y_axis_zero'), ('y_log_scale', 'contribution'), - ('y_axis_format', 'x_axis_showminmax'), - ('line_interpolation', None), + ('x_axis_format', 'y_axis_format'), + ('line_interpolation', 'x_axis_showminmax'), ), }, { 'label': 'Advanced Analytics', @@ -750,8 +750,9 @@ class NVD3TimeSeriesBarViz(NVD3TimeSeriesViz): ('show_brush', 'show_legend'), ('rich_tooltip', 'y_axis_zero'), ('y_log_scale', 'contribution'), - ('y_axis_format', 'x_axis_showminmax'), + ('x_axis_format', 'y_axis_format'), ('line_interpolation', 'bar_stacked'), + ('x_axis_showminmax', None), ), }] + [NVD3TimeSeriesViz.fieldsets[2]] @@ -770,7 +771,8 @@ class NVD3TimeSeriesStackedViz(NVD3TimeSeriesViz): ('show_brush', 'show_legend'), ('rich_tooltip', 'y_axis_zero'), ('y_log_scale', 'contribution'), - ('y_axis_format', 'x_axis_showminmax'), + ('x_axis_format', 'y_axis_format'), + ('x_axis_showminmax'), ('line_interpolation', 'stacked_style'), ), }] + [NVD3TimeSeriesViz.fieldsets[2]]