react-d3 / react-d3-core Goto Github PK

move legend out of the chart

TypeError: Cannot read property 'string' of undefined

scaleExtent: [1, 10]
79 | }, _commonProps2.default);
80 | ChartSvg.propTypes = {

81 | id: _react.PropTypes.string,
82 | width: _react.PropTypes.number.isRequired,
83 | height: _react.PropTypes.number.isRequired,
84 | margins: _react.PropTypes.object.isRequired,

I think this appears because _react.PropTypes is undefined

from what I can tell in the examples and docs, ShowLegend is a bool that determines if the legend is shown.

However, ShowLegend={false} appears to have no effect.

For example, using the PieChart example, adding ShowLegend={false} does nothing.

Am I missing something stupid?

James

It would be nice if there was an UMD build available to make it easier to use react-d3 in AMD environments.
See https://webpack.github.io/docs/configuration.html#output-librarytarget
I can create a PR if you like.

Please add the jsnext:main to allow developers to transpile in their own environment.

Hi guys,

The latest build 1.3.8 doesn't have any source, please publish the ./lib folder. All dependents are not able to use right now.

Thanks.

I'm getting the following prop validation failure when an xScale is ordinal:

Warning: Failed propType: Invalid prop `xScale` of value `band` supplied to `Grid`, expected one of ["linear","identity","sqrt","pow","log","quantize","quantile","ordinal","time"].

It looks like when a scale is set to ordinal, it actually is set to 'band' via axis.jsx: https://github.com/react-d3/react-d3-core/blob/master/src/axis/axis.jsx#L80

Would including 'band' in the allowed prop types fix this?

I get a warning when trying to use an ordinal xScale in Barchart or ordinal yScale in BarHorizontalChart:
(Barchart:)
Warning: Failed propType: Invalid prop xScale of value band supplied to Grid, expected one of ["linear","identity","sqrt","pow","log","quantize","quantile","ordinal","time"]. Check the render method of YGrid.
(BarHorizontalChart:)
Warning: Failed propType: Invalid prop yScale of value band supplied to Grid, expected one of ["linear","identity","sqrt","pow","log","quantize","quantile","ordinal","time"]. Check the render method of XGrid.

Seems like it is not propagated properly to the grid.

https://github.com/react-d3/react-d3-core/blob/master/src/grid.jsx#L33-L38

I'm currently evaluating react charting solutions, and react-d3 looks like a solid option. However, I have a hard requirement to be able to render charts directly to HTML strings, outside the context of a browser and otherwise without using a headless DOM implementation.

The reason I ask is because I was given to understand d3 needs to operate directly on the DOM, so I'm wondering how that works with React, which can renderToString() when no DOM is present.

Thanks!

default ylabel position is not right

https://github.com/react-d3/react-d3-core/blob/master/src/axis/yaxis.jsx#L30-L31

If a values array is specified, the specified values are used for ticks, rather than using the scale's automatic tick generator. If values is null, clears any previously-set explicit tick values, reverting back to the scale's tick generator. If values is not specified, returns the currently-set tick values, which defaults to null. For example, to generate ticks at specific values:

var xAxis = d3.svg.axis()
.scale(x)
.tickValues([1, 2, 3, 5, 8, 13, 21]);

The explicit tick values take precedent over the tick arguments set by axis.ticks. However, any tick arguments will still be passed to the scale's tickFormat function if a tick format is not also set; thus, it may be valid to set both axis.ticks and axis.tickValues.

https://github.com/d3/d3/wiki/SVG-Axes#tickValues

lowPriorityWarning.js:40 Warning: Accessing PropTypes via the main React package is deprecated, and will be removed in React v16.0. Use the latest available v15.* prop-types package from npm instead. For info on usage, compatibility, migration and more, see https://fb.me/prop-types-docs

in LineChart.js still using React.propTypes instead of exporting PropTypes from prop-types

Hello Chilijung,

First, kudos for this endeavour. I really like your take on react and D3 integration.

I tried running the examples in React 0.14, but without success.
I got an...

Uncaught Error: Invariant Violation: _registerComponent(...): Target container is not a DOM element.

I was wondering: Have you done any testing yourself?

Is react-faux-dom the culprit?

add on mouseover and out function on legend

support every scales detail settings in axis.jsx

Hello!
Just wanted to let you know that the current build is not working on IE because of it's use of Object.assign. Adding a simple polyfill should resolve this :)

Thanks for a great library!

using immutable js to set data in state

utils

The reason doing this is when props that come from parent changes, we can check for props change and re-render the whole child components

remove setscale prop in axis