{"id":20486234,"url":"https://github.com/undp-data/dv-ui-starter-template","last_synced_at":"2025-03-05T16:32:58.139Z","repository":{"id":111480209,"uuid":"600892386","full_name":"UNDP-Data/dv-ui-starter-template","owner":"UNDP-Data","description":null,"archived":false,"fork":false,"pushed_at":"2025-02-02T22:26:17.000Z","size":453,"stargazers_count":0,"open_issues_count":0,"forks_count":1,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-02-02T23:21:03.824Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/UNDP-Data.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-02-12T22:27:12.000Z","updated_at":"2025-02-02T22:26:21.000Z","dependencies_parsed_at":"2024-02-19T18:13:38.074Z","dependency_job_id":"07b66b68-93a0-43e0-be22-c5770eccef22","html_url":"https://github.com/UNDP-Data/dv-ui-starter-template","commit_stats":null,"previous_names":["undp-data/dv-visualization-template","undp-data/dv-ui-starter-template"],"tags_count":0,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/UNDP-Data%2Fdv-ui-starter-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/UNDP-Data%2Fdv-ui-starter-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/UNDP-Data%2Fdv-ui-starter-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/UNDP-Data%2Fdv-ui-starter-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/UNDP-Data","download_url":"https://codeload.github.com/UNDP-Data/dv-ui-starter-template/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242061216,"owners_count":20065688,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-15T16:35:47.605Z","updated_at":"2025-03-05T16:32:58.117Z","avatar_url":"https://github.com/UNDP-Data.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Project Title\n#### Project description [Click here to see the interface]({{link to the site here}}).\n\nDoc for the UI kit can be found [here](https://icy-moss-09ab08f10.4.azurestaticapps.net/)\n\n## Table of Contents\n* [Link for the visualization](#section-01)\n* [Deployment](#deployment)\n* [Steps to integrate the vis in static page](#section-02)\n* [Pages on DFx where This Viz is Used](#section-03)\n* [Related Repos](#section-04)\n* [Global CSS Files and Repo](#section-05)\n* [Build With](#section-06)\n* [Installation](#section-07)\n* [Local Deployment](#section-08)\n* [Available Scripts](#section-09)\n* [Tooling Setup](#section-10)\n\n## Link for the visualization\u003ca name=\"section-01\"\u003e\u003c/a\u003e\n[{{link to the site here}}]({{link to the site here}})\n\n## Deployment\u003ca name=\"deployment\"\u003e\u003c/a\u003e\nThe Production site deployed using Azure Static Web App and work flow can be found [here]({{link to the site here}})\n\n## Steps to Integrating the Visualization in the Data Future Platform or Any Other Page\u003ca name=\"section-02\"\u003e\u003c/a\u003e\nAdd the following div in the page\n```\n\u003cdiv id=\"root\"\u003e\u003c/div\u003e\n```\n\nApart from the mentioned `div` above the following `script` and `link` needs to be added to the `head` or in the embed code\n```\n\u003cscript defer=\"defer\" type=\"module\" src=\"\u003cLink to the Visualization Mentioned Above\u003e/index.js\"\u003e\u003c/script\u003e\n\u003clink rel=\"stylesheet\" href=\"https://undp-data.github.io/stylesheets-for-viz/style/mainStyleSheet.css\" /\u003e\n\u003clink rel=\"stylesheet\" href=\"https://undp-data.github.io/stylesheets-for-viz/style/StyleForGraphingInterface.css\" /\u003e\n\u003clink rel=\"stylesheet\" href=\"https://undp-data.github.io/stylesheets-for-viz/style/StyleForGraph.css\" /\u003e\n```\n\n## Pages on DFx Where the Visualization is Used\u003ca name=\"section-03\"\u003e\u003c/a\u003e\n_All the pages on the DFx or other places like viva topics etc. where this visualization is embeded or used._\n\n## Related Repos\u003ca name=\"section-04\"\u003e\u003c/a\u003e\n* [__name of the data repo__](link to data repo): This is the data sheet for visualization\n* [__stylesheet-for-viz__](https://github.com/UNDP-Data/stylesheets-for-viz): Repo which defines the css settings for the project\n\n## Global CSS for UI and Graphs\u003ca name=\"section-05\"\u003e\u003c/a\u003e\n__Git Repo__: https://github.com/UNDP-Data/stylesheets-for-viz\n\n__Link for stylesheets__\n* https://undp-data.github.io/stylesheets-for-viz/style/mainStyleSheet.css\n* https://undp-data.github.io/stylesheets-for-viz/style/StyleForGraphingInterface.css\n* https://undp-data.github.io/stylesheets-for-viz/style/StyleForGraph.css\n\n## Build with\u003ca name=\"section-06\"\u003e\u003c/a\u003e\n* __React__: Used as MVC framework.\n* __styled-components__: Utilizes tagged template literals and the power of CSS, allows to write actual CSS code to style the components in JS/TS.\n* __Various D3 Libraries__: Used for visualizations, adding interaction and reading the csv data file.\n* __AntD__: For UI elements like dropdown, buttons, checkbox, and slider.\n* __lodash__: Used for manipulating and iterating arrays and objects.\n\n## Installation\u003ca name=\"section-07\"\u003e\u003c/a\u003e\nThis 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](https://nodejs.org/en/download/).\n\nTo 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.\n\nThis project is bootstrapped with [`Vite`](https://vitejs.dev/) and was created using `npm create vite@latest` command.\n\nRun the terminal or command prompt and then run the following\n\n```\ngit clone https://github.com/UNDP-Data/{{projectName}}.git\ncd {{projectName}}\nnpm install\n```\n\n## Local Development\u003ca name=\"section-08\"\u003e\u003c/a\u003e\nTo start the project locally, you can run `npm run dev` in the project folder in terminal or command prompt.\n\nThis is run the app in development mode. Open [http://localhost:5173/](http://localhost:5173/) to view it in the browser.\n\nThe page will reload if you make edits. You will also see any lint errors in the console.\n\n## Available Scripts\u003ca name=\"section-09\"\u003e\u003c/a\u003e\n* `npm run dev`: Executes `vite` and start the local server for local deployment.\n* `npm run build`: Executes `tsc \u0026\u0026 vite build` and builds the app for production and deployment.\n\n## Tooling Setup\u003ca name=\"section-10\"\u003e\u003c/a\u003e\nThis 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](http://eslint.org/docs/user-guide/integrations).\n\nThis project is build in Visual Studio Code, therefore the project is already set up to work with. Install it from [here](https://code.visualstudio.com/) and then install this [eslint plugin](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) and you should be good to go.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fundp-data%2Fdv-ui-starter-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fundp-data%2Fdv-ui-starter-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fundp-data%2Fdv-ui-starter-template/lists"}