🔍
donnees_20260325_143833

donnees_20260325_143833

49,00 €

Visualiser la répartition annuelle des dépenses d’habillement pour une famille monoparentale.

UGS : donnees_20260325_143833 Catégorie :

Fiche Descriptive Complète : budget_habillement_famille_monoparentale.html

🔷 INFORMATIONS GÉNÉRALES

Champ Détail

Nom du template budget_habillement_famille_monoparentale.html

Version 1.0.0

Date de création 25/03/2026

Auteur / Designer Gemini (Refoia Jeremy Tech Style)

Type de page Dashboard de Planification Budgétaire / Data Viz

Objectif principal Visualiser la répartition annuelle des dépenses d’habillement pour une famille monoparentale.

🎯 DESCRIPTION FONCTIONNELLE

📌 Que fait ce template ?

Ce template est un outil de visualisation budgétaire interactif. Il permet de simuler et de planifier les dépenses annuelles pour trois catégories d’articles (Bonnets, Chaussures, Jeans) tout en respectant une contrainte de budget mensuel de 280 €. Il utilise une bibliothèque graphique pour afficher un diagramme en barres empilées montrant la répartition des coûts mois par mois.

📌 Public cible (Persona)

👤 Familles monoparentales souhaitant anticiper leurs frais d’habillement.

👤 Conseillers en économie sociale et familiale pour illustrer une gestion de budget.

👤 Utilisateurs finaux cherchant un outil simple de suivi de dépenses prévisionnelles.

⚙️ SPÉCIFICATIONS TECHNIQUES

🌐 Environnement & Compatibilité

Standard HTML : HTML5

Framework CSS : CSS Pur (Custom Styles)

Framework JS : Vanilla JS + Chart.js v4.x

Browsers ciblés : Chrome ✅ Firefox ✅ Safari ✅ Edge ✅

Responsive : ✅ Oui (Conteneur fluide et graphique responsive)

📦 Dépendances / Assets

HTML

📥 ENTRÉES — CONTENU DYNAMIQUE

# Nom de la variable Type Obligatoire Description

1 dataBonnets array ✅ Oui Tableau de 12 entiers représentant le coût mensuel (Multiple de 15€).

2 dataChaussures array ✅ Oui Tableau de 12 entiers représentant le coût mensuel (Multiple de 89€).

3 dataJeans array ✅ Oui Tableau de 12 entiers représentant le coût mensuel (Multiple de 30€).

4 maxBudget int ❌ Non Limite de l’axe Y (fixée à 300 par défaut).

📤 INTERACTIONS & SORTIES

🖱️ Événements Utilisateur

Hover sur les barres du graphique : Affiche un tooltip détaillé avec le prix par catégorie et le Total cumulé du mois grâce à une fonction de rappel (callback footer).

Redimensionnement de la fenêtre : Le graphique s’adapte automatiquement à la largeur du conteneur (responsive: true).

🧱 STRUCTURE DU FICHIER — DOM

budget_habillement_famille_monoparentale.html

📌 : Déclaration UTF-8, Viewport, et import de Chart.js.

📌

🏗️

: Cadre principal (Shadow & White BG).

🏗️

: Titre de la planification.

🏗️

: Section Flexbox contenant 4 .budget-card (Budget total + Prix unitaires).

🏗️ : Zone de rendu du graphique.

📌