C
Docs

Personnalisation de votre disposition de tableau de bord

Guide complet pour personnaliser votre tableau de bord avec sélection de widgets, disposition, vues sauvegardées et configuration avancée

Updated 2026-03-3044 min read

Personnalisation de votre disposition de tableau de bord

Votre tableau de bord est un espace de travail personnel conçu pour faire ressortir les métriques et les aperçus les plus pertinents pour votre rôle et votre flux de travail. Ce guide vous guide à travers chaque aspect de la personnalisation du tableau de bord, de l'ajout de votre premier widget à la création de configurations de tableau de bord multi-vues pour différents objectifs.

La personnalisation ne concerne pas seulement l'esthétique — il s'agit de construire un tableau de bord qui vous rend plus rapide, plus intelligent et plus efficace en renseignement d'approvisionnement. Un tableau de bord bien conçu répond à vos questions d'un coup d'œil sans navigation, filtres ou fouille.

Pourquoi personnaliser votre tableau de bord ?

La disposition de tableau de bord par défaut est conçue pour les professionnels de l'approvisionnement en général, montrant un mélange équilibré de métriques de performance, de renseignement de marché et de découverte d'opportunités. Cependant, vos besoins spécifiques varient en fonction de :

Votre rôle :

  • Cadres : KPI de haut niveau, tendances, aperçus stratégiques
  • Analystes : Données détaillées, renseignement concurrentiel, recherche de marché
  • Gestionnaires de proposition : Pipeline, échéances, activité d'équipe, charge de travail
  • Développement commercial : Découverte d'opportunités, ciblage d'agences, suivi des relations

Votre focus de marché :

  • Firmes spécialisées : Widgets filtrés sur des catégories spécifiques (par exemple, Services TI seulement)
  • Firmes diversifiées : Couverture large du marché avec ventilations par catégorie
  • Focus géographique : Widgets filtrés sur des régions ou agences spécifiques

