From bf8ce1716a479bac34480ebb79c3252bc4e9f156 Mon Sep 17 00:00:00 2001
From: Maxime Beauchemin <maximebeauchemin@gmail.com>
Date: Sun, 27 Sep 2015 08:52:26 -0700
Subject: [PATCH] nvd3 Stacked Area chart

---
 panoramix/bin/panoramix                       |  6 +-
 panoramix/forms.py                            |  6 +-
 panoramix/templates/panoramix/base.html       |  1 +
 panoramix/templates/panoramix/datasource.html | 18 ++---
 panoramix/templates/panoramix/viz_nvd3.html   | 27 +++++++-
 panoramix/views.py                            |  4 ++
 panoramix/viz.py                              | 69 +++++++++++++++----
 7 files changed, 102 insertions(+), 29 deletions(-)

diff --git a/panoramix/bin/panoramix b/panoramix/bin/panoramix
index 565df3341..062ac5939 100755
--- a/panoramix/bin/panoramix
+++ b/panoramix/bin/panoramix
@@ -219,12 +219,12 @@ def load_examples(sample):
     if not slc:
         slc = Slice(
             slice_name=slice_name,
-            viz_type='line',
+            viz_type='nvd3_line',
             datasource_type='table',
             table=tbl,
             params=get_slice_json(
-                slice_name, viz_type="line", groupby=['name'],
-                granularity='1 day'))
+                slice_name, viz_type="nvd3_line", groupby=['name'],
+                granularity='1 day', rich_tooltip='y', show_legend='y'))
         session.add(slc)
     slices.append(slc)
 
diff --git a/panoramix/forms.py b/panoramix/forms.py
index b636f12ed..e86cec632 100644
--- a/panoramix/forms.py
+++ b/panoramix/forms.py
@@ -120,6 +120,9 @@ def form_factory(viz):
         'y_log_scale': BooleanField(
             "Y Log", default=False,
             description="Use a log scale for the Y axis"),
