Added component for line chart

Fixes #59
MasterZydra · Mar 14, 2024 · 72d1d39 · 72d1d39
1 parent a44668d
commit 72d1d39
Show file tree

Hide file tree

Showing 5 changed files with 75 additions and 59 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -8,6 +8,9 @@ Types of changes: `Added`, `Changed`, `Deprecate`, `Removed`, `Fixed`, `Secruity
 
 ## [Unreleased]
 
+### Added
+- Added component for line chart #59
+
 ## v2.4.0 - 11.03.2024 - Added revenue and profit statistic
 
 ### Added

diff --git a/framework/registerFn.php b/framework/registerFn.php
@@ -34,12 +34,17 @@ function view(string $name, array $data = []): void
 }
 
 /** Render the given component */
-function component(string $name, array $data = []): void
+function component(string $name, array $data = [], bool $once = false): void
 {
     if (count($data) > 0) {
         extract($data);
     }
-    require Path::join(__DIR__, '..', 'resources', 'Views', 'Components', str_replace('.', '/', $name) . '.php');
+    $path = Path::join(__DIR__, '..', 'resources', 'Views', 'Components', str_replace('.', '/', $name) . '.php');
+    if ($once) {
+        require_once $path;
+    } else {
+        require $path;
+    }
 }
 
 /** Translate the given label into user language */

diff --git a/resources/Views/Components/chart/chartJs.php b/resources/Views/Components/chart/chartJs.php
@@ -0,0 +1 @@
+<script src="js/chart.umd.js"></script>
diff --git a/resources/Views/Components/chart/line.php b/resources/Views/Components/chart/line.php
@@ -0,0 +1,54 @@
+<?php
+/** @var string $chartName */
+/** @var string $xTitle */
+/** @var string $yTitle */
+/** @var array $dataSet */ // ['label' => 'string', 'data' => [array]]
+?>
+<?= component('chart.chartJs', once: true) ?>
+
+<div style="margin-top: 20px; background-color: white;max-width: 1200px;">
+    <canvas id="<?= $chartName ?>"></canvas>
+</div>
+
+<script>
+const ctx<?= $chartName ?> = document.getElementById('<?= $chartName ?>');
+
+const handleResize<?= $chartName ?> = (chart) => {
+    chart.resize();
+}
+
+new Chart(ctx<?= $chartName ?>, {
+    type: 'line',
+    data: {
+        datasets: [
+            <?php foreach ($dataSet as $data) { ?>
+            {
+                label: '<?= $data['label'] ?>',
+                data: <?= json_encode($data['data']) ?>,
+                borderWidth: 1
+            },
+            <?php } ?>
+        ]
+    },
+    options: {
+        responsive: true,
+        onResize: handleResize<?= $chartName ?>,
+        maintainAspectRatio: true,
+        scales: {
+            x: {
+                title: {
+                    display: true,
+                    text: '<?= $xTitle ?>',
+                }
+            },
+            y: {
+                beginAtZero: true,
+                title: {
+                    display: true,
+                    text: '<?= $yTitle ?>'
+                }
+            }
+        }
+    }
+});
+</script>
diff --git a/resources/Views/statistics/revenueAndProfit.php b/resources/Views/statistics/revenueAndProfit.php
@@ -20,62 +20,15 @@
     <?php endforeach ?>
 </table>
 
-
-<div style="margin-top: 20px; background-color: white;max-width: 1200px;">
-    <canvas id="myChart"></canvas>
-</div>
-
-<script src="js/chart.umd.js"></script>
-
-<script>
-const ctx = document.getElementById('myChart');
-
-const handleResize = (chart) => {
-    chart.resize();
-}
-
-new Chart(ctx, {
-    type: 'line',
-    data: {
-        datasets: [
-            {
-                label: '<?= __('Revenue') ?>',
-                data: <?= json_encode(array_map(fn(array $line): float => $line['revenue'], $data)) ?>,
-                borderWidth: 1
-            },
-            {
-                label: '<?= __('Payouts') ?>',
-                data: <?= json_encode(array_map(fn(array $line): float => $line['payouts'], $data)) ?>,
-                borderWidth: 1
-            },
-            {
-                label: '<?= __('Profit') ?>',
-                data: <?= json_encode(array_map(fn(array $line): float => $line['profit'], $data)) ?>,
-                borderWidth: 1
-            },
-        ]
-    },
-    options: {
-        responsive: true,
-        onResize: handleResize,
-        maintainAspectRatio: true,
-        scales: {
-            x: {
-                title: {
-                    display: true,
-                    text: '<?= __('Year') ?>',
-                }
-            },
-            y: {
-                beginAtZero: true,
-                title: {
-                    display: true,
-                    text: '<?= __('inX', setting('currencyUnit')) ?>'
-                }
-            }
-        }
-    }
-});
-</script>
+<?= component('chart.line', [
+    'chartName' => 'revenueAndProfit',
+    'xTitle' => __('Year'),
+    'yTitle' => __('inX', setting('currencyUnit')),
+    'dataSet' => [
+        ['label' => __('Revenue'), 'data' => array_map(fn(array $line): float => $line['revenue'], $data)],
+        ['label' => __('Payouts'), 'data' => array_map(fn(array $line): float => $line['payouts'], $data)],
+        ['label' => __('Profit'), 'data' => array_map(fn(array $line): float => $line['profit'], $data)],
+    ]
+]) ?>
 
 <?= component('layout.footer') ?>