Sort chart results

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",

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"
   }
 }

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,
 	}));
 };

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;