diff --git a/app/components/chart-contributions-by-type/component.js b/app/components/chart-contributions-by-type/component.js new file mode 100644 index 0000000..ea3eed0 --- /dev/null +++ b/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 + } + } + +}); diff --git a/app/components/chart-contributions-by-type/template.hbs b/app/components/chart-contributions-by-type/template.hbs new file mode 100644 index 0000000..9157ff7 --- /dev/null +++ b/app/components/chart-contributions-by-type/template.hbs @@ -0,0 +1,7 @@ +
+ {{ember-chart type='doughnut' + data=chartData + options=chartOptions + width=200 + height=200}} +
\ No newline at end of file diff --git a/app/components/proposal-list/template.hbs b/app/components/proposal-list/template.hbs index 42e18fe..9dfe857 100644 --- a/app/components/proposal-list/template.hbs +++ b/app/components/proposal-list/template.hbs @@ -1,6 +1,5 @@ {{#each proposals as |proposal|}} -
  • +

  • ♥ ({{proposal.kind}}) {{proposal.contributor.name}}: diff --git a/app/styles/_layout.scss b/app/styles/_layout.scss index 9a8f7af..a5f3a96 100644 --- a/app/styles/_layout.scss +++ b/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"; } } } diff --git a/app/styles/app.scss b/app/styles/app.scss index 7d5bef5..26e101e 100644 --- a/app/styles/app.scss +++ b/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; diff --git a/app/templates/index.hbs b/app/templates/index.hbs index bc97449..f39e9f2 100644 --- a/app/templates/index.hbs +++ b/app/templates/index.hbs @@ -1,18 +1,29 @@

    -
    -
    -

    Contributors

    -
    -
    - {{contributor-list contributors=contributorsSorted}} +
    +
    +
    +

    Contributors

    +
    +
    + {{contributor-list contributors=contributorsSorted}} -

    - {{await kredits.totalSupply}} kredits issued and distributed among - {{contributorsWithKredits.length}} contributors. -

    -
    -
    +

    + {{await kredits.totalSupply}} kredits issued and distributed among + {{contributorsWithKredits.length}} contributors. +

    +
    +
    + +
    +
    +

    Contributions by type

    +
    +
    + {{chart-contributions-by-type contributions=proposals}} +
    +
    +
    {{#if proposalsOpen}} diff --git a/package-lock.json b/package-lock.json index 141f4e2..4981a54 100644 --- a/package-lock.json +++ b/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 }, diff --git a/package.json b/package.json index 1eef56d..105b3e1 100644 --- a/package.json +++ b/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", diff --git a/tests/integration/components/chart-contributions-by-type/component-test.js b/tests/integration/components/chart-contributions-by-type/component-test.js new file mode 100644 index 0000000..b59d58d --- /dev/null +++ b/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(), ''); + }); +}); diff --git a/tests/unit/components/chart-contributions-by-type-test.js b/tests/unit/components/chart-contributions-by-type-test.js new file mode 100644 index 0000000..5d85a5c --- /dev/null +++ b/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' + ); + }); +});