Simon Breton Simon Breton - 3 months ago 20
React JSX Question

Chart doesn't show up on JS Bin React/redux

I've build the following JS Bin from a local example : https://jsbin.com/xocopal/edit?html,console,output

However in my localhost a chart does show up but nothing happen on the JS Bin. Here is the full code, I have no idea where the issue is coming from :

<script type="text/babel">

const { combineReducers, createStore } = Redux;
const { Provider, connect } = ReactRedux;
const { Component } = React;
const { render } = ReactDOM;
const { scaleLinear } = d3;
const { select } = d3;
const { line } = d3;
const { shape } = d3;
const { axisBottom, axisLeft } = d3;


//========================Data

var all = [
{x: 'a', y: 20},
{x: 'b', y: 14},
{x: 'c', y: 12},
{x: 'd', y: 19},
{x: 'e', y: 18},
{x: 'f', y: 15},
{x: 'g', y: 10},
{x: 'h', y: 14}
];

var filtered = [
{x: 'a', y: 9},
{x: 'b', y: 5},
{x: 'c', y: 6},
{x: 'd', y: 12},
{x: 'e', y: 10},
];


//========================Reducers

const ChartData = (state = all, action) => {
switch (action.type) {
case 'DATA_CHART_ALL':
return { all: update(state.all, {$set: all})}
case 'DATA_CHART_FILTER':
return { all: update(state.filtered, {$set: filtered})}
default:
return state;
}
};



const todoApp = combineReducers({ChartData});

//=====================Components

class Rect extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<rect className="bar"
height={this.props.height}
y={this.props.y}
width={this.props.width}
x={this.props.x}
>
</rect>
);
}
};
Rect.defaultProps = {
width: 0,
height: 0,
x: 0,
y: 0
}

class Bar extends React.Component {
constructor(props) {
super(props);
}
render() {
var props = this.props;
var data = props.data.map(function(d) {
return d.y;
});

var yScale = d3.scaleLinear()
.domain([0, d3.max(data)])
.range([0, this.props.height]);

var xScale = d3.scaleOrdinal()
.domain(d3.range(this.props.data.length))
.range([0, this.props.width], 0.05);

var bars = data.map(function(point, i) {
var height = yScale(point),
y = props.height - height,
width = xScale.rangeBand(),
x = xScale(i);

return (
<Rect height={height}
width={width}
x={x}
y={y}
key={i} />
)
});

return (
<g>{bars}</g>
);
}
};

class Chart extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<svg width={this.props.width}
height={this.props.height} >
{this.props.children}
</svg>
);
}
};

class Axis extends React.Component {
constructor(props) {
super(props);
}
render() {
return <g></g>
}
};

var all = [];


class Chartapp extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<div>
<hr/>
<Chart width={this.props.width}
height={this.props.height}>
<Bar data={this.props.datatest}
width={this.props.width}
height={this.props.height} />
</Chart>
</div>
</div>
);
}
};
Chartapp.defaultProps = {
width: 500,
height: 500,
}

function mapStateToProps(state) {
return {
datatest: state.ChartData
};
};

const mapDispachToProps = (dispatch) => {
return {
ChartData: () => {dispatch (datachartFilter());
},
};
};

const AppChart = connect(mapStateToProps,mapDispachToProps)(Chartapp);




//=====================Action

function datachartAll() {
return {
type: DATA_CHART_ALL
};
}

function datachartFilter() {
return {
type: DATA_CHART_FILTER
};
}

//=====================Client.js


const App = () => (
<div>
<AppChart />
</div>
);

const store = createStore(todoApp);

ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);
</script>


I have set up the whole Redux/React/d3 stuff but I haven't implemented the button yet. I'm just dispatching action manually with the console.

Answer

About halfway down you're setting var all = [] which you have bound to your state, effectively mutating state. Fixing this just uncovers other issues though.

May I suggest cleaning up the code a bit, getting the indenting right and putting it in the JS pane so you get syntax highlighting. Remove the parts that are 'downstream' of the problem (e.g. if your state is an empty array, you don't need seven other components on the page just yet). Get something working, then add in a component, then another, and so on.

With smaller code chunks you'll get better answers.

Comments