Chill-project/chill-bundles
6
0
Fork 0
mirror of https://gitlab.com/Chill-Projet/chill-bundles.git synced 2025-06-20 09:14:23 +00:00
Code Issues Actions Projects Releases Wiki Activity

fix vue component

Browse Source
This commit is contained in:
Lucas Silva 2023-05-05 10:34:32 +02:00
parent 191b416c6c
commit 51a46ab5d7
2 changed files with 13 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyCustoms.vue
View File

@ -40,7 +40,7 @@
</div> </div>
<div class="mbloc col col-sm-6 col-lg-4"> <div class="mbloc col col-sm-6 col-lg-4">
<div class="custom2"> <div class="custom2">
<MyWidget :chart-data="chartData" /> <MyWidget />
</div> </div>
</div> </div>
<div class="mbloc col col-sm-6 col-lg-4"> <div class="mbloc col col-sm-6 col-lg-4">
@ -80,7 +80,6 @@ export default {
counterClass: { counterClass: {
counter: true //hack to pass class 'counter' in i18n-t counter: true //hack to pass class 'counter' in i18n-t
}, },
chartData: null,
} }
}, },
computed: { computed: {
@ -92,18 +91,6 @@ export default {
mounted() { mounted() {
const elem = document.querySelector('#dashboards'); const elem = document.querySelector('#dashboards');
const masonry = new Masonry(elem, {}); const masonry = new Masonry(elem, {});
this.chartData = {
labels: ['Label 1', 'Label 2', 'Label 3'],
datasets: [
{
label: 'Dataset 1',
data: [10, 20, 30],
backgroundColor: ['rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)'],
borderColor: ['rgba(255, 99, 132, 1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)'],
borderWidth: 1,
},
],
};
}, },
}; };
</script> </script>

38
src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyWidget.vue
View File

@ -1,10 +1,8 @@
<template> <template>
<div> <Bar :data="data" :options="options" />
<canvas ref="chartCanvas"></canvas>
</div>
</template> </template>
<script> <script lang="ts">
import { import {
Chart as ChartJS, Chart as ChartJS,
Title, Title,
@ -15,29 +13,17 @@ import {
LinearScale LinearScale
} from 'chart.js' } from 'chart.js'
import { Bar } from 'vue-chartjs' import { Bar } from 'vue-chartjs'
ChartJS.register(Title, Tooltip,Legend, BarElement, CategoryScale, LinearScale) import * as chartConfig from './js/chartConfig'
ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend)
export default { export default {
props: ['chartData'], name: 'MyWidget',
mounted(){ components: {
this.renderChart(); Bar
}, },
methods: { data() {
renderChart() { return chartConfig
const ctx = this.$refs.chartCanvas.getContext('2d'); }
new ChartJS(ctx, { }
type: 'bar',
data: this.chartData,
options: {
responsive: true,
maintainAspectRatio: true
},
});
},
},
};
</script> </script>
<style scoped>
</style>