feat: montre la répartition des dépenses par tag

Le résumé calculait déjà `by_tag`, la page Dépenses n'en faisait rien :
on lisait la dépense par catégorie comptable, jamais par poste. Les deux
répartitions se placent côte à côte — même total, deux découpages — et
l'évolution mensuelle prend toute la largeur, un axe de temps serré étant
le premier à devenir illisible.

Les dépenses sans tag y gardent leur part, en gris : c'est le travail de
tagging qui reste à faire, pas un trou dans le graphique.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
2026-08-22 17:29:10 +02:00
parent e81cd5ffa4
commit a5a1db9968
2 changed files with 100 additions and 2 deletions

View File

@@ -21,12 +21,16 @@
<!-- KPI Cards -->
<KpiCards :summary="summary" />
<!-- Charts Row -->
<!-- Les deux repartitions cote a cote : meme total, deux decoupages. -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
<CategoryChart :data="summary.by_category || []" />
<MonthlyChart :data="summary.by_month || []" />
<TagChart :data="summary.by_tag || []" />
</div>
<!-- L'evolution mensuelle prend toute la largeur : un axe de temps
serre est le premier a devenir illisible. -->
<MonthlyChart :data="summary.by_month || []" />
<!-- Top Fournisseurs -->
<TopFournisseursChart :data="summary.by_fournisseur || []" />
@@ -45,6 +49,7 @@ import { ref, onMounted } from 'vue'
import FilterPanel from '../components/analytics/FilterPanel.vue'
import KpiCards from '../components/analytics/KpiCards.vue'
import CategoryChart from '../components/analytics/CategoryChart.vue'
import TagChart from '../components/analytics/TagChart.vue'
import MonthlyChart from '../components/analytics/MonthlyChart.vue'
import TopFournisseursChart from '../components/analytics/TopFournisseursChart.vue'
import DepensesTable from '../components/analytics/DepensesTable.vue'