Currently only basic functionality of components is checked. We need better tests for the components.

When I set opacity to any value for the pie chart I get a console error:

Cannot use data defined opacity for this seriestype. Using fallback value instead.

I tried out the example provided at https://github.com/uber-common/react-vis/blob/master/src/example/plot/line-chart.js

It renders as https://i.imgur.com/efmrQBg.png when I try it out.
Does any one know whats up ?

The pie chart yields a bunch of console errors like this

d3.js:8756 Error: Invalid value for <path> attribute d="M109.35191368826634,412.2430898706445A426.5,426.5 0 0.000006912,1 -225.26700899816143,362.14965805466653L-144.9842766002235,233.08532321974673Z"

when animation is on and the number of segments is increasing or decreasing. This doesn't appear to affect the functionality of the chart, but is a little worrisome.

Right now, the bar widths are automatically calculated, but there's no way to override it.

This is particularly useful for histograms.

Tried to upgrade from 0.1.1 to 0.3.1 but had to revert.

Got a crash in collectSeriesTypesInfo when it tried to process my application's nested array of XYPlot children.

Perhaps some higher level code is not first calling getSeriesChildren?

Clicks are not currently implemented

When data of the series has same y values, the height of bars are calculated as 0. It also happens when there is only one bar in data.

Currently the components' event listeners are assigned via d3 either at componentDidMount or at componentDidUpdate. The usage of d3 definitely helps: the event handler automatically gets the values associated with the DOM node, but these event listeners are not testable.

Thus, we should move the components' event listeners to the render function.

For both area and line charts it appears that there is a render issue such that react-vis requries a consitant number of elements. For instance, say we were render three line series:

<XYPlot> <series 1> <series 2> <series 3> </XYPlot>
and then add grid lines

<XYPlot> <grid> <grid> <series 1> <series 2> <series 3> </XYPlot>

More likely than not series 3 would not appear

Current way to organize margin enforces the user to pass all four margins (left, right, top and bottom) in the single margin property. It's better to have marginLeft, marginRight, marginTop and marginBottom properties instead.

E. g. instead of having

<XYPlot margin={{left: 20, right: 20, top: 10, bottom: 10}} />

we should have this (in case if we want to override just one of them)

<XYPlot marginLeft={20} />

In order to visualize the lost data/money/visitors, we should be able to show "dropoffs" on the sankey diagram (Google Analytics has a great example). Current d3-sankey does not support this behavior. Most likely we'll have to fork/adjust it.

This task should be implemented after #34.

This causes weird artifacts such as the chart resizing itself on re-render if the same config object is used on each render.

Hello, great work on this library.

I'm wondering if it is possible, or if you would like to add, some kind of API for using components such as LineSeries etc directly, rather than making them part of some explicit plot wrapper. The use case for this is if a user (such as myself) would like to draw them onto an existing SVG or combine them with custom SVG components that are not part of this library. For example I work on a chart-making tool and we'd like to add custom elements such as labels to the chart, but currently react-vis takes responsibility for the entire SVG.

Perhaps this API is there already, and can e.g. be used by passing all of these props to each series type, only that they are not documented as part of propTypes?

_getClonedChildComponents() {
  const {animation} = this.props;
  const {scaleMixins, data} = this.state;
  const dimensions = getInnerDimensions(this.props);
  const children = React.Children.toArray(this.props.children);
  const seriesProps = getSeriesPropsFromChildren(children);
  return children.map((child, index) => {
    const dataProps = data[index] ? {data: data[index]} : null;
    return React.cloneElement(child, {
      ...dimensions,
      animation,
      ...seriesProps[index],
      ...scaleMixins,
      ...child.props,
      ...dataProps
    });
  });
}

Otherwise, I'd be happy to look at submitting a PR to make this possible

There's either some misconfiguration of the animated treemap or too fast animation for the cells: the animation is not visible for on the example page.

Typo in the title of:
react-vis/src/example/plot/scatteplot.js

It'd be cool to be able to isolate the CSS classes with a prefix of our choosing.
Is this something you'd be interested in incorporating if we submit a PR?

Currently we have a big need to show the flow of step by step changes. Sankey Diagram is a good way to visualize it.

