diff --git a/panoramix/static/widgets/viz_bignumber.css b/panoramix/static/widgets/viz_bignumber.css
index 56ea4659d..83c6c467e 100644
--- a/panoramix/static/widgets/viz_bignumber.css
+++ b/panoramix/static/widgets/viz_bignumber.css
@@ -1,16 +1,16 @@
-.viz_bignumber g.axis text{
- font-size:10px;
- font-weight:normal;
+.viz_bignumber g.axis text {
+ font-size: 10px;
+ font-weight: normal;
color: gray;
fill: gray;
- text-anchor:middle;
+ text-anchor: middle;
alignment-baseline: middle;
font-weight: none;
}
-.viz_bignumber text.big{
+.viz_bignumber text.big {
stroke: black;
- text-anchor:middle;
+ text-anchor: middle;
fill: black;
}
@@ -22,5 +22,5 @@
.viz_bignumber .domain {
fill: none;
stroke: black;
- stroke-width; 1;
+ stroke-width: 1;
}
diff --git a/panoramix/static/widgets/viz_bignumber.js b/panoramix/static/widgets/viz_bignumber.js
index 5de399505..f405ca9f7 100644
--- a/panoramix/static/widgets/viz_bignumber.js
+++ b/panoramix/static/widgets/viz_bignumber.js
@@ -1,75 +1,75 @@
function viz_bignumber(token, json_callback) {
-
-var div = d3.select('#' + token);
-var render = function(){
- d3.json(json_callback, function(error, payload){
- json = payload.data;
- div.html("");
- //Define the percentage bounds that define color from red to green
- if(error != null){
- var err = '
' + error.responseText + '
';
- div.html(err);
- return '';
- }
- var color_range = [-1,1];
- var compare_pos = -23
- var target_url = 'd3js.org';
-
- var f = d3.format('.3s');
- var fp = d3.format('+.1%');
- var xy = div.node().getBoundingClientRect();
- var width = xy.width;
- var height = xy.height-30;
- var svg = div.append('svg');
- svg.attr("width", width);
- svg.attr("height", height);
- data = json.data;
- var compare_suffix = ' ' + json.compare_suffix;
- var v_compare = null;
- var v = data[data.length -1][1];
- if (json.compare_lag >0){
- pos = data.length - (json.compare_lag+1);
- if(pos >=0){
- v_compare = (v / data[pos][1])-1;
+ var div = d3.select('#' + token);
+ var render = function() {
+ d3.json(json_callback, function(error, payload){
+ json = payload.data;
+ div.html("");
+ //Define the percentage bounds that define color from red to green
+ if (error != null){
+ var err = '' + error.responseText + '
';
+ div.html(err);
+ return '';
}
- }
- var date_ext = d3.extent(data, function(d){return d[0]});
- var value_ext = d3.extent(data, function(d){return d[1]});
+ var color_range = [-1, 1];
+ var compare_pos = -23
+ var target_url = 'd3js.org';
- var margin=20;
- var scale_x = d3.time.scale.utc().domain(date_ext).range([margin, width-margin]);
- var scale_y = d3.scale.linear().domain(value_ext).range([height-(margin),margin]);
- var colorRange = [d3.hsl(0,1,0.3), d3.hsl(120, 1, 0.3)];
- var scale_color = d3.scale
- .linear().domain(color_range)
- .interpolate(d3.interpolateHsl)
- .range(colorRange).clamp(true);
- var line = d3.svg.line()
- .x(function(d) { return scale_x(d[0])})
- .y(function(d) { return scale_y(d[1])})
- .interpolate("basis");
+ var f = d3.format('.3s');
+ var fp = d3.format('+.1%');
+ var xy = div.node().getBoundingClientRect();
+ var width = xy.width;
+ var height = xy.height - 30;
+ var svg = div.append('svg');
+ svg.attr("width", width);
+ svg.attr("height", height);
+ data = json.data;
+ var compare_suffix = ' ' + json.compare_suffix;
+ var v_compare = null;
+ var v = data[data.length - 1][1];
+ if (json.compare_lag > 0){
+ pos = data.length - (json.compare_lag + 1);
+ if (pos >= 0){
+ v_compare = (v / data[pos][1]) - 1;
+ }
+ }
+ var date_ext = d3.extent(data, function(d) { return d[0]; });
+ var value_ext = d3.extent(data, function(d) { return d[1]; });
- //Drawing trend line
- var g = svg.append('g');
- var path = g.append('path')
- .attr('d', function(d){return line(data);})
- .attr('stroke-width', 5)
- .attr('opacity', 0.5)
- .attr('fill', "none")
- .attr('stroke-linecap',"round")
- .attr('stroke', "grey");
+ var margin = 20;
+ var scale_x = d3.time.scale.utc().domain(date_ext).range([margin, width - margin]);
+ var scale_y = d3.scale.linear().domain(value_ext).range([height - (margin), margin]);
+ var colorRange = [d3.hsl(0, 1, 0.3), d3.hsl(120, 1, 0.3)];
+ var scale_color = d3.scale
+ .linear().domain(color_range)
+ .interpolate(d3.interpolateHsl)
+ .range(colorRange).clamp(true);
+ var line = d3.svg.line()
+ .x(function(d) { return scale_x(d[0]); })
+ .y(function(d) { return scale_y(d[1]); })
+ .interpolate("basis");
- var g = svg.append('g')
- .attr('class', 'digits')
- .attr('opacity', 1);
+ //Drawing trend line
+ var g = svg.append('g');
+ var path = g.append('path')
+ .attr('d', function(d) { return line(data); })
+ .attr('stroke-width', 5)
+ .attr('opacity', 0.5)
+ .attr('fill', "none")
+ .attr('stroke-linecap',"round")
+ .attr('stroke', "grey");
- var y = height/2;
- if(v_compare != null)
- y = (height/8) * 3;
+ var g = svg.append('g')
+ .attr('class', 'digits')
+ .attr('opacity', 1);
- //Printing big number
+ var y = height / 2;
+ if (v_compare != null) {
+ y = (height / 8) * 3;
+ }
+
+ //Printing big number
g.append('text')
- .attr('x', width/2)
+ .attr('x', width / 2)
.attr('y', y)
.attr('class', 'big')
.attr('alignment-baseline', 'middle')
@@ -77,34 +77,33 @@ var render = function(){
.style('font-weight', 'bold')
.style('cursor', 'pointer')
.text(f(v))
- .style('font-size', d3.min([height, width])/3.5)
+ .style('font-size', d3.min([height, width]) / 3.5)
.attr('fill','white');
- var c = scale_color(v_compare);
+ var c = scale_color(v_compare);
- //Printing compare %
- if(v_compare != null){
- g.append('text')
- .attr('x', width/2)
- .attr('y', (height/16) *12)
- .text(fp(v_compare) + compare_suffix)
- .style('font-size', d3.min([height, width])/8)
- .style('text-anchor', 'middle')
- .attr('fill', c)
- .attr('stroke', c);
- }
+ //Printing compare %
+ if (v_compare != null) {
+ g.append('text')
+ .attr('x', width / 2)
+ .attr('y', (height / 16) *12)
+ .text(fp(v_compare) + compare_suffix)
+ .style('font-size', d3.min([height, width]) / 8)
+ .style('text-anchor', 'middle')
+ .attr('fill', c)
+ .attr('stroke', c);
+ }
- var g_axis = svg.append('g').attr('class', 'axis').attr('opacity',0);
+ var g_axis = svg.append('g').attr('class', 'axis').attr('opacity', 0);
var g = g_axis.append('g');
var x_axis = d3.svg.axis()
.scale(scale_x)
.orient('bottom')
- //.tickFormat(d3.time.format('%I%p'))
.ticks(4);
g.call(x_axis);
- g.attr('transform', 'translate(0,'+ (height-margin) +')');
+ g.attr('transform', 'translate(0,' + (height - margin) + ')');
- var g = g_axis.append('g').attr('transform', 'translate('+(width-margin)+',0)');
+ var g = g_axis.append('g').attr('transform', 'translate(' + (width - margin) + ',0)');
var y_axis = d3.svg.axis()
.scale(scale_y)
.orient('left')
@@ -112,26 +111,21 @@ var render = function(){
.tickValues(value_ext);
g.call(y_axis);
g.selectAll('text')
- .style('text-anchor','end')
+ .style('text-anchor', 'end')
.attr('y','-5')
.attr('x','1');
g.selectAll("text")
- .style('font-size','10px');
+ .style('font-size', '10px');
- /*
- g_axis.selectAll('path.domain')
- .attr('stroke-width:1px;');
- */
-
- div.on('mouseover', function(d){
+ div.on('mouseover', function(d) {
var div = d3.select(this);
div.select('path').transition().duration(500).attr('opacity', 1)
.style('stroke-width', '2px');
div.select('g.digits').transition().duration(500).attr('opacity', 0.1);
div.select('g.axis').transition().duration(500).attr('opacity', 1);
})
- .on('mouseout', function(d){
+ .on('mouseout', function(d) {
var div = d3.select(this);
div.select('path').transition().duration(500).attr('opacity', 0.5)
.style('stroke-width', '5px');
diff --git a/panoramix/static/widgets/viz_nvd3.js b/panoramix/static/widgets/viz_nvd3.js
index 7f4b90b42..01cac9ec7 100644
--- a/panoramix/static/widgets/viz_nvd3.js
+++ b/panoramix/static/widgets/viz_nvd3.js
@@ -1,143 +1,139 @@
-
function viz_nvd3(token_name, json_callback) {
- function UTC(dttm){
- return v = new Date(dttm.getUTCFullYear(), dttm.getUTCMonth(), dttm.getUTCDate(), dttm.getUTCHours(), dttm.getUTCMinutes(), dttm.getUTCSeconds());
- }
- var tickMultiFormat = d3.time.format.multi([
- [".%L", function(d) { return d.getMilliseconds(); }],
- [":%S", function(d) { return d.getSeconds(); }],
- ["%I:%M", function(d) { return d.getMinutes(); }],
- ["%I %p", function(d) { return d.getHours(); }],
- ["%a %d", function(d) { return d.getDay() && d.getDate() != 1; }],
- ["%b %d", function(d) { return d.getDate() != 1; }],
- ["%B", function(d) { return d.getMonth(); }],
- ["%Y", function() { return true; }]
- ]);
- colors = [
- "#FF5A5F", "#007A87", "#7B0051", "#00D1C1", "#8CE071", "#FFB400",
- "#FFAA91", "#B4A76C", "#9CA299", "#565A5C"
- ];
- var token = d3.select('#' + token_name);
- var jtoken = $('#' + token_name);
- var loading = $('#' + token_name).find("img.loading");
- var chart = $('#' + token_name).find("div.chart");
- var refresh = function(){
- chart.hide();
- loading.show();
- $.getJSON(json_callback, function(payload){
- var data = payload.data;
- var viz = payload;
- var viz_type = viz.form_data.viz_type;
- $("#query_container").html(data.query);
- nv.addGraph(function() {
- if (viz_type === 'line') {
- if (viz.form_data.show_brush) {
- var chart = nv.models.lineWithFocusChart()
- var xext = chart.xAxis.scale().domain();
- chart
- .x2Axis
- .tickFormat(function (d) {return tickMultiFormat(UTC(new Date(d))); })
- .tickValues([]);
- chart.y2Axis.tickFormat(d3.format('.3s'));
- } else {
- var chart = nv.models.lineChart()
- }
- chart.xScale(d3.time.scale());
- chart.xAxis
- .showMaxMin(false)
- .tickFormat(function (d) {return tickMultiFormat(new Date(d)); });
- chart.showLegend(viz.form_data.show_legend);
- chart.yAxis.tickFormat(d3.format('.3s'));
-
- if (viz.form_data.contribution || viz.form_data.num_period_compare) {
- chart.yAxis.tickFormat(d3.format('.3p'));
- chart.y2Axis.tickFormat(d3.format('.3p'));
- }
-
- } else if (viz_type === 'dist_bar') {
- var chart = nv.models.multiBarChart()
- .showControls(true) //Allow user to switch between 'Grouped' and 'Stacked' mode.
- .groupSpacing(0.1); //Distance between each group of bars.
- chart.xAxis
- .showMaxMin(false)
- .tickFormat(function (d) {return tickMultiFormat(UTC(new Date(d))); });
- chart.yAxis.tickFormat(d3.format('.3s'));
-
- } else if (viz_type === 'pie') {
- var chart = nv.models.pieChart()
- chart.showLegend(viz.form_data.show_legend);
- if (viz.form_data.donut) {
- chart.donut(true);
- chart.donutLabelsOutside(true);
- }
- chart.labelsOutside(true);
- chart.cornerRadius(true);
-
- } else if (viz_type === 'column') {
- var chart = nv.models.multiBarChart()
- .reduceXTicks(false)
- .rotateLabels(45) ;
- chart.yAxis.tickFormat(d3.format('.3s'));
-
- } else if (viz_type === 'compare') {
- var chart = nv.models.cumulativeLineChart();
- chart.xScale(d3.time.scale());
- chart.xAxis
- .showMaxMin(false)
- .tickFormat(function (d) {return tickMultiFormat(new Date(d)); });
- chart.showLegend(viz.form_data.show_legend);
- chart.yAxis.tickFormat(d3.format('.3p'));
-
- } else if (viz_type === 'bubble') {
- var chart = nv.models.scatterChart();
- chart.xAxis.tickFormat(d3.format('.3s'));
- chart.yAxis.tickFormat(d3.format('.3s'));
- chart.showLegend(viz.form_data.show_legend);
- chart.pointRange([5, 5000]);
-
- } else if (viz_type === 'area') {
- var chart = nv.models.stackedAreaChart();
- chart.xScale(d3.time.scale());
- chart.xAxis
- .showMaxMin(false)
- .tickFormat(function (d) {return tickMultiFormat(new Date(d)); });
- chart.showLegend(viz.form_data.show_legend);
- chart.yAxis.tickFormat(d3.format('.3s'));
-
- }
-
- if ((viz_type === "line" || viz_type === "stacked") && viz.form_data.rich_tooltip) {
- chart.useInteractiveGuideline(true);
- }
- if (viz.form_data.y_axis_zero) {
- chart.forceY([0, 1]);
- }
- else if (viz.form_data.y_log_scale) {
- chart.yScale(d3.scale.log());
- }
-
- if (viz.form_data.x_log_scale) {
- chart.xScale(d3.scale.log());
- }
-
- chart.duration(0);
-
- token.select('.chart').append("svg")
- .datum(data.chart_data)
- .transition().duration(500)
- .call(chart);
-
- return chart;
- });
- chart.show();
- loading.hide();
- }).fail(function(xhr) {
- var err = '' + xhr.responseText + '
';
- loading.hide();
- chart.show();
- chart.html(err);
- });
- };
- refresh();
- jtoken.parent().find("a.refresh").click(refresh);
+ function UTC(dttm){
+ return v = new Date(dttm.getUTCFullYear(), dttm.getUTCMonth(), dttm.getUTCDate(), dttm.getUTCHours(), dttm.getUTCMinutes(), dttm.getUTCSeconds());
}
+ var tickMultiFormat = d3.time.format.multi([
+ [".%L", function(d) { return d.getMilliseconds(); }],
+ [":%S", function(d) { return d.getSeconds(); }],
+ ["%I:%M", function(d) { return d.getMinutes(); }],
+ ["%I %p", function(d) { return d.getHours(); }],
+ ["%a %d", function(d) { return d.getDay() && d.getDate() != 1; }],
+ ["%b %d", function(d) { return d.getDate() != 1; }],
+ ["%B", function(d) { return d.getMonth(); }],
+ ["%Y", function() { return true; }]
+ ]);
+ colors = [
+ "#FF5A5F", "#007A87", "#7B0051", "#00D1C1", "#8CE071", "#FFB400",
+ "#FFAA91", "#B4A76C", "#9CA299", "#565A5C"
+ ];
+ var token = d3.select('#' + token_name);
+ var jtoken = $('#' + token_name);
+ var loading = $('#' + token_name).find("img.loading");
+ var chart = $('#' + token_name).find("div.chart");
+ var refresh = function() {
+ chart.hide();
+ loading.show();
+ $.getJSON(json_callback, function(payload) {
+ var data = payload.data;
+ var viz = payload;
+ var viz_type = viz.form_data.viz_type;
+ $("#query_container").html(data.query);
+ nv.addGraph(function() {
+ if (viz_type === 'line') {
+ if (viz.form_data.show_brush) {
+ var chart = nv.models.lineWithFocusChart()
+ var xext = chart.xAxis.scale().domain();
+ chart
+ .x2Axis
+ .tickFormat(function (d) {return tickMultiFormat(UTC(new Date(d))); })
+ .tickValues([]);
+ chart.y2Axis.tickFormat(d3.format('.3s'));
+ } else {
+ var chart = nv.models.lineChart()
+ }
+ chart.xScale(d3.time.scale());
+ chart.xAxis
+ .showMaxMin(false)
+ .tickFormat(function (d) {return tickMultiFormat(new Date(d)); });
+ chart.showLegend(viz.form_data.show_legend);
+ chart.yAxis.tickFormat(d3.format('.3s'));
+ if (viz.form_data.contribution || viz.form_data.num_period_compare) {
+ chart.yAxis.tickFormat(d3.format('.3p'));
+ chart.y2Axis.tickFormat(d3.format('.3p'));
+ }
+
+ } else if (viz_type === 'dist_bar') {
+ var chart = nv.models.multiBarChart()
+ .showControls(true) //Allow user to switch between 'Grouped' and 'Stacked' mode.
+ .groupSpacing(0.1); //Distance between each group of bars.
+ chart.xAxis
+ .showMaxMin(false)
+ .tickFormat(function (d) {return tickMultiFormat(UTC(new Date(d))); });
+ chart.yAxis.tickFormat(d3.format('.3s'));
+
+ } else if (viz_type === 'pie') {
+ var chart = nv.models.pieChart()
+ chart.showLegend(viz.form_data.show_legend);
+ if (viz.form_data.donut) {
+ chart.donut(true);
+ chart.donutLabelsOutside(true);
+ }
+ chart.labelsOutside(true);
+ chart.cornerRadius(true);
+
+ } else if (viz_type === 'column') {
+ var chart = nv.models.multiBarChart()
+ .reduceXTicks(false)
+ .rotateLabels(45) ;
+ chart.yAxis.tickFormat(d3.format('.3s'));
+
+ } else if (viz_type === 'compare') {
+ var chart = nv.models.cumulativeLineChart();
+ chart.xScale(d3.time.scale());
+ chart.xAxis
+ .showMaxMin(false)
+ .tickFormat(function (d) {return tickMultiFormat(new Date(d)); });
+ chart.showLegend(viz.form_data.show_legend);
+ chart.yAxis.tickFormat(d3.format('.3p'));
+
+ } else if (viz_type === 'bubble') {
+ var chart = nv.models.scatterChart();
+ chart.xAxis.tickFormat(d3.format('.3s'));
+ chart.yAxis.tickFormat(d3.format('.3s'));
+ chart.showLegend(viz.form_data.show_legend);
+ chart.pointRange([5, 5000]);
+
+ } else if (viz_type === 'area') {
+ var chart = nv.models.stackedAreaChart();
+ chart.xScale(d3.time.scale());
+ chart.xAxis
+ .showMaxMin(false)
+ .tickFormat(function (d) {return tickMultiFormat(new Date(d)); });
+ chart.showLegend(viz.form_data.show_legend);
+ chart.yAxis.tickFormat(d3.format('.3s'));
+ }
+
+ if ((viz_type === "line" || viz_type === "area") && viz.form_data.rich_tooltip) {
+ chart.useInteractiveGuideline(true);
+ }
+ if (viz.form_data.y_axis_zero) {
+ chart.forceY([0, 1]);
+ }
+ else if (viz.form_data.y_log_scale) {
+ chart.yScale(d3.scale.log());
+ }
+ if (viz.form_data.x_log_scale) {
+ chart.xScale(d3.scale.log());
+ }
+
+ chart.duration(0);
+
+ token.select('.chart').append("svg")
+ .datum(data.chart_data)
+ .transition().duration(500)
+ .call(chart);
+
+ return chart;
+ });
+ chart.show();
+ loading.hide();
+ }).fail(function(xhr) {
+ var err = '' + xhr.responseText + '
';
+ loading.hide();
+ chart.show();
+ chart.html(err);
+ });
+ };
+ refresh();
+ jtoken.parent().find("a.refresh").click(refresh);
+}