feat(core): create heatmap chart

packages/angular/src/charts.module.ts

@@ -25,6 +25,7 @@ import { TreeChartComponent } from './tree-chart.component';
 import { TreemapChartComponent } from './treemap-chart.component';
 import { CirclePackChartComponent } from './circle-pack-chart.component';
 import { WordCloudChartComponent } from './wordcloud-chart.component';
+import { HeatmapChartComponent } from './heatmap-chart.component';
 
 @NgModule({
 	imports: [CommonModule],
@@ -41,6 +42,7 @@ import { WordCloudChartComponent } from './wordcloud-chart.component';
 		BulletChartComponent,
 		DonutChartComponent,
 		GaugeChartComponent,
+		HeatmapChartComponent,
 		HistogramChartComponent,
 		LineChartComponent,
 		LollipopChartComponent,
@@ -67,6 +69,7 @@ import { WordCloudChartComponent } from './wordcloud-chart.component';
 		BulletChartComponent,
 		DonutChartComponent,
 		GaugeChartComponent,
+		HeatmapChartComponent,
 		HistogramChartComponent,
 		LineChartComponent,
 		LollipopChartComponent,

packages/angular/src/heatmap-chart.component.ts

@@ -0,0 +1,34 @@
+import {
+	Component,
+	AfterViewInit
+} from "@angular/core";
+
+import { BaseChart } from "./base-chart.component";
+
+import { HeatmapChart } from "@carbon/charts";
+
+/**
+ * Wrapper around `Heatmap` in carbon charts library
+ *
+ * Most functions just call their equivalent from the chart library.
+ */
+@Component({
+	selector: "ibm-heatmap-chart",
+	template: ``
+})
+export class HeatmapChartComponent extends BaseChart implements AfterViewInit {
+	/**
+	 * Runs after view init to create a chart, attach it to `elementRef` and draw it.
+	 */
+	ngAfterViewInit() {
+		this.chart = new HeatmapChart(
+			this.elementRef.nativeElement,
+			{
+				data: this.data,
+				options: this.options
+			}
+		);
+
+		Object.assign(this, this.chart);
+	}
+}

packages/angular/src/index.ts

@@ -24,6 +24,7 @@ export * from './treemap-chart.component';
 export * from './circle-pack-chart.component';
 export * from './wordcloud-chart.component';
 export * from './alluvial-chart.component';
+export * from './heatmap-chart.component';
 
 // Diagrams
 export * from './diagrams/card-node/card-node.module';

packages/core/demo/data/CHART_TYPES.ts

@@ -49,6 +49,11 @@ export default {
 		angular: 'ibm-grouped-bar-chart',
 		vue: 'ccv-grouped-bar-chart',
 	},
+	HeatmapChart: {
+		vanilla: 'HeatmapChart',
+		angular: 'ibm-heatmap-chart',
+		vue: 'ccv-heatmap-chart',
+	},
 	HistogramChart: {
 		vanilla: 'HistogramChart',
 		angular: 'ibm-histogram-chart',