Heat map show data label

projects/swimlane/ngx-charts/src/lib/heat-map/heat-map-cell-series.component.ts

@@ -43,14 +43,15 @@ interface Cell {
       (deactivate)="deactivate.emit(c.cell)"
       [gradient]="gradient"
       [animations]="animations"
+      [showDataLabel]="showDataLabel"
       ngx-tooltip
       [tooltipDisabled]="tooltipDisabled"
       [tooltipPlacement]="placementTypes.Top"
       [tooltipType]="styleTypes.tooltip"
       [tooltipTitle]="tooltipTemplate ? undefined : tooltipText(c)"
       [tooltipTemplate]="tooltipTemplate"
       [tooltipContext]="{ series: c.series, name: c.label, value: c.data }"
-    ></svg:g>
+      ></svg:g>
   `,
   changeDetection: ChangeDetectionStrategy.OnPush
 })
@@ -64,6 +65,7 @@ export class HeatCellSeriesComponent implements OnChanges, OnInit {
   @Input() tooltipText: any;
   @Input() tooltipTemplate: TemplateRef<any>;
   @Input() animations: boolean = true;
+  @Input() showDataLabel: boolean = false;
 
   @Output() select: EventEmitter<DataItem> = new EventEmitter();
   @Output() activate: EventEmitter<DataItem> = new EventEmitter();

projects/swimlane/ngx-charts/src/lib/heat-map/heat-map-cell.component.ts

@@ -35,6 +35,9 @@ import { id } from '../utils/id';
         class="cell"
         (click)="onClick()"
       />
+      <svg:g  *ngIf="showDataLabel" [attr.transform]="calculateTranslation()">
+        <svg:text> {{this.data}} </svg:text>
+      </svg:g>
     </svg:g>
   `,
   changeDetection: ChangeDetectionStrategy.OnPush
@@ -48,6 +51,7 @@ export class HeatMapCellComponent implements OnChanges {
   @Input() data: number;
   @Input() gradient: boolean = false;
   @Input() animations: boolean = true;
+  @Input() showDataLabel: boolean = false;
 
   @Output() select: EventEmitter<number> = new EventEmitter();
   @Output() activate: EventEmitter<number> = new EventEmitter();
@@ -93,6 +97,54 @@ export class HeatMapCellComponent implements OnChanges {
       }
     ];
   }
+  calculateTranslation(): string {
+    var valueWidth = this.calculateWidth(this.data);
+    if (valueWidth >= (this.width + 4)) {
+      var formatedValue = this.shortenNum(this.data);
+      valueWidth = this.calculateWidth(formatedValue);
+      let textElement = select(this.element).select('.cell').select('text');
+      textElement.text(formatedValue);
+    }
+    // default value height is 25 px
+    var valueHeight = 25;
+    const translateX = (this.width - valueWidth) / 2;
+    const translateY = (this.height - valueHeight) / 2 + 20;
+    return `translate(${translateX}, ${translateY})`;
+  }
+  shortenNum(value: number): string {
+    const abbreviations = [
+      { value: 1e9, symbol: 'B' },
+      { value: 1e6, symbol: 'M' },
+      { value: 1e3, symbol: 'K' },
+    ];
+
+    for (const abbreviation of abbreviations) {
+      if (Math.abs(value) >= abbreviation.value) {
+        const formattedValue = value / abbreviation.value;
+        return `${Math.floor(formattedValue)}${abbreviation.symbol}`;
+      }
+    }
+
+    return value.toString();
+  }
+  calculateWidth(value): number {
+    const digitWidth = 12.6;
+    const kbmWidth = 19;
+
+    const stringValue = value.toLocaleString();
+
+    let totalWidth = 0;
+
+    for (const char of stringValue) {
+      if (/[0-9]/.test(char)) {
+        totalWidth += digitWidth;
+      } else {
+        totalWidth += kbmWidth;
+      }
+      totalWidth -= 3;
+    }
+    return totalWidth;
+  }
 
   loadAnimation(): void {
     const node = select(this.element).select('.cell');

projects/swimlane/ngx-charts/src/lib/heat-map/heat-map.component.ts

@@ -87,6 +87,7 @@ interface RectItem {
           [tooltipDisabled]="tooltipDisabled"
           [tooltipTemplate]="tooltipTemplate"
           [tooltipText]="tooltipText"
+          [showDataLabel]="showDataLabel"
           (select)="onClick($event)"
           (activate)="onActivate($event, undefined)"
           (deactivate)="onDeactivate($event, undefined)"
@@ -125,6 +126,7 @@ export class HeatMapComponent extends BaseChartComponent {
   @Input() max: number;
   @Input() activeEntries: any[] = [];
   @Input() wrapTicks = false;
+  @Input() showDataLabel: boolean = false;
 
   @Output() activate: EventEmitter<any> = new EventEmitter();
   @Output() deactivate: EventEmitter<any> = new EventEmitter();

src/app/app.component.html

@@ -622,6 +622,7 @@
         [maxXAxisTickLength]="maxXAxisTickLength"
         [maxYAxisTickLength]="maxYAxisTickLength"
         [wrapTicks]="wrapTicks"
+        [showDataLabel]="showDataLabel"
         (select)="select($event)"
         (activate)="activate($event)"
         (deactivate)="deactivate($event)"

src/app/chartTypes.ts

@@ -636,7 +636,8 @@ const chartGroups = [
           'maxYAxisTickLength',
           'min',
           'max',
-          'wrapTicks'
+          'wrapTicks',
+          'showDataLabel'
         ],
         defaults: {
           yAxisLabel: 'Census Date',