Extract word cloud javascript to separate file.

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 = '<div class="alert alert-danger">' + error.responseText  + '</div>';
+        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);
+}

panoramix/templates/panoramix/viz_bignumber.html

@@ -13,7 +13,8 @@
 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 @@
   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))
     ]);
   }

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 }}

panoramix/templates/panoramix/viz_table.html

@@ -4,15 +4,15 @@
     <table class="dataframe table table-striped table-bordered table-condensed">
       <thead>
         <tr>
-          {% for col in df.columns if not col.endswith('__perc') %}  
+          {% for col in df.columns if not col.endswith('__perc') %}
             <th>{{ col }}</th>
           {% endfor %}
         </tr>
       </thead>
       <tbody>
         {% for row in df.to_dict(orient="records") %}
         <tr>
-          {% 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 %}
             <td style="background-image: linear-gradient(to right, lightgrey, lightgrey {{ row[col+'__perc'] }}%, rgba(0,0,0,0) {{ row[col+'__perc'] }}%">
               {{ row[col] }}

panoramix/templates/panoramix/viz_word_cloud.html

@@ -6,69 +6,12 @@
 
 {% macro viz_js(viz) %}
 <script>
-$( document ).ready(function() {
-  var token = d3.select("#{{ viz.token }}");
-  function refresh() {
-    var range = [
-      {{ viz.form_data.get('size_from') or 20 }}, 
-      {{ viz.form_data.get('size_to') or 100 }}
-    ];
-    var rotation = "{{ viz.form_data.get("rotation", "random") }}";
-    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 url = "{{ viz.get_url(json="true")|safe }}";
-    var box = token.node().getBoundingClientRect();
-    var size = [box.width, box.height-25];
-    d3.json(url, function(error, data){
-      if(error != null){
-        var err = '<div class="alert alert-danger">' + error.responseText  + '</div>';
-        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);
-});
+  $(document).ready(function() {
+    viz_wordcloud(
+      "{{ viz.token }}",
+      "{{ viz.get_url(json="true")|safe }}"
+    );
+  });
 </script>
 {% endmacro %}
 

panoramix/viz.py

@@ -159,6 +159,12 @@ def query_obj(self):
         }
         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 @@ def query_obj(self):
         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 @@ def get_df(self):
         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 @@ def query_obj(self):
         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 @@ def get_df(self):
                 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 @@ def get_df(self):
         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 @@ def get_df(self):
         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 = []