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