Changeset 5bdfbfb in OpenWorkouts-current for ow/static/js/ow.js
- Timestamp:
- Jan 25, 2019, 12:42:33 AM (5 years ago)
- Branches:
- current, feature/docs, master
- Children:
- 26220ba, 7783f97
- Parents:
- 421f05f
- File:
-
- 1 edited
Legend:
- Unmodified
- Added
- Removed
-
ow/static/js/ow.js
r421f05f r5bdfbfb 123 123 124 124 }; 125 126 127 owjs.week_chart = function(spec) { 128 129 "use strict"; 130 131 // parameters provided when creating an "instance" of the chart 132 var chart_selector = spec.chart_selector, 133 url = spec.url, 134 current_day_name = spec.current_day_name 135 136 // Helpers 137 function select_x_axis_label(d) { 138 /* Given a value, return the label associated with it */ 139 return d3.select('.x-axis') 140 .selectAll('text') 141 .filter(function(x) { return x == d.name; }); 142 } 143 144 // Methods 145 var render = function render() { 146 /* 147 Build a d3 bar chart, populated with data from the given url. 148 */ 149 var chart = d3.select("svg"), 150 margin = {top: 20, right: 20, bottom: 30, left: 50}, 151 width = +chart.attr("width") - margin.left - margin.right, 152 height = +chart.attr("height") - margin.top - margin.bottom, 153 g = chart.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")"), 154 x = d3.scaleBand().rangeRound([0, width]).padding(0.1), 155 y = d3.scaleLinear().rangeRound([height, 0]); 156 157 d3.json(url).then(function (data) { 158 x.domain(data.map(function (d) { 159 return d.name; 160 })); 161 162 y.domain([0, d3.max(data, function (d) { 163 return Number(d.distance); 164 })]); 165 166 g.append("g") 167 .attr('class', 'x-axis') 168 .attr("transform", "translate(0," + height + ")") 169 .call(d3.axisBottom(x)) 170 171 g.selectAll(".bar") 172 .data(data) 173 .enter().append("rect") 174 .attr("class", function(d) { 175 if (d.name == current_day_name){ 176 select_x_axis_label(d).attr('style', "font-weight: bold;"); 177 return 'bar current' 178 } 179 else { 180 return 'bar' 181 } 182 }) 183 .attr("x", function (d) { 184 return x(d.name); 185 }) 186 .attr("y", function (d) { 187 return y(Number(d.distance)); 188 }) 189 .attr("width", x.bandwidth()) 190 .attr("height", function (d) { 191 return height - y(Number(d.distance)); 192 }) 193 .on('mouseover', function(d) { 194 if (d.name != current_day_name){ 195 select_x_axis_label(d).attr('style', "font-weight: bold;"); 196 } 197 }) 198 .on('mouseout', function(d) { 199 if (d.name != current_day_name){ 200 select_x_axis_label(d).attr('style', "font-weight: regular;"); 201 } 202 }); 203 204 g.selectAll(".text") 205 .data(data) 206 .enter() 207 .append("text") 208 .attr("class","label") 209 .attr("x", function (d) { 210 return x(d.name) + x.bandwidth()/2; 211 }) 212 .attr("y", function (d) { 213 return y(Number(d.distance) + 5); 214 }) 215 .text(function(d) { 216 if (Number(d.distance) > 0) { 217 return d.distance; 218 } 219 }); 220 221 }); 222 }; 223 224 var that = {} 225 that.render = render; 226 return that 227 228 };
Note: See TracChangeset
for help on using the changeset viewer.