NodeJS/Angular Plugin <ng-d3plot>

NodeJS/Angular Plugin <ng-d3plot>

Published on: 10/13/2018

D3js based plotting for Angular. This module focuses on easy usage and responsiveness. It provides plots in custom or default 4:3 aspect ratio, at a dynamic width of 100% parents width. On window resize the plots scale, and after resize (200ms) they redraw.

Installation

npm i ng-d3plot # or yarn add ng-d3plot

Usage

In your root (or whatever) module import the needed modules.
import { HistogramModule, LineChartModule, TimeSeriesModule } from 'ng-d3plot'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, HistogramModule, LineChartModule, TimeSeriesModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
In the modules component templates use the tags as follows
<d3p-histogram [data]="data" [config]="config"></d3p-histogram> <d3p-line-chart [data]="data" [config]="config"></d3p-line-chart> <d3p-pie [data]="data" [config]="config"></d3p-pie> <d3p-time-series [data]="data" [config]="config"></d3p-time-series>
The basic config is interfaced by
interface Config { xLabel?: string; yLabel?: string; title?: string; aspectRatio?: number; }
The data should be shape of
HIstogram
number[]
Line Chart
Array<{ x: number, y: number }>
Pie Chart
Array<{label: string, value: number}>
Time Series
Array<{data: Date, value: number}

TBD

It is planned to add simple map (country: value).