feat: add global completion percentage in home

public/assets/js/progress-charts.js

@@ -2,10 +2,12 @@
 document.querySelectorAll('.feature-list-wrapper').forEach(progressListElement => {
 
 	// Find and generate all relevant data
+	const percentageOverride = progressListElement.querySelector('canvas.percentage-chart').dataset.percentageoverride;
 	const allFeatureNodes = progressListElement.querySelectorAll('.feature');
 	const allDoneFeatureNodes = progressListElement.querySelectorAll('.feature .done');
 
-	const progressPercentage = Math.round(Math.min((allDoneFeatureNodes.length / allFeatureNodes.length) * 100, 100));
+	// Use percentage override data attribute if present, else calculate
+	const progressPercentage = Math.round(percentageOverride) || Math.round(Math.min((allDoneFeatureNodes.length / allFeatureNodes.length) * 100, 100));
 	const remainingPercentage = 100 - progressPercentage;
 
 	// Set inner paragraph

src/routers/home.js

@@ -34,9 +34,49 @@ router.get('/', async (request, response) => {
 		second: specialThanksSecondRow.concat(specialThanksSecondRow).concat(specialThanksSecondRow)
 	};
 
+	// Progress
+
+	// Creates an object to hold the total progress
+	const totalProgress = {
+		title: null,
+		_calc: {
+			percentageSum: 0
+		},
+		percent: 0,
+		progress: {
+			not_started: [],
+			started: [],
+			completed: []
+		}
+	};
+
+	// Calculates individual completion percentages and progress states
+	cache.sections.forEach(section => {
+		const { not_started, started, completed } = section.progress;
+
+		const sectionCompletionPercentage = completed.length / (completed.length + started.length + not_started.length);
+		totalProgress._calc.percentageSum += sectionCompletionPercentage;
+
+		const sectionTitle = `${section.title}  [${Math.round(sectionCompletionPercentage * 100)}%]`;
+
+		if (completed !== [] && started + not_started === []) {
+			// if all the section tasks have been completed, push to completed
+			totalProgress.progress.completed.push(sectionTitle);
+		} else if (not_started !== [] && started + completed === []) {
+			// if none the section tasks have been completed or started, push to not started
+			totalProgress.progress.not_started.push(sectionTitle);
+		} else {
+			// for all other combos, push to started
+			totalProgress.progress.started.push(sectionTitle);
+		}
+	});
+
+	// Calculates global completion percentage
+	totalProgress.percent = Math.round(totalProgress._calc.percentageSum / cache.sections.length * 100);
+
 	response.render('home', {
 		layout: 'main',
-		featuredFeatureList: cache.sections[0],
+		featuredFeatureList: totalProgress,
 		boards,
 		locale,
 		localeString: reqLocale.toString(),

views/partials/progress-list.handlebars

@@ -3,12 +3,12 @@
 		<div>
 			<div class="feature-progress-chart">
 				<p class="percentage-label">{{ data.percent }}</p>
-				<canvas class="percentage-chart"></canvas>
+				<canvas class="percentage-chart" {{#if data.percent}}data-percentageoverride="{{data.percent}}"{{/if}}></canvas>
 			</div>
 		</div>
 	</div>
 	<div class="core">
-		<div class="progress-title">
+		{{#if data.title}}<div class="progress-title">
 			<h3>{{ data.title }}</h3>
 			{{#if data.id}}{{#if (lookup boards data.id)}}{{#with (lookup boards data.id) as | board |}}
 				{{#each board.github_links}}
@@ -20,7 +20,7 @@
 					</div>
 				{{/each}}
 			{{/with}}{{/if}}{{/if}}
-		</div>
+		</div>{{/if}}
 		<div class="feature-list">
 			{{#each data.progress.completed}}
 			<div class="feature">