<script setup>
  import {Doughnut } from 'vue-chartjs'

  import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, LinearScale, CategoryScale, ArcElement } from 'chart.js'
  import { onMounted, ref } from 'vue';
  ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale, ArcElement)
  import segments from '../data/segments.json';

  const segmentsFine = ['Agricola', 'Cemento', 'Intermoadal'];
  const segmentsMoreUsed = ref([]);
  const chartDataSegments = ref(null);
  const loading = ref(false);
  const segmentsMap = () => {
    loading.value = true;
    segmentsFine.forEach(element => {
      const seg = segments.find((e) => e.name === element);
      segmentsMoreUsed.value.push(seg);
    });

    chartDataSegments.value = {
      labels: segmentsMoreUsed.value.map(e => e.name),
      position: 'bottom',
      datasets: [{ 
        data: [4, 3, 1],
        backgroundColor: segmentsMoreUsed.value.map(e => e.color),
      }],
    }
    loading.value = false
  }

  onMounted(() => {
    segmentsMap()
  })
  
  const chartOptions = {
    responsive: true,
    
  }
</script>

<template>
    <div class="card-fixed card-dashboard">
      <h3>Cargas activas</h3>
      <Doughnut
        v-if="chartDataSegments"
        id="my-chart-segments"
        :options="chartOptions"
        :data="chartDataSegments"
      />
    </div>
</template>

<style scoped>

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

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