Merge pull request #77 from 67P/feature/charts

Add doughnut chart for contribution composition

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

@@ -0,0 +1,63 @@
+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({
+
+  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: {
+      display: false
+    }
+  }
+
+});

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

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

app/components/proposal-list/template.hbs

@@ -1,6 +1,5 @@
 {{#each proposals as |proposal|}}
-  <li data-proposal-id={{proposal.id}} title="{{proposal.description}}"
+  <li data-proposal-id={{proposal.id}} class={{if proposal.isExecuted "confirmed" "unconfirmed"}}>
-      class={{if proposal.isExecuted "confirmed" "unconfirmed"}}>
     <p class="meta">
       <span class="category {{proposal.kind}}">♥ ({{proposal.kind}})</span>
       <span class="recipient">{{proposal.contributor.name}}:</span>

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/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

@@ -1,5 +1,6 @@
 <main id="index">
 
+  <div id="stats">
     <section id="people">
       <header>
         <h2>Contributors</h2>
@@ -14,6 +15,16 @@
       </div>
     </section>
 
+    <section id="contributions-by-type">
+      <header>
+        <h2>Contributions by type</h2>
+      </header>
+      <div class="content">
+        {{chart-contributions-by-type contributions=proposals}}
+      </div>
+    </section>
+  </div>
+
   <div id="contributions">
     {{#if proposalsOpen}}
       <section id="proposals-open">

package-lock.json

@@ -3289,7 +3289,8 @@
       },
       "dependencies": {
         "babel-code-frame": {
-          "version": "https://registry.npmjs.org/babel-code-frame/-/babel-code-frame-6.22.0.tgz",
+          "version": "6.22.0",
+          "resolved": "https://registry.npmjs.org/babel-code-frame/-/babel-code-frame-6.22.0.tgz",
           "integrity": "sha512-Dmx3yJCO/UHWgFTKUlBPHUm7h5hCjI5Lfc07gmSv7H4AbUwxS7NHyorp8HN1YEd4xSDCf7P4zqnS63I3aaJTwg==",
           "dev": true,
           "requires": {
@@ -3399,7 +3400,8 @@
           }
         },
         "babel-messages": {
-          "version": "https://registry.npmjs.org/babel-messages/-/babel-messages-6.23.0.tgz",
+          "version": "6.23.0",
+          "resolved": "https://registry.npmjs.org/babel-messages/-/babel-messages-6.23.0.tgz",
           "integrity": "sha512-Bl3ZiA+LjqaMtNYopA9TYE9HP1tQ+E5dLxE0XrAzcIJeK2UqF0/EaqXwBn9esd4UmTfEab+P+UYQ1GnioFIb/w==",
           "dev": true,
           "requires": {
@@ -3434,7 +3436,8 @@
           }
         },
         "babel-runtime": {
-          "version": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.23.0.tgz",
+          "version": "6.23.0",
+          "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.23.0.tgz",
           "integrity": "sha512-9Vdluea/MpskdLsLYTH10Wtc5z2U0THGHVJeqec0EHUbfEt2q3zM1piQ+/GjMl9h0drUY1hF8zHV9nmH8Kl+Og==",
           "dev": true,
           "requires": {
@@ -3582,7 +3585,8 @@
           "dev": true
         },
         "debug": {
-          "version": "https://registry.npmjs.org/debug/-/debug-2.6.0.tgz",
+          "version": "2.6.0",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.0.tgz",
           "integrity": "sha512-XMYwiKKX0jdij1QRlpYn0O6gks0hW3iYUsx/h/RLPKouDGVeun2wlMYl29C85KBjnv1vw2vj+yti1ziHsXd7cg==",
           "dev": true,
           "requires": {
@@ -3623,7 +3627,8 @@
           }
         },
         "invariant": {
-          "version": "https://registry.npmjs.org/invariant/-/invariant-2.2.2.tgz",
+          "version": "2.2.2",
+          "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.2.tgz",
           "integrity": "sha512-FUiAFCOgp7bBzHfa/fK+Uc/vqywvdN9Wg3CiTprLcE630mrhxjDS5MlBkHzeI6+bC/6bq9VX/hxBt05fPAT5WA==",
           "dev": true,
           "requires": {
@@ -3649,7 +3654,8 @@
           "dev": true
         },
         "minimatch": {
-          "version": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.3.tgz",
+          "version": "3.0.3",
+          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.3.tgz",
           "integrity": "sha512-NyXjqu1IwcqH6nv5vmMtaG3iw7kdV3g6MwlUBZkc3Vn5b5AMIWYKfptvzipoyFfhlfOgBQ9zoTxQMravF1QTnw==",
           "dev": true,
           "requires": {
@@ -3657,12 +3663,14 @@
           }
         },
         "os-homedir": {
-          "version": "https://registry.npmjs.org/os-homedir/-/os-homedir-1.0.2.tgz",
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/os-homedir/-/os-homedir-1.0.2.tgz",
           "integrity": "sha512-B5JU3cabzk8c67mRRd3ECmROafjYMXbuzlwtqdM8IbS8ktlTix8aFGb2bAGKrSRIlnfKwovGUUr72JUPyOb6kQ==",
           "dev": true
         },
         "os-tmpdir": {
-          "version": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz",
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz",
           "integrity": "sha512-D2FR03Vir7FIu45XBY20mTb+/ZSWB00sjU9jdQXt83gDrI4Ztz5Fs7/yy74g2N5SVQY4xY1qDr4rNddwYRVX0g==",
           "dev": true
         },
@@ -3704,7 +3712,8 @@
           }
         },
         "to-fast-properties": {
-          "version": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-1.0.2.tgz",
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-1.0.2.tgz",
           "integrity": "sha512-pe0e0JdQLxVTcG0KZrafFA53KqR1J7ufHIg9sYtVY303jTkRF/w3PWwJX2dzdW5hlWFQueIb35Z5LUqR7nr3Vw==",
           "dev": true
         }
@@ -4638,7 +4647,7 @@
           }
         },
         "mkdirp": {
-          "version": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
+          "version": "0.5.1",
           "integrity": "sha512-SknJC52obPfGQPnjIkXbmA6+5H15E+fR+E4iR2oQ3zzCLbd7/ONua69R/Gw7AgkTLsRG+r5fzksYwWe1AgTyWA==",
           "dev": true,
           "requires": {
@@ -4723,6 +4732,22 @@
         "md5-hex": "^2.0.0"
       }
     },
+    "broccoli-merge-trees": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/broccoli-merge-trees/-/broccoli-merge-trees-1.2.4.tgz",
+      "integrity": "sha1-oAFRm7UGfwZYnZGvopQkRaLQ/bU=",
+      "dev": true,
+      "requires": {
+        "broccoli-plugin": "^1.3.0",
+        "can-symlink": "^1.0.0",
+        "fast-ordered-set": "^1.0.2",
+        "fs-tree-diff": "^0.5.4",
+        "heimdalljs": "^0.2.1",
+        "heimdalljs-logger": "^0.1.7",
+        "rimraf": "^2.4.3",
+        "symlink-or-copy": "^1.0.0"
+      }
+    },
     "broccoli-middleware": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/broccoli-middleware/-/broccoli-middleware-1.2.1.tgz",
@@ -5303,6 +5328,43 @@
         "inherits": "^2.0.1"
       }
     },
