tethys.backend/resources/js/Components/Charts/LineChart.vue

<script lang="ts" setup>
import { ref, watch, computed, onMounted } from 'vue';
import { Chart, LineElement, PointElement, LineController, LinearScale, CategoryScale, Tooltip, registerables } from 'chart.js';
import { Ref } from 'vue';
import { ChartDataCustomTypesPerDataset } from 'chart.js';


// interface Dataset {

//     borderColor: string;
//     // borderDash:
//     // (0) []
//     borderDashOffset: number;
//     borderWidth: number;
//     cubicInterpolationMode: string;
//     data: Array<number>;
//     fill: boolean;
//     pointBackgroundColor: string;
//     pointBorderColor: string;
//     pointBorderWidth: number;
//     pointHoverBackgroundColor: string;
//     pointHoverBorderWidth: number;
//     pointHoverRadius: number;
//     pointRadius: number;
//     tension: number;
// }
const props = defineProps({
    data: {
        type: Object,
        required: true,
    },
});

const root: Ref<HTMLCanvasElement | null> = ref<HTMLCanvasElement | null>(null);

let chart;

Chart.register(LineElement, PointElement, LineController, LinearScale, CategoryScale, Tooltip);

onMounted(() => {
    Chart.register(...registerables);

    // https://gitea.geologie.ac.at/kaiarn/geomon.viewer/src/branch/master/src/common/graphjs/geomon-timeseries-chart/geomon-timeseries-chart.component.ts
    chart = new Chart(root.value, {
        type: 'line',
        data: props.data as ChartDataCustomTypesPerDataset<"line", number[], string>,
        // data: {
        //     labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
        //     // labels: [],
        //     datasets: [
        //             {
        //             data: [86, 114, 106, 106, 107, 111, 133, 221, 783, 2478, 2600, 2700],
        //             label: "Africa",
        //             borderColor: "#3e95cd",
        //             fill: false
        //         }, {
        //             data: [282, 350, 411, 502, 635, 809, 947, 1402, 3700, 5267, 444, 555],
        //             label: "Asia",
        //             borderColor: "#8e5ea2",
        //             fill: false
        //         }
        //     ]
        // },


        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                y: {
                    display: false,
                },
                x: {
                    display: true,
                },
            },
            plugins: {
                legend: {
                    display: true,
                },
            },
        },
    });

});

const chartData = computed(() => props.data);

watch(chartData, (data) => {
    if (chart) {
        chart.data = data;
        chart.update();
    }
});
</script>

<template>
    <canvas ref="root" />
</template>