Composants

Catalogue interactif des composants Keros. Cliquez sur les éléments pour tester les comportements.

Actions Formulaires Cartes & KPI Tableau Feedback Navigation Data viz États spéciaux Intégration

Actions

Button

.k-btn

Action principale, secondaire, fantôme (ghost), danger. Trois tailles : sm / md / lg.

Usage : 1 seul bouton primaire par groupe d'actions. Danger réservé aux actions destructives (supprimer). Les boutons ghost servent aux actions secondaires des tableaux ou cellules.

Formulaires

Input

.k-input · .k-field

Identifiant compteur Format PREFIX-NNNNN

Recherche

Email Adresse email invalide.

Usage : toujours associer un label visible ou un aria-label. Les erreurs sont rouges + texte explicite + bordure colorée.

Select & DateRangePicker

.k-select · .k-daterange

14/05/2026 — 20/05/2026

Usage : presets de période en haut, range personnalisé en option. Cohérent sur tous les écrans.

SearchBar & FilterBar

.k-filterbar

Période · 7 derniers jours Secteur · Tous Sévérité · Critique, Élevée Statut · Toutes

Le champ de recherche filtre le tableau ci-dessous en temps réel ; les chips se basculent à la sélection.

Cartes & KPI

MetricCard & KPIGrid

.k-metric

Anomalies ouvertes

▲ +6 vs 7j

Sévérité critique

▲ +2

Délai qualification

3,2 j

▼ -0,4 j

Faux positifs (30j)

8,4 %

▼ -1,1 pt

Usage : 3-4 KPI maximum côte-à-côte. Toujours indiquer la période de comparaison. Variations en couleur ET en flèche (pas couleur seule).

AnomalyCard

.k-anomaly

Dépassement seuil — EAU-12347

Secteur Nord · 20/05 09:14 · Keros AI v0.2 (score 0.93)

Critique En cours

Sous-consommation — ENE-08812

Secteur Est · 20/05 02:14 · SDS v1.7 (score 0.78)

Moyenne Nouvelle

Tableau (interactif)

DataTable — tri & filtre

.k-table[data-table-sortable]

Cliquez sur les en-têtes pour trier. Tapez dans le champ de recherche ci-dessus pour filtrer en temps réel.

ID ⇅	Compteur ⇅	Secteur ⇅	Type ⇅	Sévérité ⇅	Statut ⇅	Détectée le ⇅

Feedback

Badges — statut & sévérité

.k-badge · .k-sev

Nouvelle En cours Confirmée Requalifiée Ignorée Résolue

Faible Moyenne Élevée Critique

Toast (notification)

kerosToast(msg, kind)

Notifications éphémères en bas à droite. Cliquez pour déclencher :

Modal

.k-modal-backdrop · data-open-modal

Modal centrée 480px par défaut, dismissible (Échap, clic backdrop, bouton fermer).

Drawer (détail d'anomalie)

.k-drawer · data-open-drawer

Panneau latéral droit pour les détails (anomalie, compteur, événement). Largeur 480px.

AlertBanner

.k-banner

Navigation

Tabs

[data-tabs]

Aperçu du compteur EAU-12347 — secteur Nord, dernière relève 09:00.

Mesures sur les 30 derniers jours, agrégation horaire.

2 anomalies ouvertes sur ce compteur.

3 commentaires métier.

Accordion

.k-accordion

Détails techniques du compteur▼

Modèle EAU-12347, série 2023, dernière maintenance 14/03/2026.

Historique des anomalies▼

5 anomalies sur les 90 derniers jours.

Configuration de la détection▼

Modèle Keros AI v0.2 actif depuis le 18/05/2026.

Breadcrumb

.k-breadcrumb

Data visualization

ChartCard — courbe + overlay anomalie

KerosCharts.renderLineChart

Usage : axe Y commence à 0 sauf cas justifié. La zone d'anomalie est un overlay rouge léger + marqueurs ponctuels.

ChartCard — histogramme

KerosCharts.renderBarChart

ChartCard — donut

KerosCharts.renderDonut

Critique — 9

Élevée — 14

Moyenne — 12

Faible — 7

États spéciaux

EmptyState / LoadingState / ErrorState

.k-state · .k-skeleton

Basculez entre les trois états pour vérifier le comportement.

∅

Aucune anomalie sur ce périmètre

Modifiez les filtres ou élargissez la période.

⟳

Chargement des anomalies…

Impossible de charger les anomalies

Le service de détection est momentanément indisponible.

Timeline d'événements

.k-timeline

20/05 09:14

Anomalie détectée — score 0.93

Keros AI v0.2 · seuil dynamique

20/05 10:02

Commentaire ajouté par J. Dupont

"À vérifier sur site — possible fuite"

20/05 11:30

Statut passé à "En cours"

CommentPanel

.k-comment-list

Intégration

MicroFrontendFrame

.k-mfframe

Composant enveloppant pour embarquer un micro-frontend Keros dans AMCO (ou inversement). Reçoit JWT, tenant_id, langue, thème via attributs ou postMessage.

keros-anomalies · v1.0.0 tenant=TEEO-0042 · lang=fr · theme=light

Aperçu de l'iFrame embarquée. Le composant gère :

injection du JWT et du tenant via postMessage typé ;
hauteur dynamique en réponse aux changements de contenu ;
thème (light/dark) propagé depuis le parent ;
états de chargement et erreur du conteneur.