Read all nvd3 settings from (one) common variable?

[atais]

Hi.

I am coming to React from Angular world and I have been using nvd3/d3 wrappers for Angular as well. Main nvd3 wrapper can be found here: https://github.com/krispo/angular-nvd3

I think it is a good idea to get the best of out of others' ideas and one thing I have particularly liked about angular-nvd3 solution was that one could pass all nvd3 settings rooted in one variable.

Currently, in react it looks like this:

<NVD3Chart type={this.props.graphType}
                 datum={series}
                 showControls={this.props.graphShowControls}
                 useInteractiveGuideline={true}
                 xAxis={{
                    tickValues: ReportGraph.calcTicks(series, 8),
                    tickFormat: (x:number) => DateTimeUtils.format(moment(x), this.props.granularity)
                  }}
                 x="x" y="y"
                 containerStyle={{ height: "500px" }}/>

and I think it would be much easier to work with in this way:

<NVD3Chart options={this.props.options}
                 datum={series}
                 />

and options is simply an object containing all the settings

You can see all the options listed in the examples page, fe: https://krispo.github.io/angular-nvd3/#/lineChart

Does react-nvd3 currently support all the nvd3 options? But they are simply given "one level higher"?
What do you think?

Regards.

[topicus]

@atais Yes, will do. It's really to change.

[topicus]

@atais If I'm not wrong there is a configureChart variable you can use. Let me know if that helps.

[joshivibhav1]

In angular you have a chart parameter inside options but in react-nvd3, you need to pass all options directly, i.e. if you pass your this.props.options.chart, it will work. one thing to note is that you need to append datum inside the chart itself and not pass it as a seperate parameter.

For ex:
var chart = {...this.props.options.chart,...{datum:series}};
then in return
<NVD3Chart {...chart}/>

This works for me. hope it helps.