Changeset ed7e9d7 in OpenWorkouts-current for ow/static/js/ow.js
- Timestamp:
- Jan 29, 2019, 12:41:01 PM (5 years ago)
- Branches:
- current, feature/docs, master
- Children:
- 1183d5a, 22eb5de
- Parents:
- 26220ba (diff), bd8eeb4 (diff)
Note: this is a merge changeset, the changes displayed below correspond to the merge itself.
Use the (diff) links above to see all the changes relative to each parent. - File:
-
- 1 edited
Legend:
- Unmodified
- Added
- Removed
-
ow/static/js/ow.js
r26220ba red7e9d7 31 31 var openstreetmap_attr = 'Map data © <a href="http://www.osm.org">OpenStreetMap</a>'; 32 32 33 // Some constants reused through the code33 // Some vars reused through the code 34 34 var map; 35 35 var gpx; … … 147 147 Build a d3 bar chart, populated with data from the given url. 148 148 */ 149 var chart = d3.select( "svg"),149 var chart = d3.select(chart_selector), 150 150 margin = {top: 20, right: 20, bottom: 30, left: 50}, 151 151 width = +chart.attr("width") - margin.left - margin.right, … … 227 227 228 228 }; 229 230 231 owjs.year_chart = function(spec) { 232 233 "use strict"; 234 235 // parameters provided when creating an "instance" of the chart 236 var chart_selector = spec.chart_selector, 237 filters_selector = spec.filters_selector, 238 url = spec.url, 239 current_month = spec.current_month, 240 y_axis_labels = spec.y_axis_labels; 241 242 // Helpers 243 function select_x_axis_label(d) { 244 /* Given a value, return the label associated with it */ 245 return d3.select('.x-axis-b') 246 .selectAll('text') 247 .filter(function(x) { return x == d.name; }); 248 }; 249 250 function get_y_value(d, filter_by) { 251 return Number(d[filter_by]); 252 }; 253 254 function get_y_axis_label(filter_by) { 255 return y_axis_labels[filter_by]; 256 }; 257 258 // Methods 259 var filters_setup = function filters_setup() { 260 $(filters_selector).on('click', function(e) { 261 var filter_by = 'distance'; 262 e.preventDefault(); 263 filter_by = $(this).attr('class').split('-')[1] 264 var chart = d3.select(chart_selector); 265 chart.selectAll("*").remove(); 266 render(filter_by); 267 }); 268 }; 269 270 var render = function render(filter_by) { 271 /* 272 Build a d3 bar chart, populated with data from the given url. 273 */ 274 var chart = d3.select(chart_selector), 275 margin = {top: 20, right: 20, bottom: 30, left: 50}, 276 width = +chart.attr("width") - margin.left - margin.right, 277 height = +chart.attr("height") - margin.top - margin.bottom, 278 g = chart.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")"), 279 x = d3.scaleBand().rangeRound([0, width]).padding(0.1), 280 y = d3.scaleLinear().rangeRound([height, 0]); 281 282 d3.json(url).then(function (data) { 283 x.domain(data.map(function (d) { 284 return d.name; 285 })); 286 287 y.domain([0, d3.max(data, function (d) { 288 return get_y_value(d, filter_by); 289 })]); 290 291 g.append("g") 292 .attr('class', 'x-axis-b') 293 .attr("transform", "translate(0," + height + ")") 294 .call(d3.axisBottom(x)) 295 296 g.append("g") 297 .call(d3.axisLeft(y)) 298 .append("text") 299 .attr("fill", "#000") 300 .attr("transform", "rotate(-90)") 301 .attr("y", 6) 302 .attr("dy", "0.71em") 303 .attr("text-anchor", "end") 304 .text(get_y_axis_label(filter_by)); 305 306 g.selectAll(".bar") 307 .data(data) 308 .enter().append("rect") 309 .attr("class", function(d) { 310 if (d.id == current_month){ 311 select_x_axis_label(d).attr('style', "font-weight: bold;"); 312 return 'bar current' 313 } 314 else { 315 return 'bar' 316 } 317 }) 318 .attr("x", function (d) { 319 return x(d.name); 320 }) 321 .attr("y", function (d) { 322 return y(get_y_value(d, filter_by)); 323 }) 324 .attr("width", x.bandwidth()) 325 .attr("height", function (d) { 326 return height - y(get_y_value(d, filter_by)); 327 }) 328 .on('mouseover', function(d) { 329 if (d.id != current_month){ 330 select_x_axis_label(d).attr('style', "font-weight: bold;"); 331 } 332 }) 333 .on('mouseout', function(d) { 334 if (d.id != current_month){ 335 select_x_axis_label(d).attr('style', "font-weight: regular;"); 336 } 337 }); 338 339 g.selectAll(".text") 340 .data(data) 341 .enter() 342 .append("text") 343 .attr("class","label") 344 .attr("x", function (d) { 345 return x(d.name) + x.bandwidth()/2; 346 }) 347 .attr("y", function (d) { 348 /* 349 Get the value for the current bar, then get the maximum 350 value to be displayed in the bar, which is used to 351 calculate the proper position of the label for this bar, 352 relatively to its height (1% above the bar) 353 */ 354 var value = get_y_value(d, filter_by); 355 var max = y.domain()[1]; 356 return y(value + y.domain()[1] * 0.01); 357 }) 358 .text(function(d) { 359 var value = get_y_value(d, filter_by) 360 if ( value > 0) { 361 return value; 362 } 363 }); 364 365 }); 366 }; 367 368 var that = {} 369 that.filters_setup = filters_setup; 370 that.render = render; 371 return that 372 373 };
Note: See TracChangeset
for help on using the changeset viewer.