remove chartjs from the project

README.md

@@ -29,10 +29,6 @@ This template is extremly commented for beginners so you can create an apollo qu
 
 If you want to add your page in the menu, edit the `menus` variable in the `./layouts/default.vue` file.
 
-### ChartJS
-
-There is an example to use component graph lazyly in `./pages/chartjs.vue`.
-
 ### GraphQL
 
 All files concerning Apollo Graphql are stored in `./graphql`.

components/Graph.vue

-<template>
-	<div>
-		<canvas :id="id" @click="test($event)"></canvas>
-	</div>
-</template>
-
-<script>
-import Chart from "chart.js/auto"
-
-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)
-		}
-	},
-	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>

nuxt.config.js

@@ -71,6 +71,9 @@ export default {
 
 	// PWA module configuration: https://go.nuxtjs.dev/pwa
 	pwa: {
+		icon: {
+			purpose: "any"
+		},
 		meta: {
 			name: "Wotwizard",
 			author: "Paidge",
@@ -89,7 +92,13 @@ export default {
 			description:
 				"Vérifiez les entrées et les sorties de la toile de confiance de la monnaie libre Ğ1",
 			lang: "fr",
-			background_color: "#343a40"
+			background_color: "#343a40",
+			shortcuts: [
+				{ name: "Favoris", url: "/favoris" },
+				{ name: "Futurs membres", url: "/previsions" },
+				{ name: "Lexique", url: "/lexique" },
+				{ name: "Accueil", url: "/" }
+			]
 		}
 	},
 

package.json

@@ -20,7 +20,6 @@
 		"apollo-link-context": "^1.0.20",
 		"apollo-link-http": "^1.5.17",
 		"bootstrap": "^4.6.1",
-		"chart.js": "^3.6.2",
 		"core-js": "^3.15.1",
 		"graphql-tag": "^2.12.6",
 		"nuxt": "^2.15.8",

pages/chartjs.vue

-<template>
-	<main class="container-fluid">
-		<h2 class="display-2 text-center mb-5">Test ChartJS</h2>
-		<div class="row">
-			<div class="col-md-6 mx-auto">
-				<div class="alert alert-danger">En développement</div>
-			</div>
-		</div>
-		<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>
-			<LazyGraph
-				id="monGraph"
-				:type="chartType"
-				:data="data"
-				:options="options" />
-		</div>
-	</main>
-</template>
-
-<script>
-import { chartTypes } from "~/components/Graph.vue"
-
-export default {
-	data() {
-		return {
-			allTypes: chartTypes,
-			chartType: "line",
-			options: {
-				responsive: true,
-				lineTension: 1
-			},
-			data: {},
-			breadcrumb: [
-				{
-					text: this.$t("accueil"),
-					to: "/"
-				},
-				{
-					text: "ChartJS",
-					active: true
-				}
-			]
-		}
-	},
-	methods: {
-		fillData() {
-			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(50)
-			}
-			return ret
-		},
-		getRandomInt(max) {
-			return Math.floor(Math.random() * (max - 5 + 1)) + 5
-		}
-	},
-	nuxtI18n: {
-		paths: {
-			fr: "/graphiques",
-			en: "/graphics",
-			es: "/graficos"
-		}
-	},
-	mounted() {
-		$nuxt.$emit("changeRoute", this.breadcrumb)
-		// On remplit les données dans le graph
-		this.fillData()
-	}
-}
-</script>
-
-<style lang="sass" scoped>
-// CSS Lié au composant
-.demo
-  max-width: 600px
-  background: var(--background-color-secondary)
-</style>