From 7a35f5177c39c9ae8382f6bc4b078edb12ca0ed6 Mon Sep 17 00:00:00 2001 From: Sebastian Kippe Date: Sat, 14 Jul 2018 16:36:23 +0200 Subject: [PATCH] Add charts.js plugin, basic chart component --- .../chart-contributions-by-type/component.js | 22 +++ .../chart-contributions-by-type/template.hbs | 5 + app/styles/_layout.scss | 4 +- app/templates/index.hbs | 35 +++-- package-lock.json | 142 ++++++++++++++++-- package.json | 1 + .../component-test.js | 26 ++++ 7 files changed, 207 insertions(+), 28 deletions(-) create mode 100644 app/components/chart-contributions-by-type/component.js create mode 100644 app/components/chart-contributions-by-type/template.hbs create mode 100644 tests/integration/components/chart-contributions-by-type/component-test.js 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..b78af88 --- /dev/null +++ b/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 + } + } + +}); 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..1807721 --- /dev/null +++ b/app/components/chart-contributions-by-type/template.hbs @@ -0,0 +1,5 @@ +{{ember-chart type='doughnut' + data=chartData + options=chartOptions + width=200 + height=200}} \ No newline at end of file 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/templates/index.hbs b/app/templates/index.hbs index bc97449..6d7177c 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=proposalsClosed}} +
+
+
{{#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..9d0375b --- /dev/null +++ b/tests/integration/components/chart-contributions-by-type/component-test.js @@ -0,0 +1,26 @@ +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); + + test('it renders', async function(assert) { + // Set any properties with this.set('myProperty', 'value'); + // Handle any actions with this.set('myAction', function(val) { ... }); + + await render(hbs`{{chart-contributions-by-type}}`); + + assert.equal(this.element.textContent.trim(), ''); + + // Template block usage: + await render(hbs` + {{#chart-contributions-by-type}} + template block text + {{/chart-contributions-by-type}} + `); + + assert.equal(this.element.textContent.trim(), 'template block text'); + }); +});