NG2 Bind View Component

This package provides a very simple NG2 Component that presents a grid like view of some dataset that itself represents a binning of some statistic over some other dataset. Think github activity grid but simpler and not necessarily datetime orientated.

• The data you pass in has to be shaped or reshaped to be an array of Bin:

  export interface Bin {
    index: number;
    stat: number;
  }

• The component has one Input/Output; selected(). A grid box is selected on click.

• The package is actually includes a valid angular application which npm start starts.

• You have to style it yourself.

Synopsis

import { Component, OnInit, ViewChild } from '@angular/core';
import { BinsComponent, Bin } from './bins.component';
declare var module:any;

var testData: Bin[]  =  [
  {index: 0, stat: 1},
  {index: 33, stat: 10},
  {index: 9, stat: 2},
  {index: 8, stat: 10},
  {index: 6, stat: 3},
  {index: 11, stat: 10},
  {index: 22, stat: 4},
]

@Component({
  moduleId: module.id,
  selector: 'my-app',
  templateUrl: 'test-app.component.html',
  styleUrls: ['test-app.component.css']
})
export class AppComponent implements OnInit {
  @ViewChild(BinsComponent) bins:BinsComponent;
  selected: Bin;

  ngOnInit() {
    this.bins.bins = testData
  }
}