Merge pull request #212 from airbnb/big_number_total

Adding a big number total viz type that is not a timeseries metric

caravel/assets/javascripts/modules/caravel.js

@@ -8,6 +8,7 @@ var sourceMap = {
   bar: 'nvd3_vis.js',
   bubble: 'nvd3_vis.js',
   big_number: 'big_number.js',
+  big_number_total: 'big_number.js',
   compare: 'nvd3_vis.js',
   dist_bar: 'nvd3_vis.js',
   directed_force: 'directed_force.js',

caravel/assets/visualizations/big_number.css

@@ -1,4 +1,5 @@
-.big_number g.axis text {
+.big_number g.axis text,
+.big_number_total g.axis text {
   font-size: 10px;
   font-weight: normal;
   color: gray;
@@ -8,18 +9,21 @@
   font-weight: none;
 }
 
-.big_number text.big {
+.big_number text.big,
+.big_number_total text.big{
   stroke: black;
   text-anchor: middle;
   fill: black;
 }
 
-.big_number g.tick line {
+.big_number g.tick line,
+.big_number_total g.tick line{
   stroke-width: 1px;
   stroke: grey;
 }
 
-.big_number .domain {
+.big_number .domain,
+.big_number_total .domain{
   fill: none;
   stroke: black;
   stroke-width: 1;

caravel/assets/visualizations/big_number.js

@@ -31,7 +31,12 @@ function bigNumberVis(slice) {
       var data = json.data;
       var compare_suffix = ' ' + json.compare_suffix;
       var v_compare = null;
-      var v = data[data.length - 1][1];
+      var v = null;
+      if (data.length > 1) {
+          v = data[data.length - 1][1];
+      } else {
+          v = data[data.length - 1][0];
+      }
       if (json.compare_lag > 0) {
         var pos = data.length - (json.compare_lag + 1);
         if (pos >= 0) {
@@ -97,6 +102,19 @@ function bigNumberVis(slice) {
         .style('font-size', d3.min([height, width]) / 3.5)
         .attr('fill', 'white');
 
+      //Printing big number subheader text
+      if (json.subheader !== null) {
+        g.append('text')
+          .attr('x', width / 2)
+          .attr('y', y + d3.min([height, width]) / 4.5)
+          .text(json.subheader)
+          .attr('id', 'subheader_text')
+          .style('font-size', d3.min([height, width]) / 16)
+          .style('text-anchor', 'middle')
+          .attr('fill', c)
+          .attr('stroke', c);
+      }
+
       var c = scale_color(v_compare);
 
       //Printing compare %

caravel/data/__init__.py

@@ -533,6 +533,16 @@ def load_birth_names():
                 defaults,
                 viz_type="big_number", granularity="ds",
                 compare_lag="5", compare_suffix="over 5Y")),
+        Slice(
+            slice_name="Number of Girls",
+            viz_type='big_number_total',
+            datasource_type='table',
+            table=tbl,
+            params=get_slice_json(
+                defaults,
+                viz_type="big_number_total", granularity="ds",
+                flt_col_1='gender', flt_eq_1='girl',
+                subheader='total female participants')),
         Slice(
             slice_name="Genders",
             viz_type='pie',

caravel/forms.py

@@ -504,6 +504,11 @@ def __init__(self, viz):
                     "relative time period. Expects relative time delta "
                     "in natural language (example: 24 hours, 7 days, "
                     "56 weeks, 365 days")),
+            'subheader': TextField(
+                'Subheader',
+                description=(
+                    "Description text that shows up below your Big "
+                    "Number")),
         }
 
     @staticmethod

caravel/viz.py

@@ -558,7 +558,7 @@ class BigNumberViz(BaseViz):
     """Put emphasis on a single metric with this big number viz"""
 
     viz_type = "big_number"
-    verbose_name = "Big Number"
+    verbose_name = "Big Number with Trendline"
     is_timeseries = True
     fieldsets = ({
         'label': None,
@@ -602,6 +602,51 @@ def get_data(self):
         }
 
 
+class BigNumberTotalViz(BaseViz):
+
+    """Put emphasis on a single metric with this big number viz"""
+
+    viz_type = "big_number_total"
+    verbose_name = "Big Number"
+    is_timeseries = False
+    fieldsets = ({
+        'label': None,
+        'fields': (
+            'metric',
+            'subheader',
+            'y_axis_format',
+        )
+    },)
+    form_overrides = {
+        'y_axis_format': {
+            'label': 'Number format',
+        }
+    }
+
+    def reassignments(self):
+        metric = self.form_data.get('metric')
+        if not metric:
+            self.form_data['metric'] = self.orig_form_data.get('metrics')
+
+    def query_obj(self):
+        d = super(BigNumberTotalViz, self).query_obj()
+        metric = self.form_data.get('metric')
+        if not metric:
+            raise Exception("Pick a metric!")
+        d['metrics'] = [self.form_data.get('metric')]
+        self.form_data['metric'] = metric
+        return d
+
+    def get_data(self):
+        form_data = self.form_data
+        df = self.get_df()
+        df = df.sort(columns=df.columns[0])
+        return {
+            'data': df.values.tolist(),
+            'subheader': form_data.get('subheader', ''),
+        }
+
+
 class NVD3TimeSeriesViz(NVD3Viz):
 
     """A rich line chart component with tons of options"""
@@ -1290,6 +1335,7 @@ def get_data(self):
     MarkupViz,
     WordCloudViz,
     BigNumberViz,
+    BigNumberTotalViz,
     SunburstViz,
     DirectedForceViz,
     SankeyViz,