graphs component
This commit is contained in:
parent
817dec07fd
commit
7915844d87
125
app/components/graphs.js
Normal file
125
app/components/graphs.js
Normal file
@ -0,0 +1,125 @@
|
||||
import Component from '@ember/component';
|
||||
import d3 from "d3";
|
||||
|
||||
export default Component.extend({
|
||||
didInsertElement() {
|
||||
if (this.pcfByPercentages) {
|
||||
this.drawGraphs(this.pcfByPercentages, this.demand, this.provided);
|
||||
}
|
||||
},
|
||||
|
||||
drawGraphs(pcfByPercentages, demand, provided) {
|
||||
this.drawPieChart(pcfByPercentages);
|
||||
this.drawBulletChart(demand, provided);
|
||||
},
|
||||
|
||||
drawBulletChart(demand, provided) {
|
||||
let margin = {top: 5, right: 40, bottom: 20, left: 200},
|
||||
width = 800 - margin.left - margin.right,
|
||||
height = 50 - margin.top - margin.bottom;
|
||||
|
||||
let chart = d3.bullet()
|
||||
.width(width)
|
||||
.height(height);
|
||||
|
||||
let range = demand.kcal + demand.kcal * 0.2;
|
||||
let data = [
|
||||
{
|
||||
"title":"Zapotrzebowanie",
|
||||
"subtitle":"Kcal",
|
||||
"ranges":[range],
|
||||
"measures":[provided.kcal],
|
||||
"markers":[demand.kcal]
|
||||
},
|
||||
{
|
||||
"title":"Białko",
|
||||
"subtitle":"g",
|
||||
"ranges":[demand.p + demand.p * 0.2],
|
||||
"measures":[provided.p],
|
||||
"markers":[demand.p]
|
||||
},
|
||||
{
|
||||
"title":"Węglowodany",
|
||||
"subtitle":"g",
|
||||
"ranges":[demand.c + demand.c * 0.2],
|
||||
"measures":[provided.c],
|
||||
"markers":[demand.c]
|
||||
},
|
||||
{
|
||||
"title":"Tłuszcz",
|
||||
"subtitle":"g",
|
||||
"ranges":[demand.f + demand.f * 0.2],
|
||||
"measures":[provided.f],
|
||||
"markers":[demand.f]
|
||||
},
|
||||
];
|
||||
let svg2 = d3.select("#bullet").selectAll("svg")
|
||||
.data(data)
|
||||
.enter().append("svg")
|
||||
.attr("class", "bullet")
|
||||
.attr("width", width + margin.left + margin.right)
|
||||
.attr("height", height + margin.top + margin.bottom)
|
||||
.style("transform", function(d, i) {
|
||||
return `translateY(${50*i}px)`;
|
||||
})
|
||||
.append("g")
|
||||
.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
|
||||
.call(chart);
|
||||
|
||||
let title = svg2.append("g")
|
||||
.style("text-anchor", "end")
|
||||
.attr("transform", "translate(-6," + height / 2 + ")");
|
||||
|
||||
title.append("text")
|
||||
.attr("class", "title")
|
||||
.text(function(d) { return d.title; });
|
||||
|
||||
title.append("text")
|
||||
.attr("class", "subtitle")
|
||||
.attr("dy", "1em")
|
||||
.text(function(d) { return d.subtitle; });
|
||||
},
|
||||
|
||||
drawPieChart(pcfByPercentages) {
|
||||
let w=300,h=300;
|
||||
let radius=(w-20)/2;
|
||||
let pie=d3.pie()
|
||||
.value(d => d.percent)
|
||||
.sort(null);
|
||||
|
||||
let arc=d3.arc()
|
||||
.innerRadius(0)
|
||||
.outerRadius(radius);
|
||||
|
||||
let color = d3.scaleOrdinal().range([ '#e75244','#33bb9d', '#1aa3ff']);
|
||||
let svg=d3.select("#chart")
|
||||
.attr('width', w)
|
||||
.attr('height', h)
|
||||
.append('g')
|
||||
.attr('transform','translate('+(w/2)+','+(h/2)+')');
|
||||
|
||||
let path=svg.selectAll('path')
|
||||
.data(pie(pcfByPercentages))
|
||||
.enter()
|
||||
.append('path')
|
||||
.attr('d', arc)
|
||||
.attr('fill', (d, i) => color(i))
|
||||
.style({
|
||||
'fill-opacity':.15,
|
||||
stroke: (d, i) => color(i),
|
||||
'stroke-width': '2px'
|
||||
});
|
||||
|
||||
let text=svg.selectAll('text')
|
||||
.data(pie(pcfByPercentages))
|
||||
.enter()
|
||||
.append("text")
|
||||
.attr("transform", d => "translate(" + arc.centroid(d) + ")")
|
||||
.attr("text-anchor", "middle")
|
||||
.text(d => d.data.name+" ("+d.data.percent+"%)")
|
||||
.style({
|
||||
fill: (d, i) => color(i),
|
||||
'font-size':'18px'
|
||||
});
|
||||
}
|
||||
});
|
3
app/templates/components/graphs.hbs
Normal file
3
app/templates/components/graphs.hbs
Normal file
@ -0,0 +1,3 @@
|
||||
<svg id="chart"></svg>
|
||||
<svg id="bullet" width=800 height=300></svg>
|
||||
|
After Width: | Height: | Size: 69 B |
10
app/templates/summary.hbs
Normal file
10
app/templates/summary.hbs
Normal file
@ -0,0 +1,10 @@
|
||||
<Graphs
|
||||
@pcfByPercentages={{this.pcfByPercentages}}
|
||||
@demand={{this.demand}}
|
||||
@provided={{hash
|
||||
p=this.p
|
||||
c=this.c
|
||||
f=this.f
|
||||
kcal=this.kcal
|
||||
}}
|
||||
/>
|
Loading…
Reference in New Issue
Block a user