+    "chart.js": {
+      "version": "2.7.2",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-2.7.2.tgz",
+      "integrity": "sha512-90wl3V9xRZ8tnMvMlpcW+0Yg13BelsGS9P9t0ClaDxv/hdypHDr/YAGf+728m11P5ljwyB0ZHfPKCapZFqSqYA==",
+      "dev": true,
+      "requires": {
+        "chartjs-color": "^2.1.0",
+        "moment": "^2.10.2"
+      }
+    },
+    "chartjs-color": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/chartjs-color/-/chartjs-color-2.2.0.tgz",
+      "integrity": "sha1-hKL7dVeH7YXDndbdjHsdiEKbrq4=",
+      "dev": true,
+      "requires": {
+        "chartjs-color-string": "^0.5.0",
+        "color-convert": "^0.5.3"
+      },
+      "dependencies": {
+        "color-convert": {
+          "version": "0.5.3",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-0.5.3.tgz",
+          "integrity": "sha1-vbbGnOZg+t/+CwAHzER+G59ygr0=",
+          "dev": true
+        }
+      }
+    },
+    "chartjs-color-string": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/chartjs-color-string/-/chartjs-color-string-0.5.0.tgz",
+      "integrity": "sha512-amWNvCOXlOUYxZVDSa0YOab5K/lmEhbFNKI55PWc4mlv28BDzA7zaoQTGxSBgJMHIW+hGX8YUrvw/FH4LyhwSQ==",
+      "dev": true,
+      "requires": {
+        "color-name": "^1.0.0"
+      }
+    },
     "chokidar": {
       "version": "1.7.0",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-1.7.0.tgz",
@@ -5760,6 +5822,12 @@
       "integrity": "sha1-vXJ6f67XfnH/OYWskzUakSczrQ8=",
       "dev": true
     },
