app/components/chart-contributions-by-type/component.js

@@ -1,17 +1,58 @@
 import Component from '@ember/component';
+import { computed } from '@ember/object';
+
+let categoryColors = {
+  community: "#fb6868",
+  design: "#fbe468",
+  dev: "#e068fb",
+  docs: "#97fb68",
+  ops: "#8f68fb",
+}
 
 export default Component.extend({
 
-  chartData: {
-    datasets: [{
-        data: [10, 20, 30]
-    }],
-    labels: [
-        'Red',
-        'Yellow',
-        'Blue'
-    ]
-  },
+  contributions: null,
+
+  chartData: computed('contributions', function() {
+    let kredits = this.get('contributions')
+                      .map(c => {
+                        return { kind: c.kind, amount: c.amount }
+                      }).reduce(function (kinds, c) {
+                        if (c.kind in kinds) {
+                          kinds[c.kind] = kinds[c.kind] + c.amount
+                        } else {
+                          kinds[c.kind] = c.amount;
+                        }
+                        return kinds;
+                      }, {});
+
+    return {
+      datasets: [{
+        data: [
+          kredits['community'],
+          kredits['design'],
+          kredits['dev'],
+          kredits['ops'],
+          kredits['docs'],
+        ],
+        borderColor: [
+          categoryColors.community,
+          categoryColors.design,
+          categoryColors.dev,
+          categoryColors.ops,
+          categoryColors.docs,
+        ],
+        borderWidth: 1
+      }],
+      labels: [
+        'Community',
+        'Design',
+        'Development',
+        'Operations & Infrastructure',
+        'Documentation'
+      ],
+    }
+  }),
 
   chartOptions: {
     legend: {

app/components/chart-contributions-by-type/template.hbs

@@ -1,5 +1,7 @@
-{{ember-chart type='doughnut'
-              data=chartData
-              options=chartOptions
-              width=200
-              height=200}}
+<div class="chart">
+  {{ember-chart type='doughnut'
+                data=chartData
+                options=chartOptions
+                width=200
+                height=200}}
+</div>

app/styles/app.scss

@@ -62,6 +62,18 @@ section {
     }
   }
 
+  &#contributions-by-type {
+    .chart {
+      width: 50%;
+      margin-left: auto;
+      margin-right: auto;
+    }
+
+    @include media($mobile) {
+      width: 90%;
+    }
+  }
+
   &#proposals-open, &#proposals-closed {
     .actions {
       padding-top: 3rem;

app/templates/index.hbs

@@ -20,7 +20,7 @@
         <h2>Contributions by type</h2>
       </header>
       <div class="content">
-        {{chart-contributions-by-type contributions=proposalsClosed}}
+        {{chart-contributions-by-type contributions=proposals}}
       </div>
     </section>
   </div>