Future Signals and Trends (https://signals.data.undp.org/). One would need UNDP id to access the site.
- Link for the application
- Deployment
- API used
- Global CSS Files and Repo
- Build With
- Installation
- Local Deployment
- Available Scripts
- Tooling Setup
https://signals.data.undp.org/
The Production site deployed using Azure Static Web App and work flow can be found here
API Documentation: https://signals-and-trends-api.azurewebsites.net/docs Different user roles, authentication, and all endpoint are documented here
Git Repo: https://github.com/UNDP-Data/stylesheets-for-viz
Link for stylesheets
- https://undp-data.github.io/stylesheets-for-viz/style/mainStyleSheet.css
- https://undp-data.github.io/stylesheets-for-viz/style/StyleForGraphingInterface.css
- https://undp-data.github.io/stylesheets-for-viz/style/StyleForGraph.css
- React: Used as MVC framework.
- styled-components: Utilizes tagged template literals and the power of CSS, allows to write actual CSS code to style the components in JS/TS.
- Various D3 Libraries: Used for visualizations, adding interaction and reading the csv data file.
- AntD: For UI elements like dropdown, buttons, checkbox, and slider.
- dom-to-image: Used to allow users to download images of various visualization views they create.
- lodash: Used for manipulating and iterating arrays and objects.
- axios: Used for API calls.
- @azure/msal-browser and @azure/msal-react: Used for Azure SSO.
- @react-pdf/renderer: Used for generating PDFs.
This project uses npm
. For installation you will need to install node
and npm
, if you don't already have it. node
and npm
can be installed from here.
To install the project, simply clone the the repo and them run npm install
in the project folder. You can use terminal on Mac and Command Prompt on Windows.
This project is bootstrapped with Vite
and was created using npm create vite@latest
command.
Run the terminal or command prompt and then run the following
git clone https://github.com/UNDP-Data/dv-signals_and_trends-fe.git
cd dv-signals_and_trends-fe
npm install
To start the project locally, you can run npm run dev
in the project folder in terminal or command prompt.
This is run the app in development mode. Open http://localhost:5173/ to view it in the browser.
The page will reload if you make edits. You will also see any lint errors in the console.
To deploy locally successfully you will need to make some changes to the Constants.tsx
you will need to replace
export const WEB_ADDRESS = 'https://signals.data.undp.org/';
to export const WEB_ADDRESS = './';
export const API_ACCESS_TOKEN = process.env.INPUT_ACCESS_TOKEN_FOR_API';
to export const API_ACCESS_TOKEN = import.meta.env.VITE_ACCESS_CODE
export const REDIRECT_URL = process.env.INPUT_REDIRECT_URI_FOR_MSAL;
to export const REDIRECT_URL = import.meta.env.VITE_REDIRECT_URL;
These changes are only required for local deployment. For production you will need to keep the value same.
Also you will need a .env.local
file in the root folder. the env
file would require the following variable and values
- VITE_API_LINK=https://signals-and-trends-api.azurewebsites.net/v1/
- VITE_ACCESS_CODE={{contact the team for API secret}}
- VITE_REDIRECT_URL=http://localhost:5173/
npm run dev
: Executesvite
and start the local server for local deployment.npm run build
: Executestsc && vite build
and builds the app for production and deployment.
This project uses ESLint integrated with prettier, which verifies and formats your code so you don't have to do it manually. You should have your editor set up to display lint errors and automatically fix those which it is possible to fix. See http://eslint.org/docs/user-guide/integrations.
This project is build in Visual Studio Code, therefore the project is already set up to work with. Install it from here and then install this eslint plugin and you should be good to go.