From 59169bfc96a5dd682f551a42def9623aaa1e0b4c Mon Sep 17 00:00:00 2001 From: michellethomas Date: Thu, 7 Apr 2016 14:22:12 -0700 Subject: [PATCH] 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 | 1 + caravel/assets/visualizations/big_number.css | 12 +++-- caravel/assets/visualizations/big_number.js | 20 +++++++- caravel/data/__init__.py | 10 ++++ caravel/forms.py | 5 ++ caravel/viz.py | 48 ++++++++++++++++++- 6 files changed, 90 insertions(+), 6 deletions(-) diff --git a/caravel/assets/javascripts/modules/caravel.js b/caravel/assets/javascripts/modules/caravel.js index 7c9112fcd9393..88c11e7967fdc 100644 --- a/caravel/assets/javascripts/modules/caravel.js +++ b/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', diff --git a/caravel/assets/visualizations/big_number.css b/caravel/assets/visualizations/big_number.css index 872a5715a23f2..e490395914b30 100644 --- a/caravel/assets/visualizations/big_number.css +++ b/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; diff --git a/caravel/assets/visualizations/big_number.js b/caravel/assets/visualizations/big_number.js index a9d2b6331b4e3..676c9b46c225d 100644 --- a/caravel/assets/visualizations/big_number.js +++ b/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 % diff --git a/caravel/data/__init__.py b/caravel/data/__init__.py index 43ce7d92cb068..1c6c0d42c2a4c 100644 --- a/caravel/data/__init__.py +++ b/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', diff --git a/caravel/forms.py b/caravel/forms.py index 159437adc4aa9..e69f04895cbf8 100644 --- a/caravel/forms.py +++ b/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 diff --git a/caravel/viz.py b/caravel/viz.py index d3b0f3f953f1d..7cfc68f480b12 100644 --- a/caravel/viz.py +++ b/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,