Adding a BigNumber widget

panoramix/forms.py

@@ -40,6 +40,9 @@ def form_factory(viz):
         'metrics': SelectMultipleField(
             'Metrics', choices=datasource.metrics_combo,
             description="One or many metrics to display"),
+        'metric': SelectField(
+            'Metric', choices=datasource.metrics_combo,
+            description="One or many metrics to display"),
         'groupby': SelectMultipleField(
             'Group by',
             choices=[(s, s) for s in datasource.groupby_column_names],
@@ -77,6 +80,10 @@ def form_factory(viz):
         'y': SelectField('Y Axis', choices=datasource.metrics_combo),
         'size': SelectField('Bubble Size', choices=datasource.metrics_combo),
         'where': TextField('Custom WHERE clause'),
+        'compare_lag': TextField('Comparison Period Lag',
+            description="Based on granularity, number of time periods to compare against"),
+        'compare_suffix': TextField('Comparison suffix',
+            description="Suffix to apply after the percentage display"),
     }
     field_css_classes = {k: ['form-control'] for k in px_form_fields.keys()}
     select2 = [

panoramix/templates/panoramix/dashboard.html

@@ -6,6 +6,11 @@
         <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename=css) }}">
     {% endfor %}
     <link rel="stylesheet" href="{{ url_for('static', filename="jquery.gridster.min.css") }}">
+    {% for slice in dashboard.slices %}
+      {% set viz = slice.viz %}
+      {% import viz.template as viz_macros %}
+      {{ viz_macros.viz_css(viz) }}
+    {% endfor %}
 <style>
     a i{
       cursor: pointer;
@@ -52,6 +57,15 @@
         width: 100%;
         height: 100%;
     }
+    table.widget_header {
+      width: 100%;
+    }
+    td.icons {
+      width: 50px;
+    }
+    div.header {
+      font-weight: bold;
+    }
 </style>
 {% endblock %}
 
@@ -82,24 +96,26 @@ <h2>
               data-col="{{ pos.col or loop.index }}"
               data-sizex="{{ pos.size_x or 4 }}"
               data-sizey="{{ pos.size_y or 4 }}">
-              <div class="slice_title" style="height: 0px;">
-                <div class="row">
-                  <div class="col-md-4 text-left">
-                    <a>
-                      <i class="fa fa-arrows drag"></i>
-                    </a>
-                  </div>
-                  <div class="col-md-4 text-middle">
-                    <span>{{ slice.slice_name }}</span>
-                  </div>
-                  <div class="col-md-4 text-right" style="position: relative;">
-                    <a href="{{ slice.slice_url }}"><i class="fa fa-play"></i></a>
-                    <a class="refresh"><i class="fa fa-refresh"></i></a>
-                    <a href="{{ slice.edit_url }}"><i class="fa fa-gear"></i></a>
-                    <a class="closewidget"><i class="fa fa-close"></i></a>
-                  </div>
-                </div>
-              </div>
+              <table class="widget_header">
+                <tbody>
+                  <tr>
+                    <td class="icons">
+                      <a><i class="fa fa-arrows drag"></i></a>
+                    </td>
+                    <td>
+                      <div class="text-center header"><nobr>{{ slice.slice_name }}</nobr></div>
+                    </td>
+                    <td class="icons">
+                      <nobr>
+                      <a href="{{ slice.slice_url }}"><i class="fa fa-play"></i></a>
+                      <a class="refresh"><i class="fa fa-refresh"></i></a>
+                      <a href="{{ slice.edit_url }}"><i class="fa fa-gear"></i></a>
+                      <a class="closewidget"><i class="fa fa-close"></i></a>
+                      </br>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
               {{ viz_macros.viz_html(viz) }}
           </li>
         {% endfor %}

panoramix/templates/panoramix/viz_bignumber.html

