From 4f7a5f33bb57ea532d6cded8399f4cad623d9356 Mon Sep 17 00:00:00 2001 From: Maxime Beauchemin Date: Wed, 13 Jan 2016 08:50:55 -0800 Subject: [PATCH] Refactoring --- panoramix/static/panoramix.js | 4 +- panoramix/static/widgets/viz_bignumber.js | 2 +- panoramix/static/widgets/viz_nvd3.js | 49 ++++++++++------------ panoramix/static/widgets/viz_sunburst.js | 38 ++--------------- panoramix/static/widgets/viz_world_map.css | 2 +- panoramix/static/widgets/viz_world_map.js | 23 +++++----- panoramix/templates/panoramix/explore.html | 7 +--- panoramix/viz.py | 26 ++---------- 8 files changed, 48 insertions(+), 103 deletions(-) diff --git a/panoramix/static/panoramix.js b/panoramix/static/panoramix.js index 71b2d3b46b2e7..0659f0de59354 100644 --- a/panoramix/static/panoramix.js +++ b/panoramix/static/panoramix.js @@ -77,7 +77,7 @@ var px = (function() { return token.width(); }, height: function(){ - return token.height(); + return token.height() - 25; }, render: function() { $('.btn-group.results span').attr('disabled','disabled'); @@ -222,7 +222,7 @@ var px = (function() { $(".select2").select2({dropdownAutoWidth : true}); $(".select2Sortable").select2(); - $(".select2Sortable").select2Sortable(); + $(".select2Sortable").select2Sortable({bindOrder: 'sortableStop'}); $("form").show(); $('[data-toggle="tooltip"]').tooltip({container: 'body'}); diff --git a/panoramix/static/widgets/viz_bignumber.js b/panoramix/static/widgets/viz_bignumber.js index f7db55a294422..361d083f33f91 100644 --- a/panoramix/static/widgets/viz_bignumber.js +++ b/panoramix/static/widgets/viz_bignumber.js @@ -17,7 +17,7 @@ px.registerViz('big_number', function(slice) { var f = d3.format('.3s'); var fp = d3.format('+.1%'); var width = slice.width(); - var height = slice.height() - 30; + var height = slice.height(); var svg = div.append('svg'); svg.attr("width", width); svg.attr("height", height); diff --git a/panoramix/static/widgets/viz_nvd3.js b/panoramix/static/widgets/viz_nvd3.js index 304ef160c984c..1556ca31e7385 100644 --- a/panoramix/static/widgets/viz_nvd3.js +++ b/panoramix/static/widgets/viz_nvd3.js @@ -25,19 +25,17 @@ function viz_nvd3(slice) { ]; var refresh = function() { $.getJSON(slice.jsonEndpoint(), function(payload) { - var data = payload.data; - var viz = payload; - var viz_type = viz.form_data.viz_type; - var fd = viz.form_data; + var fd = payload.form_data; + var viz_type = fd.viz_type; var f = d3.format('.4s'); nv.addGraph(function() { if (viz_type === 'line') { - if (viz.form_data.show_brush) { + if (fd.show_brush) { chart = nv.models.lineWithFocusChart(); //chart.lines2.xScale( d3.time.scale.utc()); chart.lines2.xScale(d3.time.scale.utc()); chart.x2Axis - .showMaxMin(viz.form_data.x_axis_showminmax) + .showMaxMin(fd.x_axis_showminmax) .tickFormat(formatDate) .staggerLabels(true); } else { @@ -46,17 +44,17 @@ function viz_nvd3(slice) { // To alter the tooltip header // chart.interactiveLayer.tooltip.headerFormatter(function(){return '';}); chart.xScale(d3.time.scale.utc()); - chart.interpolate(viz.form_data.line_interpolation); + chart.interpolate(fd.line_interpolation); chart.xAxis - .showMaxMin(viz.form_data.x_axis_showminmax) + .showMaxMin(fd.x_axis_showminmax) .tickFormat(formatDate) .staggerLabels(true); - chart.showLegend(viz.form_data.show_legend); + chart.showLegend(fd.show_legend); chart.yAxis.tickFormat(d3.format('.3s')); if (chart.y2Axis != undefined) { chart.y2Axis.tickFormat(d3.format('.3s')); } - if (viz.form_data.contribution || viz.form_data.num_period_compare) { + if (fd.contribution || fd.num_period_compare) { chart.yAxis.tickFormat(d3.format('.3p')); if (chart.y2Axis != undefined) { chart.y2Axis.tickFormat(d3.format('.3p')); @@ -70,7 +68,7 @@ function viz_nvd3(slice) { .showMaxMin(false) .tickFormat(formatDate) .staggerLabels(true); - chart.showLegend(viz.form_data.show_legend); + chart.showLegend(fd.show_legend); chart.yAxis.tickFormat(d3.format('.3s')); } else if (viz_type === 'dist_bar') { @@ -85,8 +83,8 @@ function viz_nvd3(slice) { } else if (viz_type === 'pie') { chart = nv.models.pieChart() - chart.showLegend(viz.form_data.show_legend); - if (viz.form_data.donut) { + chart.showLegend(fd.show_legend); + if (fd.donut) { chart.donut(true); chart.donutLabelsOutside(true); } @@ -106,7 +104,7 @@ function viz_nvd3(slice) { .showMaxMin(false) .tickFormat(formatDate) .staggerLabels(true); - chart.showLegend(viz.form_data.show_legend); + chart.showLegend(fd.show_legend); chart.yAxis.tickFormat(d3.format('.3p')); } else if (viz_type === 'bubble') { @@ -138,38 +136,38 @@ function viz_nvd3(slice) { .showMaxMin(false) .tickFormat(formatDate) .staggerLabels(true); - chart.showLegend(viz.form_data.show_legend); + chart.showLegend(fd.show_legend); chart.yAxis.tickFormat(d3.format('.3s')); } // make space for labels on right //chart.height($(".chart").height() - 50).margin({"right": 50}); - if ((viz_type === "line" || viz_type === "area") && viz.form_data.rich_tooltip) { + if ((viz_type === "line" || viz_type === "area") && fd.rich_tooltip) { chart.useInteractiveGuideline(true); } - if (viz.form_data.y_axis_zero) { + if (fd.y_axis_zero) { chart.forceY([0, 1]); } - else if (viz.form_data.y_log_scale) { + else if (fd.y_log_scale) { chart.yScale(d3.scale.log()); } - if (viz.form_data.x_log_scale) { + if (fd.x_log_scale) { chart.xScale(d3.scale.log()); } - if (viz.form_data.y_axis_format) { - chart.yAxis.tickFormat(d3.format(viz.form_data.y_axis_format)); + if (fd.y_axis_format) { + chart.yAxis.tickFormat(d3.format(fd.y_axis_format)); if (chart.y2Axis != undefined) { - chart.y2Axis.tickFormat(d3.format(viz.form_data.y_axis_format)); + chart.y2Axis.tickFormat(d3.format(fd.y_axis_format)); } } chart.duration(0); - d3.select(slice.selector).append("svg") - .datum(data.chart_data) + .datum(payload.data) .transition().duration(500) .call(chart); + // if it is a two axis chart, rescale it down just a little so it fits in the div. if(chart.hasOwnProperty("x2Axis")) { two_axis_chart = $(slice.selector + " > svg"); @@ -177,10 +175,9 @@ function viz_nvd3(slice) { h = two_axis_chart.height(); two_axis_chart.get(0).setAttribute('viewBox', '0 0 '+w+' '+(h+30)); } - return chart; }); - slice.done(data); + slice.done(payload); }) .fail(function(xhr) { slice.error(xhr.responseText); diff --git a/panoramix/static/widgets/viz_sunburst.js b/panoramix/static/widgets/viz_sunburst.js index 3b8bccc687e6c..528fa4dfacdaf 100644 --- a/panoramix/static/widgets/viz_sunburst.js +++ b/panoramix/static/widgets/viz_sunburst.js @@ -4,19 +4,15 @@ Modified from http://bl.ocks.org/kerryrodden/7090426 function viz_sunburst(slice) { var container = d3.select(slice.selector); - var width = slice.width(); - var height = slice.height() - 25; var render = function() { - // Breadcrumb dimensions: width, height, spacing, width of tip/tail. - var b = { - w: 100, h: 30, s: 3, t: 10 - }; - var colorScale; + var width = slice.width(); + var height = slice.height() - 5; // Total size of all segments; we set this later, after loading the data. var totalSize = 0; var radius = Math.min(width, height) / 2; + container.select("svg").remove(); var vis = container.append("svg:svg") .attr("width", width) .attr("height", height) @@ -64,7 +60,7 @@ function viz_sunburst(slice) { }); ext = d3.extent(nodes, function(d){return d.m2 / d.m1;}); - colorScale = d3.scale.linear() + var colorScale = d3.scale.linear() .domain([ext[0], ext[0] + ((ext[1] - ext[0]) / 2), ext[1]]) .range(["#00D1C1", "white","#FFB400"]); @@ -112,7 +108,6 @@ function viz_sunburst(slice) { .text("m2/m1: " + fp(d.m2/d.m1)); var sequenceArray = getAncestors(d); - updateBreadcrumbs(sequenceArray, percentageString); // Fade all the segments. container.selectAll("path") @@ -165,31 +160,6 @@ function viz_sunburst(slice) { return path; } - // Generate a string that describes the points of a breadcrumb polygon. - function breadcrumbPoints(d, i) { - var points = []; - points.push("0,0"); - points.push(b.w + ",0"); - points.push(b.w + b.t + "," + (b.h / 2)); - points.push(b.w + "," + b.h); - points.push("0," + b.h); - if (i > 0) { // Leftmost breadcrumb; don't include 6th vertex. - points.push(b.t + "," + (b.h / 2)); - } - return points.join(" "); - } - - // Update the breadcrumb trail to show the current sequence and percentage. - function updateBreadcrumbs(nodeArray, percentageString) { - l = []; - for(var i=0; i ') - gMiddleText.append("text").text(s).classed("middle", true) - .attr("y", -75); - } - function buildHierarchy(rows) { var root = {"name": "root", "children": []}; for (var i = 0; i < rows.length; i++) { diff --git a/panoramix/static/widgets/viz_world_map.css b/panoramix/static/widgets/viz_world_map.css index b4e85c530afdb..323341ab580f5 100644 --- a/panoramix/static/widgets/viz_world_map.css +++ b/panoramix/static/widgets/viz_world_map.css @@ -1,3 +1,3 @@ .world_map svg{ - background-color: LightSkyBlue; + background-color: #bce8f1; } diff --git a/panoramix/static/widgets/viz_world_map.js b/panoramix/static/widgets/viz_world_map.js index da1856c051a9d..0ae8799d95a2f 100644 --- a/panoramix/static/widgets/viz_world_map.js +++ b/panoramix/static/widgets/viz_world_map.js @@ -1,13 +1,14 @@ /* - Using the awesome lib at http://datamaps.github.io/ + Using the awesome lib at http://datamaps.github.io/ */ function viz_world_map(slice) { - var render = function() { + var render = function() { var container = slice.container; var div = d3.select(slice.selector); d3.json(slice.jsonEndpoint(), function(error, json){ + var fd = json.form_data; if (error != null){ slice.error(error.responseText); @@ -16,14 +17,14 @@ function viz_world_map(slice) { var ext = d3.extent(json.data, function(d){return d.m1}); var extRadius = d3.extent(json.data, function(d){return d.m2}); var radiusScale = d3.scale.linear() - .domain([extRadius[0], extRadius[1]]) - .range([1, slice.data.form_data.max_bubble_size]); - json.data.forEach(function(d){ - d.radius = radiusScale(d.m2); - }) + .domain([extRadius[0], extRadius[1]]) + .range([1, fd.max_bubble_size]); + json.data.forEach(function(d){ + d.radius = radiusScale(d.m2); + }); var colorScale = d3.scale.linear() - .domain([ext[0], ext[1]]) - .range(["#FFF", "black"]); + .domain([ext[0], ext[1]]) + .range(["#FFF", "black"]); var d = {}; for (var i=0; iQuery
- 
-              {% if viz.query %}
-              {% else %}
-                Under construction
-              {% endif %}
-
+ 

           

           

             
diff --git a/panoramix/viz.py b/panoramix/viz.py
index 294e0e8bc66d5..b107a6fa82f7e 100644
--- a/panoramix/viz.py
+++ b/panoramix/viz.py
@@ -540,11 +540,7 @@ def get_json_data(self):
                 'key': k,
                 "color": utils.color(str(k)),
                 'values': v })
-        return dumps({
-            'chart_data': chart_data,
-            'query': self.results.query,
-            'duration': self.results.duration,
-        })
+        return dumps(chart_data)
 
 class BigNumberViz(BaseViz):
     viz_type = "big_number"
@@ -740,13 +736,7 @@ def get_json_data(self):
             chart_data += self.to_series(
                 df2, classed='dashed', title_suffix="---")
             chart_data = sorted(chart_data, key=lambda x: x['key'])
-
-        data = {
-            'chart_data': chart_data,
-            'query': self.results.query,
-            'duration': self.results.duration,
-        }
-        return dumps(data)
+        return dumps(chart_data)
 
 
 class NVD3TimeSeriesBarViz(NVD3TimeSeriesViz):
@@ -800,11 +790,7 @@ def get_json_data(self):
         df = df.reset_index()
         df.columns = ['x', 'y']
         df['color'] = map(utils.color, df.x)
-        return dumps({
-            'chart_data': df.to_dict(orient="records"),
-            'query': self.results.query,
-            'duration': self.results.duration,
-        })
+        return dumps(df.to_dict(orient="records"))
 
 
 class DistributionBarViz(DistributionPieViz):
@@ -853,11 +839,7 @@ def get_json_data(self):
                     for i, ds in enumerate(df.timestamp)]
             }
             chart_data.append(d)
-        return dumps({
-            'chart_data': chart_data,
-            'query': self.results.query,
-            'duration': self.results.duration,
-        })
+        return dumps(chart_data)
 
 
 class SunburstViz(BaseViz):