# bd2-ngx-heatmap

> Bd2NgxHeatmap

Latest version **18.0.0** (published 2024-06-12) · MIT license · 0 weekly downloads

## Install

```sh
npm install bd2-ngx-heatmap
pnpm add bd2-ngx-heatmap
yarn add bd2-ngx-heatmap
bun add bd2-ngx-heatmap
```

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 18.0.0 |
| Published | 2024-06-12 |
| First published | 2020-04-27 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 308.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Tomasz Zielinski |
| Maintainers | tzielins |
| Keywords | angular, ngx, heatmap, HeatMap chart |

## Links

- npm: https://www.npmjs.com/package/bd2-ngx-heatmap
- Repository: https://github.com/tzielins/bd2-ngx-heatmap
- Homepage: https://github.com/tzielins/bd2-ngx-heatmap#readme
- Issues: https://github.com/tzielins/bd2-ngx-heatmap/issues
- npm.io page: https://npm.io/package/bd2-ngx-heatmap

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^2.3.0

## Alternatives

- [d3-force-3d](https://npm.io/package/d3-force-3d.md) — 1.0M weekly downloads
- [ng2-charts](https://npm.io/package/ng2-charts.md) — 486.8K weekly downloads
- [@arcgis/core](https://npm.io/package/@arcgis/core.md) — 257.8K weekly downloads
- [react-sparklines](https://npm.io/package/react-sparklines.md) — 249.3K weekly downloads
- [react-native-gifted-charts](https://npm.io/package/react-native-gifted-charts.md) — 182.3K weekly downloads

## Recent versions

- 18.0.0 (latest) — 2024-06-12
- 17.0.0 — 2024-06-12
- 16.0.0 — 2024-06-12
- 2.3.0 — 2023-01-25
- 1.1.1 — 2020-09-17
- 1.1.0 — 2020-09-15
- 1.0.4 — 2020-05-12
- 1.0.3 — 2020-05-02
- 1.0.2 — 2020-05-02
- 1.0.1 — 2020-04-30
- 1.0.0 — 2020-04-27

## README

# Bd2NgxHeatmap

Bd2NgxHeatmap

An angular component used by BioDare2 to display data on HeatMap chart.

The component uses only svg elements and angular directives
*ngIf, *ngFor, [attr.x] to render and manage the plots.
The d3 libraries like d3-scales are used only for computations
of coordinates or colors not for rendering.


## How to use it

### Installation

`npm install bd2-ngx-heatmap --save`

### Using

1. Import the Bd2NgxHeatmapModule module

```
@NgModule({
...
  imports: [
    ...
    Bd2NgxHeatmapModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }
```

2. Include heatmap component in your template:

```
      <bd2-num-heatmap [data]="data" class="customized">
      </bd2-num-heatmap>
```

3. Inputs:

4. Styling can be customized overriding component css.

For example:

```
::ng-deep bd2-num-heatmap.customized .bd2hm-axisWrapper line {
  stroke: red;
}
```

Check the demo app, and Bd2NumHeatmapComponent embeded css for
classes.


## Demo

Interactive [demo](https://tzielins.github.io/bd2-ngx-heatmap/)

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