99 lines
3.5 KiB
Vue
99 lines
3.5 KiB
Vue
<script setup lang="ts">
|
|
import { ref } from 'vue';
|
|
import { Bar } from 'vue-chartjs';
|
|
import { useI18n } from 'vue-i18n';
|
|
import { useQuasar } from 'quasar';
|
|
import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale, TimeScale, type ChartData, type ChartDataset } from 'chart.js';
|
|
import type { PayPeriodEmployeeDetails } from 'src/modules/timesheet-approval/types/timesheet-approval-pay-period-employee-details-interface';
|
|
import type { Expense } from 'src/modules/timesheets/types/expense.interfaces';
|
|
|
|
const { t } = useI18n();
|
|
const $q = useQuasar();
|
|
|
|
ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale, TimeScale);
|
|
ChartJS.defaults.font.family = '"Roboto", sans-serif';
|
|
ChartJS.defaults.maintainAspectRatio = false;
|
|
ChartJS.defaults.color = $q.dark.isActive ? '#F5F5F5' : '#616161';
|
|
|
|
const props = defineProps<{
|
|
rawData: PayPeriodEmployeeDetails | undefined;
|
|
}>();
|
|
|
|
const expenses_dataset = ref<ChartDataset<'bar'>[]>([]);
|
|
const expenses_labels = ref<string[]>([]);
|
|
|
|
const getExpensesData = (): ChartData<'bar'> => {
|
|
if (props.rawData) {
|
|
const all_weeks = [props.rawData.week1, props.rawData.week2];
|
|
const all_days = all_weeks.flatMap( week => Object.values(week.expenses));
|
|
const all_days_dates = all_weeks.flatMap( week => Object.values(week.shifts))
|
|
|
|
const all_costs = all_days.map( day => getTotalAmounts(day.cash));
|
|
const all_mileage = all_days.map( day => getTotalAmounts(day.km));
|
|
|
|
|
|
expenses_dataset.value = [
|
|
{
|
|
label: t('timesheet_approvals.table.expenses'),
|
|
data: all_costs,
|
|
backgroundColor: getComputedStyle(document.body).getPropertyValue('--q-primary').trim(),
|
|
},
|
|
{
|
|
label: t('timesheet_approvals.table.mileage'),
|
|
data: all_mileage,
|
|
backgroundColor: getComputedStyle(document.body).getPropertyValue('--q-info').trim(),
|
|
}
|
|
]
|
|
|
|
expenses_labels.value = all_days_dates.map( day => day.short_date);
|
|
}
|
|
|
|
return {
|
|
datasets: expenses_dataset.value,
|
|
labels: expenses_labels.value
|
|
};
|
|
};
|
|
|
|
const getTotalAmounts = (expenses: Expense[]): number => {
|
|
let total_amount = 0;
|
|
|
|
for (const expense of expenses) {
|
|
total_amount += expense.amount;
|
|
}
|
|
|
|
return total_amount;
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<Bar
|
|
:data="getExpensesData()"
|
|
:options="({
|
|
indexAxis: $q.screen.lt.md? 'y' : 'x',
|
|
plugins: {
|
|
|
|
title: {
|
|
display: true,
|
|
text: t('timesheet_approvals.chart.expenses_title'),
|
|
},
|
|
legend:{
|
|
labels:{
|
|
boxWidth: 15,
|
|
}
|
|
}
|
|
},
|
|
scales: {
|
|
x: {
|
|
stacked: true
|
|
},
|
|
y: {
|
|
suggestedMin: 0,
|
|
suggestedMax: 100,
|
|
stacked: true
|
|
}
|
|
}
|
|
})"
|
|
/>
|
|
</div>
|
|
</template> |