I think, we should use d3-sankey for this purpose, but before that we should upgrade to [email protected] (see #29 for detail).

I've been pondering this for the last couple days, working out a means of building a legend with interactivity hooks into the existing XY chart series.

Perhaps something like this could work as a starter - wrapping a higher order component around the series components. This component would essentially be an interface rendering a 'default legend' and include event handlers to do things like filtering on selection of a specific series.

<XYPlot
  width={300}
  height={300}>
  <HorizontalGridLines />
  <Legend onSelection={this.onSelection} style={style}>
    <LineSeries
      color='red'
      data={[
        {x: 1, y: 10},
        {x: 2, y: 5},
        {x: 3, y: 15}
      ]}/>
    <LineSeries
      color='blue'
      data={[
        {x: 1, y: 10},
        {x: 2, y: 5},
        {x: 3, y: 15}
      ]}/>
  </Legend>
  <XAxis />
  <YAxis />
</XYPlot>

An alternative would be just to have a standalone <Legend/> component that is fed information about series the chart from the XYPlot - potentially less complexity there, I guess.

Would appreciate thoughts (or alternative approaches!) on this, and happy to help with PR to get it landed.

they get rendered as a rv-xy-plot__axis g element.

Upgrade to d3 4.0 will help us to make our codebase smaller and more extensible.

I'd like to be able to have complete style control on the series. two ways that could be done:
passing a style argument to the series, with an object that d3 could just assign to the style.
also, I'd like to be able to pass specific classes to series. I'm thinking we can just pass a string with a class name to add to begin with, and if needs be be more specific. But being able to have full, css-like access to each individual series would be really nice.

It looks like recent versions of react-addons-shallow-compare (15.x.x) cause peer dependency problems:

npm ERR! peerinvalid The package [email protected] does not satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer [email protected] wants react@^15.0.2
npm ERR! peerinvalid Peer [email protected] wants react@^0.14.8
npm ERR! peerinvalid Peer [email protected] wants react@^0.14.8

Dropping back to 0.14.8 works fine.

Please provide an example of how to use fill scale and innerRadius scale. Here's how I tried to do it. It didn't work as expected. I couldn't find any examples about the same.

<RadialChart
  radiusDomain={[0,20]}
  innerRadiusDomain={[5,9]}
  data={[
    {angle: 2, fill: '#1a3141', radius: 10, innerRadius: 7},
    {angle: 7, fill: '#ff6f00', radius: 10, innerRadius: 7},
    {angle: 5, fill: '#1a3242', radius: 10, innerRadius: 7}
  ]}
  width={300}
  height={300} />

Label field on bubble chart - now you can make cool bubble charts, but you are not able to understand what this specific bubble stands for without clicking on it

There are several most frequent errors made by users that should be checked:

• nulls or undefineds in the data properties;
• mismatching x properties for stacked charts;
• negative or zero values for log scales.

The y-axis lacks a tickmark when data is constant. I'd expect the line series to be vertically in the xyplot with 1 tickmark & gridline at the value specified.

<XYPlot
  width={600}
  height={300}>
  <HorizontalGridLines />
  <LineMarkSeries
    color='blue'
    data={[ {x: 1,y:10}, {x: 2, y:10}]}/>
  <XAxis />
  <YAxis />
</XYPlot>

I'd like to do some exercises of react-vis, but some issues happened.

1.The LineSeries doesn't look like same as 'http://uber.github.io/react-vis/' provided. Just like as the attachment image.

2.The VerticalBarSeries doesn't display normally, It only has coordinate like as the attachment image.

Other series and radial work fine. All the example codes come from the 'src/example' file directory.

Some suggestions: Could you provide the example codes for each chart in 'http://uber.github.io/react-vis/' or build online editors in jsfiddle?

Quick question I was going through some of the source and examples, when charting line series and the like does you data keys need to be in the format x/y?

data={[
  {x: '..', y: '..'},
   ...
]}

Using offsetLeft actually offsets the hint in the opposite direction (pushing it more towards left as it's increased) when the tip is positioned with topright because it's added to the css right property.

We can either also accept offsetRight or offsetBottom (which would be less ambiguous and offer more control, or subtract instead of add offsetLeft and offsetTop in the case of right and bottom orientations.

/cc @chrisirhc

The bars have the 0 height in following case

<XYPlot, {
      width: 900,
      height: 250,
      yDomain: [0, 9367]
}>
  <VerticalBarSeries, {
    data: [{x: 0, y: 9367}, {x: 1, y: 184}]
  } />
  <XAxis />
  <YAxis />
</XYPlot>

There’s an obvious way to use charts when the axes are intersecting in the center of the visualization (instead of bottom and left sides). It might be very helpful for some statistical data.

Let's say we start with one node, attach a click listener in which it will fetch some data, then we will expand that "graph map" with more edges connected with these other nodes that we get from our new data.

livereactreload overwrites displayName while it proxies React components. This fails since react-vis uses a static getter to define the displayName attribute. As alternative to static get displayName() it would be great if we could either rely on auto deduction of displayNames or just assign them after the class declaration:

class Component extends React.Component {
  ...
}
Component.displayName = 'Component';

The bar widths seem to be incorrectly calculated

The algorithm shouldn't be producing widths where there would be bars that overlap.

Custom fonts are quite heavy, they are loaded from the external place (this doesn't seem right). We should remove this from main.scss and place them into the examples.

Originally reported by @harishkraman

The functionality exists, but not shown anywhere besides docs. It'll be great to have it on the page.

Right now I try to make a graph with X part of the dataset to be js Date objects. The graph renders horribly in that case. An example for xScale='time' would be very useful.

https://i.imgur.com/uvJS4tV.png

What is the recommended approach to accomplish this?

Best regards,
Alex

When trying to plot more than five line series i find that each additional series greater than five doesn't render. This appears to be because react-vis is wrapping the data so that given six line series, what you would expect would be:

<lineseries data=data_1>
<lineseries data=data_2>
<lineseries data=data_3>
<lineseries data=data_4>
<lineseries data=data_5>
<lineseries data=data_6>

But instead i find that last one gets the firsts data, that is:

<lineseries data=data_1>
<lineseries data=data_2>
<lineseries data=data_3>
<lineseries data=data_4>
<lineseries data=data_5>
<lineseries data=data_1>

I think that this is connected to #62.

var data = child.props.data; on line 109 of series-utils.js will fail if the XY-Plot maps data into children such as this case:

{dataSets.map((set, index) => {
  return (
    <LineSeries
      key={index}
      data={set.points}
      onNearestX={this.onNearestX.bind(null, set.name)}
      color={colorMap[set.name]} />
  );
})}

which will send an array of children to the getStackedData function, and child.props will be undefined, causing this error: Uncaught TypeError: Cannot read property 'data' of undefined

I'm using a FlexibleXYPlot that renders correctly when not specifying yType. However, as soon as I add yType: 'log', to the definition it starts throwing these errors in the JS console:

broken from #104 .