Wow, I did my first chart and it works!

README.md

@@ -79,6 +79,7 @@ ADMIN_PASSWORD='$argon2id$v=19$m=65536,t=4,p=1$N0R4Zi5hUWQ3QXB0bjVGdg$VsVcHzGRfG
 Feel free to contribute 😉.
 
 * Make many analytics dashboards (that's what this app is for in the first place, probably with Highcharts).
+* Support JS closures in Chart objects (by using a placeholder to remove quotes maybe?).
 * Add a lot of fixtures to play with.
 * Add translations for tags (maybe using an extension like gedmo or knp?).
 * Implement more source file types like xls, ods, etc., that could be transformed to CSV before importing them. [PHPSpreadsheet](https://phpspreadsheet.readthedocs.io/) is already installed, though not used yet.
@@ -97,9 +98,10 @@ Feel free to contribute 😉.
 
 * Operation tags (insurance, internet provider, car loan, etc.). Multiple tags per operation.
 * Demo app at https://piers.ovh/compotes/ with credentials `admin`/`admin` and database reset every day.
-* Added default tags (in French only for now)
-* Docker setup with Compose
-* Added tons of other commands to the Makefile
+* Added default tags (in French only for now).
+* Docker setup with Compose.
+* Added tons of other commands to the Makefile.
+* Made a first PoC for the analytics dashboard.
 
 # License
 

assets/js/app.js

@@ -1,42 +1,6 @@
 import '../css/app.css';
 import * as Highcharts from "highcharts";
 
-// import $ from 'jquery';
+require('../css/app.css');
 
-console.info('App startup');
-
-(async function () {
-
-    const chartsContainer = document.getElementById('charts');
-
-    if (chartsContainer) {
-        try {
-            const filtersUrl = chartsContainer.getAttribute('data-filters-url');
-
-            const url = new URL(filtersUrl);
-            url.searchParams.append('filters', '...');
-
-            const result = await fetch(url);
-
-            if (result.status !== 200) {
-                throw new Error('Filters request returned an error.');
-            }
-
-            const json = await result.json();
-
-            console.info('Filters fetch result: ', json);
-
-            if (!json.highcharts) {
-                throw new Error('Highcharts field is not defined in response.');
-            }
-
-            const myChart = Highcharts.chart('charts', json.highcharts);
-
-            console.info('Chart: ', myChart);
-        } catch (e) {
-            console.error('Cannot fetch filters: '+e.message);
-        }
-
-    }
-
-})();
+global.Highcharts = Highcharts;

config/packages/easy_admin.yaml

@@ -8,11 +8,12 @@ easy_admin:
             - { icon: sync, label: "Sync operations", route: apply_rules }
 
             - label: ''
-            - { icon: ruler-vertical, entity: TagRule }
-            - { icon: tags, entity: Tag }
+            - { icon: money-check, entity: Operation }
+            - { icon: chart-bar, label: "Analytics", route: analytics }
 
             - label: ''
-            - { icon: money-check, entity: Operation }
+            - { icon: ruler-vertical, entity: TagRule }
+            - { icon: tags, entity: Tag }
 
     entities:
         TagRule:

src/Controller/AnalyticsController.php

@@ -0,0 +1,52 @@
+<?php
+
+declare(strict_types=1);
+
+/*
+ * This file is part of the Compotes package.
+ *
+ * (c) Alex "Pierstoval" Rock <[email protected]>.
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+namespace App\Controller;
+
+use App\Highcharts\Chart\TagUsageChart;
+use App\Repository\OperationRepository;
+use App\Repository\TagRepository;
+use Symfony\Component\HttpFoundation\Response;
+use Symfony\Component\Routing\Annotation\Route;
+use Twig\Environment;
+
+class AnalyticsController
+{
+    private Environment $twig;
+    private TagRepository $tagRepository;
+    private OperationRepository $operationRepository;
+
+    public function __construct(
+        Environment $twig,
+        TagRepository $tagRepository,
+        OperationRepository $operationRepository
+    ) {
+        $this->twig = $twig;
+        $this->tagRepository = $tagRepository;
+        $this->operationRepository = $operationRepository;
+    }
+
+    /**
+     * @Route("/admin/analytics", name="analytics")
+     */
+    public function analytics(): Response
+    {
+        $operations = $this->operationRepository->findWithTags();
+
+        return new Response($this->twig->render('analytics.html.twig', [
+            'charts' => [
+                TagUsageChart::create($operations),
+            ],
+        ]));
+    }
+}

src/Highcharts/Chart/AbstractChart.php

@@ -0,0 +1,26 @@
+<?php
+
+declare(strict_types=1);
+
+/*
+ * This file is part of the Compotes package.
+ *
+ * (c) Alex "Pierstoval" Rock <[email protected]>.
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+namespace App\Highcharts\Chart;
+
+abstract class AbstractChart implements ChartInterface
+{
+    public function getConfig(): array
+    {
+        return $this->getOptions() + ['series' => $this->getSeries()];
+    }
+
+    abstract protected function getSeries(): array;
+
+    abstract protected function getOptions(): array;
+}

src/Highcharts/Chart/ChartInterface.php

@@ -0,0 +1,29 @@
+<?php
+
+declare(strict_types=1);
+
+/*
+ * This file is part of the Compotes package.
+ *
+ * (c) Alex "Pierstoval" Rock <[email protected]>.
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+namespace App\Highcharts\Chart;
+
+interface ChartInterface
+{
+    public function getName(): string;
+
+    /**
+     * This corresponds to the options sent to the Highcharts js object.
+     *
+     * Config has to be convertible to JSON or JS.
+     * If your config contains closures, it will be rendered as a string (for now).
+     *
+     * @see https://api.highcharts.com/highcharts/
+     */
+    public function getConfig(): array;
+}

