ansavvides / d3act Goto Github PK

Have existing d3 charts that you want to drop into React? Let's make it possible for you to make use of d3act's light wrapper so that they get created when the component mounts, update when the component updates and remove when the component is unmounted.

What settings do I change if I want the bars to be horizontal, and the respective x & y values/legend switched?

It worked great with React v0.14.x, but now fails to display charts in React v15.
Console error message:
Uncaught Invariant Violation: traverseParentPath(...): Cannot traverse from and to the same ID,``.

Any chance of incorporating easing? It is a simple process ..

.delay(function(d, i) {
return i *10
}
.ease('elastic')

But I am still learning your code so not quite sure where it would belong as a global. Somewhere in baseChart I am sure.

By making the innerRadius customizable, a pie chart can be turned into a donut chart!

Currently it's not possible to use d3act, it fails as follows:

Uncaught Error: Invariant Violation: Chart.render():
A valid ReactComponent must be returned.
You may have returned undefined, an array or some other invalid object.

We are definitely not returning undefined or an array, so for whatever reason it looks like an invalid object is returned from Chart.

The bubble chart needs to have a value bigger than 15 to display text. This value is too random, should not this be a prop?

https://github.com/AnSavvides/d3act/blob/master/src/components/BubbleChart.js#L15

As of v4, d3 has been broken up into many modules (e.g. d3-scale, d3-selection, etc). There are also some API changes.

Not only is it a good idea to stay on the current major version, but the final size would drop quite a bit if d3act only imports the d3 packages it needs.

I've ported a few examples and projects from 3.x to 4.x and it's relatively simple. Changing import d3 from "d3" to import * as d3 from 'd3' then doing a search-and-replace for the new methods names (old: d3.scale.ordinal new: d3.scaleOrdinal, etc) will get you pretty far. Converting to statements like import { scaleLinear, scaleOrdinal } from 'd3-scale' should be the ultimate goal, but I typically save that for a second pass after things are converted and working.

The changes to selections are probably the most substantial but, in my experience, don't take much effort to convert.

Currently legends will remain unchanged. This is not ideal.

This should make it a lot easier for people to get up and running. Examples in a README are nice, but they make the README extra long - let's move these to an examples folder where people can actually run the code and see it in action.

There are currently no tests in place, which is not ideal.

We should add test coverage for what is already there and any new features will need to be fully tested before they are accepted.

Hi,
how do you handle the click?
I'm trying to create a pie chart and handle the click on each part.
Thank you for your help

It would be nice to showcase how charts can also be updated with transitions.

HI, I have an application using react-router. I've tried implementing a basic example chart class as in the demo:

import React from 'react';
import * as d3 from 'd3';
import Chart from 'd3act';

class D3Muckaround extends React.Component {
render() {
return (
<Chart
type={"pie"}
width={300}
height={300}
showTooltips={true}
data={
{
"React": 2,
"Relay": 12,
"GraphQL": 5,
}
}
/>
);
}
}
export default D3Muckaround;

However it's displaying nothing. Do I have to be specific in letting it know where to mount to the DOM or something? Any help would be greatly appreciated thanks!

Similar in structure to the existing BarChart and BubbleChart.

The tooltip has no position set, so it appear at the bottom of the chart in Firefox, see this screenshot:

By looking into the JS console when running the examples, I have this error:

ReferenceError: event is not defined                     app.js:29752:18

It comes from BaseChart.js line 57 and 58:

onMouseMove() {
    if (!this.showTooltips) {
        return;
    }

    const top = (event.pageY - 10); // line 57
    const left = (event.pageX + 10); // line 58
...

In short window.event doesn't exist in Firefox, the work around would be to use the d3.event instead.

I deconstructed your repository to examine it in dev mode:

1. Made your app.jsx my main render component.
2. Replaced links to ./lib to ./components

App works, although the tool tips are not showing up, although clearly working in code (hidden is replaced with visible).

Before mouseover:
< div class="tooltip" style="position: absolute; z-index: 10; visibility: hidden; border: 1px solid grey; border-radius: 3px; text-align: center; padding: 8px 0px; width: 100px; color: rgb(255, 255, 255); top: 375px; left: 401px; background-color: rgb(0, 0, 0);">Relay (12)< /div>

On mouseover:

< div class="tooltip" style="position: absolute; z-index: 10; visibility: visible; border: 1px solid grey; border-radius: 3px; text-align: center; padding: 8px 0px; width: 100px; color: rgb(255, 255, 255); top: 375px; left: 401px; background-color: rgb(0, 0, 0);">Relay (12)< /div>

Any ideas?

This is great! Any ideas on how to implement a line chart?

This should make it a lot easier to read data for things like pie charts where unless you hover you don't know what you are looking at.

This was spotted by @JoeGrasso in #14 - it looks like using a class of tooltip for our tooltips is not a great idea since bootstrap.css has global definitions for that class.

Right now, it's all a little bit of magic; if you don't pass everything that's required to the Chart component, you won't know what's gone wrong. We should raise some informative errors to make it easier to figure out what's going wrong.

Rather than relying on people having to study the already existing code's style, let's use eslint.

In essence, a new path is not added to the DOM.

Simple reproduction example:

class ExampleDonutChart extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            data: {
                "React": 2,
                "Babel": 5,
            }
        };
    }

    componentDidMount() {
        window.setTimeout(() => {
            this.setState({
                data: {
                    "React": 2,
                    "Babel": 5,
                    "Radium": 6
                }
            })
        }, 2000);
    }

    render() {
        return (
            <div>
                <h2>Donut Chart</h2>
                <Chart
                    type={"pie"}
                    width={300}
                    height={300}
                    innerRadius={100}
                    showTooltips={true}
                    data={this.state.data}
                />
            </div>
        );
    }

}

Currently, we do the following in BaseChart:

this.showTooltips = this.props.showTooltips ? true : false;
this.transitionDuration = this.props.transitionDuration || 1000;

Let's instead move this information to an object like this:

const customisableProps = {
    showTooltips: true,
    transitionDuration: 1000
};

This way we'll have a default value per customisable prop and we can just add to that object when we want to add another prop.

We can then just iterate through each key and make the necessary assignments in the BaseChart constructor.

Currently, the tooltips are not customisable; we should change that so that people can implement tooltips the way they want them to be. We should let people have control over how the tooltips look (style) and what information they contain (content).