@@ -0,0 +1,200 @@
+{% macro viz_html(viz) %}
+<div id="{{ viz.token }}" style="height: 100%;">
+  <img src="{{ url_for("static", filename="loading.gif") }}" class="loading">
+</div>
+{% endmacro %}
+
+{% macro viz_js(viz) %}
+  <script>
+
+$( document ).ready(function() {
+
+var div = d3.select("#{{ viz.token }}");
+var render = function(){
+  url = "/";
+  var url = "{{ viz.get_url(json="true")|safe }}";
+  d3.json(url, function(error, json){
+    div.html("");
+    //Define the percentage bounds that define color from red to green
+    if(error != null){
+      var err = '<div class="alert alert-danger">' + error.responseText  + '</div>';
+      div.html(err);
+      return '';
+    }
+    var color_range = [-1,1];
+    var compare_pos = -23
+    var target_url = 'd3js.org';
+
+    var f = d3.format('.3s');
+    var fp = d3.format('+.1%');
+    var xy = div.node().getBoundingClientRect();
+    var width = xy.width;
+    var height = xy.height-30;
+    var svg = div.append('svg');
+    svg.attr("width", width);
+    svg.attr("height", height);
+    data = example_data();
+    data = json.data;
+    var compare_suffix = ' ' + json.compare_suffix;
+    console.log(data);
+    var v_compare = null;
+    var v = data[data.length -1][1];
+    if (json.compare_lag >0){
+      pos = data.length - (json.compare_lag+1);
+      if(pos >=0)
+        v_compare = 1-(v / data[pos][1]);
+      console.log(v_compare)
+    }
+    var date_ext = d3.extent(data, function(d){return d[0]});
+    var value_ext = d3.extent(data, function(d){return d[1]});
+
+    var margin=20;
+    var scale_x = d3.time.scale.utc().domain(date_ext).range([margin, width-margin]);
+    var scale_y = d3.scale.linear().domain(value_ext).range([height-(margin),margin]);
+    var colorRange = [d3.hsl(0,1,0.3), d3.hsl(120, 1, 0.3)];
+    var scale_color = d3.scale
+        .linear().domain(color_range)
+        .interpolate(d3.interpolateHsl)
+        .range(colorRange).clamp(true);
+    var line = d3.svg.line()
+        .x(function(d) { return scale_x(d[0])})
+        .y(function(d) { return scale_y(d[1])})
+        .interpolate("basis");
+
+    //Drawing trend line
+    var g = svg.append('g');
+    var path = g.append('path')
+        .attr('d', function(d){return line(data);})
+        .attr('stroke-width', 5)
+        .attr('opacity', 0.5)
+        .attr('fill', "none")
+        .attr('stroke-linecap',"round")
+        .attr('stroke', "grey");
+
+    var g = svg.append('g')
+      .attr('class', 'digits')
+      .attr('opacity', 1);
+
+    var y = height/2;
+    if(v_compare != null)
+      y = (height/8) * 3;
+
+    //Printing big number
+      g.append('text')
+        .attr('x', width/2)
+        .attr('y', y)
+        .attr('class', 'big')
+        .attr('alignment-baseline', 'middle')
+        .attr('id', 'bigNumber')
+        .style('font-weight', 'bold')
+        .style('cursor', 'pointer')
+        .text(f(v))
+        .style('font-size', d3.min([height, width])/3.5)
+        .attr('fill','white');
+
+    var c = scale_color(v_compare);
+
+    //Printing compare %
+    if(v_compare != null){
+      g.append('text')
+        .attr('x', width/2)
+        .attr('y', (height/16) *12)
+        .text(fp(v_compare) + compare_suffix)
+        .style('font-size', d3.min([height, width])/8)
+        .style('text-anchor', 'middle')
+        .attr('fill', c)
+        .attr('stroke', c);
+    }
+
+      var g_axis = svg.append('g').attr('class', 'axis').attr('opacity',0);
+      var g = g_axis.append('g');
+      var x_axis = d3.svg.axis()
+        .scale(scale_x)
+        .orient('bottom')
+        //.tickFormat(d3.time.format('%I%p'))
+        .ticks(4);
+      g.call(x_axis);
+      g.attr('transform', 'translate(0,'+ (height-margin) +')');
+
+      var g = g_axis.append('g').attr('transform', 'translate('+(width-margin)+',0)');
+      var y_axis = d3.svg.axis()
+        .scale(scale_y)
+        .orient('left')
+        .tickFormat(d3.format('.3s'))
+        .tickValues(value_ext);
+      g.call(y_axis);
+      g.selectAll('text')
+        .style('text-anchor','end')
+        .attr('y','-5')
+        .attr('x','1');
+
+      g.selectAll("text")
+        .style('font-size','10px');
+
+      /*
+      g_axis.selectAll('path.domain')
+        .attr('stroke-width:1px;');
+      */
+
+      div.on('mouseover', function(d){
+        var div = d3.select(this);
+        div.select('path').transition().duration(500).attr('opacity', 1)
+          .style('stroke-width', '2px');
+        div.select('g.digits').transition().duration(500).attr('opacity', 0.1);
+        div.select('g.axis').transition().duration(500).attr('opacity', 1);
+      })
+      .on('mouseout', function(d){
+        var div = d3.select(this);
+        div.select('path').transition().duration(500).attr('opacity', 0.5)
+          .style('stroke-width', '5px');
+        div.select('g.digits').transition().duration(500).attr('opacity', 1);
+        div.select('g.axis').transition().duration(500).attr('opacity', 0);
+      });
+    });
+  };
+  render();
+  $(div).parent().find("a.refresh").click(render);
+});
+
+example_data = function(){
+  //Building a random growing trend
+  var rnd = d3.random.normal(5000000, 500000);
+  var data = [];
+  for(i=0; i<24; i++){
+    data.push([
+      new Date(2015, 1, i, 1, 0, 0, 0), 
+      rnd() + (i*(rnd()/40))
+    ]);
+  }
+  return data;
+}
+  </script>
+{% endmacro %}
+
+{% macro viz_css(viz) %}
+<style>
+g.axis text{
+  font-size:10px;
+  font-weight:normal;
+  color: gray;
+  fill: gray;
+  text-anchor:middle;
+  alignment-baseline: middle;
+  font-weight: none;
+}
+text.big{
+  stroke: black;
+  text-anchor:middle;
+  fill: black;
+}
+g.tick line {
+  stroke-width: 1px;
+  stroke: grey;
+}
+.domain {
+  fill: none;
+  stroke: black;
+  stroke-width; 1;
+}
+</style>
+{% endmacro %}

