<script setup>
  import { Doughnut } from 'vue-chartjs'
  
  import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, LinearScale, CategoryScale, ArcElement } from 'chart.js'

  ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale, ArcElement)
    const chartData = {
        labels: [ 'Entregadas - 10', 'Descargando - 8', 'En Transito - 8', 'Cargando - 8', 'Publicadas - 1' ],
        position: 'bottom',
        datasets: [{ 
        data: [10, 8, 8, 8, 1],
        backgroundColor: [
            'Blue',
            '#428502',
            '#ffd22b',
            '#F44336',
            '#000000',
        ],
        }],
    }
  
    const chartOptions = {
        responsive: true,
        
    }
</script>

<template>
    <div class="card-fixed card-dashboard">
      <h3>Cargas activas</h3>
      <Doughnut
        id="my-chart-loads"
        :options="chartOptions"
        :data="chartData"
      />
    </div>
</template>

<style scoped>

  .card-dashboard {
    width: 33%;
    display: flex;
    flex-direction: column;
  }

  @media (max-width: 768px) {
    .card-dashboard {
      width: 100%;
    }
  }
</style>