Refactor code, courtesy of @galfert

Add tests for contributions-by-type chart
Remove obsolete title from proposal list items
2018-07-16 20:10:57 +02:00 · 2018-07-15 11:57:38 +02:00 · 2018-07-14 17:36:45 +02:00 · 2018-07-14 17:35:06 +02:00 · 2018-07-14 16:36:23 +02:00 · 2018-07-14 14:00:27 +02:00
19 changed files with 535 additions and 131 deletions
@@ -0,0 +1,59 @@
+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) {
+                        kinds[c.kind] = (kinds[c.kind] || 0) + 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
+    }
+  }
+
+});
@@ -0,0 +1,7 @@
+<div class="chart">
+  {{ember-chart type='doughnut'
+                data=chartData
+                options=chartOptions
+                width=200
+                height=200}}
+</div>
@@ -1,12 +1,20 @@
 {{#each proposals as |proposal|}}
-  <li data-proposal-id={{proposal.id}} title="({{proposal.kind}}) {{proposal.description}}">
-    <span class="category {{proposal.kind}}">♥</span>
-    <span class="amount">{{proposal.amount}}</span><span class="symbol">₭S</span>
-    for <span class="recipient">{{proposal.contributor.name}}</span>
-    <span class="votes">({{proposal.votesCount}}/{{proposal.votesNeeded}} votes)</span>
-
-    {{#unless proposal.isExecuted}}
-      <button {{action "confirm" proposal.id}}>+1</button>
-    {{/unless}}
+  <li data-proposal-id={{proposal.id}} class={{if proposal.isExecuted "confirmed" "unconfirmed"}}>
+    <p class="meta">
+      <span class="category {{proposal.kind}}">♥ ({{proposal.kind}})</span>
+      <span class="recipient">{{proposal.contributor.name}}:</span>
+    </p>
+    <p class="kredits-amount">
+      <span class="amount">{{proposal.amount}}</span><span class="symbol">₭S</span>
+    </p>
+    <p class="description">
+      <span class="description">{{proposal.description}}</span>
+    </p>
+    <p class="voting">
+      {{#unless proposal.isExecuted}}
+        <span class="votes">({{proposal.votesCount}}/{{proposal.votesNeeded}} votes)</span>
+        <button {{action "confirm" proposal.id}}>+1</button>
+      {{/unless}}
+    </p>
  </li>
 {{/each}}
@@ -1,4 +1,6 @@
 import Controller from '@ember/controller';
+import { inject as injectService } from '@ember/service';

 export default Controller.extend({
+  kredits: injectService(),
 });
@@ -5,4 +5,17 @@ $green: #97fb68;
 $yellow: #fbe468;
 $red: #fb6868;

-$primaryColor: $blue;
+$primary-color: $blue;
+
+$body-text-color: #fff;
+
+@mixin body-background {
+  background-image: linear-gradient(to bottom, rgba(22, 21, 40, .4), rgba(0, 0, 0, .75)), url('/img/bg.jpg');
+  background-repeat: none;
+  background-attachment: fixed;
+}
+
+#topbar {
+  background-color: rgba(255, 0, 255, .2);
+}
+
@@ -1,31 +1,53 @@
-section {
-  @include outer-container;
-  margin-bottom: 8rem;
+#topbar {
+  height: 3rem;
+}
+
+main {
+  padding: 1rem;
+
+  &#index {
+    width: 100%;
+    display: grid;
+    grid-row-gap: 2rem;
+    grid-template-areas:
+      "stats"
+      "contributions";
+  }
+}
+
+@media (min-width: 550px) {
+  main {
+    &#index {
+      grid-column-gap: 4rem;
+      grid-row-gap: 2rem;
+      grid-template-columns: 2fr 4fr;
+      grid-template-areas:
+        "stats contributions";
+    }
+  }
+}
+
+main section {
+  margin-bottom: 5rem;
+
  &:first-of-type {
-    margin-top: 6rem;
+    margin-top: 2rem;
  }

  @include media($mobile) {
    margin-bottom: 5rem;
-    &:first-of-type {
-      margin-top: 2rem;
+
+    &#proposals-open, &#proposals-closed {
+      margin-top: 0;
    }
  }

  header {
-    @include span-columns(12);
    padding-bottom: 3rem;
    text-align: center;
-    // background-color: purple;

    @include media($mobile) {
-      @include span-columns(10);
-      @include shift(1);
      padding-bottom: 2rem;
    }
-
-    div.content {
-      @include span-columns(12);
-    }
  }
 }
@@ -2,6 +2,7 @@
  margin: 0;
  padding: 0;
  box-sizing: border-box;
+  font-size: 14px;
 }

 *:hover, *:active, *:focus {
@@ -20,13 +21,10 @@
 $font-family-sans: 'Open Sans', sans-serif;

 body {
-  background-image: url('/img/bg.jpg');
-  background-repeat: none;
-  background-attachment: fixed;
+  @include body-background;
  font-family: $font-family-sans;
-  font-size: 14px;
  font-weight: 300;
-  color: #fff;
+  color: $body-text-color;
 }

@media screen and (min-width: 900px) {
@@ -43,14 +41,11 @@ h1, h2, h3, h4, h5, input, button {

 section {
  h2 {
-    font-size: 2.8rem;
-    color: $primaryColor;
-    @include media($mobile) {
-      font-size: 2rem;
-    }
+    font-size: 1.4rem;
+    color: $primary-color;
  }

-  &#contributors {
+  &#people {
    .content {
      p.stats {
        padding-top: 3rem;
@@ -67,18 +62,30 @@ 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;
      font-size: 1rem;
-      color: $primaryColor;
+      color: $primary-color;
      text-align: center;
      @include media($mobile) {
        padding-top: 2rem;
      }

      a {
-        color: $primaryColor;
+        color: $primary-color;
      }
    }
  }
@@ -88,7 +95,7 @@ button, input[type=submit] {
  display: inline-block;
  border: 1px solid rgba(22, 21, 40, 1);
  background-color: rgba(22, 21, 40, 0.6);
-  color: $primaryColor;
+  color: $primary-color;
  border-radius: 3px;
  font-weight: 500;
  text-transform: uppercase;
@@ -100,6 +107,15 @@ button, input[type=submit] {
  }
 }

+@media (min-width: 550px) {
+  section {
+    h2 {
+      font-size: 2rem;
+    }
+  }
+}
+
+@import "components/topbar";
@import "components/loading-spinner";
@import "components/contributor-list";
@import "components/add-contributor";
@@ -9,7 +9,7 @@ section#add-contributor, section#add-proposal {
        padding-top: 1rem;
        text-align: center;
        a {
-          color: $primaryColor;
+          color: $primary-color;
          margin-left: 1rem;
        }
      }
@@ -22,7 +22,7 @@ table.contributor-list {
      }

      a {
-        color: $primaryColor;
+        color: $primary-color;
        &:hover, &:active {
          color: #fff;
        }
@@ -11,7 +11,7 @@
  margin-top: 12rem;
  text-align: center;
  font-size: 1.4rem;
-  color: $primaryColor;
+  color: $primary-color;

  @include media($mobile) {
    margin-top: 6rem;
@@ -23,7 +23,7 @@
    margin-bottom: 2rem;

    #path-comet {
-      fill: $primaryColor;
+      fill: $primary-color;
      opacity: 0.1;

      animation-name: pulse;
@@ -4,16 +4,46 @@ ul.proposal-list {
  list-style: none;

  li {
-    // display: block;
-    padding: 0 1.2rem;
-    line-height: 4.2rem;
+    display: grid;
+    grid-template-columns: auto 5rem;
+    grid-row-gap: 0.5rem;
+    padding: 1rem 1.2rem;
    background-color: rgba(255,255,255,0.1);
-    font-size: 1.4rem;
+    font-size: 1.2rem;
    border-bottom: 1px solid rgba(255,255,255,0.2);
+
    &:first-of-type {
      border-top: 1px solid rgba(255,255,255,0.2);
    }

+    p {
+      align-self: center;
+      margin: 0;
+      font-size: inherit;
+      line-height: 2rem;
+
+      &.kredits-amount, &.voting {
+        text-align: right;
+      }
+
+      &.description {
+        grid-column-start: span 2;
+      }
+
+      &.voting {
+        grid-column-start: span 2;
+      }
+    }
+
+    span {
+      font-size: inherit;
+    }
+
+    .description {
+      line-height: 1.4em;
+      font-size: 1rem;
+    }
+
    .category {
      color: $blue;
      padding-right: 0.2rem;
@@ -23,26 +53,28 @@ ul.proposal-list {
      &.docs      { color: $green; }
      &.ops       { color: $purple; }
    }
+
    .amount {
      font-weight: 500;
    }
+
    .symbol {
      font-size: 1rem;
      font-weight: 500;
      padding-left: 0.2rem;
    }
+
    .recipient {
      font-weight: 500;
    }
+
    .votes {
      font-size: 1rem;
-      color: $primaryColor;
-      padding-left: 0.5rem;
+      color: $primary-color;
+      margin-right: 0.5rem;
    }

    button {
-      float: right;
-      margin-top: 1.1rem;
      height: 2rem;
      line-height: 2rem;
      padding: 0 0.6rem;
@@ -50,3 +82,39 @@ ul.proposal-list {
  }

 }
+
+@media (min-width: 550px) {
+  ul.proposal-list {
+    li {
+      grid-template-columns: auto 10rem;
+      grid-row-gap: 0.5rem;
+
+      p {
+        &.kredits-amount, &.voting {
+          text-align: right;
+        }
+      }
+
+      &.unconfirmed {
+        p {
+          &.kredits-amount, &.voting {
+            text-align: right;
+          }
+
+          &.description {
+            grid-column-start: span 1;
+          }
+
+          &.voting {
+            grid-column-start: span 1;
+          }
+        }
+      }
+
+
+      .description {
+        font-size: inherit;
+      }
+    }
+  }
+}
@@ -0,0 +1,15 @@
+#topbar {
+  padding: 0 1rem;
+  line-height: 3rem;
+  background-color: rgba(0,0,0,.3);
+
+  h1 {
+    display: inline-block;
+    text-transform: uppercase;
+  }
+
+  section#user-account {
+    display: inline-block;
+    float: right;
+  }
+}
@@ -2,4 +2,4 @@
 // $visual-grid-color: red;
 // $visual-grid-index: front;
 // $visual-grid-opacity: 0.5;
-$max-width: em(500, 12);
+$max-width: em(1200, 12);
@@ -1,3 +1,16 @@
-<main>
-  {{outlet}}
-</main>
+<header id="topbar">
+  <h1>Kosmos Kredits</h1>
+
+  <section id="user-account">
+    {{#if kredits.hasAccounts }}
+      {{#if kredits.currentUser}}
+        {{kredits.currentUser.name}}
+        {{#if kredits.currentUserIsCore}}(core){{/if}}
+      {{/if}}
+    {{else}}
+      Anonymous
+    {{/if}}
+  </section>
+</header>
+
+{{outlet}}
@@ -1,39 +1,53 @@
-{{#if kredits.hasAccounts }}
-  <section id="user-account">
-    {{#if kredits.currentUser }}
-      {{ kredits.currentUser.name }}
-      {{#if kredits.currentUserIsCore }}
-        (core)
-      {{/if}}
-      Account: {{kredits.currentUser.account}}
-    {{/if}}
-  </section>
-{{/if}}
+<main id="index">

-<section id="contributors">
-  <header>
-    <h2>Kosmos 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>
+        <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=proposals}}
+      </div>
+    </section>
  </div>
-</section>

-{{#if proposalsOpen}}
-  <section id="proposals-open">
-    <header>
-      <h2>Open Proposals</h2>
-    </header>
-    <div class="content">
-      {{!-- TODO: We need a better naming for kredits.hasAccounts --}}
-      {{proposal-list proposals=proposalsOpenSorted
-                      confirmProposal=(action "confirmProposal")
-                      contractInteractionEnabled=kredits.hasAccounts}}
+  <div id="contributions">
+    {{#if proposalsOpen}}
+      <section id="proposals-open">
+        <header>
+          <h2>Unconfirmed Contributions</h2>
+        </header>
+        <div class="content">
+          {{!-- TODO: We need a better naming for kredits.hasAccounts --}}
+          {{proposal-list proposals=proposalsOpenSorted
+                          confirmProposal=(action "confirmProposal")
+                          contractInteractionEnabled=kredits.hasAccounts}}
+        </div>
+      </section>
+    {{/if}}
+
+    <section id="proposals-closed">
+      <header>
+        <h2>Confirmed Contributions</h2>
+      </header>
+      <div class="content">
+        {{proposal-list proposals=proposalsClosedSorted
+                        confirmProposal=(action "confirmProposal")}}
+      </div>

      {{!-- TODO: We need a better naming --}}
      {{#if kredits.hasAccounts}}
@@ -41,37 +55,23 @@
          {{#link-to 'proposals.new'}}Create new proposal{{/link-to}}
        </p>
      {{/if}}
-    </div>
-  </section>
-{{/if}}
-
-<section id="proposals-closed">
-  <header>
-    <h2>Closed Proposals</h2>
-  </header>
-  <div class="content">
-    {{proposal-list proposals=proposalsClosedSorted
-                    confirmProposal=(action "confirmProposal")}}
-
-    {{!-- TODO: We need a better naming --}}
-    {{#if kredits.hasAccounts}}
-      <p class="actions">
-        {{#link-to 'proposals.new'}}Create new proposal{{/link-to}}
-      </p>
-    {{/if}}
+    </section>
  </div>
-</section>

-<section id="add-contributor">
-  <header>
-    <h2>Add Contributor</h2>
-  </header>
+  {{#if kredits.hasAccounts}}
+    <section id="add-contributor">
+      <header>
+        <h2>Add Contributor</h2>
+      </header>

-  <div class="content">
-    {{#if kredits.currentUser.isCore}}
-      {{add-contributor contributors=contributors save=(action 'save')}}
-    {{else}}
-      Only core team members can add new contributors. Please ask someone to set you up.
-    {{/if}}
-  </div>
-</section>
+      <div class="content">
+        {{#if kredits.currentUser.isCore}}
+          {{add-contributor contributors=contributors save=(action 'save')}}
+        {{else}}
+          Only core team members can add new contributors. Please ask someone to set you up.
+        {{/if}}
+      </div>
+    </section>
+  {{/if}}
+
+</main>
@@ -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
    },
@@ -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",
@@ -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(), '');
+  });
+});
@@ -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'
+    );
+  });
+});
Author	SHA1	Message	Date
basti	d35cab0a67	Refactor code, courtesy of @galfert	2018-07-16 20:10:57 +02:00
basti	b4a094bc89	Add tests for contributions-by-type chart	2018-07-15 11:57:38 +02:00
basti	e43706e2a6	Remove obsolete title from proposal list items	2018-07-14 17:36:45 +02:00
basti	2befc91d90	Add data from proposals to contribution chart	2018-07-14 17:35:06 +02:00
basti	7a35f5177c	Add charts.js plugin, basic chart component	2018-07-14 16:36:23 +02:00
basti	6efc3ea790	Merge pull request #76 from 67P/feature/improve_contrast Add background overlay to improve contrast	2018-07-14 14:00:27 +02:00
basti	ef0f3ffbfb	Add background overlay to improve contrast And use lowercase-hyphenated syntax for variables/mixins.	2018-07-12 11:29:45 +02:00
basti	1e14cc695e	Merge pull request #75 from 67P/feature/improve_layout Improve layout, show contribution details	2018-06-22 13:27:00 -07:00
basti	c074ccf460	Improve all the things	2018-06-17 16:15:02 +02:00
basti	5436469128	Don't show vote count for confirmed contributions	2018-06-17 15:32:08 +02:00
basti	32714efeb9	Improve layout a bit. WIP, because this is not ideal. But now it's readable at least.	2018-06-16 17:12:53 +02:00
basti	cf777571dc	Move contribution info from title to actual content	2018-06-16 16:37:39 +02:00
basti	44b4340a91	New CSS grid layout	2018-06-16 16:09:33 +02:00
basti	24e3171311	Add topbar, move account info to top-right corner	2018-06-16 15:36:35 +02:00