budget-go/frontend/js/components/dashboard/DiffCreditDebitChart.vue

41 lines
764 B
Vue

<template>
<div class="stats text-center">
<h5 class="mb-2">Différences des crédits et des débits</h5>
<div>
<Bar
class="chart"
:data="compute(data, dateFrom, dateTo)"
:options="options()"
:style="chartStyle(380)"
/>
</div>
</div>
</template>
<script setup>
import { Bar } from 'vue-chartjs'
import { compute } from '../../chart/diffCreditDebit'
import { chartStyle } from '../../lib/chartStyle'
defineProps({
data: {
type: Array,
required: true,
},
dateFrom: {
type: [String, null],
required: true,
},
dateTo: {
type: [String, null],
required: true,
},
})
const options = () => {
return {
responsive: false,
maintainAspectRatio: true,
}
}
</script>