Changeset 6993c72 in OpenWorkouts-current for ow/static/js/ow.js
- Timestamp:
- Feb 4, 2019, 1:10:40 PM (5 years ago)
- Branches:
- current, feature/docs, master
- Children:
- d52ba50
- Parents:
- bf01534 (diff), 3357e47 (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
rbf01534 r6993c72 244 244 var chart_selector = spec.chart_selector, 245 245 filters_selector = spec.filters_selector, 246 url = spec.url, 246 switcher_selector = spec.switcher_selector, 247 urls = spec.urls, 247 248 current_month = spec.current_month, 248 y_axis_labels = spec.y_axis_labels; 249 current_week = spec.current_week, 250 y_axis_labels = spec.y_axis_labels, 251 filter_by = spec.filter_by, 252 url = spec.url; 249 253 250 254 // Helpers … … 264 268 }; 265 269 270 function get_name_for_x(d) { 271 if (d.week == undefined || d.week == 0) { 272 return d.name; 273 } 274 else { 275 return d.id.split('-')[2]; 276 } 277 } 278 266 279 // Methods 267 280 var filters_setup = function filters_setup() { 268 281 $(filters_selector).on('click', function(e) { 269 var filter_by = 'distance';270 282 e.preventDefault(); 271 283 filter_by = $(this).attr('class').split('-')[1] 272 284 var chart = d3.select(chart_selector); 273 285 chart.selectAll("*").remove(); 274 render(filter_by); 275 }); 276 }; 277 278 var render = function render(filter_by) { 286 render(filter_by, url); 287 }); 288 }; 289 290 var switcher_setup = function switcher_setup() { 291 $(switcher_selector).on('click', function(e) { 292 e.preventDefault(); 293 url = $(this).attr('class').split('-')[1] 294 var chart = d3.select(chart_selector); 295 chart.selectAll("*").remove(); 296 render(filter_by, url); 297 }); 298 }; 299 300 var render = function render(filter_by, url) { 279 301 /* 280 302 Build a d3 bar chart, populated with data from the given url. … … 288 310 y = d3.scaleLinear().rangeRound([height, 0]); 289 311 290 d3.json(url ).then(function (data) {312 d3.json(urls[url]).then(function (data) { 291 313 x.domain(data.map(function (d) { 292 return d.name; 314 return get_name_for_x(d); 315 // return d.name; 293 316 })); 294 317 … … 316 339 .enter().append("rect") 317 340 .attr("class", function(d) { 318 if (d.id == current_month){ 341 var sel_week = current_month + '-' + current_week; 342 if (d.id == current_month || d.id == sel_week){ 343 /* Bar for the currently selected month or week */ 319 344 select_x_axis_label(d).attr('style', "font-weight: bold;"); 320 return 'bar current' 345 return 'bar current'; 321 346 } 322 347 else { 323 return 'bar' 348 if (!current_week && d.id.indexOf(current_month) >=0 ) { 349 /* 350 User selected a month, then switched to weekly 351 view, we do highlight all the bars for weeks in 352 that month 353 */ 354 select_x_axis_label(d).attr('style', "font-weight: bold;"); 355 return 'bar current'; 356 } 357 else { 358 /* Non-selected bar */ 359 return 'bar'; 360 } 361 324 362 } 325 363 }) 326 364 .attr("x", function (d) { 327 return x( d.name);365 return x(get_name_for_x(d)); 328 366 }) 329 367 .attr("y", function (d) { … … 343 381 select_x_axis_label(d).attr('style', "font-weight: regular;"); 344 382 } 383 }) 384 .on('click', function(d) { 385 window.location.href = d.url; 345 386 }); 346 387 347 g.selectAll(".text") 348 .data(data) 349 .enter() 350 .append("text") 351 .attr("class","label") 352 .attr("x", function (d) { 353 return x(d.name) + x.bandwidth()/2; 354 }) 355 .attr("y", function (d) { 356 /* 357 Get the value for the current bar, then get the maximum 358 value to be displayed in the bar, which is used to 359 calculate the proper position of the label for this bar, 360 relatively to its height (1% above the bar) 361 */ 362 var value = get_y_value(d, filter_by); 363 var max = y.domain()[1]; 364 return y(value + y.domain()[1] * 0.01); 365 }) 366 .text(function(d) { 367 var value = get_y_value(d, filter_by) 368 if ( value > 0) { 369 return value; 370 } 371 }); 372 388 if (url == 'monthly') { 389 g.selectAll(".text") 390 .data(data) 391 .enter() 392 .append("text") 393 .attr("class","label") 394 .attr("x", function (d) { 395 return x(get_name_for_x(d)) + x.bandwidth()/2; 396 }) 397 .attr("y", function (d) { 398 /* 399 Get the value for the current bar, then get the maximum 400 value to be displayed in the bar, which is used to 401 calculate the proper position of the label for this bar, 402 relatively to its height (1% above the bar) 403 */ 404 var value = get_y_value(d, filter_by); 405 var max = y.domain()[1]; 406 return y(value + y.domain()[1] * 0.01); 407 }) 408 .text(function(d) { 409 var value = get_y_value(d, filter_by) 410 if ( value > 0) { 411 return value; 412 } 413 }); 414 } 415 416 if (url == 'weekly') { 417 g.selectAll(".tick") 418 .each(function (d, i) { 419 /* 420 Remove from the x-axis tickets those without letters 421 on them (useful for the weekly chart) 422 */ 423 if (d !== parseInt(d, 10)) { 424 if(!d.match(/[a-z]/i)) { 425 this.remove(); 426 } 427 } 428 }); 429 } 373 430 }); 374 431 }; … … 376 433 var that = {} 377 434 that.filters_setup = filters_setup; 435 that.switcher_setup = switcher_setup; 378 436 that.render = render; 379 437 return that
Note: See TracChangeset
for help on using the changeset viewer.