rework overview and chart template

chr-hertel · chr-hertel · commit e435b3666b1a · 2022-08-13T20:20:15.000+02:00
diff --git a/assets/controllers/chart_controller.js b/assets/controllers/chart_controller.js
@@ -1,12 +1,13 @@
 import { Controller } from '@hotwired/stimulus';
 import Chart from 'chart.js/auto';
-import moment from 'moment';
 import 'chartjs-adapter-moment';
+import zoomPlugin from 'chartjs-plugin-zoom';
 import 'select2';
 import $ from 'jquery';
 
 export default class extends Controller {
     chartColors = {
+        black: 'rgb(45,45,45)',
         red: 'rgb(255, 99, 132)',
         orange: 'rgb(255, 159, 64)',
         yellow: 'rgb(255, 205, 86)',
@@ -21,44 +22,42 @@ export default class extends Controller {
 
     connect() {
         this.initChart(
-            JSON.parse(this.element.dataset.labels),
-            JSON.parse(this.element.dataset.tagData),
-            this.element.dataset.mainLib
+            JSON.parse(this.element.dataset.libraries),
         );
         this.initSelectBox();
     }
 
-    initChart(labels, tagData, mainLib) {
-        const momentLabels = labels.forEach((label) => moment(label, 'MM-DD-YY'));
+    initChart(libraries) {
 
         const ctx = document.getElementById('canvas');
         this.chartConfig = {
             type: 'line',
-            data: {
-                labels: momentLabels,
-                datasets: [
-                    {
-                        label: mainLib,
-                        data: tagData,
-                        fill: false,
-                        borderColor: 'rgb(45,45,45)',
-                        pointRadius: 5,
-                        pointHoverRadius: 7,
-                    },
-                ],
-            },
             options: {
                 plugins: {
                     tooltip: {
                         callbacks: {
                             title: function (tooltipItem) {
-                                return tooltipItem[0].raw.name;
+                                return tooltipItem[0].dataset.label + ' ' + tooltipItem[0].raw.name;
                             },
                             label: function (tooltipItem) {
                                 return 'Ø Complexity: ' + tooltipItem.formattedValue;
                             },
                         },
                     },
+                    zoom: {
+                        pan: {
+                            enabled: true,
+                        },
+                        zoom: {
+                            wheel: {
+                                enabled: true,
+                            },
+                            pinch: {
+                                enabled: true
+                            },
+                            mode: 'xy',
+                        }
+                    }
                 },
                 scales: {
                     x: {
@@ -74,7 +73,12 @@ export default class extends Controller {
                 },
             },
         };
+        Chart.register(zoomPlugin);
         this.chart = new Chart(ctx, this.chartConfig);
+
+        libraries.forEach(library => this.addLibrary(library['name'], library['tags']))
+
+        this.chart.update();
     }
 
     initSelectBox() {
@@ -83,7 +87,7 @@ export default class extends Controller {
 
         // register events
         $select.on('select2:select', this.disableSorting);
-        $select.on('select2:select', this.addLibrary.bind(this));
+        $select.on('select2:select', this.selectLibrary.bind(this));
         $select.on('select2:unselect', this.removeLibrary.bind(this));
     }
 
@@ -95,24 +99,27 @@ export default class extends Controller {
         $(this).trigger('change');
     }
 
-    addLibrary(event) {
-        const data = event.params.data;
+    addLibrary(label, data) {
         const colorName = this.colorNames[this.chartConfig.data.datasets.length % this.colorNames.length];
-        const newColor = this.chartColors[colorName];
-        const config = this.chartConfig;
-        const chart = this.chart;
+        const nextColor = this.chartColors[colorName];
+        const newDataset = {
+            label: label,
+            data: data,
+            fill: false,
+            pointRadius: 5,
+            pointHoverRadius: 7,
+            borderColor: nextColor,
+        };
+
+        this.chartConfig.data.datasets.push(newDataset);
+    }
+
+    selectLibrary(event) {
+        const data = event.params.data;
+        const self = this;
         $.ajax(data.id).done(function (response) {
-            const newDataset = {
-                label: data.text,
-                data: response,
-                fill: false,
-                pointRadius: 5,
-                pointHoverRadius: 7,
-                borderColor: newColor,
-            };
-
-            config.data.datasets.push(newDataset);
-            chart.update();
+            self.addLibrary(data.text, response);
+            self.chart.update();
         });
     }
 
diff --git a/package.json b/package.json
@@ -13,6 +13,7 @@
         "bootstrap": "^5.2.0",
         "chart.js": "^3.8.0",
         "chartjs-adapter-moment": "^1.0.0",
+        "chartjs-plugin-zoom": "^1.2.1",
         "core-js": "^3.23.0",
         "jquery": "^3.6.0",
         "moment": "^2.29.4",
diff --git a/src/ComplexityReport/GraphData.php b/src/ComplexityReport/GraphData.php
@@ -6,8 +6,9 @@
 
 use App\Entity\Library;
 use App\Entity\Tag;
+use JsonSerializable;
 
-final class GraphData
+final class GraphData implements JsonSerializable
 {
     private const DATE_FORMAT = 'm-d-y';
 
@@ -32,4 +33,13 @@ public function getTagData(): array
             ];
         }, $this->library->getTags());
     }
+
+    public function jsonSerialize(): array
+    {
+        return [
+            'name' => $this->library->getName(),
+            'tags' => $this->getTagData(),
+            'labels' => $this->getLabels(),
+        ];
+    }
 }
diff --git a/src/Entity/Project.php b/src/Entity/Project.php
@@ -44,11 +44,11 @@ public static function getMainLibraries(): array
 
     public function __construct(
         #[ORM\Column(unique: true)]
-        private string $name,
+        private readonly string $name,
         #[ORM\Column]
-        private string $url,
+        private readonly string $url,
         #[ORM\Column(unique: true)]
-        private string $vendor,
+        private readonly string $vendor,
     ) {
         $this->libraries = new ArrayCollection();
     }
diff --git a/src/Repository/LibraryRepository.php b/src/Repository/LibraryRepository.php
@@ -12,7 +12,8 @@
 /**
  * @extends ServiceEntityRepository<Library>
  *
- * @method list<Library> findByName(string|array $name)
+ * @method Library[]    findByName(string|array $name)
+ * @method Library|null findOneByName(string $name)
  */
 final class LibraryRepository extends ServiceEntityRepository
 {
diff --git a/symfony.lock b/symfony.lock
@@ -477,7 +477,7 @@
             "assets/app.js",
             "assets/bootstrap.js",
             "assets/controllers.json",
-            "assets/controllers/project_controller.js",
+            "assets/controllers/chart_controller.js",
             "assets/styles/app.css",
             "config/packages/webpack_encore.yaml",
             "package.json",
diff --git a/templates/base.html.twig b/templates/base.html.twig
@@ -10,7 +10,8 @@
     <body class="bg-light">
         {% block content %}{% endblock %}
         <footer class="text-center mt-3 mb-5 text-muted">
-            Made with ♥ in Berlin by <a href="https://twitter.com/el_stoffel" target="_blank" class="text-muted"><u>@el_stoffel</u></a>
+            Made with ♥ in Berlin by <a href="https://twitter.com/el_stoffel" target="_blank" rel="noreferrer" class="text-muted">@el_stoffel</a>
+            &dash; <a href="https://github.com/chr-hertel/oss-complexity-report" target="_blank" rel="noreferrer" class="text-muted">Sources on GitHub</a>
         </footer>
     </body>
 </html>
diff --git a/templates/chart.html.twig b/templates/chart.html.twig
@@ -39,10 +39,8 @@
                     </a>
                 {% endif %}
             </h2>
-            <div data-controller="project"
-                 data-main-lib="{{ selectedLibraries|first.name }}"
-                 data-labels="{{ selectedLibraries|first.asGraph.labels|json_encode|e('html_attr') }}"
-                 data-tag-data="{{ selectedLibraries|first.asGraph.tagData|json_encode|e('html_attr') }}">
+            <div data-controller="chart"
+                 data-libraries="{{ selectedLibraries|map(library => library.asGraph)|json_encode|e('html_attr') }}">
                 <canvas id="canvas" class="img-fluid"></canvas>
                 <div class="form-group mx-3 my-4">
                     <h3>Libraries</h3>
diff --git a/yarn.lock b/yarn.lock
@@ -1063,12 +1063,6 @@
 
 "@symfony/ux-swup@file:vendor/symfony/ux-swup/Resources/assets":
   version "1.1.0"
-  dependencies:
-    "@swup/debug-plugin" "^1.0"
-    "@swup/fade-theme" "^1.0"
-    "@swup/forms-plugin" "^1.0"
-    "@swup/slide-theme" "^1.0"
-    swup "^2.0"
 
 "@symfony/webpack-encore@^3.0.0":
   version "3.0.0"
@@ -1734,6 +1728,13 @@ chartjs-adapter-moment@^1.0.0:
   resolved "https://registry.yarnpkg.com/chartjs-adapter-moment/-/chartjs-adapter-moment-1.0.0.tgz#9174b1093c68bcfe285aff24f7388ad60d44e8f7"
   integrity sha512-PqlerEvQcc5hZLQ/NQWgBxgVQ4TRdvkW3c/t+SUEQSj78ia3hgLkf2VZ2yGJtltNbEEFyYGm+cA6XXevodYvWA==
 
+chartjs-plugin-zoom@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/chartjs-plugin-zoom/-/chartjs-plugin-zoom-1.2.1.tgz#7e350ba20d907f397d0c055239dcc67d326df705"
+  integrity sha512-2zbWvw2pljrtMLMXkKw1uxYzAne5PtjJiOZftcut4Lo3Ee8qUt95RpMKDWrZ+pBZxZKQKOD/etdU4pN2jxZUmg==
+  dependencies:
+    hammerjs "^2.0.8"
+
 "chokidar@>=3.0.0 <4.0.0", chokidar@^3.5.3:
   version "3.5.3"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.3.tgz#1cf37c8707b932bd1af1ae22c0432e2acd1903bd"
@@ -2508,6 +2509,11 @@ growly@^1.3.0:
   resolved "https://registry.yarnpkg.com/growly/-/growly-1.3.0.tgz#f10748cbe76af964b7c96c93c6bcc28af120c081"
   integrity sha512-+xGQY0YyAWCnqy7Cd++hc2JqMYzlm0dG30Jd0beaA64sROr8C4nt8Yc9V5Ro3avlSUDTN0ulqP/VBKi1/lLygw==
 
+hammerjs@^2.0.8:
+  version "2.0.8"
+  resolved "https://registry.yarnpkg.com/hammerjs/-/hammerjs-2.0.8.tgz#04ef77862cff2bb79d30f7692095930222bf60f1"
+  integrity sha512-tSQXBXS/MWQOn/RKckawJ61vvsDpCom87JgxiYdGwHdOa0ht0vzUWDlfioofFCRU0L+6NGDt6XzbgoJvZkMeRQ==
+
 handle-thing@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/handle-thing/-/handle-thing-2.0.1.tgz#857f79ce359580c340d43081cc648970d0bb234e"

Original file line number	Diff line number	Diff line change
`@@ -12,7 +12,8 @@`
`12`	`12`	`/**`
`13`	`13`	`* @extends ServiceEntityRepository<Library>`
`14`	`14`	`*`
`15`		`- * @method list<Library> findByName(string\|array $name)`
	`15`	`+ * @method Library[] findByName(string\|array $name)`
	`16`	`+ * @method Library\|null findOneByName(string $name)`
`16`	`17`	`*/`
`17`	`18`	`final class LibraryRepository extends ServiceEntityRepository`
`18`	`19`	`{`