src/Highcharts/Chart/TagUsageChart.php

@@ -0,0 +1,98 @@
+<?php
+
+declare(strict_types=1);
+
+/*
+ * This file is part of the Compotes package.
+ *
+ * (c) Alex "Pierstoval" Rock <[email protected]>.
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+namespace App\Highcharts\Chart;
+
+use App\Entity\Operation;
+
+class TagUsageChart extends AbstractChart
+{
+    /** * @var Operation[] */
+    private array $operations = [];
+
+    private function __construct()
+    {
+    }
+
+    public function getName(): string
+    {
+        return 'Tags';
+    }
+
+    public static function create($operations): self
+    {
+        $self = new self();
+
+        foreach ($operations as $operation) {
+            $self->addOperation($operation);
+        }
+
+        return $self;
+    }
+
+    protected function getOptions(): array
+    {
+        return [
+            'chart' => [
+                'type' => $type = 'bar',
+                'height' => 500,
+            ],
+            'legend' => [
+                'align' => 'right',
+                'layout' => 'vertical',
+            ],
+            'title' => ['text' => 'Tags usage'],
+            'xAxis' => [
+                'categories' => ['Tags'],
+            ],
+            'yAxis' => [
+                'title' => ['text' => 'Number of operations with these tags'],
+            ],
+            'plotOptions' => [
+                $type => [
+                    'pointWidth' => 10,
+                    'borderWidth' => 0,
+                    'groupPadding' => 0.01,
+                ],
+            ],
+        ];
+    }
+
+    protected function getSeries(): array
+    {
+        $series = [];
+
+        foreach ($this->operations as $operation) {
+            foreach ($operation->getTags() as $tag) {
+                $tagName = $tag->getName();
+                if (!isset($series[$tagName])) {
+                    $series[$tagName] = [
+                        'name' => $tagName,
+                        'data' => [0],
+                    ];
+                }
+
+                $series[$tagName]['data'][0]++;
+            }
+        }
+
+        \ksort($series);
+
+        return \array_values($series);
+    }
+
+    private function addOperation(Operation $operation): void
+    {
+        $this->operations[] = $operation;
+    }
+}

src/Repository/OperationRepository.php

@@ -58,4 +58,20 @@ public function monthIsPopulated(DateTimeImmutable $month): bool
 
         return $count > 0;
     }
+
+    /**
+     * @return Operation[]
+     */
+    public function findWithTags(): array
+    {
+        return $this->_em->createQuery(
+            <<<DQL
+            SELECT operation, tags
+            FROM {$this->_entityName} as operation
+            LEFT JOIN operation.tags as tags
+            DQL
+        )
+            ->getResult()
+        ;
+    }
 }