Refactor + timeformating options

apache · Jan 16, 2016 · ba1dfcb · ba1dfcb
1 parent b594b8a
commit ba1dfcb
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 28 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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]]