IHME-UI

ihme-ui is a collection of JavaScript utilities and React-based user interface elements and visualization components developed by the Institute of Health Metrics and Evaluation. This collection is used in IHME's visualizations of global health metrics.

Installation

npm install -S ihme-ui

Getting started

In it's most basic form, this library can be included in a `

In most cases, however, you'll be importing ihme-ui into your project, and bundling it with a module bundler like [Webpack](https://webpack.github.io/) or [Rollup](https://rollupjs.org/).
In support of this, `ihme-ui` exposes both a CommonJS (i.e., `var ihmeUI = require('ihme-ui')`) and an ES module (i.e., `import ihmeUI from 'ihme-ui'`) target.
```javascript
// index.js

import { AxisChart, linspace } from 'ihme-ui';
//...

Local development and posting pull requests

1. In Github, click on the Code dropdown/button to clone the repo. You can use either https or ssh.
2. Open a terminal, navigate to where you have your repos saved, then clone. git clone theUrlFromGithubgoes.here
3. Be sure to set up a personal token; you'll need it to push up your working branch to the remote.
4. Change to the ihme-ui directory and install dependencies.

cd ihme-ui
npm i

5. Create a new ticket branch and check it out. git checkout -b ticket-branch-name
6. Make your code changes.
7. Run the demo for that component (e.g., map demo). You'll need to re-run this script every time you save additional changes to rebuild the demo. npm run demo map
8. Open a browser window and enter the path to the demo. For example, https://localhost:8888//ihme-ui/src/ui/compositions/map/demo/index.html (Change the port number to whichever port you're using for local development in MAMP.)
9. You'll need to refresh the browser every time you rebuild the demo.
10. Stage changes and commit as necessary.

git status // to see changed files`
git add filename.js // or git add . to add all modified files
git commit -m "enter your commit message here" // commit your changes locally

11. Push up your working branch in order to create a PR. git push -u origin working-branch-name
12. Go to IHME-UI in Github and click on Compare & Pull Request, then click New Pull Request.
13. Select your working branch and which branch you're making the request onto (typically main).
14. Add a description of the changes.
15. Add other IHME developers as reviewers
16. Click Create Pull Request.

API Reference

• Components
  • [](src/ui/axis/README.md)
  • [](src/ui/axis-chart/README.md)
  • Bar
    • \
    • \
    • \
    • \
  • <button>
  • [](src/ui/choropleth/README.md)
  • Compositions
    • [](src/ui/compositions/bar-chart/README.md)
    • [](src/ui/compositions/choropleth-legend/README.md)
    • <map>
  • [](src/ui/expansion-container/README.md)
  • \ and <option>
  • [](src/ui/html-label/README.md)
  • <legend>
  • [](src/ui/loading-indicator/README.md)
  • [](src/ui/responsive-container/README.md)
  • <select> - docs coming soon!
  • Shape
    • \
    • \
    • \
    • \
    • \
    • \
  • [](src/ui/slider/README.md)
  • [](src/ui/svg-text/README.md)
  • [](src/ui/tooltip/README.md)
• Utilities - docs coming soon!