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 simple 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';
...- Components
- <Axis />
- <AxisChart />
- <Button />
- <Choropleth />
- Compositions
- <ExpansionContainer />
- <Group /> and <Option />
- <HtmlLabel />
- <Legend />
- <LoadingIndicator />
- <Select /> - docs coming soon!
- <ResponsiveContainer />
- Shape
- <Area />
- <Line />
- <MultiLine />
- <Scatter />
- <Shape />
- <Slider />
- <SvgText />
- <Tooltip />
- Utilities - docs coming soon!