kredits/kredits-web
9
0
Fork 0
Code Issues 22 Pull Requests 1 Actions Releases 18 Activity

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

Browse Source 
Add doughnut chart for contribution composition
This commit was merged in pull request #77.
This commit is contained in:
Basti
2018-07-17 20:45:32 +02:00
committed by GitHub
parent 6efc3ea790 b4a094bc89
commit 297ed4ee45
10 changed files with 303 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/chart-contributions-by-type/component.js
+63
View File
@@ -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
+7
View File
@@ -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 -2
View File
@@ -1,6 +1,5 @@
{{#each proposals as |proposal|}}
<li data-proposal-id={{proposal.id}} title="{{proposal.description}}"
class={{if proposal.isExecuted "confirmed" "unconfirmed"}}>
<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>
app/styles/_layout.scss
+2 -2
View File
@@ -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
+12
View File
@@ -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
+11
View File
@@ -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
Generated
+128 -14
View File
@@ -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
+1
View File
@@ -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
+29
View File
@@ -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
+37
View File
@@ -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'
);
});
});