donnees_20260325_141447

49,00 

Visualiser l’allocation des ressources (camions et personnel) sur une chronologie.

UGS : donnees_20260325_141447 Catégorie :

Fiche Descriptive Complète : Template Dashboard Logistique Équestre

🔷 INFORMATIONS GÉNÉRALES

Champ Détail

Nom du template gantt_equestre_dashboard.html

Version 1.0.0

Date de création 25/03/2026

Auteur / Designer Gemini 3 Flash

Type de page Dashboard de Monitoring / Planning

Objectif principal Visualiser l’allocation des ressources (camions et personnel) sur une chronologie.

🎯 DESCRIPTION FONCTIONNELLE

📌 Que fait ce template ?

Ce template transcrit graphiquement les données logistiques d’une écurie ou d’un centre de transport équestre. Il affiche un diagramme de Gantt interactif permettant de voir en un coup d’œil :

L’utilisation des véhicules (Camion A).

L’emploi du temps du personnel (Jean, Marc).

Le chevauchement des tâches (Concours, Entretien, Soins).

📌 Public cible (Persona)

👤 Gestionnaires d’écurie : Pour optimiser les rotations de camions.

👤 Palefreniers : Pour consulter leur planning de la journée.

👤 Coordinateurs logistiques : Pour identifier les conflits d’horaires.

⚙️ SPÉCIFICATIONS TECHNIQUES

🌐 Environnement & Compatibilité

Standard HTML : HTML5

Framework CSS : Tailwind CSS (pour la structure responsive)

Librairie Graphique : Chart.js ou Frappe Gantt (pour simuler le rendu Matplotlib en web)

Responsive : ✅ Oui (Adaptation de la timeline sur mobile via scroll horizontal)

📦 Dépendances / Assets

HTML

📥 ENTRÉES — CONTENU DYNAMIQUE

# Nom de la variable Type Obligatoire Description

1 resource_name str ✅ Oui Nom du camion ou de l’employé

2 task_label str ✅ Oui Libellé de l’activité (ex: « Livraison Foin »)

3 start_time datetime ✅ Oui Heure de début de la tâche

4 end_time datetime ✅ Oui Heure de fin de la tâche

🧱 STRUCTURE DU FICHIER — DOM

index.html

: Titre « Planning des Activités – Logistique Équestre » + Sélecteur de date.

:

: Widgets (Nb de camions actifs, total heures personnel).

: Conteneur pour le rendu du graphique.

: Légende des couleurs et export PDF/PNG.

🎨 CHARTE GRAPHIQUE

CSS

:root {

–color-primary: #0EA5E9; /* Bleu ciel (Sky-500) pour les barres */

–color-background: #F8FAFC; /* Fond gris très clair */

–color-grid: #E2E8F0; /* Pointillés des axes */

–color-text: #0F172A; /* Texte sombre pro */

}

🧪 TESTS & VALIDATION

# Cas de test Action Résultat attendu

1 Chevauchement Insérer deux tâches à la même heure Les barres s’empilent ou se décalent proprement

2 Export Cliquer sur « Télécharger » Génération d’un fichier .png conforme au script Python

3 Format Heure Passer en format 24h L’axe X s’ajuste dynamiquement de 08:00 à 18:00

📝 EXEMPLE D’INTÉGRATION JAVASCRIPT

JavaScript

// Initialisation simplifiée du graphique

const ctx = document.getElementById(‘planningChart’).getContext(‘2d’);

const chart = new Chart(ctx, {

type: ‘bar’,

data: {

labels: [‘Camion A’, ‘Jean’, ‘Marc’],

datasets: [{

label: ‘Activités’,

data: [

{ x: [‘2026-03-18 08:00’, ‘2026-03-18 12:00’], y: ‘Camion A’ },

// … autres données du script

],

backgroundColor: ‘#skyblue’

}]

},

options: { indexAxis: ‘y’ }

});

Avis

Il n’y a pas encore d’avis.

Soyez le premier à laisser votre avis sur “donnees_20260325_141447”

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *