Matching category colors across pie-charts (#7090)

* Trying to implement linkace as a sharing method, related to issue 6698. it's in the files now and shows up but is not sharing properly now

* creating a colour palette based on the number of categories, then making it into hex values to use later

* assigning categories with specific colors to make sure the colors are consistent in the graph

* adjusted pychart logic to account for unique assignments of each categoery with the colours

* fixing redundant code blocks

* removing extra uneeded code -an accidental commit

* removed changes unrelated to PR

* fixed linting errors

* refactored color palette to use CSS native hsl() colors

* Fix whitespace

---------

Co-authored-by: rsharaf-dev <rsharaf@andrew.cmu.edu>
Co-authored-by: roma2023 <romasaparhan19@gmail.com>
Co-authored-by: Alexandre Alapetite <alexandre@alapetite.fr>

1 files changed, 66 insertions, 16 deletions

diff --git a/app/views/stats/index.phtml b/app/views/stats/index.phtml
index 0d144fcd5..3a5db2fb8 100644
--- a/app/views/stats/index.phtml
+++ b/app/views/stats/index.phtml
@@ -96,19 +96,68 @@
 			</div>
 		</div>
 
+<?php
+// Function to generate a color palette
+/**
+ * Generate a color palette.
+ *
+ * @param int $count The number of colors to generate.
+ * @return array<int, string> An array of HSL color strings.
+ */
+function generateColorPalette(int $count): array {
+	$colors = [];
+	for ($i = 0; $i < $count; $i++) {
+		$hue = ($i / $count) * 360; // Distribute colors evenly around the color wheel
+		$saturation = 70; // Fixed saturation
+		$lightness = 50; // Fixed lightness
+		$colors[] = "hsl($hue, {$saturation}%, {$lightness}%)";
+	}
+	return $colors;
+}
+
+// 1. Get all unique category labels and sort them
+$allLabels = array_unique(array_merge($this->feedByCategory['label'], $this->entryByCategory['label']));
+sort($allLabels); // Ensure consistent order
+
+// 2. Generate a color palette based on the number of unique categories
+$colorPalette = generateColorPalette(count($allLabels));
+
+// 3. Map categories to colors
+$colorMap = array_combine($allLabels, $colorPalette);
+
+// 4. Align data and labels for both charts
+$feedData = array_fill_keys($allLabels, 0); // Initialize data with all categories
+foreach ($this->feedByCategory['label'] as $index => $label) {
+	$feedData[$label] = $this->feedByCategory['data'][$index];
+}
+$entryData = array_fill_keys($allLabels, 0); // Initialize data with all categories
+foreach ($this->entryByCategory['label'] as $index => $label) {
+	$entryData[$label] = $this->entryByCategory['data'][$index];
+}
+
+// Final data and labels
+$feedLabels = array_keys($feedData);
+$feedColors = array_map(fn($label) => $colorMap[$label], $feedLabels);
+$feedValues = array_values($feedData);
+
+$entryLabels = array_keys($entryData);
+$entryColors = array_map(fn($label) => $colorMap[$label], $entryLabels);
+$entryValues = array_values($entryData);
+?>
+
 		<div class="stat half">
 			<h2><?= _t('admin.stats.feed_per_category') ?></h2>
 			<div>
 				<canvas id="statsFeedsPerCategory"></canvas>
 				<script class="jsonData-stats" type="application/json">
-				<?php
-				echo json_encode([
-					'canvasID' 		=> 'statsFeedsPerCategory',
-					'charttype' 	=> 'doughnut',
-					'data' 			=> $this->feedByCategory['data'],
-					'labels' 		=> $this->feedByCategory['label'],
-				], JSON_UNESCAPED_UNICODE);
-				?></script>
+				<?= json_encode([
+						'canvasID' => 'statsFeedsPerCategory',
+						'charttype' => 'doughnut',
+						'data' => $feedValues,
+						'labels' => $feedLabels,
+						'backgroundColor' => $feedColors,
+					], JSON_UNESCAPED_UNICODE); ?>
+				</script>
 			</div>
 		</div>
 
@@ -117,16 +166,17 @@
 			<div>
 				<canvas id="statsEntriesPerCategory"></canvas>
 				<script class="jsonData-stats" type="application/json">
-				<?php
-				echo json_encode([
-					'canvasID' 		=> 'statsEntriesPerCategory',
-					'charttype' 	=> 'doughnut',
-					'data' 			=> $this->entryByCategory['data'],
-					'labels' 		=> $this->entryByCategory['label'],
-				], JSON_UNESCAPED_UNICODE);
-				?></script>
+				<?= json_encode([
+						'canvasID' => 'statsEntriesPerCategory',
+						'charttype' => 'doughnut',
+						'data' => $entryValues,
+						'labels' => $entryLabels,
+						'backgroundColor' => $entryColors,
+					], JSON_UNESCAPED_UNICODE); ?>
+				</script>
 			</div>
 		</div>
+
 	</div>
 </main>