Skip to content
Snippets Groups Projects
Commit 81a750a1 authored by Pierre-Jean CHANCELLIER's avatar Pierre-Jean CHANCELLIER
Browse files

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

parent 654956d8
No related branches found
No related tags found
No related merge requests found
...@@ -9,6 +9,9 @@ $ npm install ...@@ -9,6 +9,9 @@ $ npm install
# serve with hot reload at localhost:3000 # serve with hot reload at localhost:3000
$ npm run dev $ npm run dev
# Analyze assets
$ npm run analyze
# build for production and launch server # build for production and launch server
$ npm run build $ npm run build
$ npm run start $ npm run start
...@@ -73,8 +76,12 @@ More information about the usage of this directory in [the documentation](https: ...@@ -73,8 +76,12 @@ More information about the usage of this directory in [the documentation](https:
```bash ```bash
$ git clone https://git.duniter.org/paidge/wotwizard-ui.git $ git clone https://git.duniter.org/paidge/wotwizard-ui.git
$ cd wotwizard-ui $ cd wotwizard-ui
$ git checkout -b my-branch
$ npm install $ npm install
$ npm run dev $ npm run dev
$ npm run analyze
$ git commit
$ git push
``` ```
### Ajouter des pages ### Ajouter des pages
......
<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
...@@ -26,7 +26,6 @@ export default { ...@@ -26,7 +26,6 @@ export default {
// Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
plugins: [ plugins: [
{src: '~/plugins/chart.js', mode: 'client'}
], ],
// Auto import components: https://go.nuxtjs.dev/config-components // Auto import components: https://go.nuxtjs.dev/config-components
......
source diff could not be displayed: it is too large. Options to address this: view the blob.
...@@ -6,19 +6,20 @@ ...@@ -6,19 +6,20 @@
"dev": "nuxt", "dev": "nuxt",
"build": "nuxt build", "build": "nuxt build",
"start": "nuxt start", "start": "nuxt start",
"generate": "nuxt generate" "generate": "nuxt generate",
"analyze": "nuxt build --analyze"
}, },
"dependencies": { "dependencies": {
"@nuxtjs/apollo": "^4.0.1-rc.5", "@nuxtjs/apollo": "^4.0.1-rc.5",
"@nuxtjs/pwa": "^3.3.5", "@nuxtjs/pwa": "^3.3.5",
"bootstrap": "^4.6.0", "bootstrap": "^4.6.0",
"chart.js": "^2.9.4", "chart.js": "^3.6.2",
"core-js": "^3.15.1", "core-js": "^3.15.1",
"graphql-tag": "^2.12.6", "graphql-tag": "^2.12.6",
"nuxt": "^2.15.7", "nuxt": "^2.15.8"
"vue-chartjs": "^3.5.1"
}, },
"devDependencies": { "devDependencies": {
"nuxt-purgecss": "^1.0.0",
"sass": "^1.45.0", "sass": "^1.45.0",
"sass-loader": "^10.2.0" "sass-loader": "^10.2.0"
} }
......
<template> <template>
<main class="container-fluid demo"> <main class="container-fluid">
<p class="text-center">Pour activer/désactiver des types de graphiques, il faut éditer le fichier <code>/plugins/chart.js</code></p> <h2 class="display-2 text-center mb-5">Test ChartJS</h2>
<select class="form-control" id="exampleFormControlSelect1" v-model="activeType"> <div class="demo p-5 m-auto">
<option v-for="type in types" :key="type">{{type}}</option> <select class="form-control my-4" v-model="chartType">
</select> <option v-for="type in allTypes" :key="type">{{ type }}</option>
<div v-for="type in types" :key="type"> </select>
<component :is="type+'-chart'" :chart-data="datacollection" :options="chartOptions" v-if="activeType==type" /> <button @click="fillData()" class="btn btn-primary mb-5">Randomize</button>
<LazyChart id="monGraph" :type="chartType" :data="data" :options="options" />
</div> </div>
<button @click="fillData()" class="btn btn-primary">Randomize</button>
</main> </main>
</template> </template>
<script> <script>
// Import to access to chartTypes import {chartTypes} from "@/components/chart.vue"
import chartJS from "~/plugins/chart.js"
export default { export default {
data () { data () {
// Variables locales // Variables locales
return { return {
allTypes: chartTypes,
chartType: "line",
options: {
responsive: true,
lineTension: 1
},
data: {},
breadcrumb: [ breadcrumb: [
{ {
text: 'Accueil', text: 'Accueil',
...@@ -28,47 +34,48 @@ import chartJS from "~/plugins/chart.js" ...@@ -28,47 +34,48 @@ import chartJS from "~/plugins/chart.js"
text: 'ChartJS', text: 'ChartJS',
active: true active: true
} }
], ]
types: chartJS.chartTypes,
activeType : 'Line',
datacollection: {},
chartOptions: {
responsive: true
}
} }
}, },
// Fonctions locales // Fonctions locales
methods: { methods: {
fillData () { fillData () {
this.datacollection = { this.data = {
labels: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], labels: ["Mercury", "Venus", "Earth", "Mars", "Jupiter", "Saturn", "Uranus", "Neptune"],
datasets: [ datasets: [{
{ label: "Number of Moons",
label: 'Data One', data: this.generateArray(8),
backgroundColor: '#f87979', backgroundColor: this.generateColor(),
data: this.generateArray(10) borderColor: this.generateColor(),
}, { borderWidth: 2
label: 'Data Two', },
backgroundColor: '#00f288', {
data: this.generateArray(10) 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) { generateArray (nb_items) {
let ret = [] let ret = []
for (let i=0;i<nb_items;i++) { for (let i=0;i<nb_items;i++) {
ret[i] = this.getRandomInt() ret[i] = this.getRandomInt(50)
} }
return ret return ret
}, },
getRandomInt () { getRandomInt (max) {
return Math.floor(Math.random() * (50 - 5 + 1)) + 5 return Math.floor(Math.random() * (max - 5 + 1)) + 5
} }
}, },
mounted () { mounted () {
// Mise à jour du fil d'ariane au chargement // Mise à jour du fil d'ariane au chargement
$nuxt.$emit('changeRoute',this.breadcrumb) $nuxt.$emit('changeRoute',this.breadcrumb)
// On remplit les données dans le graph
this.fillData() this.fillData()
} }
} }
...@@ -78,5 +85,5 @@ import chartJS from "~/plugins/chart.js" ...@@ -78,5 +85,5 @@ import chartJS from "~/plugins/chart.js"
// CSS Lié au composant // CSS Lié au composant
.demo .demo
max-width: 600px max-width: 600px
margin: 10px auto background: var(--background-color-secondary)
</style> </style>
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
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment