Skip to content

Commit aeac851

Browse files
feroultferoult
authored
Merge pull request #5 from aalcosta/master
JS refactor to create a Burnify object and mapping of event handler f…
2 parents 2338bfe + 594bfb6 commit aeac851

File tree

2 files changed

+192
-14
lines changed

2 files changed

+192
-14
lines changed

‎src/burnify.js‎

Lines changed: 83 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,71 @@
1-
burnify = (function () {
2-
function productChart(selector, project, width, height) {
3-
var dim = defineChartDimentions(width, height);
1+
/*
2+
* bunify Prototype
3+
*/
4+
Burnify = function(selector, project, width, height) {
5+
6+
/*
7+
* Meta information for the rendering
8+
*/
9+
this.burnifyProject = project;
10+
11+
/*
12+
* Meta information for the chart
13+
*/
14+
this.chartTargetSelector = selector;
15+
this.chartMargins = { top: 40, right: 30, bottom: 20, left: 30 }
16+
this.setDimensions(width, height);
17+
18+
// Chart rendering
19+
return this;
20+
21+
};
22+
23+
/*
24+
* API methods
25+
*/
26+
Burnify.prototype.getDimensions = function() {
27+
return {
28+
width: this.chartMargins.width,
29+
height: this.chartMargins.height,
30+
margin: {
31+
top: this.chartMargins.top,
32+
left: this.chartMargins.left,
33+
right: this.chartMargins.right,
34+
bottom: this.chartMargins.bottom
35+
}
36+
}
37+
}
38+
39+
Burnify.prototype.setDimensions = function(width, height, margins) {
40+
if (margins) {
41+
this.chartMarginss.top = margins.top || this.chartMarginss.top;
42+
this.chartMarginss.left = margins.left || this.chartMarginss.left;
43+
this.chartMarginss.right = margins.right || this.chartMarginss.right;
44+
this.chartMarginss.bottom = margins.bottom || this.chartMarginss.bottom;
45+
}
46+
47+
this.chartDimensions = {
48+
width: width - this.chartMargins.left - this.chartMargins.right,
49+
height: height - this.chartMargins.top - this.chartMargins.bottom,
50+
margin: this.chartMargins
51+
}
52+
}
53+
54+
Burnify.prototype.draw = function() {
55+
this.burnify(this);
56+
}
57+
58+
Burnify.prototype.onSprintBarClick = function(sprintNumber, sprint) { }
59+
Burnify.prototype.onFullScopeAreaClick = function(burnifyProject) { console.log('Full scope area clicked'); console.log(burnifyProject) }
60+
Burnify.prototype.onDoneScopeAreaClick = function(burnifyProject) { console.log('Done scope area clicked'); }
61+
Burnify.prototype.onOutScopeAreaClick = function(burnifyProject) { console.log('Out scope area clicked'); }
62+
63+
/*
64+
* Functional structure
65+
*/
66+
Burnify.prototype.burnify = function(meta) {
67+
68+
function productChart(selector, project, dim) {
469
var svg = createChartSVG(selector, dim);
570
renderChart(dim, svg, project, prepareData(project));
671
}
@@ -197,6 +262,9 @@ burnify = (function () {
197262
.attr("width", x.rangeBand())
198263
.attr("y", dim.height)
199264
.attr("height", 0)
265+
.on("click", function(d) {
266+
meta.onSprintBarClick(d.index, d);
267+
})
200268
.transition()
201269
.ease("linear")
202270
.delay(function (d, i) {
@@ -271,8 +339,18 @@ burnify = (function () {
271339
.attr("class", clazz)
272340
.attr("d", function (d) {
273341
return area(d.values);
342+
})
343+
.on("click", function(d) {
344+
if (clazz == "scopeDone") {
345+
meta.onDoneScopeAreaClick(meta.burnifyProject);
346+
} else if (clazz == "scopeOut") {
347+
meta.onOutScopeAreaClick(meta.burnifyProject);
348+
} else {
349+
meta.onFullScopeAreaClick(meta.burnifyProject);
350+
}
274351
});
275352

353+
276354
svg.selectAll("." + clazz)
277355
.data(stack)
278356
.transition()
@@ -486,8 +564,5 @@ burnify = (function () {
486564
}
487565

488566

489-
return function (selector, project, width, height) {
490-
productChart(selector, project, width, height);
491-
};
492-
493-
})();
567+
productChart(meta.chartTargetSelector, meta.burnifyProject, meta.chartDimensions);
568+
}

‎test/products.html‎

Lines changed: 109 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -39,12 +39,115 @@
3939

4040
<script>
4141
// $.getJSON('https://cdn.rawgit.com/feroult/burnify/burnify-0.3/test/products.json', function (products) {
42-
$.getJSON('products.json', function (products) {
43-
burnify("#product1", products[0], 450, 250);
44-
burnify("#product2", products[1], 450, 250);
45-
burnify("#product3", products[2], 450, 250);
46-
burnify("#product4", products[3], 450, 250);
47-
});
42+
43+
var products = [
44+
{
45+
"name": "Burnify 1",
46+
"points": 120,
47+
"lastSprint": 13,
48+
"mvpSprint": 10,
49+
"sprints": [
50+
{
51+
"planned": 10,
52+
"done": 10
53+
}, {
54+
"planned": 12,
55+
"done": 10
56+
}, {
57+
"planned": 10,
58+
"done": 10
59+
}, {
60+
"planned": 10,
61+
"done": 6,
62+
"added": 52
63+
}, {
64+
"planned": 14,
65+
"done": 8,
66+
"added": 12
67+
}, {
68+
"planned": 14,
69+
"done": 8,
70+
"added": 2,
71+
"removed": 20
72+
}, {
73+
"planned": 12,
74+
"done": 4
75+
}, {
76+
"planned": 10,
77+
"done": 6,
78+
"added": 2
79+
}
80+
]
81+
}, {
82+
"name": "Burnify 2",
83+
"points": 220,
84+
"lastSprint": 10,
85+
"mvpSprint": 8,
86+
"sprints": [{
87+
"done": 18
88+
}, {
89+
"done": 24
90+
}, {
91+
"done": 16
92+
}, {
93+
"done": 22
94+
}, {
95+
"done": 8,
96+
"added": 32
97+
}, {
98+
"done": 20,
99+
"removed": 20
100+
}, {
101+
"done": 30,
102+
"added": 2
103+
}
104+
]
105+
}, {
106+
"name": "Burnify 3",
107+
"points": 120,
108+
"lastSprint": 10,
109+
"mvpSprint": 10,
110+
"sprints": [{
111+
"done": 10
112+
}, {
113+
"done": 10
114+
}, {
115+
"done": 10
116+
}
117+
]
118+
}, {
119+
"name": "Burnify 4",
120+
"points": 200,
121+
"lastSprint": 10,
122+
"mvpSprint": 8,
123+
"sprints": [{
124+
"done": 20
125+
}, {
126+
"done": 20
127+
}, {
128+
"done": 20
129+
}
130+
]
131+
}
132+
];
133+
134+
b1 = new Burnify("#product1", products[0], 450, 250);
135+
b1.onSprintBarClick = function(sprintNumber, sprint) { alert('Sprint ' + sprintNumber + ' (done: '+ sprint.done + ')'); };
136+
b1.onFullScopeAreaClick = function(p) { alert('Project ' + p.name + ' full scope area!'); };
137+
b1.onDoneScopeAreaClick = function(p) { alert('Project ' + p.name + ' done scope area!'); };
138+
b1.onOutScopeAreaClick = function(p) { alert('Project ' + p.name + ' out scope area!'); };
139+
b1.draw();
140+
141+
new Burnify("#product2", products[1], 450, 250).draw();
142+
new Burnify("#product3", products[2], 450, 250).draw();
143+
new Burnify("#product4", products[3], 450, 250).draw();
144+
145+
//$.getJSON('products.json', function (products) {
146+
// new Burnify("#product1", products[0], 450, 250).draw();
147+
// new Burnify("#product2", products[1], 450, 250).draw();
148+
// new Burnify("#product3", products[2], 450, 250).draw();
149+
// new Burnify("#product4", products[3], 450, 250).draw();
150+
//});
48151
</script>
49152

50153
</body>

0 commit comments

Comments
 (0)