Branch: master
Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
img
src
README.md
karma.conf.js
ng-package.json
ng-package.prod.json
package.json
tsconfig.lib.json
tsconfig.spec.json
tslint.json

README.md

Response plots with D3

Build Status

D3js based plotting for Angular. This module focuses on easy usage and responsiveness. It provides plots in a 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. See this library in action here.

Animation (view on github)

Installation

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

Usage

In your root (or whatever) module import the needed modules.

import {
  HistogramModule,
  LineChartModule,
  PieModule
  TimeSeriesModule
} from 'ng-d3plot';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HistogramModule,
    LineChartModule,
    PieModule,
    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]="dataLine" [config]="configLine"></d3p-line-chart>
<d3p-pie [data]="data" [config]="config"></d3p-pie>
<d3p-time-series [data]="data" [config]="config"></d3p-time-series>

Where the @Input()s are of type.

data config
Histogram Array<number> Config & { ticks?: number }
Line Chart Array<{x: number, y: number}> Config
Pie Chart Array<{label: string, value: number}> Config & { color?: string[] }
Time Series Array<{date: Date, value: number}> Config

the basic Config interface looks like

interface Config {
  xLabel?: string;
  yLabel?: string;
  title?: string;
  aspectRatio?: number;
}

TBD

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

Get in contact