+        'donut': BooleanField(
+            "Donut", default=False,
+            description="Do you want a donut or a pie?"),
     }
     field_css_classes = {k: ['form-control'] for k in px_form_fields.keys()}
     select2 = [
@@ -150,7 +153,8 @@ def form_factory(viz):
         if isinstance(ff, basestring):
             ff = [ff]
         for s in ff:
-            setattr(QueryForm, s, px_form_fields[s])
+            if s:
+                setattr(QueryForm, s, px_form_fields[s])
 
     # datasource type specific form elements
     if datasource.__class__.__name__ == 'Table':
diff --git a/panoramix/templates/panoramix/base.html b/panoramix/templates/panoramix/base.html
index 7a26ae00e..6d15fb194 100644
--- a/panoramix/templates/panoramix/base.html
+++ b/panoramix/templates/panoramix/base.html
@@ -3,6 +3,7 @@
 {% block head_css %}
 {{super()}}
 <link rel="shortcut icon" href="{{ url_for('static', filename='chaudron.png') }}">
+<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename="panoramix.css") }}">
 <style>
 .navbar-brand a {
   color: white;
diff --git a/panoramix/templates/panoramix/datasource.html b/panoramix/templates/panoramix/datasource.html
index fe4ff3ac5..2874d4ab8 100644
--- a/panoramix/templates/panoramix/datasource.html
+++ b/panoramix/templates/panoramix/datasource.html
@@ -53,8 +53,6 @@
           <i class="fa fa-info-circle" data-toggle="tooltip" data-placement="right"
             title="{{ field.description }}"></i>
           {% endif %}: 
-        </div>
-        <div>
           {{ field(class_=form.field_css_classes(field.name)) }}
         </div>
       </div>
@@ -63,13 +61,15 @@
         <div class="form-group">
           {% for name in fieldname %}
           <div class="col-xs-{{ (12 / fieldname|length) | int }}">
-            {% set field = form.get_field(name)%}
-            {{ field.label }}
-            {% if field.description %}
-            <i class="fa fa-info-circle" data-toggle="tooltip" data-placement="right"
-              title="{{ field.description }}"></i>
-            {% endif %}: 
-            {{ field(class_=form.field_css_classes(field.name)) }}
+            {% if name %}
+              {% set field = form.get_field(name)%}
+              {{ field.label }}
+              {% if field.description %}
+              <i class="fa fa-info-circle" data-toggle="tooltip" data-placement="right"
+                title="{{ field.description }}"></i>
+              {% endif %}: 
+              {{ field(class_=form.field_css_classes(field.name)) }}
+            {% endif %}
           </div>
           {% endfor %}
         </div>
diff --git a/panoramix/templates/panoramix/viz_nvd3.html b/panoramix/templates/panoramix/viz_nvd3.html
index 4bc8761dc..ad1510a01 100644
--- a/panoramix/templates/panoramix/viz_nvd3.html
+++ b/panoramix/templates/panoramix/viz_nvd3.html
@@ -35,6 +35,7 @@
       var url = "{{ viz.get_url(json="true")|safe }}";
       $.getJSON(url, function(data){
         nv.addGraph(function() {
+          // chart_type is {{ viz.chart_type }}
           {% if viz.chart_type == 'nvd3_line' %}
             {% if viz.args.show_brush == 'y' %}
               var chart = nv.models.lineWithFocusChart()
@@ -43,7 +44,7 @@
                 .x2Axis
                 .tickFormat(function (d) {return tickMultiFormat(UTC(new Date(d))); })
                 .tickValues([]);
-            {% elif viz.chart_type == 'nvd3_line' %}
+            {% else %}
               var chart = nv.models.lineChart()
             {% endif %}
 
@@ -52,6 +53,7 @@
               .showMaxMin(false)
               .tickFormat(function (d) {return tickMultiFormat(new Date(d)); });
             chart.showLegend({{ "{}".format(viz.args.show_legend=='y')|lower }});
+            chart.yAxis.tickFormat(d3.format('.3s'));
 
           {% elif viz.chart_type == 'nvd3_bar' %}
             var chart = nv.models.multiBarChart()
@@ -61,8 +63,29 @@
             chart.xAxis
               .showMaxMin(false)
               .tickFormat(function (d) {return tickMultiFormat(UTC(new Date(d))); });
+            chart.yAxis.tickFormat(d3.format('.3s'));
+          {% elif viz.chart_type == 'pie' %}
+            var chart = nv.models.pieChart()
+            chart.showLegend({{ "{}".format(viz.args.show_legend=='y')|lower }});
+            {% if viz.args.donut=='y' %}
+              chart.donut(true);
+              chart.donutLabelsOutside(true);
+            {% endif %}
+            chart.labelsOutside(true);
+            chart.cornerRadius(true);
+          {% elif viz.chart_type == 'column' %}
+            var chart = nv.models.multiBarChart();
+            chart.yAxis.tickFormat(d3.format('.3s'));
+          {% elif viz.chart_type == 'stacked' %}
+            var chart = nv.models.stackedAreaChart();
+            chart.xScale(d3.time.scale());
+            chart.xAxis
+              .showMaxMin(false)
+              .tickFormat(function (d) {return tickMultiFormat(new Date(d)); });
+            chart.showLegend({{ "{}".format(viz.args.show_legend=='y')|lower }});
+            chart.yAxis.tickFormat(d3.format('.3s'));
           {% endif %}
-          chart.yAxis.tickFormat(d3.format('.3s'));
+
           {% if viz.chart_type == "nvd3_line" and viz.args.rich_tooltip == 'y' %}
             chart.useInteractiveGuideline(true);
           {% endif %}
diff --git a/panoramix/views.py b/panoramix/views.py
index 13c3885aa..b3ee468a3 100644
--- a/panoramix/views.py
+++ b/panoramix/views.py
@@ -291,6 +291,8 @@ class Panoramix(BaseView):
             datasource,
             form_data=request.args)
         if request.args.get("json") == "true":
+            if config.get("DEBUG"):
+                payload = obj.get_json()
             try:
                 payload = obj.get_json()
                 status=200
@@ -303,6 +305,8 @@ class Panoramix(BaseView):
                 status=status,
                 mimetype="application/json")
         else:
+            if config.get("DEBUG"):
+                resp = self.render_template("panoramix/viz.html", viz=obj)
             try:
                 resp = self.render_template("panoramix/viz.html", viz=obj)
             except Exception as e:
diff --git a/panoramix/viz.py b/panoramix/viz.py
index 124cf90d3..5af12db58 100644
--- a/panoramix/viz.py
+++ b/panoramix/viz.py
@@ -367,7 +367,7 @@ class NVD3TimeSeriesViz(NVD3Viz):
         ('rolling_type', 'rolling_periods'),
         ('show_brush', 'show_legend'),
         ('rich_tooltip', 'y_axis_zero'),
-        'y_log_scale',
+        ('y_log_scale', None)
     ]
 
     def get_df(self):
@@ -392,14 +392,12 @@ class NVD3TimeSeriesViz(NVD3Viz):
 
     def get_json(self):
         df = self.get_df()
+        df = df.fillna(0)
         series = df.to_dict('series')
         datas = []
         for name, ys in series.items():
             if df[name].dtype.kind not in "biufc":
                 continue
-
-            df.tz_localize(None)
-            df.index.tz_localize(None)
             df['timestamp'] = pd.to_datetime(df.index, utc=False)
             if isinstance(name, basestring):
                 series_title = name
@@ -431,6 +429,18 @@ class NVD3TimeSeriesBarViz(NVD3TimeSeriesViz):
     ]
 
 
+class NVD3TimeSeriesStackedViz(NVD3TimeSeriesViz):
+    verbose_name = "NVD3 - Time Series - Stacked"
+    chart_type = "stacked"
+    form_fields = [
+        'viz_type',
+        'granularity', ('since', 'until'),
+        'metrics',
+        'groupby', 'limit',
+        ('rolling_type', 'rolling_periods'),
+    ]
+
+
 class TimeSeriesCompareViz(TimeSeriesViz):
     verbose_name = "Time Series - Percent Change"
     compare = 'percent'
@@ -458,15 +468,13 @@ class TimeSeriesStackedBarViz(TimeSeriesViz):
     stacked = True
 
 
-
-
-class DistributionPieViz(HighchartsViz):
-    verbose_name = "Distribution - Pie Chart"
+class DistributionPieViz(NVD3Viz):
+    verbose_name = "Distribution - NVD3 - Pie Chart"
     chart_type = "pie"
-    js_files = ['highstock.js']
     form_fields = [
         'viz_type', 'metrics', 'groupby',
-        ('since', 'until'), 'limit']
+        ('since', 'until'), 'limit',
+    ]
 
     def query_obj(self):
         d = super(DistributionPieViz, self).query_obj()
