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.
npm install -S ihme-uiIn it's most basic form, this library can be included in a <script /> tag and accessed off of window as ihmeUI.
If you've installed the library from the npm registry, you can pull the library out of your node_modules folder.
If not, grab it off of the unoffical NPM CDN, unpkg.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>IHME-UI Starter</title>
<link rel="stylesheet" href="node_modules/ihme-ui/dist/ihme-ui.css"/>
<!-- OR from unkpk CDN
<link rel="stylesheet" href="//unpkg.com/ihme-ui/dist/ihme-ui.css">
-->
</head>
<body>
<main id="app">...</main>
<script src="node_modules/ihme-ui/dist/ihme-ui.js"></script>
<!-- OR from unkpk CDN
<script src="//unpkg.com/ihme-ui/dist/ihme-ui.js"></script>
-->
<script>
var chart = React.createElement(ihmeUI.AxisChart, {
domain: ihmeUI.linspace([3, 10], 200),
...
});
ReactDOM.render(chart, document.getElementById('app'));
</script>
</body>
</html>In most cases, however, you'll be importing ihme-ui into your project, and bundling it with a module bundler like Webpack or Rollup.
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.
// index.js
import { AxisChart, linspace } from 'ihme-ui';
//...- In Github, click on the Code dropdown/button to clone the repo. You can use either https or ssh.
- Open a terminal, navigate to where you have your repos saved, then clone.
git clone theUrlFromGithubgoes.here - Be sure to set up a personal token; you'll need it to push up your working branch to the remote.
- Change to the ihme-ui directory and install dependencies.
cd ihme-ui
npm i
- Create a new ticket branch and check it out.
git checkout -b ticket-branch-name - Make your code changes.
- 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 - Open a browser window and enter the path to the demo. For example, http://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.)
- You'll need to refresh the browser every time you rebuild the demo.
- 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
- Push up your working branch in order to create a PR.
git push -u origin working-branch-name - Go to IHME-UI in Github and click on Compare & Pull Request, then click New Pull Request.
- Select your working branch and which branch you're making the request onto (typically main).
- Add a description of the changes.
- Add other IHME developers as reviewers
- Click Create Pull Request.
- Components
- <Axis />
- <AxisChart />
- Bar
- <Bar />
- <Bars />
- <GroupedBars />
- <StackedBars />
- <Button />
- <Choropleth />
- Compositions
- <ExpansionContainer />
- <Group /> and <Option />
- <HtmlLabel />
- <Legend />
- <LoadingIndicator />
- <ResponsiveContainer />
- <Select /> - docs coming soon!
- Shape
- <Area />
- <Line />
- <MultiLine />
- <MultiScatter />
- <Scatter />
- <Shape />
- <Slider />
- <SvgText />
- <Tooltip />
- Utilities - docs coming soon!