panoramix/views.py

@@ -249,13 +249,15 @@ def datasource(self, datasource_type, datasource_id):
                 status=status,
                 mimetype="application/json")
         else:
-            try:
-                resp = self.render_template("panoramix/viz.html", viz=obj)
+            #try:
+            resp = self.render_template("panoramix/viz.html", viz=obj)
+            '''
             except Exception as e:
                 return Response(
                     str(e),
                     status=500,
                     mimetype="application/json")
+            '''
             return resp
 
     @has_access

panoramix/viz.py

@@ -1,6 +1,6 @@
 from collections import OrderedDict
 from datetime import datetime
-from urllib import urlencode
+import json
 import uuid
 
 from flask import flash
@@ -215,6 +215,46 @@ def get_json(self):
         chart = HighchartBubble(df)
         return chart.json
 
+class BigNumberViz(BaseViz):
+    verbose_name = "Big Number"
+    template = 'panoramix/viz_bignumber.html'
+    js_files = ['d3.min.js']
+    form_fields = [
+        'viz_type',
+        'granularity', ('since', 'until'),
+        'metric',
+        'compare_lag',
+        'compare_suffix',
+        #('rolling_type', 'rolling_periods'),
+    ]
+
+    def query_obj(self):
+        d = super(BigNumberViz, self).query_obj()
+        metric = self.args.get('metric')
+        if not metric:
+            raise Exception("Pick a metric!")
+        d['metrics'] = [self.args.get('metric')]
+        return d
+
+    def get_df(self):
+        args = self.args
+        self.df = super(BigNumberViz, self).get_df()
+        return self.df
+
+    def get_json(self):
+        args = self.args
+        df = self.get_df()
+        df = df.sort(columns=df.columns[0])
+        df['timestamp'] = df[[0]].astype(np.int64) // 10**9
+        compare_lag = args.get("compare_lag", "")
+        compare_lag = int(compare_lag) if compare_lag.isdigit() else 0
+        d = {
+            'data': df.values.tolist(),
+            'compare_lag': compare_lag,
+            'compare_suffix': args.get('compare_suffix', ''),
+        }
+        return json.dumps(d)
+
 
 class TimeSeriesViz(HighchartsViz):
     verbose_name = "Time Series - Line Chart"
@@ -327,6 +367,7 @@ class DistributionBarViz(DistributionPieViz):
 viz_types = OrderedDict([
     ['table', TableViz],
     ['line', TimeSeriesViz],
+    ['big_number', BigNumberViz],
     ['compare', TimeSeriesCompareViz],
     ['compare_value', TimeSeriesCompareValueViz],
     ['area', TimeSeriesAreaViz],