# onciq-ui

> ### DrillDown

Latest version **1.0.61** (published 2017-03-22) · ISC license · 0 weekly downloads

## Install

```sh
npm install onciq-ui
pnpm add onciq-ui
yarn add onciq-ui
bun add onciq-ui
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.61 |
| Published | 2017-03-22 |
| First published | 2017-01-18 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 10 |
| Known vulnerabilities | 0 (+3 in 1 direct dependencies) |
| Install scripts | no |
| Maintainers | aglo |

## Links

- npm: https://www.npmjs.com/package/onciq-ui
- npm.io page: https://npm.io/package/onciq-ui

## Dependencies (10)

- [react](https://npm.io/package/react.md) ^15.4.2
- [jquery](https://npm.io/package/jquery.md) ^3.2.1
- [webpack](https://npm.io/package/webpack.md) ^2.2.0-rc.0
- [react-dom](https://npm.io/package/react-dom.md) ^15.4.2
- [babel-core](https://npm.io/package/babel-core.md) ^6.21.0
- [highcharts](https://npm.io/package/highcharts.md) ^5.0.7
- [babel-loader](https://npm.io/package/babel-loader.md) ^6.2.10
- [react-router](https://npm.io/package/react-router.md) ^3.0.1
- [babel-preset-env](https://npm.io/package/babel-preset-env.md) ^1.1.8
- [highcharts-draggable-points](https://npm.io/package/highcharts-draggable-points.md) ^2.0.5

## Recent versions

- 1.0.61 (latest) — 2017-03-22
- 1.0.55 — 2017-03-22
- 1.0.54 — 2017-03-22
- 1.0.53 — 2017-03-22
- 1.0.52 — 2017-03-21
- 1.0.51 — 2017-03-21
- 1.0.50 — 2017-03-18
- 1.0.49 — 2017-03-17
- 1.0.48 — 2017-03-17
- 1.0.46 — 2017-03-17
- 1.0.45 — 2017-03-17
- 1.0.44 — 2017-03-17
- 1.0.43 — 2017-03-17
- 1.0.42 — 2017-03-17
- 1.0.41 — 2017-03-17
- … 40 more at https://npm.io/package/onciq-ui/versions

## README

# ONC iQ - UI

### DrillDown

##### icon (id, state, animation, up = 'plus', down = 'minus')
* Updates icon when clicking on a drill down row
* Optional: Set animation to false and link chart to local state <i>(prevent multiple chart animations)</i>

```javascript
import {DrillDown} from 'onciq-ui'

//...class setup

componentWillMount() {
  this.state = {ids: {}, animation: true}
}

renderRow(items) {
  return items.map(item => {
    return (
      <tr key={item.id}>
        <td><i className={`fa fa-${this.state.ids[item.id] || 'plus'}`}
          onClick={()=> {this.setState(DrillDown.icon(item.id, this.state.ids))}}>
        </i>{item.id}
        </td>
      </tr>
    );
  })
}

//... render a table using renderRow()
```

##### row (element, table, items)
* Build content for drill down row

```javascript
import {DrillDown} from 'onciq-ui'

//...class setup

return items.map(item => {
  //item is an object with some properties to display
  return (
    <tr key={item.id} >
      <td
        onClick={(e) => {DrillDown.row(e, $("#items").DataTable(), item)}}>
        {item.id}
      </td>
    </tr>
  );
})

//... render DataTable with id "items"
```

---
_Source: https://npm.io/package/onciq-ui · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._