fix: correct data from axios, actual usage of plugins and fixed the s…

…css issue

- the store is initialized in plugins/init.js like it was before, using the env object
- this env is set to empty if not retrieved
- import '../styles/settings.scss' is now valid, node 20 bug apparently, more info here :
  * vuejs/vitepress#3102
  * sass/dart-sass#2127
  * dart-lang/sdk#53784
- the data is set to data.data as soon as we get it from axios, removing further problems

.nvmrc

@@ -1 +1 @@
-20
+21

src/assets/chart-data.js

@@ -6,8 +6,7 @@ export default function prepareData(config, data) {
   else return prepareAggData(config, data)
 }
 
-function prepareLinesData(config, olddata) {
-  const data = olddata.data
+function prepareLinesData(config, data) {
   if (config.chartType.type === 'pie' && config.dataType.valuesFields.length > 1) {
     throw new Error('La visualisation camembert ne supporte pas d\'afficher plusieurs niveaux.')
   }

src/main.js

@@ -1,12 +1,17 @@
 import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'
-import { createPinia } from 'pinia'
 import vuetify from './plugins/vuetify'
+import StorePlugin from './plugins/init'
 
 const app = createApp(App)
+let env = import.meta.env
 
-app.use(createPinia())
+if (env === undefined) {
+  env = {}
+}
+
+app.use(StorePlugin, { environement: env })
 app.use(router)
 app.use(vuetify)
 

src/plugins/init.js

@@ -1,8 +1,20 @@
+import { createPinia } from 'pinia'
 import useMainStore from '@/stores/useMainStore'
 import 'url-polyfill'
 
-export function useInit(env, router) {
-  const store = useMainStore()
-  window.vIframeOptions = { router, reactiveParams: true }
-  store.init(env)
+const StorePlugin = {
+  install(app, options) {
+    const pinia = createPinia()
+    app.use(pinia)
+
+    const store = useMainStore()
+    store.init(options.environement)
+
+    window.vIframeOptions = { router: app.config.globalProperties.$router, reactiveParams: true }
+    app.provide('mainStore', store)
+
+    app.config.globalProperties.$mainStore = store
+  }
 }
+
+export default StorePlugin

src/plugins/moment.js

@@ -1,4 +1,3 @@
-// main.js or specific component file
 import moment from 'moment'
 import 'moment/locale/fr'
 

src/plugins/vuetify.js

@@ -3,7 +3,7 @@ import * as components from 'vuetify/components'
 import * as directives from 'vuetify/directives'
 import colors from 'vuetify/lib/util/colors'
 
-// import '../styles/settings.scss'
+import '../styles/settings.scss'
 
 const vuetify = createVuetify({
   components,

src/stores/useMainStore.js

@@ -40,8 +40,6 @@ const useMainStore = defineStore('main', {
       this.setAny({ env })
 
       if (this.application) {
-        router.options.base = router.history.base = new URL(this.application.exposedUrl).pathname
-
         const config = this.config
         if (config && config.dynamicFilters) {
           config.dynamicFilters.forEach(f => {
@@ -120,7 +118,8 @@ const useMainStore = defineStore('main', {
       }
 
       try {
-        const data = await axios.get(config.datasets[0].href + '/lines', { params })
+        let data = await axios.get(config.datasets[0].href + '/lines', { params })
+        data = data.data
         this.setAny({ data })
       } catch (err) {
         this.setError((err.response && err.response.data) || err.message)

vite.config.mjs

@@ -45,13 +45,6 @@ export default defineConfig({
       '@': fileURLToPath(new URL('./src', import.meta.url))
     }
   },
-  css: {
-    preprocessorOptions: {
-      scss: {
-        additionalData: '@import "@/styles/settings.scss";'
-      }
-    }
-  },
   server: {
     port: 3000,
     hmr: {