Skip to content

DataXplorer turns data into impact within just a few minutes DataXplorer is an AI-powered purpose-driven data exploration solution built with the goal of making the visual representation of data easy and powerful for everyone.

License

Notifications You must be signed in to change notification settings

zimmerman-team/Dx.client

 
 

Repository files navigation

Dataxplorer client (app)


License: MIT

What is the Dataxplorer?

It makes use of Data API Middleware in order to retrieve all data needed for the visualisations/tables/filters and detail pages.

About the project

Installation

In order to be able to successfully run or build the app you need to create an environment file .env in the project root directory and fill it with the following:

REACT_APP_API=<data middleware api url>
REACT_APP_MAPBOX_TOKEN=<mapbox account token>
REACT_APP_GOOGLE_ANALYTICS_ID=<google analytics app id>
REACT_APP_CMS_API=<cockpit cms api url>
REACT_APP_CMS_TOKEN=<cockpit cms api token>
REACT_APP_USE_DEFAULT_DATASETS=<boolean true or false>

REACT_APP_API: is the url where the data middleware API runs on. If running Data API Middleware locally then you can use http://localhost:4200.

REACT_APP_MAPBOX_TOKEN: to get a mapbox token you will need to register on their website.The token will be used to identify you and start serving up map tiles. The service is free until a certain level of traffic is exceeded.

REACT_APP_GOOGLE_ANALYTICS_ID(optional): Google Analytics ID in order to be able to make use of Google Analytics services.

REACT_APP_CMS_API: is the url where the Cockpit CMS API runs on.

REACT_APP_CMS_TOKEN: is the API token retrieved from the Cockpit CMS interface.

REACT_APP_USE_DEFAULT_DATASETS: is the setting to determine whether or not we use the Global Fund default datasets, or external datasets.

PORT: can be used to specify on which port to run the client.


In the project directory, you can run:

yarn install

Installs all necessary dependencies.

yarn start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

yarn build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.

yarn prepare

Sets up the husky executable script for git hooks

Learn More

You can learn more in the Create React App documentation.

To learn React, check out the React documentation.

How should I contribute?

  • As we use semantic-release for automated git releases your commits must comply with the following commit types:
feat: A new feature
fix: A bug fix
docs: Documentation only changes
style: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)
refactor: A code change that neither fixes a bug nor adds a feature
perf: A code change that improves performance
test: Adding missing or correcting existing tests
chore: Changes to the build process or auxiliary tools and libraries such as documentation generation
  • Always try to reference issues in commit messages or pull requests ("related to #614", "closes #619" and etc.).
  • Avoid huge code commits where the difference can not even be rendered by browser based web apps (Github for example). Smaller commits make it much easier to understand why and how the changes were made, why (if) it results in certain bugs and etc.
  • If there's a reason to commit code that is commented out (there usually should be none), always leave a "FIXME" or "TODO" comment so it's clear for other developers why this was done.
  • Automatic code quality / testing checks (continuous integration tools) are implemented to check all these things automatically when pushing / merging new branches. Quality is the key!

About

DataXplorer turns data into impact within just a few minutes DataXplorer is an AI-powered purpose-driven data exploration solution built with the goal of making the visual representation of data easy and powerful for everyone.

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • TypeScript 95.6%
  • CSS 3.7%
  • Other 0.7%