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.
npm install bd2-ngx-heatmap --save
- 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.
Interactive demo