bubulle dynamique!

assets/app/frontend/app/app.js

 import 'bootstrap';
 
 import "../js/script";
+import "../js/bulle";

assets/app/frontend/js/bulle.js

+import * as am4core from "@amcharts/amcharts4/core";
+import * as am4charts from "@amcharts/amcharts4/charts";
+import * as am4plugins_forceDirected from "@amcharts/amcharts4/plugins/forceDirected";
+
+// Create chart
+let chart = am4core.create("carto-bulles", am4plugins_forceDirected.ForceDirectedTree);
+
+// Create series
+let series = chart.series.push(new am4plugins_forceDirected.ForceDirectedSeries())
+
+series.dataSource.url = routes.app_carto_json;
+// Set data
+// series.data = [{
+//     "name": "Nos révoltes",
+//     "link": ["Nos rêves"],
+//     "children": [{
+//         "name": "A1", "value": 100
+//     }, {
+//         "name": "A2", "value": 60
+//     }, {
+//         "name": "A3", "value": 30
+//     }]
+// }, {
+//     "name": "Nos rêves",
+//     "link": ["Les actions \n inspirantes"],
+//     "children": [{
+//         "name": "B1", "value": 135
+//     }, {
+//         "name": "B2", "value": 98
+//     }, {
+//         "name": "B3", "value": 56
+//     }]
+// }, {
+//     "name": "Les actions \n inspirantes",
+//     "link": ["Les actions \n à booster"],
+//     "children": [{
+//         "name": "C1", "value": 335
+//     }, {
+//         "name": "C2", "value": 148
+//     }, {
+//         "name": "C3", "value": 126
+//     }, {
+//         "name": "C4", "value": 26
+//     }]
+// }, {
+//     "name": "Les actions \n à booster",
+//     "link": ["Nos révoltes"],
+//     "children": [{
+//         "name": "D1", "value": 415
+//     }, {
+//         "name": "D2", "value": 148
+//     }, {
+//         "name": "D3", "value": 89
+//     }, {
+//         "name": "D4", "value": 64
+//     }, {
+//         "name": "D5", "value": 16
+//     }]
+// }];
+
+series.nodes.template.events.on("hit", function(event) {
+    console.log(event.target.dataItem.nb);
+});
+
+series.manyBodyStrength = -25;
+series.links.template.strength = 2;
+series.centerStrength = 1.2;
+
+//active le zoom
+chart.zoomable = true;
+//Nombre de level affiché par défaut
+series.maxLevels = 1
+
+//link entre "frere"
+// series.dataFields.id = "name";
+// series.dataFields.linkWith = "link";
+
+//distance entre les bulles
+series.links.template.distance = 1.7;
+
+// Set up data fields
+series.dataFields.name = "name";
+series.dataFields.children = "children";
+series.dataFields.nb = "nb";
+
+// Add labels
+series.nodes.template.label.text = "{name}";
+series.fontSize = 20;
+series.minRadius = 70;
+series.maxRadius = 100;
+
+//Couleur des bulles
+series.colors.list = [
+    am4core.color("#dc5b2f"),
+    am4core.color("#fce767"),
+    am4core.color("#97533a"),
+    am4core.color("#568b6f")
+];
+
+//Apparence des liens entre les bulles
+series.links.template.strokeWidth = 5;
+series.links.template.strokeOpacity = 1;
+
+//tooltip
+series.nodes.template.tooltipText = "{nb}";

assets/app/frontend/scss/carto-int.scss

 
   .carto-bulles {
     border: 2px solid $green;
+    min-height: 800px;
+
+    tspan {
+      font-family: dinbold;
+    }
   }
 }

config/routes.yaml

   path: /cartographie-interactive
   controller: App\Controller\Frontend\CartoController::cartoInteractive
 
+app_carto_json:
+  path: /cartographie-json
+  controller: App\Controller\Frontend\CartoController::cartoJson
+
 app_carto_liste:
   path: /cartographie-list
   controller: App\Controller\Frontend\CartoController::cartoListe

