From 7915844d87a6ad57bea56da5f4c48f238bb0639c Mon Sep 17 00:00:00 2001
From: ppanek <piotr.panek@typedflow.com>
Date: Tue, 7 Jan 2020 20:08:56 +0100
Subject: [PATCH] graphs component

---
 app/components/graphs.js            | 125 ++++++++++++++++++++++++++++
 app/templates/components/graphs.hbs |   3 +
 app/templates/summary.hbs           |  10 +++
 3 files changed, 138 insertions(+)
 create mode 100644 app/components/graphs.js
 create mode 100644 app/templates/components/graphs.hbs
 create mode 100644 app/templates/summary.hbs

diff --git a/app/components/graphs.js b/app/components/graphs.js
new file mode 100644
index 0000000..1b40b60
--- /dev/null
+++ b/app/components/graphs.js
@@ -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'
+        });
+  }
+});
diff --git a/app/templates/components/graphs.hbs b/app/templates/components/graphs.hbs
new file mode 100644
index 0000000..4647b81
--- /dev/null
+++ b/app/templates/components/graphs.hbs
@@ -0,0 +1,3 @@
+<svg id="chart"></svg>
+<svg id="bullet" width=800 height=300></svg>
+
diff --git a/app/templates/summary.hbs b/app/templates/summary.hbs
new file mode 100644
index 0000000..ad4b923
--- /dev/null
+++ b/app/templates/summary.hbs
@@ -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
+  }}
+/>