chill-bundles/src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyWidget.vue

<template>
    <div class="container">
        <Bar v-if="loaded_bar" :data="chartData" :options="chartOptions"/>
        <span v-if="loaded_number">{{ number }}</span>
    </div>
</template>

<script lang="ts">
import {
    Chart as ChartJS,
    Title,
    Tooltip,
    Legend,
    BarElement,
    CategoryScale,
    LinearScale
} from 'chart.js'
import {Bar} from 'vue-chartjs'
import {defineComponent} from 'vue'
import {makeFetch} from "../../lib/api/apiMethods";

ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend)

export default defineComponent({
    name: 'MyWidget',
    components: {
        Bar,
    },
    data() {
        return {
            loaded_bar: false,
            loaded_number: false,
            chartData: null,
            chartOptions: null,
            number: "",
        }
    },
    async mounted() {
        this.loaded_bar = false;
        this.loaded_number = false;
        const url = '/fr/dashboard/raw_data';
        try {
            const response: { data: any, options: any, type: any } = await makeFetch("GET", url);
            this.chartData = response.data;
            this.chartOptions = response.options;
            if (response.type == 'bar') {
                this.loaded_bar = true;
            } else {
                this.loaded_number = true
                this.number = response.data.datasets[0].data[0] + " "+ response.data.labels[0];
            }
        } catch (error) {
            console.log(error);
        }
    },
    /*methods: {
        async makeNumberWidget() {
            let body = {
                config: {
                    alias: 'number'
                },
                context: {
                    what: 'notification_unread',
                    user: 19 //Ne rien mettre ou via les refs
                }
            };
            try {
                const response: {
                    data: any,
                    options: any,
                    type: any
                } = await makeFetch('POST', '/{_locale}//{_locale}/dashboard/widget/number', body)
                this.chartData = response.data;
                this.chartOptions = response.options;
                this.loaded_number = true;
                this.number = response.data.datasets[0].data[0] + response.data.labels[0];
            } catch (error) {
                console.log(error)
            }


        },
    }*/
})
</script>
<style lang="scss" scoped>
    span {
        font-size: x-large;
        color: #0a53be;
    }
</style>