Aller au contenu

Feature : quickLookDeltV

Objectif

Panneau « quick look » pour un capteur électronique DeltaV, affiché sur l'écran de détail du capteur. Il expose les valeurs clés du capteur en un coup d'œil :

  • un sélecteur max / dernier (maximum affiche le pic de la période, latest la dernière acquisition),
  • des onglets par mode de capteur — accéléromètre ou PPV, plus l'inclinomètre,
  • des cartes de valeur par axe (PPV toujours en mm/s, sans bascule d'unité), avec l'axe le plus élevé signalé par un badge « Plus élevé »,
  • un en-tête affichant la période (Période du … au …) en mode maximum, et une ligne de relevé (Valeurs relevées le … à …) pour la date d'acquisition.

API publique

import { QuickLookDeltV, QuickLookTab, DATETIME_FORMAT } from 'src/features/quickLookDeltV';
  • QuickLookDeltV — le composant panneau ({ sensorId, mode }).
  • QuickLookTab — enum des onglets (Accelerometer / Ppv / Inclinometer).
  • DATETIME_FORMAT, GET_MIN_AND_MAX_VALUES, GET_QUICK_LOOK_VALUES — constante / queries partagées consommées par l'écran de détail du capteur.

Architecture

quickLookDeltV/
├── index.ts        API publique : { QuickLookDeltV, QuickLookTab, DATETIME_FORMAT, queries GET_* }
├── adapter/        quickLookDeltV.mapper — sections[] backend → view models (snake_case → camelCase),
│                   indexées par QuickLookTab ; selectSnapshot (maximum vs latest) ; enrichit les entrées avec les métriques
├── config/         constantes (SPACING, DATE_FORMAT, DATETIME_FORMAT) + types (QuickLookTab, Axis, QuickLookUnit)
├── hooks/
│   ├── useQuickLookDeltVQuery   query Apollo + label localisé « Période du … au … »
│   └── useRecordedAtLabel        formateur « Valeurs relevées le {date} à {time} »
├── components/     ModeSelector/ModeTab (max/latest), Tabs/Tab (onglets par mode),
│                   Content/ (routeur QuickLookContent, QuickLookData + QuickLookDataCard,
│                   Inclinometer/ InclinometerData + DataCard + sections Max/Latest)
├── queries/        getQuickLookSummary + getMinAndMaxValues + getQuickLookValues (gql)
└── utils/          configuration (metricsByTab, couleurs de points), dataBuilder (inclinomètre + valeur max), conversions

Les modes proviennent de QuickLookValueMode (maximum | latest) ; les onglets sont dérivés de DeltaVMode → QuickLookTab.

Décisions clés

  • Frontière adapter — le payload backend (sections[] en snake_case, limits.maximum, last_values) est mappé en view models camelCase dans adapter/, sans jamais fuiter dans les composants/hooks (voir la skill adapter). Les sections sont indexées par QuickLookTab (la clé backend en majuscules correspond à une valeur d'onglet).
  • Métriques pilotées par la config — metricsByTab associe chaque onglet à ses types de mesure, unités et axes ; le PPV est toujours exprimé en mm/s (toute conversion se fait côté backend).
  • Sélection de mode — selectSnapshot(section, mode) choisit limits.maximum vs last_values ; l'en-tête affiche la période en mode maximum et la date d'acquisition en mode latest.
  • Suit l'architecture par module de feature ; c'est la variante de référence centrée adapter (à comparer avec la variante centrée context/hook changeMode et la variante entièrement en couches unitPreference).

Utilisation

Rendu par l'écran de détail du capteur — src/screens/SensorElecDetail/SensorElecDetail.tsx :

<QuickLookDeltV sensorId={id} mode={deltaVMode} />

Tests

La feature est à 100 % de couverture (statements / branches / functions / lines). Lancez :

yarn jest src/features/quickLookDeltV --coverage

Les tests de composants mockent le thème (components/Navigation/types/theme) et l'i18n (t => key) et isolent les enfants via jest.mock. Voir testing.md.