You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

128 lines
3.6KB

  1. import * as am4core from "@amcharts/amcharts4/core";
  2. import * as am4charts from "@amcharts/amcharts4/charts";
  3. import * as am4plugins_forceDirected from "@amcharts/amcharts4/plugins/forceDirected";
  4. // Create chart
  5. let chart = am4core.create("carto-bulles", am4plugins_forceDirected.ForceDirectedTree);
  6. // Create series
  7. let series = chart.series.push(new am4plugins_forceDirected.ForceDirectedSeries())
  8. series.dataSource.url = routes.app_carto_json;
  9. // Set data
  10. // series.data = [{
  11. // "name": "Nos révoltes",
  12. // "link": ["Nos rêves"],
  13. // "children": [{
  14. // "name": "A1", "value": 100
  15. // }, {
  16. // "name": "A2", "value": 60
  17. // }, {
  18. // "name": "A3", "value": 30
  19. // }]
  20. // }, {
  21. // "name": "Nos rêves",
  22. // "link": ["Les actions \n inspirantes"],
  23. // "children": [{
  24. // "name": "B1", "value": 135
  25. // }, {
  26. // "name": "B2", "value": 98
  27. // }, {
  28. // "name": "B3", "value": 56
  29. // }]
  30. // }, {
  31. // "name": "Les actions \n inspirantes",
  32. // "link": ["Les actions \n à booster"],
  33. // "children": [{
  34. // "name": "C1", "value": 335
  35. // }, {
  36. // "name": "C2", "value": 148
  37. // }, {
  38. // "name": "C3", "value": 126
  39. // }, {
  40. // "name": "C4", "value": 26
  41. // }]
  42. // }, {
  43. // "name": "Les actions \n à booster",
  44. // "link": ["Nos révoltes"],
  45. // "children": [{
  46. // "name": "D1", "value": 415
  47. // }, {
  48. // "name": "D2", "value": 148
  49. // }, {
  50. // "name": "D3", "value": 89
  51. // }, {
  52. // "name": "D4", "value": 64
  53. // }, {
  54. // "name": "D5", "value": 16
  55. // }]
  56. // }];
  57. //Popover
  58. series.nodes.template.events.on("hit", function (event) {
  59. if (typeof event.target.dataItem.nb !== 'undefined') {
  60. if ($('.popover-body').length == 0) {
  61. $('.popup').click();
  62. } else {
  63. $('.popover-body').fadeOut("fast");
  64. $('.popover-body').fadeIn("fast");
  65. }
  66. var href = $('.popover-body a').attr('href');
  67. // /cartographie-list?search_list_form%5Bcategory%5D%5B%5D=temp&search_list_form%5Bthematic%5D%5B%5D=1
  68. var hrefArray = href.split("&");
  69. var hrefCategoryArray = hrefArray[0].split('=');
  70. var hrefCategory = hrefCategoryArray[0] + '=' + event.target.dataItem.id_category;
  71. var hrefThematicArray = hrefArray[1].split('=');
  72. var hrefThematic = hrefThematicArray[0] + '=' + event.target.dataItem.id_thematic;
  73. var hrefFinal = hrefCategory + '&' + hrefThematic;
  74. $('.popover-body a').attr('href', hrefFinal);
  75. $('.popover-body .nb').html(event.target.dataItem.nb);
  76. }
  77. });
  78. series.manyBodyStrength = -25;
  79. series.links.template.strength = 2;
  80. series.centerStrength = 1.2;
  81. //active le zoom
  82. chart.zoomable = true;
  83. //Nombre de level affiché par défaut
  84. series.maxLevels = 1
  85. //link entre "frere"
  86. // series.dataFields.id = "name";
  87. // series.dataFields.linkWith = "link";
  88. //distance entre les bulles
  89. series.links.template.distance = 1.4;
  90. // Set up data fields
  91. series.dataFields.name = "name";
  92. series.dataFields.id_category = "id_category";
  93. series.dataFields.id_thematic = "id_thematic";
  94. series.dataFields.children = "children";
  95. series.dataFields.nb = "nb";
  96. // Add labels
  97. series.nodes.template.label.text = "{name}";
  98. series.fontSize = 18;
  99. series.minRadius = 100;
  100. series.maxRadius = 100;
  101. //Couleur des bulles
  102. series.colors.list = [
  103. am4core.color("#dc5b2f"),
  104. am4core.color("#fce767"),
  105. am4core.color("#97533a"),
  106. am4core.color("#568b6f")
  107. ];
  108. //Apparence des liens entre les bulles
  109. series.links.template.strokeWidth = 5;
  110. series.links.template.strokeOpacity = 1;
  111. //tooltip
  112. // series.nodes.template.tooltipText = "{nb}";