diff --git a/README.md b/README.md index cca8eb709d283e9cfcad13c6aece68a42fe4b943..94a7691793fa08fa76319dca7327f35751dafc00 100644 --- a/README.md +++ b/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`. diff --git a/components/Graph.vue b/components/Graph.vue deleted file mode 100644 index fac93ad92333446027cbf5b32b8452477936167a..0000000000000000000000000000000000000000 --- a/components/Graph.vue +++ /dev/null @@ -1,85 +0,0 @@ -<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> diff --git a/nuxt.config.js b/nuxt.config.js index 776dbc13202c2945db7dd3502d8cf2faadf7799e..357bad6c6c3f32fe363372d300cc4f53e6e08a77 100644 --- a/nuxt.config.js +++ b/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: "/" } + ] } }, diff --git a/package.json b/package.json index 67082a78f20856dfae60878a9c56d3ca08e5b011..b5bb04e2569f9e7f5a3ffa7f2fe5063f84497ca8 100644 --- a/package.json +++ b/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", diff --git a/pages/chartjs.vue b/pages/chartjs.vue deleted file mode 100644 index 8101966c9ad0620bc08995393744ac6240845627..0000000000000000000000000000000000000000 --- a/pages/chartjs.vue +++ /dev/null @@ -1,121 +0,0 @@ -<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>