hendrathings/angular2-nvd3

Angular2 component or directive for NVD3.js

angular2-nvd3's Issues

Access to the chart object

Currently, it's possible to get the chart object with this method, to ignore the private access.

let char = <LineChart>(this.nvD3['ngNvD3']['chart']);
let x    = chart.xAxis.scale()(current);

Is it possible tout add a getter like this?

let char = this.nvD3.getChart<LineChart>();
let x    = chart.xAxis.scale()(current);

ERROR in NvD3Module is not an NgModule

Hi,

with the lastest version of angular2 (and angular-cli), i am getting the error "ERROR in NvD3Module is not an NgModule" during compilation (dev serv, prod build and -aot compilation)

I don't know if the issue is angular2-nvd2's side or some other places, but i'am using other third-party modules and i only have this problem with yours so i thought that i would let you know.

for information :
$ ng -v
angular-cli: 1.0.0-beta.24
node: 6.9.2
os: win32 x64
@angular/common: 2.4.2
@angular/compiler: 2.4.2
@angular/core: 2.4.2
@angular/forms: 2.4.2
@angular/http: 2.4.2
@angular/platform-browser: 2.4.2
@angular/platform-browser-dynamic: 2.4.2
@angular/router: 3.4.2
@angular/compiler-cli: 2.4.2

and thanks for your hard work

Uncaught Error: Template parse errors: Can't bind to 'options' since it isn't a known property of 'nvd3'.

ngOnChanges missing input argument

To make the module AoT compliant, ngOnChanges needs to have an optional input argument.

angular2-nvd3.directive and angular2-nvd3.component are missing that argument. Their methods should be:

    ngOnChanges(changes?) {
        this.ngNvD3.updateWithOptions(this.options, this.data);
    }

Error with AoT compilation

I'm hitting an error when doing AoT compilation with angular2-nvd3 in my project:

Unexpected value 'NvD3Module in .../node_modules/angular2-nvd3/dist/angular2-nvd3/angular2-nvd3.module.d.ts' imported by the module 'ChartModule in .../assets/app/charts/chart.module.ts'

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
...
import { NvD3Module } from 'angular2-nvd3';

@NgModule({
	declarations: [ ... ],
        imports: [ ...
                NvD3Module
        ],
        providers: [ ... ],
        exports: [ ... ]
})
export class ChartModule {}

The module works perfectly with just in time compilation and is a great improvement to ng2-nvd3 which I've used so far, but I really need the AoT compilation to work to use this in production. Can you replicate this issue? Any ideas how to fix this?

ng2-nvd3 has worked just fine with AoT compilation, but I would love to get rid of the bugs it has that angular2-nvd3 fixes.

For line chart inconsistent dates observed on x-axis

I have a below query using angular2-nvd3.js version 1.0.7-

Using ticks in Option values for line chart inconsistent dates observed on x-axis. While using tickValues able to fix consitent dates dynamically but on legend click / resizing browser window ticks on x-axis disappeared.

Any kind of help will be highly appreciated.

//Problem code

xAxis: {
axisLabel: '',
ticks: 22,
showMaxMin: false,
rotateLabels: -90,
tickFormat: function (d) {
return d3.time.format('%m/%d/%y ')(new Date(d));
}
}

[Tried below solution code]

xAxis: {
axisLabel: '',
tickValues: function(d){
var between = []
var secondDate = d[0].values[d[0].values.length-1].date;
var firstDate = d[0].values[0].date;

      //get all dates between max and min date
      while (firstDate <= secondDate) {
          between.push(new Date(firstDate));
          firstDate.setDate(firstDate.getDate() + 4);
      }

  return between;
     },       

    showMaxMin: false,
    rotateLabels: -90,
    tickFormat: function (d) {
      return d3.time.format('%m/%d/%y ')(new Date(d));
    }
  }

Expected: x-axis ticks using tickValues angular2-nvd3 v1.0.7 should not disappear on legend click / chrome browser window resize.

Actual: inconsistent dates with random interval on x-axis using angular2-nvd3 v1.0.7.

ERROR in NvD3Module is not an NgModule

AS mentioned in previous Issue,

this is not working with the lastest angular-cli. This bug is resolved in last angular-cliv version, but angular-nvd3 is not working anymore.

Could you fix it please?

thanks

Export update methods

Given that angular's ngOnUpdate() only triggers when the reference to the data changes, and not when a new element is pushed to the data array, there is no clean way of updating the component without copying the whole array, which is both expensive and dirty.

Is there another way to manually tell the component to refresh?

Document a little bit more the chart "options"

Good day,

Your tool is a big help to integrate Angular2 and NVD3, I have tried the linePlusBarChart and it worked.

