Changeset 22eb5de in OpenWorkouts-current for ow/static/js/ow.js
- Timestamp:
- Jan 29, 2019, 12:58:08 PM (5 years ago)
- Branches:
- current, feature/docs, master
- Children:
- 594fbe8
- Parents:
- 3e48af6 (diff), ed7e9d7 (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
r3e48af6 r22eb5de 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: 17, right: 0, bottom: 20, left: 0}, 151 151 152 width = +chart.attr("width") - margin.left - margin.right, 152 153 height = +chart.attr("height") - margin.top - margin.bottom, … … 234 235 235 236 }; 237 238 239 owjs.year_chart = function(spec) { 240 241 "use strict"; 242 243 // parameters provided when creating an "instance" of the chart 244 var chart_selector = spec.chart_selector, 245 filters_selector = spec.filters_selector, 246 url = spec.url, 247 current_month = spec.current_month, 248 y_axis_labels = spec.y_axis_labels; 249 250 // Helpers 251 function select_x_axis_label(d) { 252 /* Given a value, return the label associated with it */ 253 return d3.select('.x-axis-b') 254 .selectAll('text') 255 .filter(function(x) { return x == d.name; }); 256 }; 257 258 function get_y_value(d, filter_by) { 259 return Number(d[filter_by]); 260 }; 261 262 function get_y_axis_label(filter_by) { 263 return y_axis_labels[filter_by]; 264 }; 265 266 // Methods 267 var filters_setup = function filters_setup() { 268 $(filters_selector).on('click', function(e) { 269 var filter_by = 'distance'; 270 e.preventDefault(); 271 filter_by = $(this).attr('class').split('-')[1] 272 var chart = d3.select(chart_selector); 273 chart.selectAll("*").remove(); 274 render(filter_by); 275 }); 276 }; 277 278 var render = function render(filter_by) { 279 /* 280 Build a d3 bar chart, populated with data from the given url. 281 */ 282 var chart = d3.select(chart_selector), 283 margin = {top: 20, right: 20, bottom: 30, left: 50}, 284 width = +chart.attr("width") - margin.left - margin.right, 285 height = +chart.attr("height") - margin.top - margin.bottom, 286 g = chart.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")"), 287 x = d3.scaleBand().rangeRound([0, width]).padding(0.1), 288 y = d3.scaleLinear().rangeRound([height, 0]); 289 290 d3.json(url).then(function (data) { 291 x.domain(data.map(function (d) { 292 return d.name; 293 })); 294 295 y.domain([0, d3.max(data, function (d) { 296 return get_y_value(d, filter_by); 297 })]); 298 299 g.append("g") 300 .attr('class', 'x-axis-b') 301 .attr("transform", "translate(0," + height + ")") 302 .call(d3.axisBottom(x)) 303 304 g.append("g") 305 .call(d3.axisLeft(y)) 306 .append("text") 307 .attr("fill", "#000") 308 .attr("transform", "rotate(-90)") 309 .attr("y", 6) 310 .attr("dy", "0.71em") 311 .attr("text-anchor", "end") 312 .text(get_y_axis_label(filter_by)); 313 314 g.selectAll(".bar") 315 .data(data) 316 .enter().append("rect") 317 .attr("class", function(d) { 318 if (d.id == current_month){ 319 select_x_axis_label(d).attr('style', "font-weight: bold;"); 320 return 'bar current' 321 } 322 else { 323 return 'bar' 324 } 325 }) 326 .attr("x", function (d) { 327 return x(d.name); 328 }) 329 .attr("y", function (d) { 330 return y(get_y_value(d, filter_by)); 331 }) 332 .attr("width", x.bandwidth()) 333 .attr("height", function (d) { 334 return height - y(get_y_value(d, filter_by)); 335 }) 336 .on('mouseover', function(d) { 337 if (d.id != current_month){ 338 select_x_axis_label(d).attr('style', "font-weight: bold;"); 339 } 340 }) 341 .on('mouseout', function(d) { 342 if (d.id != current_month){ 343 select_x_axis_label(d).attr('style', "font-weight: regular;"); 344 } 345 }); 346 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 373 }); 374 }; 375 376 var that = {} 377 that.filters_setup = filters_setup; 378 that.render = render; 379 return that 380 381 };
Note: See TracChangeset
for help on using the changeset viewer.