intégration de ChartJS

assets/css/style.scss

@@ -6,7 +6,7 @@ $font-family-base: Montserrat, Helvetica, Arial, serif;
 @import 'bootstrap';
 
 :root {
-    --menu-size: 300px;
+    --menu-size: 320px;
 }
 
 .content {

components/navigation/menu/Sidebar.vue

@@ -21,7 +21,8 @@ export default {
                 title: 'Développement',
                 items : [
                     {path: '/explore',title: 'Explorer la toile de confiance'},
-                    {path: '/appolo',title: 'Appolo'}
+                    {path: '/appolo',title: 'Appolo'},
+                    {path: '/chartjs',title: 'ChartJS'}
                 ]},
                 {
                 title: 'Un menu',

mixins/wotwizard.js

@@ -4,7 +4,8 @@ export default {
             WWZ_URL : "https://wwgql.coinduf.eu",
             WWZ_REQUEST_VERSION : "{version}",
             query: "",
-            retour : null
+            retour: null,
+            isError: false
         }
     },
     methods: {
@@ -12,17 +13,20 @@ export default {
         WWZ_REQUEST_DETAILS(hint) { return `{idSearch(with:{hint:\\"${hint}\\"}){ids{pubkey,uid,status}}}` },
     },
     async fetch() {
-        this.retour = await fetch(this.WWZ_URL, {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json'
-            },
-            body: '{"query":"' + this.query + '"}'
-        }).then((res) => {
-            return res.json()
-        }).catch((error) => {
-            return {errors: error}
-        })
+        if (this.query != "") {
+            this.retour = await fetch(this.WWZ_URL, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: '{"query":"' + this.query + '"}'
+            }).then((res) => {
+                return res.json()
+            }).catch((error) => {
+                this.isError = true
+                return {errors: error}
+            })
+        }
     },
     watch: {
       query : function() {

nuxt.config.js

@@ -26,6 +26,7 @@ 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

@@ -12,12 +12,13 @@
     "@nuxtjs/apollo": "^4.0.1-rc.5",
     "@nuxtjs/pwa": "^3.3.5",
     "bootstrap": "^4.6.0",
+    "chart.js": "^2.9.4",
     "core-js": "^3.15.1",
     "graphql-tag": "^2.12.6",
-    "nuxt": "^2.15.7"
+    "nuxt": "^2.15.7",
+    "vue-chartjs": "^3.5.1"
   },
   "devDependencies": {
-    "fibers": "^5.0.0",
     "sass": "^1.45.0",
     "sass-loader": "^10.2.0"
   }

pages/appolo.vue

@@ -3,14 +3,13 @@
   <h2 class="display-2 text-center mb-5">Test Appolo</h2>
   <div class="row">
     <div class="col-6 m-auto text-center">
-      <ApolloQuery :query="query">
-        <template slot-scope="{ result: { data, loading } }">
-          <div v-if="loading">Loading...</div>
-          <p v-else>
-            {{ data }}
-          </p>
-        </template>
-      </ApolloQuery>
+      <p>Cette page uilise la bibliothèque <a href="https://apollo.vuejs.org/" target="_blank">Apollo</a> pour requêter graphQL</p>
+      <p>Le endpoint se configure dans le fichier <code>./nuxt.config.js</code></p>
+      <p>Il est possible de <a href="https://apollo.vuejs.org/guide/components/query.html#query-with-gql-files" target="_blank">mettre les requêtes dans des fichiers séparés</a> et de faire <a href="https://apollo.vuejs.org/guide/apollo/pagination.html" target="_blank">de la pagination</a></p>
+      <input type="text" v-model="param">
+      <div>
+        {{ marequete }}
+      </div>
     </div>
   </div>
 </main>
@@ -35,12 +34,27 @@ export default {
         }
       ],
       // Requête graphQL
-      query: gql`{version}`
+      query: gql`{version}`,
+      param: '4Fge'
     }
   },
   // Fonctions locales
   methods: {
   },
