<script lang="ts">
import { ref } from "vue";
import { invoke } from "@tauri-apps/api/tauri";
import { Bar } from 'vue-chartjs';
import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale } from 'chart.js';

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

export default {
  name: 'BarChart',
  components: { Bar },
  setup() {
    const chartData = ref({
      labels: ['January', 'February', 'March'],
      datasets: [{ data: [40, 20, 12] }]
    });

    const chartOptions = {
      responsive: true,
      scales: {
        y: {
          min: 0,
          max: 100
        }
      }
    };

    const updateData = async () => {
      const my_data = await invoke("random_data");

      chartData.value = {
        labels: ['January', 'February', 'March'],
        datasets: [{ data: my_data.data }]
      };
    };

    return {
      chartData,
      chartOptions,
      updateData
    };
  }
}
</script>

<template>
  <Bar id="my-chart-id" :options="chartOptions" :data="chartData" />
  <button @click="updateData">Click me</button>
</template>

