Add charts.js plugin, basic chart component

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

@@ -0,0 +1,22 @@
+import Component from '@ember/component';
+
+export default Component.extend({
+
+  chartData: {
+    datasets: [{
+        data: [10, 20, 30]
+    }],
+    labels: [
+        'Red',
+        'Yellow',
+        'Blue'
+    ]
+  },
+
+  chartOptions: {
+    legend: {
+      display: false
+    }
+  }
+
+});

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

@@ -0,0 +1,5 @@
+{{ember-chart type='doughnut'
+              data=chartData
+              options=chartOptions
+              width=200
+              height=200}}

app/styles/_layout.scss

@@ -10,7 +10,7 @@ main {
     display: grid;
     grid-row-gap: 2rem;
     grid-template-areas:
-      "people"
+      "stats"
       "contributions";
   }
 }
@@ -22,7 +22,7 @@ main {
       grid-row-gap: 2rem;
       grid-template-columns: 2fr 4fr;
       grid-template-areas:
-        "people contributions";
+        "stats contributions";
     }
   }
 }

app/templates/index.hbs

@@ -1,18 +1,29 @@
 <main id="index">
 
-  <section id="people">
-    <header>
-      <h2>Contributors</h2>
-    </header>
-    <div class="content">
-      {{contributor-list contributors=contributorsSorted}}
+  <div id="stats">
+    <section id="people">
+      <header>
+        <h2>Contributors</h2>
+      </header>
+      <div class="content">
+        {{contributor-list contributors=contributorsSorted}}
 
-      <p class="stats">
-        <span class="number">{{await kredits.totalSupply}}</span> kredits issued and distributed among
-        <span class="number">{{contributorsWithKredits.length}}</span> contributors.
-      </p>
-    </div>
-  </section>
+        <p class="stats">
+          <span class="number">{{await kredits.totalSupply}}</span> kredits issued and distributed among
+          <span class="number">{{contributorsWithKredits.length}}</span> contributors.
+        </p>
+      </div>
+    </section>
+
+    <section id="contributions-by-type">
+      <header>
+        <h2>Contributions by type</h2>
+      </header>
+      <div class="content">
+        {{chart-contributions-by-type contributions=proposalsClosed}}
+      </div>
+    </section>
+  </div>
 
   <div id="contributions">
     {{#if proposalsOpen}}