+    "convert-source-map": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.5.1.tgz",
+      "integrity": "sha1-uCeAl7m8IpNl3lxiz1/K7YtVmeU=",
+      "dev": true
+    },
     "cookie": {
       "version": "0.3.1",
       "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.3.1.tgz",
@@ -8594,6 +8662,18 @@
         "sane": "^2.4.1"
       }
     },
+    "ember-cli-chart": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/ember-cli-chart/-/ember-cli-chart-3.4.0.tgz",
+      "integrity": "sha512-FS/evjbwATriA70TpSXIEmoyCv1DJEdlc0utJ8vPELOsGL0KqVzd1MC0x5w54WOkaZ6ItP9IKIZQvCGAy9ierw==",
+      "dev": true,
+      "requires": {
+        "chart.js": "^2.7.0",
+        "ember-cli-babel": "^6.6.0",
+        "ember-cli-node-assets": "^0.2.2",
+        "fastboot-transform": "^0.1.2"
+      }
+    },
     "ember-cli-dependency-checker": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/ember-cli-dependency-checker/-/ember-cli-dependency-checker-2.1.0.tgz",
@@ -8683,6 +8763,20 @@
       "integrity": "sha1-IMtop5D+D94kiN39jvu332/nZvI=",
       "dev": true
     },
+    "ember-cli-node-assets": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/ember-cli-node-assets/-/ember-cli-node-assets-0.2.2.tgz",
+      "integrity": "sha1-0tVWJufMZhn4gtf+VXUfkmYCJwg=",
+      "dev": true,
+      "requires": {
+        "broccoli-funnel": "^1.0.1",
+        "broccoli-merge-trees": "^1.1.1",
+        "broccoli-source": "^1.1.0",
+        "debug": "^2.2.0",
+        "lodash": "^4.5.1",
+        "resolve": "^1.1.7"
+      }
+    },
     "ember-cli-normalize-entity-name": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/ember-cli-normalize-entity-name/-/ember-cli-normalize-entity-name-1.0.0.tgz",
@@ -10606,6 +10700,16 @@
         }
       }
     },
+    "fastboot-transform": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/fastboot-transform/-/fastboot-transform-0.1.3.tgz",
+      "integrity": "sha512-6otygPIJw1ARp1jJb+6KVO56iKBjhO+5x59RSC9qiZTbZRrv+HZAuP00KD3s+nWMvcFDemtdkugki9DNFTTwCQ==",
+      "dev": true,
+      "requires": {
+        "broccoli-stew": "^1.5.0",
+        "convert-source-map": "^1.5.1"
+      }
+    },
     "faye-websocket": {
       "version": "0.10.0",
       "resolved": "https://registry.npmjs.org/faye-websocket/-/faye-websocket-0.10.0.tgz",
@@ -14703,6 +14807,12 @@
         }
       }
     },
+    "moment": {
+      "version": "2.22.2",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.22.2.tgz",
+      "integrity": "sha1-PCV/mDn8DpP/UxSWMiOeuQeD/2Y=",
+      "dev": true
+    },
     "morgan": {
       "version": "1.9.0",
       "resolved": "https://registry.npmjs.org/morgan/-/morgan-1.9.0.tgz",
@@ -19502,7 +19612,8 @@
       "dev": true
     },
     "private": {
-      "version": "https://registry.npmjs.org/private/-/private-0.1.7.tgz",
+      "version": "0.1.7",
+      "resolved": "",
       "integrity": "sha512-YmFOCNzqPkis1UxGH6pr8zN4DLoFNcJPvrD+ZLr7aThaOpaHufbWy+UhCa6PM0XszYIWkcJZUg40eKHR5+w+8w==",
       "dev": true
     },