package.json

     "devDependencies": {
         "@symfony/stimulus-bridge": "^2.0.0",
         "@symfony/webpack-encore": "^1.4.0",
+        "bootstrap-daterangepicker": "^3.1.0",
         "core-js": "^3.0.0",
         "regenerator-runtime": "^0.13.2",
         "sass": "^1.34.0",
-        "stimulus": "^2.0.0",
-        "webpack-notifier": "^1.6.0",
         "select2-bootstrap4-theme": "^1.0.0",
-        "bootstrap-daterangepicker": "^3.1.0"
+        "stimulus": "^2.0.0",
+        "ts-loader": "^8.0.1",
+        "typescript": "^4.4.2",
+        "webpack-notifier": "^1.6.0"
     },
     "license": "UNLICENSED",
     "private": true,
         "build": "encore production --progress"
     },
     "dependencies": {
+        "@amcharts/amcharts4": "^4.10.22",
         "admin-lte": "^3.1.0",
         "bootstrap-autocomplete": "^2.3.7",
         "jquery": "^3.6.0",

public/build/entrypoints.json

   "entrypoints": {
     "adminlte-plugins": {
       "js": [
-        "/build/runtime.3095b250.js",
+        "/build/runtime.2742d602.js",
         "/build/vendors-node_modules_core-js_internals_export_js.2e873f33.js",
         "/build/vendors-node_modules_core-js_modules_es_string_replace_js.06749256.js",
         "/build/vendors-node_modules_core-js_internals_array-iteration_js-node_modules_jquery_src_jquery_js.a55f993d.js",
         "/build/vendors-node_modules_core-js_modules_es_string_split_js-node_modules_popper_js_dist_esm_popper_js.22d0763b.js",
-        "/build/vendors-node_modules_admin-lte_dist_js_adminlte_min_js-node_modules_bootstrap-autocomplete_di-5760c2.7a48c88c.js",
-        "/build/adminlte-plugins.724fdba0.js"
+        "/build/vendors-node_modules_core-js_modules_es_array_filter_js-node_modules_core-js_modules_es_array-f22e6e.ed1ad144.js",
+        "/build/vendors-node_modules_admin-lte_dist_js_adminlte_min_js-node_modules_bootstrap-autocomplete_di-cd1e13.4b3e0d6f.js",
+        "/build/adminlte-plugins.52943ca2.js"
       ],
       "css": [
-        "/build/vendors-node_modules_admin-lte_dist_js_adminlte_min_js-node_modules_bootstrap-autocomplete_di-5760c2.fa890b12.css"
+        "/build/vendors-node_modules_admin-lte_dist_js_adminlte_min_js-node_modules_bootstrap-autocomplete_di-cd1e13.fa890b12.css"
       ]
     },
     "adminlte-index": {
       "js": [
-        "/build/runtime.3095b250.js",
+        "/build/runtime.2742d602.js",
         "/build/vendors-node_modules_core-js_internals_export_js.2e873f33.js",
         "/build/vendors-node_modules_core-js_modules_es_string_replace_js.06749256.js",
         "/build/vendors-node_modules_core-js_modules_es_array_filter_js-node_modules_core-js_modules_es_array-2f9703.9d3214e1.js",
     },
     "adminlte-form": {
       "js": [
-        "/build/runtime.3095b250.js",
+        "/build/runtime.2742d602.js",
         "/build/vendors-node_modules_core-js_internals_export_js.2e873f33.js",
         "/build/vendors-node_modules_core-js_modules_es_array_find_js-_7db01.8e56d6b5.js",
         "/build/adminlte-form.52acb20e.js"
     },
     "adminlte-sort": {
       "js": [
-        "/build/runtime.3095b250.js",
+        "/build/runtime.2742d602.js",
         "/build/vendors-node_modules_core-js_internals_export_js.2e873f33.js",
         "/build/vendors-node_modules_core-js_modules_es_string_replace_js.06749256.js",
         "/build/vendors-node_modules_core-js_internals_array-iteration_js-node_modules_jquery_src_jquery_js.a55f993d.js",
     },
     "adminlte-field-filemanager": {
       "js": [
-        "/build/runtime.3095b250.js",
+        "/build/runtime.2742d602.js",
         "/build/vendors-node_modules_core-js_internals_export_js.2e873f33.js",
         "/build/adminlte-field-filemanager.5b4b01b5.js"
       ],
     },
     "adminlte-field-collection": {
       "js": [
-        "/build/runtime.3095b250.js",
+        "/build/runtime.2742d602.js",
         "/build/vendors-node_modules_core-js_internals_export_js.2e873f33.js",
         "/build/vendors-node_modules_core-js_modules_es_string_replace_js.06749256.js",
         "/build/vendors-node_modules_core-js_internals_array-iteration_js-node_modules_jquery_src_jquery_js.a55f993d.js",
     },
     "adminlte-main": {
       "js": [
-        "/build/runtime.3095b250.js",
+        "/build/runtime.2742d602.js",
         "/build/vendors-node_modules_core-js_internals_export_js.2e873f33.js",
         "/build/vendors-node_modules_core-js_modules_es_string_replace_js.06749256.js",
         "/build/adminlte-main.b8c5ec34.js"
     },
     "sov-reminder": {
       "js": [
-        "/build/runtime.3095b250.js",
+        "/build/runtime.2742d602.js",
         "/build/sov-reminder.27580486.js"
       ],
       "css": [
     },
     "sov-ticket": {
       "js": [
-        "/build/runtime.3095b250.js",
+        "/build/runtime.2742d602.js",
         "/build/sov-ticket.df76c7a0.js"
       ]
     },
     "app-backend": {
       "js": [
-        "/build/runtime.3095b250.js",
+        "/build/runtime.2742d602.js",
         "/build/vendors-node_modules_core-js_internals_export_js.2e873f33.js",
         "/build/vendors-node_modules_core-js_modules_es_array_find_js-_7db00.020ca672.js",
         "/build/app-backend.e87ef456.js"
     },
     "app-frontend": {
       "js": [
-        "/build/runtime.3095b250.js",
+        "/build/runtime.2742d602.js",
         "/build/vendors-node_modules_core-js_internals_export_js.2e873f33.js",
         "/build/vendors-node_modules_core-js_modules_es_string_replace_js.06749256.js",
         "/build/vendors-node_modules_core-js_internals_array-iteration_js-node_modules_jquery_src_jquery_js.a55f993d.js",
         "/build/vendors-node_modules_core-js_modules_es_string_split_js-node_modules_popper_js_dist_esm_popper_js.22d0763b.js",
-        "/build/vendors-node_modules_bootstrap_dist_js_bootstrap_js-node_modules_core-js_modules_es_array_for-85fc9f.e742e2fb.js",
-        "/build/app-frontend.36f3c878.js"
+        "/build/vendors-node_modules_amcharts_amcharts4_charts_js-node_modules_amcharts_amcharts4_core_js-nod-329af8.85737a1c.js",
+        "/build/app-frontend.6a1e9044.js"
       ],
       "css": [
-        "/build/app-frontend.e9883437.css"
+        "/build/app-frontend.1fba758f.css"
       ]
     }
   }

public/build/manifest.json

 {
-  "build/adminlte-plugins.js": "/build/adminlte-plugins.724fdba0.js",
+  "build/adminlte-plugins.js": "/build/adminlte-plugins.52943ca2.js",
   "build/adminlte-index.css": "/build/adminlte-index.e4548695.css",
   "build/adminlte-index.js": "/build/adminlte-index.b12b9c93.js",
   "build/adminlte-form.css": "/build/adminlte-form.59862983.css",
   "build/sov-ticket.js": "/build/sov-ticket.df76c7a0.js",
   "build/app-backend.css": "/build/app-backend.3d882954.css",
   "build/app-backend.js": "/build/app-backend.e87ef456.js",
-  "build/app-frontend.css": "/build/app-frontend.e9883437.css",
-  "build/app-frontend.js": "/build/app-frontend.36f3c878.js",
-  "build/runtime.js": "/build/runtime.3095b250.js",
+  "build/app-frontend.css": "/build/app-frontend.1fba758f.css",
+  "build/app-frontend.js": "/build/app-frontend.6a1e9044.js",
+  "build/runtime.js": "/build/runtime.2742d602.js",
+  "build/pdfmake.js": "/build/pdfmake.fbf70324.js",
+  "build/canvg.js": "/build/canvg.3c523da1.js",
+  "build/xlsx.js": "/build/xlsx.05855660.js",
   "build/vendors-node_modules_core-js_internals_export_js.2e873f33.js": "/build/vendors-node_modules_core-js_internals_export_js.2e873f33.js",
   "build/vendors-node_modules_core-js_modules_es_string_replace_js.06749256.js": "/build/vendors-node_modules_core-js_modules_es_string_replace_js.06749256.js",
   "build/vendors-node_modules_core-js_internals_array-iteration_js-node_modules_jquery_src_jquery_js.a55f993d.js": "/build/vendors-node_modules_core-js_internals_array-iteration_js-node_modules_jquery_src_jquery_js.a55f993d.js",
   "build/vendors-node_modules_core-js_modules_es_array_find_js-node_modules_jquery-ui-dist_jquery-ui_js.2e367944.js": "/build/vendors-node_modules_core-js_modules_es_array_find_js-node_modules_jquery-ui-dist_jquery-ui_js.2e367944.js",
   "build/vendors-node_modules_core-js_modules_es_string_split_js-node_modules_popper_js_dist_esm_popper_js.22d0763b.js": "/build/vendors-node_modules_core-js_modules_es_string_split_js-node_modules_popper_js_dist_esm_popper_js.22d0763b.js",
-  "build/vendors-node_modules_admin-lte_dist_js_adminlte_min_js-node_modules_bootstrap-autocomplete_di-5760c2.fa890b12.css": "/build/vendors-node_modules_admin-lte_dist_js_adminlte_min_js-node_modules_bootstrap-autocomplete_di-5760c2.fa890b12.css",
-  "build/vendors-node_modules_admin-lte_dist_js_adminlte_min_js-node_modules_bootstrap-autocomplete_di-5760c2.7a48c88c.js": "/build/vendors-node_modules_admin-lte_dist_js_adminlte_min_js-node_modules_bootstrap-autocomplete_di-5760c2.7a48c88c.js",
+  "build/vendors-node_modules_core-js_modules_es_array_filter_js-node_modules_core-js_modules_es_array-f22e6e.ed1ad144.js": "/build/vendors-node_modules_core-js_modules_es_array_filter_js-node_modules_core-js_modules_es_array-f22e6e.ed1ad144.js",
+  "build/vendors-node_modules_amcharts_amcharts4_charts_js-node_modules_amcharts_amcharts4_core_js-nod-329af8.85737a1c.js": "/build/vendors-node_modules_amcharts_amcharts4_charts_js-node_modules_amcharts_amcharts4_core_js-nod-329af8.85737a1c.js",
+  "build/vendors-node_modules_admin-lte_dist_js_adminlte_min_js-node_modules_bootstrap-autocomplete_di-cd1e13.fa890b12.css": "/build/vendors-node_modules_admin-lte_dist_js_adminlte_min_js-node_modules_bootstrap-autocomplete_di-cd1e13.fa890b12.css",
+  "build/vendors-node_modules_admin-lte_dist_js_adminlte_min_js-node_modules_bootstrap-autocomplete_di-cd1e13.4b3e0d6f.js": "/build/vendors-node_modules_admin-lte_dist_js_adminlte_min_js-node_modules_bootstrap-autocomplete_di-cd1e13.4b3e0d6f.js",
   "build/vendors-node_modules_core-js_modules_es_array_filter_js-node_modules_core-js_modules_es_array-2f9703.9d3214e1.js": "/build/vendors-node_modules_core-js_modules_es_array_filter_js-node_modules_core-js_modules_es_array-2f9703.9d3214e1.js",
   "build/vendors-node_modules_core-js_modules_es_array_find_js-_7db00.020ca672.js": "/build/vendors-node_modules_core-js_modules_es_array_find_js-_7db00.020ca672.js",
   "build/vendors-node_modules_core-js_modules_es_array_find_js-_7db01.8e56d6b5.js": "/build/vendors-node_modules_core-js_modules_es_array_find_js-_7db01.8e56d6b5.js",
-  "build/vendors-node_modules_bootstrap_dist_js_bootstrap_js-node_modules_core-js_modules_es_array_for-85fc9f.e742e2fb.js": "/build/vendors-node_modules_bootstrap_dist_js_bootstrap_js-node_modules_core-js_modules_es_array_for-85fc9f.e742e2fb.js",
+  "build/vendors-node_modules_xlsx_xlsx_js.f1747964.js": "/build/vendors-node_modules_xlsx_xlsx_js.f1747964.js",
   "build/images/fa-solid-900.svg": "/build/images/fa-solid-900.13de59f1.svg",
   "build/images/fa-brands-400.svg": "/build/images/fa-brands-400.216edb96.svg",
   "build/fonts/fa-solid-900.eot": "/build/fonts/fa-solid-900.efbd5d20.eot",

public/build/xlsx.05855660.js

+(self["webpackChunk"] = self["webpackChunk"] || []).push([["xlsx"],{
+
+/***/ "?e708":
+/*!************************!*\
+  !*** crypto (ignored) ***!
+  \************************/
+/***/ (() => {
+
+/* (ignored) */
+
+/***/ }),
+
+/***/ "?58fb":
+/*!********************!*\
+  !*** fs (ignored) ***!
+  \********************/
+/***/ (() => {
+
+/* (ignored) */
+
+/***/ }),
+
+/***/ "?20df":
+/*!************************!*\
+  !*** stream (ignored) ***!
+  \************************/
+/***/ (() => {
+
+/* (ignored) */
+
+/***/ })
+
+}]);
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8vaWdub3JlZHwvdmFyL3d3dy9BY3Rlc0NpdG95ZW5zL25vZGVfbW9kdWxlcy94bHN4fGNyeXB0byIsIndlYnBhY2s6Ly8vaWdub3JlZHwvdmFyL3d3dy9BY3Rlc0NpdG95ZW5zL25vZGVfbW9kdWxlcy94bHN4fGZzIiwid2VicGFjazovLy9pZ25vcmVkfC92YXIvd3d3L0FjdGVzQ2l0b3llbnMvbm9kZV9tb2R1bGVzL3hsc3h8c3RyZWFtIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7O0FBQUEsZTs7Ozs7Ozs7OztBQ0FBLGU7Ozs7Ozs7Ozs7QUNBQSxlIiwiZmlsZSI6Inhsc3guMDU4NTU2NjAuanMiLCJzb3VyY2VzQ29udGVudCI6WyIvKiAoaWdub3JlZCkgKi8iLCIvKiAoaWdub3JlZCkgKi8iLCIvKiAoaWdub3JlZCkgKi8iXSwic291cmNlUm9vdCI6IiJ9

src/Controller/Frontend/CartoController.php

 use App\Repository\ProjectInspiringStore;
 use App\Repository\RevoltStore;
 use App\Repository\TerritoryStore;
+use App\Repository\ThematicStore;
 use Doctrine\Common\Collections\ArrayCollection;
 use Doctrine\ORM\EntityManagerInterface;
 use Dompdf\Dompdf;
 use Knp\Component\Pager\PaginatorInterface;
 use Lc\SovBundle\Generator\CsvGenerator;
 use Symfony\Component\DependencyInjection\ParameterBag\ParameterBagInterface;
+use Symfony\Component\HttpFoundation\JsonResponse;
 use Symfony\Component\HttpFoundation\Request;
 use Twig\Environment;
 use ReflectionClass;
     protected ProjectBoostStore $projectBoostStore;
     protected ProjectInspiringStore $projectInspiringStore;
     protected TerritoryStore $territoryStore;
+    protected ThematicStore $thematicStore;
     protected PaginatorInterface $paginator;
     protected Environment $templating;
     protected ParameterBagInterface $parameterBag;
         ProjectBoostStore $projectBoostStore,
         ProjectInspiringStore $projectInspiringStore,
         TerritoryStore $territoryStore,
+        ThematicStore $thematicStore,
         PaginatorInterface $paginator,
         Environment $templating,
         ParameterBagInterface $parameterBag
         $this->projectBoostStore = $projectBoostStore;
         $this->projectInspiringStore = $projectInspiringStore;
         $this->territoryStore = $territoryStore;
+        $this->thematicStore = $thematicStore;
         $this->paginator = $paginator;
         $this->templating = $templating;
         $this->parameterBag = $parameterBag;
         );
     }
 
+    public function cartoJson(Request $request)
+    {
+        $thematicArray = $this->thematicStore->get();
+        $data = array();
+        $key = 0;
+
+        foreach ($thematicArray as $thematic) {
+            $revoltArray = $this->revoltStore->getByThematic($thematic);
+            $dreamArray = $this->dreamStore->getByThematic($thematic);
+            $projectBoostArray = $this->projectBoostStore->getByThematic($thematic);
+            $projectInspArray = $this->projectInspiringStore->getByThematic($thematic);
+
+            $contribArray = array_merge($revoltArray, $dreamArray, $projectBoostArray, $projectInspArray);
+
+            foreach ($contribArray as $contrib) {
+                $keyAlreadyHere = array_search($contrib->__toString(), array_column($data, 'name'));
+//                si "Nos révoltes" ou "Nos Reves" etc, n'existe pas encore on le créer
+                if ($keyAlreadyHere === false) {
+                    $data[$key] = [
+                        'name' => $contrib->__toString(),
+                        'children' => []
+                    ];
+//                  on insere le premier thème de la contribution
+                    $data[$key]['children'][] = [
+                        'name' => $contrib->getThematic()->getName(),
+                        'nb' => 1,
+                    ];
+                    $key++;
+                } else {
+                    $keyTheme = array_search(
+                        $contrib->getThematic()->getName(),
+                        array_column($data[$keyAlreadyHere]['children'], 'name')
+                    );
+//                    si le thème de la contribution n'existe pas encore on le créer
+                    if ($keyTheme === false) {
+                        $data[$keyAlreadyHere]['children'][] = [
+                            'name' => $contrib->getThematic()->getName(),
+                            'nb' => 1,
+                        ];
+                    } else {
+                        $data[$keyAlreadyHere]['children'][$keyTheme]['nb']++;
+                    }
+                }
+            }
+        }
+//        dump($data);
+//        die;
+
+        return new JsonResponse($data);
+    }
+
     private function generateResultArray($data): array
     {
         $dreamArray = $revoltArray = $projectBoostArray = $projectInspiringArray = array();

src/Repository/SearchStore.php

 namespace App\Repository;
 
 
+use App\Entity\Thematic;
 use Doctrine\Common\Collections\ArrayCollection;
 use Lc\SovBundle\Repository\AbstractStore;
 use Lc\SovBundle\Repository\RepositoryQueryInterface;
         return $query->find();
     }
 
+    public function getByThematic(Thematic $thematic, $query = null)
+    {
+        $query = $this->createDefaultQuery($query);
+        $query->filterByThematic(new ArrayCollection([$thematic]));
+
+        return $query->find();
+    }
+
 }

src/Repository/ThematicRepositoryQuery.php

+<?php
+
+namespace App\Repository;
+
+use Knp\Component\Pager\PaginatorInterface;
+use Lc\SovBundle\Repository\AbstractRepositoryQuery;
+use Lc\SovBundle\Repository\RepositoryQueryInterface;
+
+class ThematicRepositoryQuery extends AbstractRepositoryQuery implements RepositoryQueryInterface
+{
+    public function __construct(ThematicRepository $repository, PaginatorInterface $paginator)
+    {
+        parent::__construct($repository, 'r', $paginator);
+    }
+}

src/Repository/ThematicStore.php

+<?php
+
+namespace App\Repository;
+
+
+use Lc\SovBundle\Repository\AbstractStore;
+use Lc\SovBundle\Repository\RepositoryQueryInterface;
+use Lc\SovBundle\Repository\StoreInterface;
+
+class ThematicStore extends AbstractStore implements StoreInterface
+{
+
+    public function __construct(ThematicRepositoryQuery $query)
+    {
+        $this->query = $query;
+    }
+
+    public function orderByDefault(RepositoryQueryInterface $query): RepositoryQueryInterface
+    {
+        $query->orderBy('id');
+        return $query;
+    }
+
+    public function filtersDefault(RepositoryQueryInterface $query): RepositoryQueryInterface
+    {
+        return $query;
+    }
+
+    public function relationsDefault(RepositoryQueryInterface $query): RepositoryQueryInterface
+    {
+        return $query;
+    }
+
+}

templates/frontend/carto-int.html.twig

         <h1 class="title-interactive">La cartographie interactive Nord Franche-Comté</h1>
 
         <div class="carto-bulles">
-            Bubulle!
+
         </div>
     </div>
+{% endblock %}
+
+{% block javascripts %}
+<script>
+    var routes = {
+        app_carto_json: '{{ absolute_url(path('app_carto_json')) }}'
+    };
+</script>
 {% endblock %}

webpack.config.js

 //.enableSassLoader()
 
 // uncomment if you use TypeScript
-//.enableTypeScriptLoader()
+// .enableTypeScriptLoader()
 
 // uncomment if you use React
 //.enableReactPreset()