+  apollo: {
+    marequete : {
+      query: gql`query Search($hint: String) {
+            idSearch(with: {hint: $hint}) {
+              ids {
+                pubkey
+                uid
+                status
+              }
+            }
+          } `,
+      variables(){return {hint:this.param}}
+    } 
+  },
   mounted () {
     // Mise à jour du fil d'ariane au chargement
     $nuxt.$emit('changeRoute',this.breadcrumb)
@@ -49,6 +63,6 @@ export default {
 </script>
 
 <style lang="sass" scoped>
-
+// CSS Lié au composant
 
 </style>
\ No newline at end of file

pages/chartjs.vue

+<template>
+  <div class="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" />
+    </div>
+    <button @click="fillData()" class="btn btn-primary">Randomize</button>
+  </div>
+</template>
+
+<script>
+import chartJS from "~/plugins/chart.js"
+
+  export default {
+    data () {
+      // Variables locales
+      return {
+        breadcrumb: [
+          {
+            text: 'Accueil',
+            to: "/"
+          },
+          {
+            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)
+            }
+          ]
+        }
+      },
+      generateArray (nb_items) {
+        let ret = []
+        for (let i=0;i<nb_items;i++) {
+          ret[i] = this.getRandomInt()
+        }
+        return ret
+      },
+      getRandomInt () {
+        return Math.floor(Math.random() * (50 - 5 + 1)) + 5
+      }
+    },
+    mounted () {
+      // Mise à jour du fil d'ariane au chargement
+      $nuxt.$emit('changeRoute',this.breadcrumb)
+      this.fillData()
+    }
+  }
+</script>
+
+<style lang="sass" scoped>
+// CSS Lié au composant
+.demo
+  max-width: 600px
+  margin:  10px auto
+</style>

pages/explore.vue

 <template>
 <main class="content">
-  <h2 class="display-2 text-center mb-5">Page d'accueil</h2>
+  <h2 class="display-2 text-center mb-5">Explorer avec fetch</h2>
   <div class="row">
     <div class="col-6 m-auto">
+      <p>Cette page uilise le script <code>/mixins/wotwizard.js</code> pour requêter graphQL. Il faut privilégier Apollo car ce script est amené à disparaître au profit d'Apollo.</p>
       <form @submit.prevent="refresh" class="mb-5">
         <div class="mb-3">
           <label for="rech" class="form-label">Votre recherche</label>
           <input type="text" class="form-control" id="rech" aria-describedby="rechHelp" v-model="search" :disabled="isError">
           <small id="rechHelp" class="form-text text-muted">Saisissez le début d'un pseudo ou d'une clé publique</small>
         </div>
-        <btnloading :isWaiting="$fetchState.pending" :disabled="isError"/>
+        <BtnLoading :isWaiting="$fetchState.pending" :disabled="isError"/>
       </form>
     </div>
   </div>
@@ -42,7 +43,6 @@
       </div>
     </div>
   </div>
-
 </main>
 </template>
 
@@ -69,10 +69,7 @@ export default {
   // Fonctions locales
   methods: {
     refresh() {
-      this.query = this.WWZ_REQUEST_DETAILS(this.search)
-    },
-    isError () {
-      return (this.retour && this.retour.errors)
+      if (this.search != "") {this.query = this.WWZ_REQUEST_DETAILS(this.search)}
     }
   },
   mounted () {
@@ -83,6 +80,6 @@ export default {
 </script>
 
 <style lang="sass" scoped>
-
+// CSS Lié au composant
 
 </style>
\ No newline at end of file

pages/index.vue

@@ -11,10 +11,6 @@
 </template>
 
 <script>
-// Importer ce mixin pour lancer des requêtes graphQL
-// Voir ./explore.vue pour plus de détails
-// import global from "~/mixins/wotwizard"
-
 export default {
   data() {
     // Variables locales
@@ -43,6 +39,6 @@ export default {
 </script>
 
 <style lang="sass" scoped>
-
+// CSS Lié au composant
 
 </style>
\ No newline at end of file

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