data visualizer app

Application et plugin de visualisation de données

Ceci est un référentiel qui contient le visualizer de données et son plugin utilisé à la fois en interne et construit comme point d'entrée séparé afin qu'il puisse être utilisé dans d'autres applications telles que l'application de tableau de bord

Commencer

Pour exécuter Data-Visualizer-App à partir du répertoire racine Repo, installez les dépendances:

 $ yarn install

Développement

Exécutez yarn start de la racine du repo pour démarrer l'application sur localhost:3000 et le plugin sur localhost:3001 .

L'exécution du plugin sur un port différent permet de le tester dans d'autres applications. Par exemple, pour le tester dans l'application de tableau de bord, exécutez l'application Dashboard dans un port différent et via Devtools remplacer le chemin du plugin avec l'hôte et le port où le plugin s'exécute. Exemples d'étapes:

1. Dans DV: yarn start
2. Dans Dash Toor: yarn start à ce stade, DV fonctionne sur LocalHost: 3000, DV Plugin sur LocalHost: 3001 et Dashboard App sur LocalHost: 3002.
3. Pointez le navigateur vers localhost: 3002.
4. Ajoutez cette entrée à l'application de tableau de bord localStorage via Devtools dans l'onglet Application: dhis2.dashboard.pluginOverrides: { "VISUALIZATION": "http://localhost:3001/plugin.html" }

Le même principe est possible pour tester plusieurs plugins en même temps, il vous suffit de vous assurer que le port configuré dans le remplacement est le bon pour le plugin que vous remplacez.

Les scripts NPM suivants peuvent tous être exécutés à partir du répertoire racine de réapprovisionnement:

Tests unitaires

 $ yarn test

Exécutez des tests unitaires avec un rapport de couverture

 $ yarn coverage

Tests E2E

Le cyprès est utilisé pour les tests de navigateur E2E. Cela s'exécute automatiquement sur CI pour PRS, le résultat peut être vu sur le nuage Cypress.

Pour enregistrer des tests dans Cypress Cloud, vous pouvez utiliser l'une des méthodes suivantes en fonction de vos besoins:

• Message de validation : inclure [e2e record] dans vos messages de validation pour activer l'enregistrement.
• GitHub Étiquettes : appliquez l'étiquette e2e record à votre demande de traction pour déclencher l'enregistrement.

Cette configuration aide à gérer plus efficacement les crédits de cloud Cypress, garantissant que les enregistrements ne sont effectués que lorsqu'ils sont explicitement nécessaires.

Pour exécuter les tests localement, définissez ce qui suit dans un fichier local cypress.env.json , par exemple:

{
    " dhis2BaseUrl " : " https://test.e2e.dhis2.org/dev " ,
    " dhis2Username " : " admin " ,
    " dhis2Password " : " district " ,
}

Exécutez des tests de manière interactive (Cypress UI):

 yarn cypress:live

Exécutez des tests dans la console sans ui de cyprès:

 yarn cypress:run

Libellé et formatage

Corrigez automatiquement toutes les violations de style code réparateur (plus jolies et Eslint)

 $ yarn format

Vérifiez tous les fichiers pour les violations de style code (Gettier et Eslint)

 $ yarn lint

Créer l'application et le plugin

 $ yarn build

Test manuel avec Netlify

Ce repo est configuré pour déployer des demandes de traction sur NetLify. Il est simple de partager une implémentation en cours d'exécution avec d'autres (par exemple, testeur, chef de produit, UX, collègues développeurs) avant de fusionner.

Les demandes de traction (IE # 209) sont disponibles sur:

https://pr-209--dhis2-data-visualizer.netlify.app

Netlify ajoutera également une vérification d'état à chaque PR qui se lie directement au déploiement PR.