Reformat javascript code.
This commit is contained in:
Adrian Kuhn
parent
ad1ebaa6da
commit
4a256b1dc4
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 = '<div class="alert alert-danger">' + error.responseText + '</div>';
|
||||
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 = '<div class="alert alert-danger">' + error.responseText + '</div>';
|
||||
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');
|
||||
|
|
|
|||
|
|
@ -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 = '<div class="alert alert-danger">' + xhr.responseText + '</div>';
|
||||
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 = '<div class="alert alert-danger">' + xhr.responseText + '</div>';
|
||||
loading.hide();
|
||||
chart.show();
|
||||
chart.html(err);
|
||||
});
|
||||
};
|
||||
refresh();
|
||||
jtoken.parent().find("a.refresh").click(refresh);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue