diff --git a/panoramix/static/widgets/viz_wordcloud.js b/panoramix/static/widgets/viz_wordcloud.js new file mode 100644 index 0000000000..1464816ac7 --- /dev/null +++ b/panoramix/static/widgets/viz_wordcloud.js @@ -0,0 +1,66 @@ +function viz_wordcloud(token, json_callback) { + var token = d3.select('#' + token); + function refresh() { + d3.json(json_callback, function(error, json) { + var data = json.data; + var range = [ + json.form_data.size_from, + json.form_data.size_to, + ]; + var rotation = json.form_data.rotation; + if (rotation == "square") { + var f_rotation = function() { return ~~(Math.random() * 2) * 90; }; + } + else if (rotation == "flat") { + var f_rotation = function() { return 0 }; + } + else { + var f_rotation = function() { return (~~(Math.random() * 6) - 3) * 30; }; + } + var box = token.node().getBoundingClientRect(); + var size = [box.width, box.height - 25]; + + if (error != null){ + var err = '
' + error.responseText + '
'; + token.html(err); + return ''; + } + scale = d3.scale.linear() + .range(range) + .domain(d3.extent(data, function(d) { return d.size; })); + var fill = d3.scale.category20(); + var layout = d3.layout.cloud() + .size(size) + .words(data) + .padding(5) + .rotate(f_rotation) + .font("serif") + .fontSize(function(d) { return scale(d.size); }) + .on("end", draw); + layout.start(); + function draw(words) { + token.selectAll("*").remove(); + + token.append("svg") + .attr("width", layout.size()[0]) + .attr("height", layout.size()[1]) + .append("g") + .attr("transform", "translate(" + layout.size()[0] / 2 + "," + layout.size()[1] / 2 + ")") + .selectAll("text") + .data(words) + .enter().append("text") + .style("font-size", function(d) { return d.size + "px"; }) + .style("font-family", "Impact") + .style("fill", function(d, i) { return fill(i); }) + .attr("text-anchor", "middle") + .attr("transform", function(d) { + return "translate(" + [d.x, d.y] + ") rotate(" + d.rotate + ")"; + }) + .text(function(d) { return d.text; }); + } + }); + } + refresh(); + jtoken = $(token); + jtoken.parent().find("a.refresh").click(refresh); +} diff --git a/panoramix/templates/panoramix/viz_bignumber.html b/panoramix/templates/panoramix/viz_bignumber.html index 4dbeada43c..07f7f3c9a3 100644 --- a/panoramix/templates/panoramix/viz_bignumber.html +++ b/panoramix/templates/panoramix/viz_bignumber.html @@ -13,7 +13,8 @@ var div = d3.select("#{{ viz.token }}"); var render = function(){ url = "/"; var url = "{{ viz.get_url(json="true")|safe }}"; - d3.json(url, function(error, json){ + d3.json(url, function(error, payload){ + json = payload.data; div.html(""); //Define the percentage bounds that define color from red to green if(error != null){ @@ -161,7 +162,7 @@ example_data = function(){ var data = []; for(i=0; i<24; i++){ data.push([ - new Date(2015, 1, i, 1, 0, 0, 0), + new Date(2015, 1, i, 1, 0, 0, 0), rnd() + (i*(rnd()/40)) ]); } diff --git a/panoramix/templates/panoramix/viz_nvd3.html b/panoramix/templates/panoramix/viz_nvd3.html index d36881fb80..fb5989ae79 100644 --- a/panoramix/templates/panoramix/viz_nvd3.html +++ b/panoramix/templates/panoramix/viz_nvd3.html @@ -33,7 +33,8 @@ chart.hide(); loading.show(); var url = "{{ viz.get_url(json="true")|safe }}"; - $.getJSON(url, function(data){ + $.getJSON(url, function(payload){ + data = payload.data; $("#query_container").html(data.query); nv.addGraph(function() { // chart_type is {{ viz.chart_type }} diff --git a/panoramix/templates/panoramix/viz_table.html b/panoramix/templates/panoramix/viz_table.html index 2674019ccb..bb1c8795b1 100644 --- a/panoramix/templates/panoramix/viz_table.html +++ b/panoramix/templates/panoramix/viz_table.html @@ -4,7 +4,7 @@ - {% for col in df.columns if not col.endswith('__perc') %} + {% for col in df.columns if not col.endswith('__perc') %} {% endfor %} @@ -12,7 +12,7 @@ {% for row in df.to_dict(orient="records") %} - {% for col in df.columns if not col.endswith('__perc') %} + {% for col in df.columns if not col.endswith('__perc') %} {% if col + '__perc' in df.columns %}
{{ col }}
{{ row[col] }} diff --git a/panoramix/templates/panoramix/viz_word_cloud.html b/panoramix/templates/panoramix/viz_word_cloud.html index 3381a6c65a..3260da7e4a 100644 --- a/panoramix/templates/panoramix/viz_word_cloud.html +++ b/panoramix/templates/panoramix/viz_word_cloud.html @@ -6,69 +6,12 @@ {% macro viz_js(viz) %} {% endmacro %} diff --git a/panoramix/viz.py b/panoramix/viz.py index 55e17bb6b1..d56df717f3 100644 --- a/panoramix/viz.py +++ b/panoramix/viz.py @@ -159,6 +159,12 @@ class BaseViz(object): } return d + def get_json(self): + payload = { + 'data': json.loads(self.get_json_data()), + 'form_data': self.form_data, + } + return json.dumps(payload) class TableViz(BaseViz): verbose_name = "Table View" @@ -212,7 +218,11 @@ class WordCloudViz(BaseViz): ('size_from', 'size_to'), 'rotation', ] - js_files = ['d3.layout.cloud.js'] + js_files = [ + 'd3.min.js', + 'd3.layout.cloud.js', + 'widgets/viz_wordcloud.js', + ] def query_obj(self): d = super(WordCloudViz, self).query_obj() @@ -224,7 +234,7 @@ class WordCloudViz(BaseViz): d['groupby'] = [d['groupby'][0]] return d - def get_json(self): + def get_json_data(self): df = self.get_df() df.columns = ['text', 'size'] return df.to_json(orient="records") @@ -283,7 +293,7 @@ class BubbleViz(NVD3Viz): df['group'] = df[[self.series]] return df - def get_json(self): + def get_json_data(self): df = self.get_df() series = defaultdict(list) for row in df.to_dict(orient='records'): @@ -325,7 +335,7 @@ class BigNumberViz(BaseViz): self.form_data['metric'] = metric return d - def get_json(self): + def get_json_data(self): form_data = self.form_data df = self.get_df() df = df.sort(columns=df.columns[0]) @@ -394,7 +404,7 @@ class NVD3TimeSeriesViz(NVD3Viz): df = pd.rolling_sum(df, int(rolling_periods)) return df - def get_json(self): + def get_json_data(self): df = self.get_df() series = df.to_dict('series') chart_data = [] @@ -491,7 +501,7 @@ class DistributionPieViz(NVD3Viz): df = df.sort(self.metrics[0], ascending=False) return df - def get_json(self): + def get_json_data(self): df = self.get_df() df = df.reset_index() df.columns = ['x', 'y'] @@ -515,7 +525,7 @@ class DistributionBarViz(DistributionPieViz): df = df.sort(self.metrics[0], ascending=False) return df - def get_json(self): + def get_json_data(self): df = self.get_df() series = df.to_dict('series') chart_data = []