Git Product home page Git Product logo

data-visualizer-app's Introduction

Data visualizer app and plugin

Test Coverage Code Climate

This is a repo that contains the data-visualizer-app and its plugin used both internally and built as a separate entrypoint so it can be used in other apps such as the dashboard app

Getting started

To run data-visualizer-app from the repo root directory, install the dependencies:

$ yarn install

Development

Run yarn start from the repo's root to start the app on localhost:3000 and the plugin on localhost:3001.

Running the plugin on a different port allows for testing it in other apps. For example, for testing it in dashboard app, run the dashboard app in a different port and via devtools override the plugin path with the host and port where the plugin is running. Example steps:

  1. in DV: yarn start
  2. in dashboard: yarn start At this point DV is running on localhost:3000, DV plugin on localhost:3001 and dashboard app on localhost:3002.
  3. Point the browser to localhost:3002.
  4. Add this entry to the dashboard app localStorage via devtools in the Application tab: dhis2.dashboard.pluginOverrides: { "VISUALIZATION": "http://localhost:3001/plugin.html" }

With the same principle is possible to test several plugins at the same time, you just need to make sure the port configured in the override is the right one for the plugin you are overriding.

The following npm scripts can all be run from the repo root directory:

Unit tests

$ yarn test

Run unit tests with coverage report

$ yarn coverage

e2e tests

Cypress is used for e2e browser tests. This automatically runs on CI for PRs, the result can be seen on the Cypress dashboard. To run the tests locally, define the following in a local cypress.env.json file, e.g.:

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

Run tests interactively (Cypress UI):

yarn cypress:live

Run tests in the console without Cypress UI:

yarn cypress:run

Linting and Formatting

Automatically fix all fixable code-style violations (prettier and eslint)

$ yarn format

Check all files for code-style violations (prettier and eslint)

$ yarn lint

Build app and plugin

$ yarn build

Manual testing with Netlify

This repo is configured to deploy pull requests to netlify. This makes it simple to share a running implementation with others (e.g., tester, product manager, ux, fellow developers) prior to merging to master.

Pull requests (I.E. #209) are available at:

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

Netlify will also add a status check to each PR which links directly to the PR deployment.

data-visualizer-app's People

Contributors

dhis2-bot avatar janhenrikoverland avatar martinkrulltott avatar edoardo avatar dependabot-preview[bot] avatar jenniferarnesen avatar dependabot[bot] avatar amcgee avatar neeilya avatar varl avatar joakimia avatar hendrikthependric avatar adeldhis2 avatar cooper-joe avatar philip-larsen-donnelly avatar kaivandivier avatar birkbjo avatar jason-p-pickering avatar adeelshahid avatar ismay avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.