Move hacks to hack (match k8s pattern).

hack/crawl/ui/src/app/histogram/histogram.component.ts

@@ -0,0 +1,61 @@
+import { Chart } from 'chart.js';
+import { SearchResults } from '../documents';
+
+import { Component, OnInit } from '@angular/core';
+import { Subject, Observable } from 'rxjs';
+
+const otherLabel = 'Other Kinds';
+
+// Draws a histogram from SearchResults.BucketAggregation data.
+@Component({
+  selector: 'app-histogram',
+  templateUrl: './histogram.component.html',
+  styleUrls: ['./histogram.component.css']
+})
+export class HistogramComponent implements OnInit {
+  hist;
+
+  constructor() {}
+  ngOnInit() {}
+
+  public update(agg: SearchResults.BucketAggregation): Observable<string> {
+    if (this.hist) {
+      this.hist.destroy();
+    }
+
+    let labels = agg.buckets.map(bucket => bucket.key);
+    let counts = agg.buckets.map(bucket => bucket.count);
+    if (agg.otherResults && agg.otherResults > 0) {
+      labels.push(otherLabel)
+      counts.push(agg.otherResults)
+    }
+
+    let selectedLabel = new Subject<string>();
+
+    this.hist = new Chart('histogram', {
+      type: 'bar',
+      data: {
+        datasets: [ { data: counts } ],
+        labels: labels,
+      },
+      options: {
+        legend: { display: false },
+        'onClick' : function(e, it) {
+          if (!(it && it[0] && it[0]._model && it[0]._model.label)) {
+            return
+          }
+          let label = it[0]._model.label;
+          if (label != otherLabel) {
+            selectedLabel.next(label);
+          }
+        }.bind(selectedLabel),
+        scales: {
+          // no floating point
+          yAxes: [ { ticks: { precision: 0, beginAtZero: true } } ],
+        },
+      },
+    })
+
+    return selectedLabel;
+  }
+}