ActesCitoyens/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
//     }]
// }];

//Popover
series.nodes.template.events.on("hit", function (event) {
    if (typeof event.target.dataItem.nb !== 'undefined') {
        if ($('.popover-body').length == 0) {
            $('.popup').click();
        } else {
            $('.popover-body').fadeOut("fast");
            $('.popover-body').fadeIn("fast");
        }
        var href = $('.popover-body a').attr('href');
        // /cartographie-list?search_list_form%5Bcategory%5D%5B%5D=temp&search_list_form%5Bthematic%5D%5B%5D=1
        var hrefArray = href.split("&");

        var hrefCategoryArray = hrefArray[0].split('=');
        var hrefCategory = hrefCategoryArray[0] + '=' + event.target.dataItem.id_category;

        var hrefThematicArray = hrefArray[1].split('=');
        var hrefThematic = hrefThematicArray[0] + '=' + event.target.dataItem.id_thematic;

        var hrefFinal = hrefCategory + '&' + hrefThematic;
        $('.popover-body a').attr('href', hrefFinal);
        $('.popover-body .nb').html(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.4;

// Set up data fields
series.dataFields.name = "name";
series.dataFields.id_category = "id_category";
series.dataFields.id_thematic = "id_thematic";
series.dataFields.children = "children";
series.dataFields.nb = "nb";

// Add labels
series.nodes.template.label.text = "{name}";
series.fontSize = 18;
series.minRadius = 100;
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}";