feat(charts): add histogram (#1038)

* histogram, initial commit

* work commit

* optimize histogram logic

* code cleaning

* code cleaning

* optimized legend filtering for histogram

* optimize modal & CSV generation logic

* up

* add tooltips to histogram

* add typings

* add wrappers

* update binned ruler

* feat(charts): add histogram

README.md

@@ -61,6 +61,7 @@ Read the release change logs [here](https://github.com/carbon-design-system/carb
 | Bullet     | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark:
 | Circle Pack     | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: |
 | Network diagrams     | — | :white_check_mark: | :white_check_mark: | — | — |
+| Histogram     | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: |
 
 ## Bugs and feature requests
 

packages/angular/src/charts.module.ts

@@ -12,6 +12,7 @@ import { BubbleChartComponent } from './bubble-chart.component';
 import { BulletChartComponent } from './bullet-chart.component';
 import { DonutChartComponent } from './donut-chart.component';
 import { GaugeChartComponent } from './gauge-chart.component';
+import { HistogramChartComponent } from './histogram-chart.component';
 import { LineChartComponent } from './line-chart.component';
 import { LollipopChartComponent } from './lollipop-chart.component';
 import { PieChartComponent } from './pie-chart.component';
@@ -37,6 +38,7 @@ import { WordCloudChartComponent } from './wordcloud-chart.component';
 		BulletChartComponent,
 		DonutChartComponent,
 		GaugeChartComponent,
+		HistogramChartComponent,
 		LineChartComponent,
 		LollipopChartComponent,
 		PieChartComponent,
@@ -60,6 +62,7 @@ import { WordCloudChartComponent } from './wordcloud-chart.component';
 		BulletChartComponent,
 		DonutChartComponent,
 		GaugeChartComponent,
+		HistogramChartComponent,
 		LineChartComponent,
 		LollipopChartComponent,
 		PieChartComponent,

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

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

packages/angular/src/index.ts

@@ -11,6 +11,7 @@ export * from './bubble-chart.component';
 export * from './bullet-chart.component';
 export * from './donut-chart.component';
 export * from './gauge-chart.component';
+export * from './histogram-chart.component';
 export * from './line-chart.component';
 export * from './lollipop-chart.component';
 export * from './pie-chart.component';