bd2-ngx-heatmap
v18.0.0
Published
Bd2NgxHeatmap
Downloads
36
Maintainers
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
- Import the Bd2NgxHeatmapModule module
@NgModule({
...
imports: [
...
Bd2NgxHeatmapModule
],
bootstrap: [AppComponent]
})
export class AppModule { }
- Include heatmap component in your template:
<bd2-num-heatmap [data]="data" class="customized">
</bd2-num-heatmap>
Inputs:
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