deleting vue-chartjs + update chartjs to v3 +add purgecss

README.md

@@ -9,6 +9,9 @@ $ npm install
 # serve with hot reload at localhost:3000
 $ npm run dev
 
+# Analyze assets
+$ npm run analyze
+
 # build for production and launch server
 $ npm run build
 $ npm run start
@@ -73,8 +76,12 @@ More information about the usage of this directory in [the documentation](https:
 ```bash
 $ git clone https://git.duniter.org/paidge/wotwizard-ui.git
 $ cd wotwizard-ui
+$ git checkout -b my-branch
 $ npm install
 $ npm run dev
+$ npm run analyze
+$ git commit
+$ git push
 ```
 
 ### Ajouter des pages

components/chart.vue

+<template>
+    <div>
+        <canvas :id="id"></canvas>
+    </div>
+</template>
+
+<script>
+import { Chart, registerables } from 'chart.js'
+
+export const chartTypes = [
+    'line',
+    'bar',
+    'doughnut',
+    'bubble',
+    'scatter',
+    // 'radar',
+    // 'polarArea'
+]
+
+export default {
+    props: {
+        id: {
+            type: String,
+            default : 'my-chart',
+            required: true
+        },
+        type: {
+            type: String,
+            default: 'line',
+            required: true,
+            validator: function (value) {
+                return chartTypes.indexOf(value) !== -1
+            }
+        },
+        data: {
+            type: Object,
+            default: undefined,
+            required: true
+        },
+        options: {
+            type: Object,
+            default: undefined
+        }
+    },
+    data() {
+        return {
+            chart: undefined,
+            chartData: {
+                type: this.type,
+                data: this.data,
+                options: this.options
+            }
+        }
+    },
+    methods: {
+        createChart() {
+            this.chart?.destroy()
+            this.chart = new Chart(document.getElementById(this.id), this.chartData)
+        }
+    },
+    created() {
+        Chart.register(...registerables)
+    },
+    mounted() {
+        this.createChart()
+    },
+    watch: {
+        type: {
+            handler(n,o) {
+                this.chartData.type = n
+                this.createChart()
+            }
+        },
+        data: {
+            handler(n,o){
+                this.chartData.data = n
+                this.createChart()
+            }
+        },
+        options: {
+            handler(n,o) {
+                this.chartData.options = n
+                this.createChart()
+            }
+        }
+    }
+}
+</script>
+
+<style>
+
+</style>
\ No newline at end of file

nuxt.config.js

@@ -26,7 +26,6 @@ export default {
 
   // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
   plugins: [
-    {src: '~/plugins/chart.js', mode: 'client'}
   ],
 
   // Auto import components: https://go.nuxtjs.dev/config-components

package.json

@@ -6,19 +6,20 @@
     "dev": "nuxt",
     "build": "nuxt build",
     "start": "nuxt start",
-    "generate": "nuxt generate"
+    "generate": "nuxt generate",
+    "analyze": "nuxt build --analyze"
   },
   "dependencies": {
     "@nuxtjs/apollo": "^4.0.1-rc.5",
     "@nuxtjs/pwa": "^3.3.5",
     "bootstrap": "^4.6.0",
-    "chart.js": "^2.9.4",
+    "chart.js": "^3.6.2",
     "core-js": "^3.15.1",
     "graphql-tag": "^2.12.6",
-    "nuxt": "^2.15.7",
-    "vue-chartjs": "^3.5.1"
+    "nuxt": "^2.15.8"
   },
   "devDependencies": {
+    "nuxt-purgecss": "^1.0.0",
     "sass": "^1.45.0",
     "sass-loader": "^10.2.0"
   }

pages/chartjs.vue

 <template>
-  <main class="container-fluid demo">
-    <p class="text-center">Pour activer/désactiver des types de graphiques, il faut éditer le fichier <code>/plugins/chart.js</code></p>
-    <select class="form-control" id="exampleFormControlSelect1" v-model="activeType">
-      <option v-for="type in types" :key="type">{{type}}</option>
-    </select>
-    <div v-for="type in types" :key="type">
-      <component :is="type+'-chart'" :chart-data="datacollection" :options="chartOptions" v-if="activeType==type" />
+  <main class="container-fluid">
+    <h2 class="display-2 text-center mb-5">Test ChartJS</h2>
+    <div class="demo p-5 m-auto">
+      <select class="form-control my-4" v-model="chartType">
+        <option v-for="type in allTypes" :key="type">{{ type }}</option>
+      </select>
+      <button @click="fillData()" class="btn btn-primary mb-5">Randomize</button>
+      <LazyChart id="monGraph" :type="chartType" :data="data" :options="options" />
     </div>
-    <button @click="fillData()" class="btn btn-primary">Randomize</button>
   </main>
 </template>
 
 <script>
-// Import to access to chartTypes
-import chartJS from "~/plugins/chart.js"
+import {chartTypes} from "@/components/chart.vue"
 
-  export default {
+export default {
     data () {
       // Variables locales
       return {
+        allTypes: chartTypes,
+        chartType: "line",
+        options: {
+            responsive: true,
+            lineTension: 1
+        },
+        data: {},
         breadcrumb: [
           {
             text: 'Accueil',
@@ -28,47 +34,48 @@ import chartJS from "~/plugins/chart.js"
             text: 'ChartJS',
             active: true
           }
-        ],
-        types: chartJS.chartTypes,
-        activeType : 'Line',
-        datacollection: {},
-        chartOptions: {
-            responsive: true
-        }
+        ]
       }
     },
     // Fonctions locales
     methods: {
       fillData () {
-        this.datacollection = {
-          labels: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
-          datasets: [
-            {
-              label: 'Data One',
-              backgroundColor: '#f87979',
-              data: this.generateArray(10)
-            }, {
-              label: 'Data Two',
-              backgroundColor: '#00f288',
-              data: this.generateArray(10)
-            }
-          ]
+        this.data = {
+          labels: ["Mercury", "Venus", "Earth", "Mars", "Jupiter", "Saturn", "Uranus", "Neptune"],
+          datasets: [{
+              label: "Number of Moons",
+              data: this.generateArray(8),
+              backgroundColor: this.generateColor(),
+              borderColor: this.generateColor(),
+              borderWidth: 2
+          },
+          {
+              label: "Planetary Mass (relative to the Sun x 10^-6)",
+              data: this.generateArray(8),
+              backgroundColor: this.generateColor(),
+              borderColor: this.generateColor(),
+              borderWidth: 2
+          }]
         }
       },
+      generateColor() {
+        return "rgba(" + this.getRandomInt(255) + "," + this.getRandomInt(255) + "," + this.getRandomInt(255) + ",.5)"
+      },
       generateArray (nb_items) {
         let ret = []
         for (let i=0;i<nb_items;i++) {
-          ret[i] = this.getRandomInt()
+          ret[i] = this.getRandomInt(50)
         }
         return ret
       },
-      getRandomInt () {
-        return Math.floor(Math.random() * (50 - 5 + 1)) + 5
+      getRandomInt (max) {
+        return Math.floor(Math.random() * (max - 5 + 1)) + 5
       }
     },
     mounted () {
       // Mise à jour du fil d'ariane au chargement
       $nuxt.$emit('changeRoute',this.breadcrumb)
+      // On remplit les données dans le graph
       this.fillData()
     }
   }
@@ -78,5 +85,5 @@ import chartJS from "~/plugins/chart.js"
 // CSS Lié au composant
 .demo
   max-width: 600px
-  margin:  10px auto
+  background: var(--background-color-secondary)
 </style>

plugins/chart.js

-import Vue from 'vue'
-import { mixins } from 'vue-chartjs'
-const { reactiveProp } = mixins
-
-// Types de graphiques
-import { Line } from 'vue-chartjs'
-import { Bar } from 'vue-chartjs'
-import { HorizontalBar } from 'vue-chartjs'
-// import { Doughnut } from 'vue-chartjs'
-// import { Pie } from 'vue-chartjs'
-// import { PolarArea } from 'vue-chartjs'
-// import { Radar } from 'vue-chartjs'
-// import { Bubble } from 'vue-chartjs'
-// import { Scatter } from 'vue-chartjs'
-
-const chartTypes = [
-	'Line',
-	'Bar',
-	'HorizontalBar',
-	// 'Doughnut',
-	// 'Pie',
-	// 'PolarArea',
-	// 'Radar',
-	// 'Bubble',
-	// 'Scatter'
-];
-
-const getChart = (type) => {
-	switch (type) {
-		case 'Line':
-			return Line
-		case 'Bar':
-			return Bar
-		case 'HorizontalBar':
-			return HorizontalBar
-		// case 'Doughnut':
-		// 	return Doughnut
-		// case 'Pie':
-		// 	return Pie
-		// case 'PolarArea':
-		// 	return PolarArea
-		// case 'Radar':
-		// 	return Radar
-		// case 'Bubble':
-		// 	return Bubble
-		// case 'Scatter':
-		// 	return Scatter
-		default:
-			throw new Error("wrong chart type")
-	}
-};
-
-
-// Création dynamique des composants
-chartTypes.forEach(type => {
-	Vue.component(type + '-chart', {
-		extends: getChart(type),
-		mixins: [reactiveProp],
-		props: ['options'],
-		mounted () {
-			this.renderChart(this.chartData, this.options)
-		}
-	})
-});
-
-export default {
-	chartTypes
-}
\ No newline at end of file