pleno-vue/src/views/dashboards/superUserDashboard/InvoicingBillingPeriod/displays/layout/SmallCustomerActivityChart.vue

<script setup>
import {ref, watch} from 'vue';


const props = defineProps({
  transactions: {
    type: Array,
    required: true
  },
  dates: {
    type: Object,
    required: true,
    default: () => ({
      dateFrom: new Date(new Date().setHours(0, 0, 0, 0)), // Start of the day (Today at 00:00:00)
      dateTo: new Date(new Date().setHours(23, 59, 59, 999)), // End of the day (Today at 23:59:59)
    })
  },
});
import {
  Chart as ChartJS,
  Title,
  Tooltip,
  Legend,
  BarElement,
  CategoryScale,
  LinearScale,
  Colors,
  PointElement,
  LineElement
} from 'chart.js'
import {  Line } from 'vue-chartjs';
ChartJS.register(Title, Tooltip, Legend, CategoryScale, LinearScale, BarElement, PointElement, LineElement, Colors);

const parseTransactions = () => {
  const labels = [];
  const data = [];
  props.transactions.forEach(transaction => {
    const formattedDate = transaction.date.split(' ')[0]; // Format date to YYYY-MM-DD
    if (!labels.includes(formattedDate)) {
      labels.push(formattedDate);
      data.push(0); // Initialize with 0 for the new date
    }
    const index = labels.indexOf(formattedDate);
    data[index] += transaction.amount; // Assuming transaction has an 'amount' field
  });
  // Sort the labels and data arrays based on the labels
  const sortedIndices = labels.map((label, index) => index).sort((a, b) => new Date(labels[a]) - new Date(labels[b]));
  labels.sort((a, b) => new Date(a) - new Date(b));
  data.sort((a, b) => new Date(labels[sortedIndices[data.indexOf(a)]]) - new Date(labels[sortedIndices[data.indexOf(b)]]));
  // Update the parsedList with the sorted labels and data
  parsedList.value.labels = labels;
  parsedList.value.datasets[0].data = data;
}

/** Define the data */
const options = {
  responsive: true,
  maintainAspectRatio: false,
  scales: {
    y: {
      beginAtZero: true
    }
  }
};
const parsedList = ref({
  labels: [],
  datasets: [
    {
      label: 'Omsætning',
      backgroundColor: '#f87979',
      data: []
    }
  ]
});

// Function to parse purchases and update the chart data
watch(() => props.transactions, (newTransactions) => {
  if (newTransactions && newTransactions.length > 0) {
    parseTransactions();
  }
}, { immediate: true });
// Initial call to parse transactions
parseTransactions();
</script>

<template>
  <div class="w-full h-96">
    <Line
        :data="parsedList"
        :options="options"
    />
  </div>
</template>

<style scoped>

</style>