I was just thinking that there are a lot of things that can be inside the options parameter and there is not a easy way to know which are available.

It would be very helpful to have a list of supported options. 😄

Thank you!

Interface D3/nvD3

Hi,

Is is possible to replace types any by interfaces like this:

import { nvD3 } from 'ng2-nvd3/build/lib/ng2-nvd3';

export interface D3 {
    extent: any;
    merge: any;

    time?: {
        format(format: any): ((date: Date) => String)
        month: {
            range(start: Date, stop: Date, step: number): any
        }
    };
    scale: {
        linear: Function
    };
    svg: {
        arc: Function
    };

    select(selector: string): D3Select;
    selectAll(selector: string): D3Select;
}
export interface D3Select {
    node(): HTMLElement;
    classed(selecteur: String, b: Boolean): void;
    select(selector: string): D3Select;
    selectAll(selector: string): D3Select;
    append(selector: string): D3Select;
    attr(attr: String, value: any): D3Select;
    data(date: any): D3Select;
    enter(): D3Select;
    exit(): D3Select;
    text(text: any): D3Select;
    remove(): any;
    style(style: String, attr: any): D3Select;
    transition(): D3Select;
    datum(val: any): D3Select;
    duration(val: number): D3Select;
}

export class NvD3 extends nvD3 {
    chart: NvD3Chart;
}
export declare class NvD3Chart {
    forceY: Function;
    xAxis: {
        scale(): {
            (val: any): any;
            range(): any[];
        }
    };
    yAxis: {
        scale?: Function
    };
    update: Function;
}

export interface NvD3DataLine {
    key?: String;
    color?: String;
    classed?: String;
    area?: boolean;
    values?: any[];
}

export interface NvD3DataPie {
    label?: String;
    valeur?: number;
    color?: String;
}

export declare class NvD3Option {
    chart: NvD3ChartOption;
}

export interface NvD3ChartOption {
    dispatch?: any;
    type: String;
    highlightPoint?: boolean;
    height: number;
    width?: number;
    forceY?: number[];
    margin?: {
        top?: number;
        right?: number;
        bottom?: number;
        left?: number
    };
    x?: Function;
    y?: Function;
    average?: number | { (d: any): number };
    useInteractiveGuideline?: boolean;
    clipVoronoi?: boolean;
    forcePoint?: number;
    showValues?: boolean;
    showLegend?: boolean;
    interpolate?: String;
    xAxis?: {
        axisLabel?: string;
        tickFormat?: Function;
        tickValues?: Function;
        showMaxMin?: boolean;
        staggerLabels?: boolean;
        axisLabelDistance?: number;
    };
    yAxis?: {
        axisLabel?: string;
        tickFormat?: Function;
        tickValues?: Function;
        showMaxMin?: boolean;
        staggerLabels?: boolean;
        axisLabelDistance?: number;
    };
    duration?: number;
    tooltip?: {
        enabled?: boolean;
        contentGenerator?: Function;
        classes?: String[];
    };
    showYAxis?: boolean;
    showXAxis?: boolean;
    showLabels?: boolean;
    labelType?: String;
    labelsOutside?: boolean;
    growOnHover?: boolean;
    legendPosition?: String;
    noData?: String;
}

export declare class NvD3Line {
    x1: number;
    x2: number;
    y1: number;
    y2: number;
}

It is not complete, just what I am currently using in my project.

iOS: MouseOver triggered instead of elementClick and chartClick

I have a pie chart that triggers mouse over while we are tapping a chart and it shows tooltip, where as its working fine on android browsers. following is my code how I've dispatched these events

  chart.pie.dispatch.on('chartClick', function OnChartClickPieChart( e ) {
    me.redirect( e.data );
  });

  chart.pie.dispatch.on('elementClick', function OnElementClickPieChart( e ) {
    me.redirect( e.data );
  });

what works in my case for iOS browsers is this,

  chart.pie.dispatch.on( 'elementMouseover', function OnMouseOverChart( e ) {
    me.redirect( e.data );
  });

but it will create issues for web and android browsers for obvious reasons.

http://plnkr.co/edit/T4i7Zh?p=preview
it only works on android and web browsers

Problem with @types/nvd3 package

Hi,

Impossible to install the package, @types/nvd3 not found :

npm ERR! 404 no such package available : @types/nvd3
npm ERR! 404 
npm ERR! 404  '@types/nvd3' is not in the npm registry.
npm ERR! 404 You should bug the author to publish it (or use the name yourself!)
npm ERR! 404 It was specified as a dependency of 'angular2-nvd3'
npm ERR! 404 
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url. 

How to access the chart object and update

Hi,

I am trying to use the update method, to basically resize my chart with new data.

How can i access the chart object and update the chart? (I am using the directive way to use the chart).

Best Regards,