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>
This commit is contained in:
kwarraich
2024-12-15 14:32:25 +03:00
committed by GitHub
parent 272af0f3c4
commit 066d92be32

View File

@@ -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>