@@ -484,21 +492,54 @@ class DistributionPieViz(HighchartsViz):
 
     def get_json(self):
         df = self.get_df()
-        chart = Highchart(
-            df, chart_type=self.chart_type, **CHART_ARGS)
-        self.chart_js = chart.javascript_cmd
-        return chart.json
+        df = df.reset_index()
+        df.columns = ['x', 'y']
+        df['color'] = map(utils.color, df.x)
+        return df.to_json(orient="records")
 
 
 class DistributionBarViz(DistributionPieViz):
     verbose_name = "Distribution - Bar Chart"
     chart_type = "column"
 
+    def get_df(self):
+        df = super(DistributionPieViz, self).get_df()
+        df = df.pivot_table(
+            index=self.groupby,
+            values=self.metrics)
+        df = df.sort(self.metrics[0], ascending=False)
+        return df
+
+    def get_json(self):
+        df = self.get_df()
+        series = df.to_dict('series')
+        datas = []
+        for name, ys in series.items():
+            if df[name].dtype.kind not in "biufc":
+                continue
+            df['timestamp'] = pd.to_datetime(df.index, utc=False)
+            if isinstance(name, basestring):
+                series_title = name
+            elif len(self.metrics) > 1:
+                series_title = ", ".join(name)
+            else:
+                series_title = ", ".join(name[1:])
+            d = {
+                "key": series_title,
+                "color": utils.color(series_title),
+                "values": [
+                    {'x': ds, 'y': ys[i]}
+                    for i, ds in enumerate(df.timestamp)]
+            }
+            datas.append(d)
+        return dumps(datas)
+
 
 viz_types = OrderedDict([
     ['table', TableViz],
     ['nvd3_line', NVD3TimeSeriesViz],
     ['nvd3_bar', NVD3TimeSeriesBarViz],
+    ['stacked', NVD3TimeSeriesStackedViz],
     ['line', TimeSeriesViz],
     ['big_number', BigNumberViz],
     ['compare', TimeSeriesCompareViz],