Fix Heatmap on homepage

src/app/components/heatmap/heatmap.component.html

@@ -1 +1,17 @@
-<lib-heatmap [data]="data"></lib-heatmap>
+<mat-card>
+  <section>
+    <div>
+      <h1>Bar-Chart</h1>
+      <div id="plotArea">
+        <lib-heatmap [data]="data"></lib-heatmap>
+      </div>
+    </div>
+    <aside>
+      <h2>Data example</h2>
+      <pre><code [highlight]="dataStr"></code></pre>
+    </aside>
+  </section>
+
+  <h2>Selector</h2>
+  <pre><code [highlight]="selector"></code></pre>
+</mat-card>

src/app/components/heatmap/heatmap.component.scss

@@ -0,0 +1,7 @@
+section {
+  display: flex;
+}
+
+aside {
+  width: 100%;
+}

src/app/components/heatmap/heatmap.component.ts

@@ -6,12 +6,14 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./heatmap.component.scss']
 })
 export class HeatmapComponent implements OnInit {
+  selector = 'lib-heatmap';
   data = [
     { group: 'A', key: 'v1', value: 30, },
     { group: 'A', key: 'v2', value: 95, },
     { group: 'B', key: 'v1', value: 37, },
     { group: 'B', key: 'v2', value: 50, },
   ];
+  dataStr = JSON.stringify(this.data, null, 2);
 
   constructor() { }