Votre flux de travail :

  • Opérations quotidiennes : Métriques en temps réel (Statistiques de soumission, Pipeline, Activité d'équipe)
  • Planification stratégique : Analyse historique (Tendances, Taux de succès, Analyse des concurrents)
  • Rapports : Widgets adaptés à l'exportation (tableaux, graphiques avec données claires)

Un tableau de bord personnalisé transforme les données brutes en renseignement exploitable aligné avec votre contexte spécifique.

Conseil

Commencez simplement : Commencez avec la disposition par défaut pendant 1-2 semaines. Suivez quels widgets vous consultez le plus fréquemment et lesquels vous ignorez. Ces données d'utilisation guident vos décisions de personnalisation.


Bases de l'édition de tableau de bord

Entrer en mode d'édition

Pour personnaliser votre tableau de bord, vous devez d'abord entrer en mode d'édition :

Méthode 1 : Bouton Cliquez sur le bouton Modifier le tableau de bord dans le coin supérieur droit de la barre d'outils du tableau de bord.

Méthode 2 : Clavier Appuyez sur pour basculer en mode d'édition.

Indicateurs visuels en mode d'édition :

  • Les en-têtes de widgets affichent des poignées de glissement (six points)
  • Les bordures de widgets deviennent pointillées
  • Le bouton X apparaît sur chaque widget (supprimer)
  • Les poignées de redimensionnement apparaissent sur les coins des widgets
  • La barre d'outils affiche les boutons Sauvegarder et Annuler

Note

Le mode d'édition est local à votre session de navigateur. Les autres utilisateurs ne peuvent pas voir vos modifications tant que vous ne les sauvegardez pas. Si vous naviguez ailleurs sans sauvegarder, les modifications sont perdues.

Sortir du mode d'édition

Sauvegarder les modifications :

  • Cliquez sur le bouton Sauvegarder le tableau de bord (coche verte)
  • Clavier :

Annuler les modifications :

  • Cliquez sur le bouton Annuler (X rouge)
  • Clavier :
  • Naviguez ailleurs sans sauvegarder (vous serez invité à confirmer)

Sauvegarde automatique (paramètre optionnel) : Activez la sauvegarde automatique pour sauvegarder les modifications toutes les 30 secondes en mode d'édition : Barre d'outils du tableau de bord → Paramètres (icône d'engrenage) → Activer la sauvegarde automatique


Ajouter des widgets

Ouvrir le catalogue de widgets

Cliquez sur le bouton + Ajouter un widget dans la barre d'outils du tableau de bord (ou appuyez sur ).

La fenêtre modale du catalogue de widgets s'ouvre, montrant tous les widgets disponibles organisés par catégorie :

  • Aperçu du marché (6 widgets)
  • Performance des soumissions (6 widgets)
  • Renseignement concurrentiel (6 widgets)
  • Découverte d'opportunités (6 widgets)
  • Aperçus et IA (6 widgets)
  • Actions rapides (6 widgets)

Rechercher des widgets : Utilisez la boîte de recherche en haut pour filtrer par nom ou description. Par exemple, recherchez « concurrent » pour trouver tous les widgets de renseignement concurrentiel.

Filtrer par catégorie : Cliquez sur les onglets de catégorie pour afficher uniquement les widgets dans cette catégorie.

Prévisualiser un widget : Survolez n'importe quelle carte de widget pour voir :

  • Description du widget
  • Options de configuration disponibles
  • Taux de rafraîchissement des données
  • Exemple de capture d'écran

Ajouter un widget à votre tableau de bord

Ajout rapide (utilisateurs expérimentés du clavier) : Appuyez sur pour ouvrir la palette de commandes, tapez le nom du widget (par exemple, « taux de succès »), et appuyez sur Entrée pour ajouter instantanément sans ouvrir le catalogue complet.

Stratégies de placement de widgets

Quadrant supérieur gauche : Zone la plus visible (première chose que vous voyez). Placez votre métrique la plus importante ici.

  • Cadres : Taux de succès global ou valeur du pipeline
  • Analystes : Aperçu du marché ou analyse des concurrents
  • Gestionnaires de proposition : Statistiques de soumission ou chronologie de soumission

Colonne de gauche : Métriques de priorité secondaire. Vous scannez de gauche à droite, donc la colonne de gauche attire l'attention après le haut gauche.

Colonne de droite : Informations contextuelles ou de support. Bon pour les widgets d'actions rapides (Documents récents, Notifications).

Sous la ligne de flottaison (nécessite un défilement) : Analyses détaillées ou widgets rarement consultés. Activez le chargement différé pour ceux-ci afin d'améliorer le temps de chargement initial.

Exemple de disposition pour cadres :

[Taux de succès]  [Valeur du pipeline]  [Aperçu du marché]
[Tendances]       [Statistiques de soumission]  [Échéances à venir]
[Analyse des concurrents]         [Recommandations intelligentes]

Rangée supérieure = KPI critiques, rangée du milieu = métriques de support, rangée du bas = renseignement stratégique et opportunités.


Déplacer et redimensionner les widgets

Déplacer les widgets

Glisser-déposer (souris) :

Navigation au clavier (accessibilité) :

Comportement d'accrochage à la grille :

Les widgets s'accrochent aux cellules de grille (système de grille à 12 colonnes). Vous ne pouvez pas positionner des widgets entre les lignes de grille — ils s'alignent toujours sur la grille pour des dispositions cohérentes.

Gestion des collisions :

Lorsque vous glissez un widget sur un autre widget :

  • Option 1 (Échanger) : Si les widgets ont la même taille, ils échangent les positions
  • Option 2 (Pousser) : Si les tailles sont différentes, les autres widgets sont poussés de côté pour faire de la place
  • Option 3 (Réorganiser) : Si pas de place, toute la disposition se réorganise pour adapter tous les widgets

Les indicateurs visuels montrent comment la disposition changera avant que vous ne relâchiez (contours fantômes).

Redimensionner les widgets

Glisser les poignées de redimensionnement (souris) :

Tailles minimales et maximales :

Chaque widget a des tailles minimales et maximales :

  • Minimum : Assure que le contenu reste lisible (typiquement cellules de grille 2×2)
  • Maximum : Empêche les widgets de dominer le tableau de bord (typiquement cellules de grille 6×4)

Vous ne pouvez pas redimensionner au-delà de ces limites — la poignée de redimensionnement s'arrête aux limites min/max.

Rapport hauteur/largeur :

Certains widgets maintiennent le rapport hauteur/largeur (par exemple, les diagrammes circulaires restent circulaires). Glisser une poignée de coin met à l'échelle proportionnellement la largeur et la hauteur.

D'autres widgets (par exemple, tableaux) redimensionnent indépendamment en largeur et hauteur.

Comportement réactif :

La taille du widget est relative à la grille, pas en pixels absolus. Lorsque vous redimensionnez votre fenêtre de navigateur, les widgets se mettent à l'échelle proportionnellement pour maintenir la disposition.

Sur les appareils mobiles (<768px), tous les widgets deviennent automatiquement pleine largeur quelle que soit la configuration de taille sur ordinateur.

Conseil

Tailles optimales de widgets : La plupart des widgets s'affichent mieux à cellules de grille 3×3 ou 4×3 (taille moyenne). Les widgets plus petits (2×2) fonctionnent pour les KPI simples (nombres uniques). Les widgets plus grands (6×4) sont utiles pour les graphiques détaillés ou tableaux.


Supprimer des widgets

Supprimer un widget

Méthode souris :

Méthode clavier :

Confirmation :

Par défaut, les widgets sont supprimés immédiatement sans confirmation (annulation disponible — voir ci-dessous).

Activez les invites de confirmation si vous préférez : Paramètres du tableau de bord → Édition → Confirmer avant de supprimer les widgets

Annuler la suppression :

Si vous supprimez accidentellement un widget :

  • Appuyez sur pour annuler (fonctionne pour les 10 dernières actions)
  • Ou cliquez sur + Ajouter un widget pour le rajouter depuis le catalogue

Les widgets supprimés ne perdent pas leur configuration. Si vous supprimez « Analyse du taux de succès » avec des filtres spécifiques, puis le rajoutez, les filtres sont restaurés depuis votre profil.

Supprimer tous les widgets

Pour effacer tout votre tableau de bord :

Barre d'outils du tableau de bord → Paramètres (icône d'engrenage) → Avancé → Supprimer tous les widgets

Avertissement : Cela supprime tous les widgets mais préserve vos vues de tableau de bord sauvegardées (accessibles depuis le menu déroulant des vues). Vous pouvez restaurer la disposition par défaut ou construire à partir de zéro.


Configuration de widget

Chaque widget a des options de configuration accessibles via l'icône de paramètres (engrenage) dans l'en-tête du widget.

Ouvrir les paramètres du widget

Cliquez sur l'icône d'engrenage dans le coin supérieur droit de n'importe quel widget (apparaît au survol en mode visualisation, toujours visible en mode édition).

Le panneau de paramètres s'ouvre comme une fenêtre modale ou un panneau latéral (selon la complexité du widget).

Options de configuration communes

Bien que chaque widget ait des options uniques (voir Catalogue de widgets), la plupart partagent ces paramètres communs :

Plage temporelle

Contrôle la période pour l'agrégation de données :

PlageCas d'utilisation
7 joursOpérations quotidiennes, activité très récente
30 joursRévisions mensuelles, tendances à court terme
90 joursAnalyse trimestrielle (valeur par défaut la plus commune)
1 anTendances annuelles, comparaisons d'une année sur l'autre
2 ansPlanification stratégique à long terme
Tout le tempsVue historique complète

Filtres

Appliquez des filtres pour vous concentrer sur des données spécifiques :

  • Catégories : Afficher uniquement des catégories d'approvisionnement spécifiques (par exemple, Services TI, Construction)
  • Agences : Filtrer sur des agences gouvernementales spécifiques
  • Tranche de valeur : Valeur minimale/maximale d'opportunité
  • Membres d'équipe : Filtrer sur des gestionnaires de proposition ou analystes spécifiques
  • Statut : Actif, complété ou tous

Les filtres persistent à travers les sessions (sauvegardés dans votre profil) jusqu'à ce que vous les effaciez.

Avertissement

Filtres cachés : Si vous définissez des filtres et oubliez plus tard, vous pourriez vous demander pourquoi les données semblent incomplètes. Recherchez une icône de filtre avec un badge (nombre de filtres actifs) dans l'en-tête du widget. Cliquez pour réviser ou effacer les filtres.

Taux de rafraîchissement

Contrôlez à quelle fréquence le widget se met à jour :

  • Temps réel : Mises à jour WebSocket (30 secondes pour la plupart des widgets)
  • Automatique : Intervalles d'interrogation (5 minutes, 15 minutes, 1 heure)
  • Manuel : Rafraîchir uniquement lorsque vous cliquez sur l'icône de rafraîchissement

Rafraîchissement plus rapide = plus d'appels API = tableau de bord légèrement plus lent. Pour les widgets stratégiques que vous consultez rarement, définissez sur rafraîchissement manuel pour améliorer les performances.

Options d'affichage

Personnalisez la façon dont les données sont présentées :

  • Type de graphique : Circulaire vs barres vs tableau (pour les widgets supportant plusieurs visualisations)
  • Métrique : Nombre vs valeur vs les deux
  • Ordre de tri : Croissant, décroissant, alphabétique
  • Top N : Afficher le top 5, 10, 20 ou tous les éléments
  • Palette de couleurs : Par défaut, contraste élevé, adapté aux daltoniens

Paramètres d'exportation

Configurez le format d'exportation par défaut :

  • Format : CSV, Excel, PDF, PNG
  • Inclure : Données seulement, visualisation seulement, ou les deux
  • Filtres : Appliquer les filtres actuels ou exporter toutes les données

Alertes (disponibles sur certains widgets)

Configurez des alertes pour les dépassements de seuil :

  • Analyse du taux de succès : Alerter si le taux de succès tombe en dessous de 25 %
  • Aperçu du pipeline : Alerter si la valeur du pipeline tombe en dessous de 5M$
  • Alertes de risque : Notifications par courriel pour les nouveaux risques critiques

Les alertes apparaissent comme notifications toast dans l'application et optionnellement par courriel.

Configuration spécifique au widget

Widget Tendances du marché :

  • Granularité : Points de données quotidiens, hebdomadaires ou mensuels
  • Comparaison : Superposer les données de l'année précédente ou de la période précédente
  • Lissage : Appliquer une ligne de tendance à moyenne mobile (7 jours, 30 jours)

Widget Analyse des concurrents :

  • Métrique de classement : Victoires, soumissions, part de marché ou valeur totale gagnée
  • Ensemble de concurrents : Top 5, top 10 ou sélection personnalisée
  • Inclure partenariat : Montrer quand les concurrents font équipe ensemble vs compétitionner

Widget Analyse de tarification :

  • Filtre de valeurs aberrantes : Exclure les soumissions >100 % au-dessus ou en dessous du prix gagnant (réduit le bruit)
  • Inclure victoires : Afficher toutes les soumissions ou uniquement les pertes (se concentrer sur les opportunités d'amélioration)
  • Intervalle de confiance : Afficher la plage de prix ou l'estimation unique

Référez-vous au Catalogue de widgets pour les options de configuration complètes pour chaque widget.

Sauvegarder la configuration du widget

Les paramètres du widget se sauvegardent automatiquement lorsque vous fermez le panneau de paramètres. Les modifications s'appliquent immédiatement (le widget se rafraîchit avec la nouvelle configuration).

Réinitialiser aux valeurs par défaut :

Paramètres du widget → Avancé → Réinitialiser à la configuration par défaut

Cela efface toutes les personnalisations (plage temporelle, filtres, options d'affichage) et restaure les valeurs par défaut d'usine.


Créer des vues de tableau de bord sauvegardées

Les vues de tableau de bord vous permettent de créer plusieurs configurations de tableau de bord pour différents objectifs, puis de basculer entre elles instantanément.

Cas d'utilisation pour plusieurs vues

Par rôle ou tâche :

  • Vue exécutive : KPI de haut niveau pour les révisions de direction (6-8 widgets)
  • Vue d'approfondissement : Analyses détaillées pour la recherche et l'analyse (15+ widgets)
  • Vue rapports : Widgets adaptés à l'exportation pour les rapports mensuels

Par temps ou contexte :

  • Vue réunion quotidienne : Métriques en temps réel pour la révision matinale du pipeline
  • Vue stratégie hebdomadaire : Tendances et renseignement concurrentiel pour les réunions de planification
  • Vue révision trimestrielle : Performance historique et widgets de prévision

Par spécialisation :

  • Vue Services TI : Tous les widgets filtrés sur la catégorie Services TI
  • Vue MDN : Tous les widgets filtrés sur l'agence ministère de la Défense
  • Vue Côte Ouest : Filtre géographique pour les opportunités de la Côte Ouest

Créer une nouvelle vue de tableau de bord

Limites de vues :

Vous pouvez créer jusqu'à 10 vues sauvegardées par utilisateur. Cela empêche la prolifération de vues redondantes et encourage l'organisation réfléchie.

Si vous atteignez la limite, supprimez les vues inutilisées : Menu déroulant Vue → Gérer les vues → Supprimer.

Basculer entre les vues

Menu déroulant :

Barre d'outils du tableau de bord → Menu déroulant Vue → Sélectionner le nom de vue

Le tableau de bord se recharge immédiatement avec la disposition et la configuration de widget de la vue sélectionnée. Le basculement est instantané (les widgets se chargent depuis le cache si récemment consultés).

Raccourci clavier :

→ Basculer vers Vue 1 → Basculer vers Vue 2 ... → Basculer vers Vue 9

Les vues sont numérotées dans l'ordre où elles apparaissent dans le menu déroulant. Assignez vos vues les plus utilisées aux positions 1-3 pour un accès le plus rapide.

Vue par défaut :

Définissez quelle vue se charge lorsque vous ouvrez le tableau de bord :

Menu déroulant Vue → Gérer les vues → Définir [Nom de vue] comme par défaut

Votre vue par défaut se charge automatiquement lorsque vous vous connectez ou naviguez vers le tableau de bord depuis ailleurs dans Cothon.

Modifier les vues sauvegardées

Mettre à jour une vue existante :

Renommer une vue :

Menu déroulant Vue → Gérer les vues → Renommer [Nom de vue]

Dupliquer une vue :

Pour créer une variation d'une vue existante :

Menu déroulant Vue → Gérer les vues → Dupliquer [Nom de vue]

Cela crée une copie (par exemple, « Vue exécutive (Copie) ») que vous pouvez modifier indépendamment.

Supprimer une vue :

Menu déroulant Vue → Gérer les vues → Supprimer [Nom de vue]

Confirmez la suppression. Cette action est permanente (ne peut pas être annulée). La vue est retirée du menu déroulant et sa configuration est supprimée.

Vous ne pouvez pas supprimer la « Vue de base » par défaut (disposition par défaut d'usine). Vous pouvez la réinitialiser aux paramètres d'usine mais pas la supprimer entièrement.

Conseil

Convention de nommage : Utilisez des noms descriptifs et cohérents pour les vues. Bon : « KPI exécutifs », « Renseignement concurrentiel », « Opérations quotidiennes ». Mauvais : « Vue 1 », « Nouvelle vue », « Copie de tableau de bord 3 ». Des noms clairs facilitent le changement rapide de contexte.


Système de grille du tableau de bord

Comprendre le système de grille vous aide à créer des dispositions bien organisées et visuellement équilibrées.

Grille à 12 colonnes

Le tableau de bord utilise un système de grille à 12 colonnes (similaire à Bootstrap) :

  • 12 colonnes à travers la largeur du conteneur du tableau de bord
  • Rangées infinies (défilement vertical)
  • Gouttière : Espacement de 16px entre les cellules de grille

Dimensionnement de widget est spécifié en colonnes de grille :

  • Petit widget : 2-3 colonnes (par exemple, KPI unique, petit graphique)
  • Widget moyen : 4-6 colonnes (par exemple, graphique détaillé, tableau court)
  • Grand widget : 8-12 colonnes (par exemple, tableau pleine largeur, graphique multi-séries complexe)

Exemple de disposition :

12 colonnes de largeur totale
├─ [Widget A: 4 cols] [Widget B: 4 cols] [Widget C: 4 cols]  ← Rangée 1 (4+4+4=12)
├─ [Widget D: 6 cols] [Widget E: 6 cols]                      ← Rangée 2 (6+6=12)
├─ [Widget F: 12 cols]                                        ← Rangée 3 (pleine largeur)
└─ [Widget G: 3 cols] [Widget H: 3 cols] [Widget I: 6 cols]  ← Rangée 4 (3+3+6=12)

Points de rupture réactifs :

Largeur d'écranColonnes affichéesComportement des widgets
1920px+ (Bureau)12 colonnesGrille complète, tous les widgets visibles
1280-1919px (Portable)12 colonnesWidgets légèrement plus petits mais maintiennent le nombre de colonnes
768-1279px (Tablette)8 colonnesLes widgets se redimensionnent pour s'adapter à moins de colonnes ; certains passent à de nouvelles rangées
< 768px (Mobile)4 colonnesTous les widgets deviennent 4 colonnes (pleine largeur) ; pile verticale

Algorithme de disposition automatique :

Lorsque vous ajoutez ou déplacez des widgets, la grille utilise un algorithme de disposition automatique pour maintenir des dispositions propres :

  1. Remplir de gauche à droite : Les widgets placés dans la position la plus à gauche disponible
  2. De haut en bas : Nouvelles rangées créées quand pas d'espace dans la rangée actuelle
  3. Minimiser la hauteur : L'algorithme essaie de minimiser la hauteur totale du tableau de bord (moins de défilements)
  4. Éviter les orphelins : Les widgets petits uniques sur une rangée sont découragés ; l'algorithme essaie de les apparier

Vous pouvez surcharger la disposition automatique en glissant manuellement les widgets vers des positions spécifiques.

Alignement et espacement de grille

Alignement :

Les widgets s'alignent automatiquement sur la grille. Vous ne pouvez pas positionner un widget « entre » les colonnes de grille — il s'accroche à la limite de colonne la plus proche.

Espacement vertical :

Les rangées ont un espacement vertical de 16px (comme les gouttières de colonnes). Cela crée une séparation visuelle sans espace blanc excessif.

Mode compact :

Réduisez l'espacement pour une densité d'informations accrue :

Paramètres du tableau de bord → Apparence → Activer le mode compact

Le mode compact réduit les gouttières de 16px à 8px et l'espacement de rangée de 16px à 12px. Cela adapte environ 20 % de widgets en plus à l'écran mais semble plus serré.

Recommandé pour :

  • Grands moniteurs externes (27"+)
  • Utilisateurs qui priorisent la densité d'informations plutôt que l'espace respiratoire visuel
  • Tableaux de bord avec de nombreux petits widgets

Non recommandé pour :

  • Écrans de portable (<15")
  • Utilisateurs qui trouvent les dispositions denses écrasantes
  • Tableaux de bord avec de nombreux grands widgets de graphiques (ils ont besoin d'espace pour être lisibles)

Techniques de disposition avancées

Regrouper les widgets associés

Créez des groupes visuels de widgets associés pour un scan plus facile :

Technique 1 : Proximité

Placez les widgets associés adjacents (côte à côte ou empilés verticalement). Par exemple :

[Taux de succès]    [Statistiques de soumission]    ← Groupe Performance des soumissions
[Pipeline]          [Chronologie de soumission]

[Concurrent]  [Indice HHI]         ← Groupe Renseignement concurrentiel
[Titulaire]   [Victoires/Pertes]

Les utilisateurs reconnaissent intuitivement les regroupements spatiaux sans étiquettes explicites.

Technique 2 : En-têtes de section (disponible avec le paramètre En-têtes de tableau de bord)

Activez les en-têtes de section pour créer des groupes explicites :

Paramètres du tableau de bord → Apparence → Activer les en-têtes de section

Puis insérez des widgets d'en-tête de section :

[En-tête de section : « Performance des soumissions »]
[Taux de succès]    [Statistiques de soumission]    [Pipeline]

[En-tête de section : « Renseignement concurrentiel »]
[Concurrent]  [Indice HHI]         [Titulaire]

Les en-têtes de section sont des widgets sans données qui affichent un titre et une description optionnelle. Ils aident à organiser les tableaux de bord avec 12+ widgets.

Technique 3 : Codage par couleur

Appliquez des couleurs d'arrière-plan personnalisées aux widgets du même groupe :

Paramètres du widget → Apparence → Couleur d'arrière-plan → Choisir la couleur

Par exemple :

  • Widgets Performance des soumissions : Arrière-plan bleu clair
  • Widgets Renseignement concurrentiel : Arrière-plan orange clair
  • Widgets Opportunités : Arrière-plan vert clair

La différenciation subtile des couleurs (teintes pastel) crée un regroupement visuel sans être distrayant.

Conseil

Principes de Gestalt : Utilisez les principes de Gestalt de proximité (éléments proches ensemble = associés) et similarité (éléments qui se ressemblent = associés) pour créer des regroupements visuels intuitifs sans encombrer le tableau de bord avec des étiquettes explicites.

Dispositions hiérarchiques

Organisez les widgets par importance (primaire, secondaire, tertiaire) :

Primaire (En haut à gauche, grand) :

1-3 widgets représentant les métriques les plus critiques. Ceux-ci devraient être :

  • Grands (6+ colonnes)
  • En haut du tableau de bord (au-dessus de la ligne de flottaison)
  • Mis à jour en temps réel ou fréquemment (rafraîchissement de 5 minutes)

Exemple : Valeur du pipeline (KPI primaire pour les cadres)

Secondaire (Colonne de gauche, moyen) :

4-6 widgets fournissant un contexte de support pour les métriques primaires. Ceux-ci devraient être :

  • Taille moyenne (4-6 colonnes)
  • Situés dans les colonnes de gauche ou du centre (visibilité élevée)
  • Rafraîchis régulièrement (rafraîchissement de 15 minutes)

Exemple : Taux de succès, Statistiques de soumission, Aperçu du marché

Tertiaire (Colonne de droite ou sous la ligne de flottaison, petit-moyen) :

Widgets restants fournissant une analyse détaillée ou des informations rarement consultées :

  • Taille petite-moyenne (2-4 colonnes)
  • Situés dans la colonne de droite ou sous la ligne de défilement
  • Rafraîchis à la demande ou toutes les heures (moins sensible au temps)

Exemple : Documents récents, Notifications, Prédictions de tendances

Exemple visuel :

[Primaire : Valeur du pipeline - 12 cols, pleine largeur, haut]

[Secondaire : Taux de succès - 4 cols]  [Secondaire : Stats de soumission - 4 cols]  [Tertiaire : Notifications - 4 cols]
[Secondaire : Aperçu du marché - 4 cols]  [Secondaire : Tendances - 8 cols]

[Tertiaire : Analyse des concurrents - 6 cols]  [Tertiaire : Docs récents - 6 cols]

Cela crée une hiérarchie visuelle claire : L'œil est attiré vers le haut (Valeur du pipeline), puis scanne de gauche à droite à travers les métriques secondaires, puis explore l'information tertiaire si nécessaire.

Considérations de conception réactive

Concevez votre tableau de bord pour fonctionner à travers les tailles d'appareils :

Approche bureau d'abord :

Concevez pour votre appareil principal (probablement bureau), puis vérifiez qu'il s'adapte bien aux petits écrans.

Tester le comportement réactif :

Utilisez les outils de développement du navigateur pour prévisualiser comment votre tableau de bord apparaît à différentes tailles d'écran :

  1. Ouvrez DevTools (F12 ou Cmd+Option+I)
  2. Cliquez sur l'icône de la barre d'outils d'appareil (icône téléphone/tablette)
  3. Sélectionnez différents appareils (iPhone, iPad, etc.) pour voir comment la disposition réagit

Conseils d'optimisation mobile :

  • Limiter le nombre de widgets : 6-8 widgets maximum sur mobile (la pile verticale devient longue)
  • Simplifier les graphiques : Utilisez l'option de graphique « Adapté au mobile » dans les paramètres du widget (visuels plus simples)
  • Texte plus grand : Activez « Mise à l'échelle du texte mobile » pour augmenter les tailles de police sur les petits écrans
  • Contrôles tactiles : Assurez-vous que les boutons et contrôles sont assez grands pour être touchés (iOS exige 44×44px minimum)

Créez une vue « Mobile » dédiée optimisée pour les écrans de téléphone plutôt que d'essayer de faire fonctionner la disposition bureau partout.

Divulgation progressive :

Sur mobile, utilisez des widgets repliables pour économiser l'espace d'écran :

Paramètres du widget → Mobile → Activer Replier sur mobile

Le widget affiche uniquement le titre et la métrique primaire sur mobile. Touchez pour développer le widget complet. Cela vous permet d'adapter plus de widgets à l'écran tout en gardant les détails accessibles.


Partager les dispositions de tableau de bord

Partagez votre disposition de tableau de bord avec les membres de l'équipe pour standardiser les vues à travers votre organisation.

Exporter une disposition de tableau de bord

La disposition exportée inclut :

  • Sélection de widgets (quels widgets sont présents)
  • Positions et tailles des widgets
  • Configuration des widgets (plages temporelles, filtres, options d'affichage)
  • Métadonnées de vue (nom, description, date de création)

La disposition exportée N'inclut PAS :

  • Données réelles (disposition seulement, pas de données en cache)
  • Paramètres spécifiques à l'utilisateur (préférences de notification, etc.)
  • Personnalisations spécifiques à l'organisation (champs personnalisés, etc.)

Importer une disposition de tableau de bord

La vue importée apparaît dans votre menu déroulant Vue. Vous pouvez la renommer, modifier ou supprimer comme n'importe quelle vue sauvegardée.

Compatibilité :

Les dispositions importées sont compatibles à travers les versions de Cothon tant que les widgets existent dans les deux versions. Si l'exportation inclut un widget non disponible dans votre version (par exemple, nouveau widget d'une future version), ce widget est sauté avec un avertissement.

Modèles d'équipe

Les administrateurs d'organisation peuvent créer des modèles de tableau de bord disponibles pour tous les membres de l'équipe :

Flux de travail administrateur :

  1. L'administrateur crée une disposition de tableau de bord optimale pour un rôle spécifique (par exemple, « Modèle gestionnaire de proposition »)
  2. L'administrateur téléverse le modèle vers les paramètres d'organisation
  3. Le modèle apparaît dans le menu déroulant Vue de tous les utilisateurs comme « Modèle : [Nom] »

Flux de travail utilisateur :

  1. L'utilisateur sélectionne « Modèle : Gestionnaire de proposition » depuis le menu déroulant Vue
  2. Le modèle se charge comme une nouvelle vue (n'écrase pas les vues existantes)
  3. L'utilisateur peut l'utiliser tel quel ou le personnaliser davantage

Les modèles sont en lecture seule (les utilisateurs ne peuvent pas modifier le modèle lui-même) mais les utilisateurs peuvent dupliquer et personnaliser leur propre copie.

Modèles communs :

Les organisations créent typiquement des modèles pour :

  • Tableau de bord exécutif : KPI de haut niveau pour la direction
  • Tableau de bord analyste : Données détaillées et renseignement concurrentiel
  • Tableau de bord gestionnaire de proposition : Suivi du pipeline et des échéances
  • Tableau de bord développement commercial : Découverte d'opportunités et ciblage d'agences

Succès

Bonne pratique : Quand un membre de l'équipe crée une disposition de tableau de bord exceptionnellement utile, demandez-lui de l'exporter et de la partager avec l'équipe. Les dispositions créées par les pairs font souvent ressortir des combinaisons de widgets créatives que les modèles standards manquent.


Réinitialiser à la disposition par défaut

Si votre tableau de bord devient encombré ou vous voulez un nouveau départ :

Réinitialiser la vue actuelle

Barre d'outils du tableau de bord → Menu déroulant Vue → Réinitialiser la vue actuelle aux valeurs par défaut

Cela réinitialise la vue active à la disposition par défaut d'usine (le tableau de bord que vous voyez à la première connexion). Vos autres vues sauvegardées ne sont pas affectées.

Invite de confirmation :

« Réinitialiser 'Vue exécutive' à la disposition par défaut ? Cela supprimera tous les widgets et restaurera les valeurs par défaut d'usine. Cette action ne peut pas être annulée. »

Cliquez sur Confirmer pour procéder.

Réinitialiser toutes les vues

Pour réinitialiser toute votre configuration de tableau de bord :

Paramètres du tableau de bord → Avancé → Réinitialiser toutes les vues de tableau de bord

Cela supprime toutes les vues sauvegardées et réinitialise la vue de base aux valeurs par défaut d'usine. Utilisez ceci si vous voulez recommencer complètement à zéro.

Avertissement : Cette action est destructive et ne peut pas être annulée. Vous perdrez toutes les vues de tableau de bord sauvegardées. Envisagez d'exporter vos dispositions actuelles avant de réinitialiser si vous pourriez vouloir les restaurer plus tard.

Disposition par défaut d'usine

La disposition par défaut d'usine inclut :

Rangée 1 :

  • Statistiques de soumission (4 cols)
  • Analyse du taux de succès (4 cols)
  • Aperçu du marché (4 cols)

Rangée 2 :

  • Aperçu du pipeline (6 cols)
  • Tendances du marché (6 cols)

Rangée 3 :

  • Recommandations intelligentes (6 cols)
  • Expirant bientôt (6 cols)

Rangée 4 :

  • Analyse des concurrents (12 cols, pleine largeur)

Cette disposition équilibrée couvre le suivi de performance (Statistiques de soumission, Taux de succès, Pipeline), le renseignement de marché (Aperçu du marché, Tendances), la découverte d'opportunités (Recommandations intelligentes, Expirant bientôt), et l'analyse concurrentielle (Analyse des concurrents).

Elle est conçue pour les professionnels de l'approvisionnement en général sans optimisation spécifique au rôle. La plupart des utilisateurs personnalisent cette disposition après 1-2 semaines d'utilisation.


Optimisation des performances

Les grands tableaux de bord (15+ widgets) peuvent ralentir, surtout sur les appareils plus anciens ou les réseaux lents. Suivez ces stratégies d'optimisation :

Chargement différé

Activez le chargement différé pour reporter le chargement de données pour les widgets sous la ligne de flottaison :

Paramètres du tableau de bord → Performance → Activer le chargement différé

Comment ça fonctionne :

  1. Le tableau de bord charge initialement uniquement les widgets visibles au-dessus de la ligne de flottaison (pas de défilement)
  2. Pendant que vous défilez vers le bas, les widgets chargent les données juste avant qu'ils n'entrent dans la vue
  3. Perception utilisateur : Le tableau de bord se charge beaucoup plus rapidement (2 secondes vs 5+ secondes)

Compromis :

Brève icône de chargement lors du défilement vers de nouveaux widgets (délai de 1-2 secondes). Acceptable pour la plupart des utilisateurs en échange d'un chargement initial beaucoup plus rapide.

Idéal pour :

  • Tableaux de bord avec 12+ widgets
  • Connexions réseau lentes
  • Appareils mobiles (bande passante limitée)

Non recommandé pour :

  • Tableaux de bord avec <8 widgets (pas de bénéfice, ajoute de la complexité)
  • Utilisateurs qui défilent fréquemment à travers tout le tableau de bord (délais de chargement répétés)

Stratégie de mise en cache

Ajustez la durée du cache en fonction de la fréquence de changement des données :

Widgets temps réel (Statistiques de soumission, Pipeline, Activité d'équipe) :

  • Cache : 30 secondes (mises à jour fréquentes essentielles)

Widgets opérations quotidiennes (Taux de succès, Aperçu du marché, Expirant bientôt) :

  • Cache : 5 minutes (équilibre entre fraîcheur et performance)

Widgets stratégiques (Analyse des concurrents, Tendances du marché, Indice HHI) :

  • Cache : 1 heure (les données changent lentement)

Définissez la durée du cache par widget :

Paramètres du widget → Mise en cache → Durée du cache → Sélectionner la durée

Mise en cache agressive :

Pour une performance maximale, activez la mise en cache agressive :

Paramètres du tableau de bord → Performance → Mise en cache agressive

Cela augmente toutes les durées de cache par 4× (par exemple, cache de 5 minutes devient 20 minutes). Utilisez quand la performance est critique et la fraîcheur des données est moins importante.

Optimisation du nombre de widgets

Moins c'est plus rapide :

Chaque widget = appel API séparé + coût de rendu. Référence :

  • 6 widgets : ~1 seconde de temps de chargement
  • 12 widgets : ~2-3 secondes de temps de chargement
  • 18 widgets : ~4-5 secondes de temps de chargement
  • 24+ widgets : >5 secondes de temps de chargement

Auditer les widgets inutilisés :

Chaque mois, révisez votre utilisation du tableau de bord :

Paramètres du tableau de bord → Analytique → Rapport d'utilisation des widgets

Cela montre :

  • Widgets sur lesquels vous n'avez jamais cliqué (supprimez ceux-ci)
  • Widgets que vous consultez rarement (candidats à la suppression)
  • Widgets que vous consultez quotidiennement (gardez ceux-ci)

Supprimez les widgets avec lesquels vous n'avez pas interagi en 30 jours — ils sont de l'encombrement sans valeur.

Créez des vues focalisées au lieu d'un méga-tableau de bord :

Au lieu d'un tableau de bord de 20 widgets essayant de tout montrer, créez plusieurs vues de 8-10 widgets :

  • Vue opérations quotidiennes : 8 widgets pour les vérifications quotidiennes
  • Vue stratégie hebdomadaire : 10 widgets pour la planification stratégique
  • Vue rapports mensuels : 10 widgets optimisés pour l'exportation et les rapports

Basculez entre les vues selon les besoins. Chaque vue est plus rapide à charger qu'un tableau de bord massif.

Complexité des graphiques

Les graphiques complexes (graphiques linéaires multi-séries, nuages de points avec 1000+ points, tableaux détaillés) se rendent lentement.

Stratégies de simplification :

  1. Limiter les points de données : Afficher « Top 10 » au lieu de « Tous » dans les classements
  2. Réduire les séries : Afficher « Nombre seulement » au lieu de « Nombre + Valeur » sur les tendances
  3. Activer l'agrégation de données : Regrouper par semaine au lieu de jour pour réduire les points
  4. Utiliser des vues résumées : Afficher le tableau au clic (fenêtre modale) au lieu d'incorporer un grand tableau dans le widget

Paramètres spécifiques au widget :

  • Tendances du marché : Granularité → Mensuelle (vs Quotidienne)
  • Analyse de tarification : Filtre de valeurs aberrantes → ±100 % (supprime les points de données extrêmes)
  • Analyse des concurrents : Top N → 10 (vs 50)

Sélection du type de graphique :

Certains types de graphiques se rendent plus rapidement que d'autres :

Type de graphiquePerformanceCas d'utilisation
Graphique à barresRapideComparaisons simples, <20 catégories
Graphique linéaireRapideTendances au fil du temps, <50 points de données
Diagramme circulaireRapideProportions, <8 tranches
Nuage de pointsMoyenCorrélations, <200 points
TableauLentDonnées détaillées, <100 lignes
Grand tableauTrès lentDonnées détaillées, 100+ lignes

Quand possible, choisissez des types de graphiques plus rapides. Réservez les tableaux pour les fenêtres modales d'approfondissement (cliquez sur le widget pour ouvrir le tableau détaillé) plutôt que de les incorporer dans le tableau de bord.


Référence des raccourcis clavier

Les utilisateurs expérimentés peuvent naviguer et personnaliser le tableau de bord entièrement via le clavier :

  • - Déplacer le focus vers le widget suivant
  • - Déplacer le focus vers le widget précédent
  • - Développer le widget focalisé en plein écran
  • - Fermer le widget plein écran ou quitter le mode d'édition

Édition

  • - Basculer le mode d'édition
  • - Sauvegarder les modifications du tableau de bord
  • - Annuler la dernière action d'édition
  • - Supprimer le widget focalisé
  • - Entrer en mode de déplacement pour le widget focalisé (utiliser les touches fléchées pour déplacer)
  • - Entrer en mode de redimensionnement pour le widget focalisé (utiliser les touches fléchées pour redimensionner)

Actions de widget

  • - Rafraîchir tous les widgets
  • - Rafraîchir uniquement le widget focalisé
  • - Exporter le widget focalisé
  • - Ouvrir la configuration pour le widget focalisé

Vues de tableau de bord

  • - Basculer vers la vue 1-9
  • - Créer une nouvelle vue
  • - Exporter la vue actuelle

Catalogue de widgets

  • - Ouvrir le catalogue de widgets
  • - Ouvrir la palette de commandes (rechercher widgets et actions)

Imprimer cette référence :

Paramètres du tableau de bord → Aide → Imprimer les raccourcis clavier

Génère un PDF imprimable de tous les raccourcis.


Dépannage

Le tableau de bord ne se sauvegarde pas

Symptôme : Vous cliquez sur Sauvegarder mais les modifications ne persistent pas après la déconnexion.

Causes possibles :

  1. Témoins de navigateur désactivés : Cothon nécessite des témoins pour l'authentification et la sauvegarde des préférences.

    • Solution : Activez les témoins dans les paramètres du navigateur.
  2. Mode Incognito/privé : La navigation privée ne persiste pas les données.

    • Solution : Utilisez le mode de navigation normal.
  3. Erreur réseau : La requête de sauvegarde n'a pas atteint le serveur.

    • Solution : Vérifiez la connexion Internet ; essayez de sauvegarder à nouveau.
  4. Quota de stockage dépassé : Votre navigateur a atteint la limite de stockage.

    • Solution : Effacez le cache/stockage du navigateur ; supprimez les anciennes vues sauvegardées.

Vérification :

Après la sauvegarde, ouvrez DevTools du navigateur → Application → Stockage local → cothon.com → Recherchez la clé dashboardConfig:userId. Si présente, la sauvegarde a réussi. Si manquante, enquêtez sur les causes ci-dessus.

Les widgets ne se chargent pas

Symptôme : Le widget affiche « Chargement... » indéfiniment ou « Échec du chargement des données ».

Causes possibles :

  1. Erreur API : La requête backend a échoué.

    • Solution : Vérifiez le message d'erreur spécifique au widget (survolez l'icône d'erreur). Essayez de rafraîchir le widget.
  2. Délai réseau : Connexion lente ou grand ensemble de données.

    • Solution : Augmentez le délai dans les paramètres du widget ou réduisez la portée des données (plage temporelle plus petite, moins de filtres).
  3. Permissions insuffisantes : Vous n'avez pas accès aux données que le widget demande.

    • Solution : Contactez l'administrateur d'organisation pour ajuster les permissions.
  4. Aucune donnée disponible : Le widget est configuré pour des données qui n'existent pas (par exemple, Analyse du taux de succès avec 0 soumissions).

    • Solution : Le widget affichera le message « Aucune donnée ». Ceci est attendu — continuez à utiliser la plateforme pour accumuler des données.

Débogage :

Ouvrez DevTools → Onglet Réseau → Rafraîchissez le widget → Recherchez les requêtes échouées (rouge, codes de statut 4xx/5xx). Vérifiez la réponse pour les détails de l'erreur.

La disposition se brise après l'ajout d'un widget

Symptôme : Les widgets se chevauchent, apparaissent hors des limites du tableau de bord, ou la disposition semble cassée.

Causes possibles :

  1. Bug de rendu du navigateur : Problème rare avec la disposition en grille dans les navigateurs plus anciens.

    • Solution : Rafraîchissez la page. Si persiste, essayez un navigateur différent (Chrome, Firefox, Safari).
  2. Extension de navigateur conflictuelle : Extension modifiant le CSS de la page.

    • Solution : Désactivez les extensions une par une pour identifier le coupable. Signalez au support Cothon.
  3. État de disposition corrompu : Problème de mise en cache rare.

    • Solution : Paramètres du tableau de bord → Avancé → Effacer le cache de disposition → Rafraîchir la page.

Option nucléaire :

Réinitialisez le tableau de bord à la disposition par défaut (voir section « Réinitialiser à la disposition par défaut »). Cela résout toujours la corruption de disposition.

Le widget affiche des données périmées

Symptôme : Les données du widget ne se sont pas mises à jour depuis des heures malgré le rafraîchissement.

Causes possibles :

  1. Cache non invalidé : Le widget sert un cache périmé.

    • Solution : Cliquez sur l'icône de rafraîchissement sur le widget (flèche circulaire). Si persiste, effacez le cache du navigateur.
  2. Rafraîchissement automatique désactivé : Le widget est défini sur rafraîchissement manuel uniquement.

    • Solution : Paramètres du widget → Rafraîchissement → Définir sur Automatique (5 minutes ou 15 minutes).
  3. Les données backend ne se sont pas mises à jour : Les données source n'ont vraiment pas changé.

    • Solution : Vérifiez l'horodatage « Dernière mise à jour » dans le pied de page du widget. Si récent, les données sont à jour même si inchangées.

Rafraîchissement forcé :

Maintenez Shift tout en cliquant sur l'icône de rafraîchissement pour contourner le cache et forcer un nouvel appel API.


FAQ


Prochaines étapes

Maintenant que vous maîtrisez la personnalisation du tableau de bord, explorez des catégories de widgets spécifiques pour optimiser le contenu de votre tableau de bord :

Ou plongez plus profondément dans les fonctionnalités de la plateforme :

Was this page helpful?

Personnalisation de votre disposition de tableau de bord | Cothon Docs | Cothon