correction import highcharts

Author: ThibautMn

frontend/src/components/graph/camembert.vue

@@ -28,13 +28,15 @@
 import Highcharts from 'highcharts';
 import exportingInit from 'highcharts/modules/exporting';
 import offlineExporting from 'highcharts/modules/offline-exporting';
+import { Chart as highcharts } from 'highcharts-vue';
 
 // Modification de highcharts pour permettre l'export des graphiques
 exportingInit(Highcharts); // initialise le module export, doit être fait après l'import de highcharts
 offlineExporting(Highcharts); // initialise l'export coté client, doit être fait après l'import de highcharts
 
 export default {
   name: 'camembert',
+  components: { highcharts },
   props: {
     data_db: { default: null },
     fieldName: { default: null },

frontend/src/components/graph/colonnes_empilees.vue

@@ -28,13 +28,15 @@
 import Highcharts from 'highcharts';
 import exportingInit from 'highcharts/modules/exporting';
 import offlineExporting from 'highcharts/modules/offline-exporting';
+import { Chart as highcharts } from 'highcharts-vue';
 
 // Modification de highcharts pour permettre l'export des graphiques
 exportingInit(Highcharts); // initialise le module export, doit être fait après l'import de highcharts
 offlineExporting(Highcharts); // initialise l'export coté client, doit être fait après l'import de highcharts
 
 export default {
   name: 'colonnes_empilees',
+  components: { highcharts },
   props: {
     data_db: { default: null },
 

frontend/src/components/graph/graph_lignes_multiples.vue

@@ -28,13 +28,15 @@
 import Highcharts, { color } from 'highcharts';
 import exportingInit from 'highcharts/modules/exporting';
 import offlineExporting from 'highcharts/modules/offline-exporting';
+import { Chart as highcharts } from 'highcharts-vue';
 
 // Modification de highcharts pour permettre l'export des graphiques
 exportingInit(Highcharts); // initialise le module export, doit être fait après l'import de highcharts
 offlineExporting(Highcharts); // initialise l'export coté client, doit être fait après l'import de highcharts
 
 export default {
   name: 'graph_lignes_multiples',
+  components: { highcharts },
   props: {
     data_db: { default: null }, // données à afficher
     field_x: { default: null }, // nom du champ à utiliser pour les catégories de l'axe x

frontend/src/components/graph/histogramme_comparatif.vue

@@ -46,13 +46,15 @@
 import Highcharts from 'highcharts';
 import exportingInit from 'highcharts/modules/exporting';
 import offlineExporting from 'highcharts/modules/offline-exporting';
+import { Chart as highcharts } from 'highcharts-vue';
 
 // Modification de highcharts pour permettre l'export des graphiques
 exportingInit(Highcharts); // initialise le module export, doit être fait après l'import de highcharts
 offlineExporting(Highcharts); // initialise l'export coté client, doit être fait après l'import de highcharts
 
 export default {
   name: 'histogramme_comparatif',
+  components: { highcharts },
   props: {
     data_db: { default: null },
     fieldGroup: { default: null },

frontend/src/main.js

@@ -6,17 +6,8 @@ import store from '@/store/store';
 import vuetify from '@/plugins/vuetify'; // path to vuetify export
 import session from '@/plugins/session';
 
-import Highcharts from 'highcharts';
-import More from 'highcharts/highcharts-more';
-import exporting from 'highcharts/modules/exporting';
-import HighchartsVue from 'highcharts-vue';
-
 import VueMatomo from 'vue-matomo';
 
-// highcharts est une librairie pour créer des graphiques
-More(Highcharts);
-exporting(Highcharts);
-
 // port d'ecoute du serveur backend 5000. Mettre le meme dans config/config.py
 // Vue.config.devServer = { port: 8080, proxy: 'http://localhost:5005' };
 
@@ -37,9 +28,6 @@ app.use(session);
 
 // vutify est un framework css pour vuejs pour les formulaires, boutons, etc
 app.use(vuetify);
-app.use(HighchartsVue, {
-  highcharts: Highcharts,
-});
 
 // vue-matomo est une librairie pour suivre les statistiques de visite (Matomo)
 app.use(VueMatomo, {

frontend/src/modules/chasse/graph/graph_bilan_evolution.vue

@@ -48,6 +48,7 @@
 import Highcharts, { chart } from 'highcharts';
 import exportingInit from 'highcharts/modules/exporting';
 import offlineExporting from 'highcharts/modules/offline-exporting';
+import { Chart as highcharts } from 'highcharts-vue';
 import { apiRequest } from '../../../core/js/data/api.js';
 import { localisationTitle } from '../config/util.js';
 
@@ -58,6 +59,7 @@ offlineExporting(Highcharts);
 
 export default {
   name: 'graph_bilan_evolution',
+  components: { highcharts },
   props: {
     bilanParams: { type: Object, default: () => ({}) }, // Paramètres de filtrage pour récupérer les données du bilan d'évolution
     height: { type: String, default: '400px' }, // Hauteur du graphique

frontend/src/modules/chasse/graph/graph_ice.vue

@@ -43,19 +43,24 @@
 
 <script>
 import Highcharts from 'highcharts';
+import More from 'highcharts/highcharts-more';
 import exportingInit from 'highcharts/modules/exporting';
 import offlineExporting from 'highcharts/modules/offline-exporting';
+import { Chart as highcharts } from 'highcharts-vue';
 import { round } from '@/core/js/util/util.js';
 import { dataTxt, localisationTitle } from '../config/util.js';
 import { apiRequest } from '@/core/js/data/api.js';
 
+// Initialise le module highcharts-more (nécessaire pour la série 'errorbar' utilisée dans ce graphique)
+More(Highcharts);
 // Initialise le module d'exportation de Highcharts (permet l'export PNG, PDF, etc. depuis le menu du graphique)
 exportingInit(Highcharts);
 // Initialise le module d'exportation hors-ligne de Highcharts (permet l'export même sans connexion internet)
 offlineExporting(Highcharts);
 
 export default {
   name: 'graphChasseIce',
+  components: { highcharts },
   props: {
     width: { default: '100%' },
     height: { default: '500px' },

frontend/src/modules/chasse/graph/graph_ice_points.vue

@@ -45,6 +45,7 @@
 import Highcharts from 'highcharts';
 import exportingInit from 'highcharts/modules/exporting';
 import offlineExporting from 'highcharts/modules/offline-exporting';
+import { Chart as highcharts } from 'highcharts-vue';
 import { round } from '@/core/js/util/util.js';
 import { dataTxt, localisationTitle } from '../config/util.js';
 import { apiRequest } from '@/core/js/data/api.js';
@@ -56,6 +57,7 @@ offlineExporting(Highcharts);
 
 export default {
   name: 'graphChasseIcePoints',
+  components: { highcharts },
   props: {
     width: { default: '100%' },
     height: { default: '500px' },

frontend/src/modules/in/in-graph.vue

@@ -35,15 +35,20 @@
 
 <script>
 import Highcharts from 'highcharts';
+import More from 'highcharts/highcharts-more';
 import exportingInit from 'highcharts/modules/exporting';
 import offlineExporting from 'highcharts/modules/offline-exporting';
+import { Chart as highcharts } from 'highcharts-vue';
 import chroma from 'chroma-js';
 import { round } from '@/core/js/util/util.js';
+// Initialise le module highcharts-more (nécessaire pour la série 'errorbar' utilisée dans ce graphique)
+More(Highcharts);
 exportingInit(Highcharts);
 offlineExporting(Highcharts);
 
 export default {
   name: 'in-graph',
+  components: { highcharts },
   props: [
     'displayTitle',
     'dataIn',

frontend/src/modules/restitution/restitution-graph.vue

@@ -11,8 +11,10 @@
 
 <script>
 import Highcharts from 'highcharts';
+import { Chart as highcharts } from 'highcharts-vue';
 export default {
   name: 'restitution-graph',
+  components: { highcharts },
   props: ['results'],
   data: () => ({
     chartOptions: null,