Skip to content

Commit 4a256b1

Browse files
akuhnakuhn
committed
Reformat javascript code.
1 parent ad1ebaa commit 4a256b1

File tree

3 files changed

+217
-227
lines changed

3 files changed

+217
-227
lines changed

Diff for: ‎panoramix/static/widgets/viz_bignumber.css

+7-7
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
1-
.viz_bignumber g.axis text{
2-
font-size:10px;
3-
font-weight:normal;
1+
.viz_bignumber g.axis text {
2+
font-size: 10px;
3+
font-weight: normal;
44
color: gray;
55
fill: gray;
6-
text-anchor:middle;
6+
text-anchor: middle;
77
alignment-baseline: middle;
88
font-weight: none;
99
}
1010

11-
.viz_bignumber text.big{
11+
.viz_bignumber text.big {
1212
stroke: black;
13-
text-anchor:middle;
13+
text-anchor: middle;
1414
fill: black;
1515
}
1616

@@ -22,5 +22,5 @@
2222
.viz_bignumber .domain {
2323
fill: none;
2424
stroke: black;
25-
stroke-width; 1;
25+
stroke-width: 1;
2626
}

Diff for: ‎panoramix/static/widgets/viz_bignumber.js

+83-89
Original file line numberDiff line numberDiff line change
@@ -1,137 +1,131 @@
11
function viz_bignumber(token, json_callback) {
2+
var div = d3.select('#' + token);
3+
var render = function() {
4+
d3.json(json_callback, function(error, payload){
5+
json = payload.data;
6+
div.html("");
7+
//Define the percentage bounds that define color from red to green
8+
if (error != null){
9+
var err = '<div class="alert alert-danger">' + error.responseText + '</div>';
10+
div.html(err);
11+
return '';
12+
}
13+
var color_range = [-1, 1];
14+
var compare_pos = -23
15+
var target_url = 'd3js.org';
216

3-
var div = d3.select('#' + token);
4-
var render = function(){
5-
d3.json(json_callback, function(error, payload){
6-
json = payload.data;
7-
div.html("");
8-
//Define the percentage bounds that define color from red to green
9-
if(error != null){
10-
var err = '<div class="alert alert-danger">' + error.responseText + '</div>';
11-
div.html(err);
12-
return '';
13-
}
14-
var color_range = [-1,1];
15-
var compare_pos = -23
16-
var target_url = 'd3js.org';
17-
18-
var f = d3.format('.3s');
19-
var fp = d3.format('+.1%');
20-
var xy = div.node().getBoundingClientRect();
21-
var width = xy.width;
22-
var height = xy.height-30;
23-
var svg = div.append('svg');
24-
svg.attr("width", width);
25-
svg.attr("height", height);
26-
data = json.data;
27-
var compare_suffix = ' ' + json.compare_suffix;
28-
var v_compare = null;
29-
var v = data[data.length -1][1];
30-
if (json.compare_lag >0){
31-
pos = data.length - (json.compare_lag+1);
32-
if(pos >=0){
33-
v_compare = (v / data[pos][1])-1;
17+
var f = d3.format('.3s');
18+
var fp = d3.format('+.1%');
19+
var xy = div.node().getBoundingClientRect();
20+
var width = xy.width;
21+
var height = xy.height - 30;
22+
var svg = div.append('svg');
23+
svg.attr("width", width);
24+
svg.attr("height", height);
25+
data = json.data;
26+
var compare_suffix = ' ' + json.compare_suffix;
27+
var v_compare = null;
28+
var v = data[data.length - 1][1];
29+
if (json.compare_lag > 0){
30+
pos = data.length - (json.compare_lag + 1);
31+
if (pos >= 0){
32+
v_compare = (v / data[pos][1]) - 1;
33+
}
3434
}
35-
}
36-
var date_ext = d3.extent(data, function(d){return d[0]});
37-
var value_ext = d3.extent(data, function(d){return d[1]});
35+
var date_ext = d3.extent(data, function(d) { return d[0]; });
36+
var value_ext = d3.extent(data, function(d) { return d[1]; });
3837

39-
var margin=20;
40-
var scale_x = d3.time.scale.utc().domain(date_ext).range([margin, width-margin]);
41-
var scale_y = d3.scale.linear().domain(value_ext).range([height-(margin),margin]);
42-
var colorRange = [d3.hsl(0,1,0.3), d3.hsl(120, 1, 0.3)];
43-
var scale_color = d3.scale
44-
.linear().domain(color_range)
45-
.interpolate(d3.interpolateHsl)
46-
.range(colorRange).clamp(true);
47-
var line = d3.svg.line()
48-
.x(function(d) { return scale_x(d[0])})
49-
.y(function(d) { return scale_y(d[1])})
50-
.interpolate("basis");
38+
var margin = 20;
39+
var scale_x = d3.time.scale.utc().domain(date_ext).range([margin, width - margin]);
40+
var scale_y = d3.scale.linear().domain(value_ext).range([height - (margin), margin]);
41+
var colorRange = [d3.hsl(0, 1, 0.3), d3.hsl(120, 1, 0.3)];
42+
var scale_color = d3.scale
43+
.linear().domain(color_range)
44+
.interpolate(d3.interpolateHsl)
45+
.range(colorRange).clamp(true);
46+
var line = d3.svg.line()
47+
.x(function(d) { return scale_x(d[0]); })
48+
.y(function(d) { return scale_y(d[1]); })
49+
.interpolate("basis");
5150

52-
//Drawing trend line
53-
var g = svg.append('g');
54-
var path = g.append('path')
55-
.attr('d', function(d){return line(data);})
56-
.attr('stroke-width', 5)
57-
.attr('opacity', 0.5)
58-
.attr('fill', "none")
59-
.attr('stroke-linecap',"round")
60-
.attr('stroke', "grey");
51+
//Drawing trend line
52+
var g = svg.append('g');
53+
var path = g.append('path')
54+
.attr('d', function(d) { return line(data); })
55+
.attr('stroke-width', 5)
56+
.attr('opacity', 0.5)
57+
.attr('fill', "none")
58+
.attr('stroke-linecap',"round")
59+
.attr('stroke', "grey");
6160

62-
var g = svg.append('g')
63-
.attr('class', 'digits')
64-
.attr('opacity', 1);
61+
var g = svg.append('g')
62+
.attr('class', 'digits')
63+
.attr('opacity', 1);
6564

66-
var y = height/2;
67-
if(v_compare != null)
68-
y = (height/8) * 3;
65+
var y = height / 2;
66+
if (v_compare != null) {
67+
y = (height / 8) * 3;
68+
}
6969

70-
//Printing big number
70+
//Printing big number
7171
g.append('text')
72-
.attr('x', width/2)
72+
.attr('x', width / 2)
7373
.attr('y', y)
7474
.attr('class', 'big')
7575
.attr('alignment-baseline', 'middle')
7676
.attr('id', 'bigNumber')
7777
.style('font-weight', 'bold')
7878
.style('cursor', 'pointer')
7979
.text(f(v))
80-
.style('font-size', d3.min([height, width])/3.5)
80+
.style('font-size', d3.min([height, width]) / 3.5)
8181
.attr('fill','white');
8282

83-
var c = scale_color(v_compare);
83+
var c = scale_color(v_compare);
8484

85-
//Printing compare %
86-
if(v_compare != null){
87-
g.append('text')
88-
.attr('x', width/2)
89-
.attr('y', (height/16) *12)
90-
.text(fp(v_compare) + compare_suffix)
91-
.style('font-size', d3.min([height, width])/8)
92-
.style('text-anchor', 'middle')
93-
.attr('fill', c)
94-
.attr('stroke', c);
95-
}
85+
//Printing compare %
86+
if (v_compare != null) {
87+
g.append('text')
88+
.attr('x', width / 2)
89+
.attr('y', (height / 16) *12)
90+
.text(fp(v_compare) + compare_suffix)
91+
.style('font-size', d3.min([height, width]) / 8)
92+
.style('text-anchor', 'middle')
93+
.attr('fill', c)
94+
.attr('stroke', c);
95+
}
9696

97-
var g_axis = svg.append('g').attr('class', 'axis').attr('opacity',0);
97+
var g_axis = svg.append('g').attr('class', 'axis').attr('opacity', 0);
9898
var g = g_axis.append('g');
9999
var x_axis = d3.svg.axis()
100100
.scale(scale_x)
101101
.orient('bottom')
102-
//.tickFormat(d3.time.format('%I%p'))
103102
.ticks(4);
104103
g.call(x_axis);
105-
g.attr('transform', 'translate(0,'+ (height-margin) +')');
104+
g.attr('transform', 'translate(0,' + (height - margin) + ')');
106105

107-
var g = g_axis.append('g').attr('transform', 'translate('+(width-margin)+',0)');
106+
var g = g_axis.append('g').attr('transform', 'translate(' + (width - margin) + ',0)');
108107
var y_axis = d3.svg.axis()
109108
.scale(scale_y)
110109
.orient('left')
111110
.tickFormat(d3.format('.3s'))
112111
.tickValues(value_ext);
113112
g.call(y_axis);
114113
g.selectAll('text')
115-
.style('text-anchor','end')
114+
.style('text-anchor', 'end')
116115
.attr('y','-5')
117116
.attr('x','1');
118117

119118
g.selectAll("text")
120-
.style('font-size','10px');
121-
122-
/*
123-
g_axis.selectAll('path.domain')
124-
.attr('stroke-width:1px;');
125-
*/
119+
.style('font-size', '10px');
126120

127-
div.on('mouseover', function(d){
121+
div.on('mouseover', function(d) {
128122
var div = d3.select(this);
129123
div.select('path').transition().duration(500).attr('opacity', 1)
130124
.style('stroke-width', '2px');
131125
div.select('g.digits').transition().duration(500).attr('opacity', 0.1);
132126
div.select('g.axis').transition().duration(500).attr('opacity', 1);
133127
})
134-
.on('mouseout', function(d){
128+
.on('mouseout', function(d) {
135129
var div = d3.select(this);
136130
div.select('path').transition().duration(500).attr('opacity', 0.5)
137131
.style('stroke-width', '5px');

0 commit comments

Comments
 (0)