react-d3 / react-d3-shape Goto Github PK

When running my app, I am getting unwanted console logs with the name of the symbol. Log is at line 51 of scatter.jsx.

Looks like PR #20 already fixes this; can it be merged?

I've got a horizontal bar group chart but I'm getting this error. I want date on the y axis and with x I just have some integers. Here I went ahead and set the yDomain.

`import React, { PropTypes } from 'react';
import {BarGroupHorizontalChart} from 'react-d3-basic';

export default class AccountChart extends React.Component {
static propTypes = {
data: PropTypes.array.isRequired, // this is passed from the Rails controller
};

constructor(props, context) {
    super(props, context);
}

render() {
    let barchartData = [];
    this.props.data.forEach((item) => {
        if (item.date != "Total") {
            barchartData.push({"date": item.date, "deliverable": item.deliverable, "successful": item.successful});
        }
    });
    var parseDate = d3.time.format("%Y-%m-%d").parse;
    let width = 1400, height = 800, margins = {left: 100, right: 100, top: 50, bottom: 50},
        title = "Deliveries by Date",
        chartSeries = [
            {
                field: 'deliverable',
                name: 'Deliverable Numbers',
                color: 'blue'
            },
            {
                field: 'successful',
                name: 'Successful Numbers',
                color: 'green'
            }
        ],
        y = function(d) { return parseDate(d.date); },
        yScale = 'time',
        yDomain = [parseDate(this.props.data[0].date), parseDate(this.props.data[this.props.data.length - 2].date)];

    return (
        <BarGroupHorizontalChart data={barchartData} width={width} height={height} title={title} margins={margins}
                                 yScale={yScale} yDomain={yDomain} chartSeries={chartSeries} y={y} />
    );
}

}`

I tried it also with a BarGroupChart and flipped the axes but then I get xScaleSet.bandwidth is not a function. For this one I didn't set the xDomain.

`import React, { PropTypes } from 'react';
import {BarGroupChart} from 'react-d3-basic';

export default class AccountChart extends React.Component {
static propTypes = {
data: PropTypes.array.isRequired, // this is passed from the Rails controller
};

constructor(props, context) {
    super(props, context);
}

render() {
    let barchartData = [];
    this.props.data.forEach((item) => {
        if (item.date != "Total") {
            barchartData.push({"date": item.date, "deliverable": item.deliverable, "successful": item.successful});
        }
    });
    var parseDate = d3.time.format("%Y-%m-%d").parse;
    let width = 1400, height = 800, margins = {left: 100, right: 100, top: 50, bottom: 50},
        title = "Deliveries by Date",
        chartSeries = [
            {
                field: 'deliverable',
                name: 'Deliverable Numbers',
                color: 'blue'
            },
            {
                field: 'successful',
                name: 'Successful Numbers',
                color: 'green'
            }
        ],
        x = function(d) { return parseDate(d.date); },
        xScale = 'time';

    return (
        <BarGroupChart data={barchartData} width={width} height={height} title={title} margins={margins}
                                 xScale={xScale} chartSeries={chartSeries} x={x} />
    );
}

}`

I looked at the previous revision and tried manually monkey patched the previous function call of yScaleSet.rangeBand() but that throws a yScalSet.rangeBand() is not a function. Any ideas?

I am trying to fill ethe Chart using area. My question is on SO

Can someone please give me some pointers how to achieve this?

To scale charts based on outer Elements viewbox attribute needs to be set.
So a viewbox property should be rendered in the svg.

With the top level chart component - I issued a PR the other week which we merged in to pass down label's to the Axis components, but it seems that there are more properties to pass down too, such as padding.

I was wondering if the way that properties are passed down also needs to be a bit smarter about how it overrides properties on a component. If you want 2 Yaxis components for example (left&right), then you would not be able to do:

<LineChart ....>
   ....
   <YAxis yTickOrient='left' />
   <YAxis yTickOrient='right' />
</LineChart>

Because the properties would be overridden by https://github.com/react-d3/react-d3-shape/blob/master/src/chart.jsx#L100-L123. Importantly, this also seems to affect completely custom child components too.

It should be possible to merge the properties of the children with the chart so that overridden properties are not lost. an Object.assign ought to be enough.

Are you happy to accept a PR for this?

Hello,
it would be great if I can define a custom data field to be passed into the series. For instance an ID or Key field, so I can relate the series point to

Use case: I want to implement an onClick hander for a Scatter Plot chart.

(I might actually submit a pull request for this later ;)

stroke-width
stroke-linecap
stroke-dasharray

We have a requirement to show multi-line chart where some lines need to be dashed out and some need to be have bigger width then another.
How we can do it using current implementation ? or does this require extra pull request. Please guide us,
we will make pull request for the same if needed.

I've encountered the following warning seen in the Chrome console when using the BarStackChart from react-d3-basic:

warning.js?c790:45 Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of BarStack. See https://fb.me/react-warning-keys for more information.

It looks like the return statement (return _react2.default.createElement ...) of the function _mkBarStack in react-d3-shape\lib\components\bar_stack.js doesn't set a key property on the elements returned.

Line have an interpolate property but never use it. This is a must for line charts.

Sorry this is not more kind of issue but of feature check.

I tried searching could not find any where so just confirming.