Not Providing Milkshakes

    bd2-ngx-heatmap
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.1 • Public • Published

    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 { }
    
    1. Include heatmap component in your template:
          <bd2-num-heatmap [data]="data" class="customized">
          </bd2-num-heatmap>
    
    1. Inputs:

    2. 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

    Install

    npm i bd2-ngx-heatmap

    DownloadsWeekly Downloads

    0

    Version

    1.1.1

    License

    MIT

    Unpacked Size

    518 kB

    Total Files

    55

    Last publish

    Collaborators

    • tzielins