From 0079b96cf559378322e838b2e3a329ddb99f4b56 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20G=C3=B3rny?= Date: Wed, 28 Oct 2020 17:32:32 +0100 Subject: [PATCH] Sort chart results --- package-lock.json | 30 ++++++------------------------ package.json | 2 +- src/index.ts | 24 ++++++++++++++++-------- src/styles/styles.css | 19 +++++++++---------- 4 files changed, 32 insertions(+), 43 deletions(-) diff --git a/package-lock.json b/package-lock.json index d2c272c..643f53e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -149,12 +149,6 @@ "node-releases": "^1.1.61" } }, - "caniuse-lite": { - "version": "1.0.30001148", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001148.tgz", - "integrity": "sha512-E66qcd0KMKZHNJQt9hiLZGE3J4zuTqE1OnU53miEVtylFbwOEmeA5OsRu90noZful+XGSQOni1aT2tiqu/9yYw==", - "dev": true - }, "electron-to-chromium": { "version": "1.3.582", "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.582.tgz", @@ -3131,9 +3125,9 @@ } }, "caniuse-lite": { - "version": "1.0.30000989", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30000989.tgz", - "integrity": "sha512-vrMcvSuMz16YY6GSVZ0dWDTJP8jqk3iFQ/Aq5iqblPwxSVVZI+zxDyTX0VPqtQsDnfdrBDcsmhgTEOh5R8Lbpw==", + "version": "1.0.30001151", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001151.tgz", + "integrity": "sha512-Zh3sHqskX6mHNrqUerh+fkf0N72cMxrmflzje/JyVImfpknscMnkeJrlFGJcqTmaa0iszdYptGpWMJCRQDkBVw==", "dev": true }, "ccount": { @@ -3208,9 +3202,9 @@ "dev": true }, "chartist": { - "version": "0.11.3", - "resolved": "https://registry.npmjs.org/chartist/-/chartist-0.11.3.tgz", - "integrity": "sha512-ENqCECh7iu0Mm36NNKqeECdGQ9dIcHXmf8fqSWmcmt/XDtl0mqpVNNC9aChoyrJYrlFBOlLGOeAb7fIHFDMNvg==" + "version": "0.11.4", + "resolved": "https://registry.npmjs.org/chartist/-/chartist-0.11.4.tgz", + "integrity": "sha512-H4AimxaUD738/u9Mq8t27J4lh6STsLi4BQHt65nOtpLk3xyrBPaLiLMrHw7/WV9CmsjGA02WihjuL5qpSagLYw==" }, "chokidar": { "version": "3.4.3", @@ -3658,12 +3652,6 @@ "node-releases": "^1.1.61" } }, - "caniuse-lite": { - "version": "1.0.30001148", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001148.tgz", - "integrity": "sha512-E66qcd0KMKZHNJQt9hiLZGE3J4zuTqE1OnU53miEVtylFbwOEmeA5OsRu90noZful+XGSQOni1aT2tiqu/9yYw==", - "dev": true - }, "electron-to-chromium": { "version": "1.3.582", "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.582.tgz", @@ -11459,12 +11447,6 @@ "node-releases": "^1.1.61" } }, - "caniuse-lite": { - "version": "1.0.30001148", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001148.tgz", - "integrity": "sha512-E66qcd0KMKZHNJQt9hiLZGE3J4zuTqE1OnU53miEVtylFbwOEmeA5OsRu90noZful+XGSQOni1aT2tiqu/9yYw==", - "dev": true - }, "chalk": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz", diff --git a/package.json b/package.json index 78a19c4..f50573c 100644 --- a/package.json +++ b/package.json @@ -50,7 +50,7 @@ "webpack-livereload-plugin": "^2.2.0" }, "dependencies": { - "chartist": "^0.11.3", + "chartist": "^0.11.4", "modern-normalize": "^0.5.0" } } diff --git a/src/index.ts b/src/index.ts index 696ecf3..92c5ac9 100644 --- a/src/index.ts +++ b/src/index.ts @@ -59,9 +59,13 @@ const handleCalculateButtonClick = (event: Event) => { if (td) td.textContent = value.toString(); }); + const sortedSupport = committees.slice(0, -1).map((c, i) => ({ + label: c.shortName, + support: {value: support[i], className: c.id}, + })).sort((a, b) => b.support.value - a.support.value); const barChartData = { - labels: committees.map((committee) => committee.shortName).slice(0, -1), - series: support, + labels: sortedSupport.map((ss) => ss.label), + series: sortedSupport.map((ss) => ss.support), }; const barChartOptions = { distributeSeries: true, @@ -75,17 +79,21 @@ const handleCalculateButtonClick = (event: Event) => { } }); + const sortedMandates = committees.map((c, i) => ({ + label: c.shortName, + mandates: {value: mandates[i], className: c.id}, + })).sort((a, b) => b.mandates.value - a.mandates.value); const pieChartData = { - series: mandates, + series: sortedMandates.map((sm) => sm.mandates), }; const pieChartOptions = { donut: true, donutWidth: 60, startAngle: 270, total: 460 * 2, - labelInterpolationFnc: (value: number) => { - return value < 15 ? '' : String(value); - }, + labelInterpolationFnc: (value: number, index: number) => ( + value < 15 ? '' : `${sortedMandates[index].label} ${value}` + ), }; const pie = new Chartist.Pie('#division-pie-chart', pieChartData, pieChartOptions); @@ -97,8 +105,8 @@ const handleCalculateButtonClick = (event: Event) => { }; const generateTable = () => { - const form = document.getElementById('support-form'); - form!.insertAdjacentHTML('afterbegin', tableTemplate({ + const form: HTMLElement = document.getElementById('support-form')!; + form.insertAdjacentHTML('afterbegin', tableTemplate({ committees, })); }; diff --git a/src/styles/styles.css b/src/styles/styles.css index 20f833e..d7e57ef 100644 --- a/src/styles/styles.css +++ b/src/styles/styles.css @@ -137,31 +137,30 @@ h2 { text-align: right; } -.ct-series-a .ct-bar, -.ct-series-a .ct-slice-donut { +.pis { stroke: #56e; } -.ct-series-b .ct-bar, -.ct-series-b .ct-slice-donut { +.ko { stroke: #eb4; } -.ct-series-c .ct-bar, -.ct-series-c .ct-slice-donut { +.lewica { stroke: #d44; } -.ct-series-d .ct-bar, -.ct-series-d .ct-slice-donut { +.psl { stroke: #1c6; } -.ct-series-e .ct-bar, -.ct-series-e .ct-slice-donut { +.konfederacja { stroke: #655; } +.mn { + stroke: #aaa; +} + footer { display: flex; flex-wrap: wrap;