Adds frontend + configs to interal/tools/ui

internal/tools/ui/src/app/histogram/histogram.component.html

@@ -0,0 +1 @@
+<div><canvas id="histogram">{{hist}}</canvas></div>

internal/tools/ui/src/app/histogram/histogram.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HistogramComponent } from './histogram.component';
+
+describe('HistogramComponent', () => {
+  let component: HistogramComponent;
+  let fixture: ComponentFixture<HistogramComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ HistogramComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HistogramComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

internal/tools/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;
+  }
+}