@@ -20590,7 +20701,8 @@
       }
     },
     "slash": {
-      "version": "https://registry.npmjs.org/slash/-/slash-1.0.0.tgz",
+      "version": "1.0.0",
+      "resolved": "",
       "integrity": "sha512-3TYDR7xWt4dIqV2JauJr+EJeW356RXijHeUlO+8djJ+uBXPn8/2dpzBc8yQhh583sVvc9CvFAeQVgijsH+PNNg==",
       "dev": true
     },
@@ -20839,7 +20951,8 @@
       }
     },
     "source-map": {
-      "version": "https://registry.npmjs.org/source-map/-/source-map-0.5.6.tgz",
+      "version": "0.5.6",
+      "resolved": "",
       "integrity": "sha512-MjZkVp0NHr5+TPihLcadqnlVoGIoWo4IBHptutGh9wI3ttUYvCG26HkSuDi+K6lsZ25syXJXcctwgyVCt//xqA==",
       "dev": true
     },
@@ -21572,7 +21685,8 @@
       "dev": true
     },
     "trim-right": {
-      "version": "https://registry.npmjs.org/trim-right/-/trim-right-1.0.1.tgz",
+      "version": "1.0.1",
+      "resolved": "",
       "integrity": "sha512-WZGXGstmCWgeevgTL54hrCuw1dyMQIzWy7ZfqRJfSmJZBwklI15egmQytFP6bPidmw3M8d5yEowl1niq4vmqZw==",
       "dev": true
     },

package.json

@@ -30,6 +30,7 @@
     "ember-cli": "~3.1.2",
     "ember-cli-app-version": "^3.0.0",
     "ember-cli-babel": "^6.6.0",
+    "ember-cli-chart": "^3.4.0",
     "ember-cli-dependency-checker": "^2.0.0",
     "ember-cli-eslint": "^4.2.1",
     "ember-cli-htmlbars": "^2.0.1",

tests/integration/components/chart-contributions-by-type/component-test.js

@@ -0,0 +1,29 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render } from '@ember/test-helpers';
+import hbs from 'htmlbars-inline-precompile';
+
+module('Integration | Component | chart-contributions-by-type', function(hooks) {
+  setupRenderingTest(hooks);
+
+  let proposals = [
+    { kind: 'dev', amount: 500 },
+    { kind: 'dev', amount: 1500 },
+    { kind: 'ops', amount: 1500 },
+    { kind: 'design', amount: 5000 },
+    { kind: 'ops', amount: 1500 },
+    { kind: 'dev', amount: 5000 },
+    { kind: 'community', amount: 5000 },
+    { kind: 'docs', amount: 500 },
+    { kind: 'docs', amount: 500 },
+    { kind: 'docs', amount: 500 },
+  ];
+
+  test('it renders', async function(assert) {
+    this.set('proposals', proposals);
+
+    await render(hbs`{{chart-contributions-by-type contributions=proposals}}`);
+
+    assert.equal(this.element.textContent.trim(), '');
+  });
+});

tests/unit/components/chart-contributions-by-type-test.js

@@ -0,0 +1,37 @@
+import { module, test } from 'qunit';
+import { setupTest } from 'ember-qunit';
+
+module('Unit | Component | chart-contributions-by-type', function(hooks) {
+  setupTest(hooks);
+
+  let proposals = [
+    { kind: 'dev', amount: 500 },
+    { kind: 'dev', amount: 1500 },
+    { kind: 'ops', amount: 1500 },
+    { kind: 'design', amount: 5000 },
+    { kind: 'ops', amount: 1500 },
+    { kind: 'dev', amount: 5000 },
+    { kind: 'community', amount: 5000 },
+    { kind: 'docs', amount: 500 },
+    { kind: 'docs', amount: 500 },
+    { kind: 'docs', amount: 500 },
+  ];
+
+  test('#chartData', function(assert) {
+    let component = this.owner.factoryFor('component:chart-contributions-by-type').create();
+    component.set('contributions', proposals);
+
+    let data = component.get('chartData');
+
+    assert.deepEqual(
+      data.labels,
+      ['Community', 'Design', 'Development', 'Operations & Infrastructure', 'Documentation'],
+      'returns the correct labels'
+    );
+    assert.deepEqual(
+      data.datasets[0].data,
+      [5000, 5000, 7000, 3000, 1500],
+      'returns the correct kredit sums'
+    );
+  });
+});