viser-ng

A toolkit fit for data vis engineer (angular version).

Install

1$ npm install --save viser-ng

Usage

1import 'zone.js';
2import 'reflect-metadata';
3import { Component, enableProdMode, NgModule } from '@angular/core';
4import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
5import { BrowserModule } from '@angular/platform-browser';
6import { ViserModule } from 'viser-ng';
7
8const data = [
9  { month: 'Jan', Tokyo: 7.0, London: 3.9 },
10  { month: 'Feb', Tokyo: 6.9, London: 4.2 },
11  { month: 'Mar', Tokyo: 9.5, London: 5.7 },
12  { month: 'Apr', Tokyo: 14.5, London: 8.5 },
13  { month: 'May', Tokyo: 18.4, London: 11.9 },
14  { month: 'Jun', Tokyo: 21.5, London: 15.2 },
15  { month: 'Jul', Tokyo: 25.2, London: 17.0 },
16  { month: 'Aug', Tokyo: 26.5, London: 16.6 },
17  { month: 'Sep', Tokyo: 23.3, London: 14.2 },
18  { month: 'Oct', Tokyo: 18.3, London: 10.3 },
19  { month: 'Nov', Tokyo: 13.9, London: 6.6 },
20  { month: 'Dec', Tokyo: 9.6, London: 4.8 }
21];
22
23const dataPre = {
24  transform: [{
25    type: 'fold',
26    fields: ['Tokyo', 'London'],
27    key: 'city',
28    value: 'temperature',
29  }]
30};
31
32const dataMapping = [
33  {
34    key: 'month',
35    mark: 'column',
36  }, {
37    key: 'city',
38    mark: 'color',
39  }, {
40    key: 'temperature',
41    mark: 'row',
42  },
43];
44
45const scale = [{
46  dataKey: 'percent',
47  min: 0,
48  formatter: '.2%',
49}];
50
51@Component({
52  selector: '#mount',
53  template: `
54  <div>
55    <Chart [forceFit]="forceFit" [height]="height" [data]="data" [dataPre]="dataPre" [dataMapping]="dataMapping" [scale]="scale">
56      <Tooltip></Tooltip>
57      <Axis></Axis>
58      <StackBar [ngStyle]="{ stroke: '#fff', lineWidth: 1 }" ></StackBar>
59    </Chart>
60    <LiteChart stackBar="true" [height]="height" [data]="data" [dataMapping]="dataMapping" [forceFit]="forceFit"></LiteChart>
61  </div>
62  `
63})
64
65class AppComponent {
66  forceFit: boolean = true;
67  height: number = 400;
68  data = data;
69  dataPre = dataPre;
70  dataMapping = dataMapping;
71  scale = scale;
72  fields = ['cut', 'clarity'];
73}
74
75@NgModule({
76  declarations: [
77    AppComponent
78  ],
79  imports: [
80    BrowserModule,
81    ViserModule
82  ],
83  providers: [],
84  bootstrap: [
85    AppComponent
86  ]
87})
88export class AppModule { }
89platformBrowserDynamic().bootstrapModule(AppModule);