The Old County The Old County - 3 months ago 35
React JSX Question

Reactjs dashboard - multiple instances with an array of parameters

** LATEST Fiddle -- http://jsfiddle.net/cfrapLma/28/

adding chart types -- is there a better way to move this forward -- would the config json be handled via redux -- what is the next step forward. Has anyone tried making a dashboard application using reactjs and d3 before?




I am working on a reactjs project and I am keen to output a set of div holders that will contain future chart parameters, like width, height, url service.

++ How do I push and pull about multiple parameters to create different instances of a chart, placeholder..?
++ Is this a good start for creating a dashboard set of components do I need to create a configuration json for what charts, sizes, services I want to absorb.

//config json?

[{
"width": 200,
"height": 200,
"type": "piechart",
"serviceApi": "api.php?mode=GetCars"
}, {
"width": 100,
"height": 100,
"type": "barchart",
"serviceApi": "api.php?mode=GetBoats"
}]


do I need to create a config json that will control the parameters - an array of charts that are needing to be rendered?

var MultipleCharts = React.createClass({
render: function() {
return (
<div>
<div className="holder1"><PieChart width={this.props.width} height={this.props.height} service={this.props.service}/></div>
<div className="holder2"><PieChart width={this.props.width} height={this.props.height} service={this.props.service}/></div>
</div>
);
}
});


^ this is a hard coded approach and I would need to loop and push through a configuration json so each chart has different properties.

<div data-role="piechart" data-width=240 data-height=240 data-service="api.php?mode=GetCars">


//Latest Fiddle
http://jsfiddle.net/cfrapLma/24/

here is the first prototype build - whether I would have reactjs handle a stack of charts -- as if this information is coming from a configuration json -- like a dashboard setup.

Or the dashboard configuration is hardcoded on the template -- and reactjs invokes the charting tool.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>React Charts</title>
<script src="https://npmcdn.com/react@15.3.0/dist/react.js"></script>
<script src="https://npmcdn.com/react-dom@15.3.0/dist/react-dom.js"></script>
<script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js"></script>
<script src="https://npmcdn.com/jquery@3.1.0/dist/jquery.min.js"></script>
<script src="https://npmcdn.com/remarkable@1.6.2/dist/remarkable.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
</head>
<body>

<div id="example"></div>

<script type="text/babel">

var config = [{
"width": 200,
"height": 200,
"type": "piechart",
"serviceApi": "api.php?mode=GetCars"
}, {
"width": 100,
"height": 100,
"type": "barchart",
"serviceApi": "api.php?mode=GetBoats"
}];


var MultipleCharts = React.createClass({
render: function() {
return (
<div>
<div className="holder1"><PieChart width={this.props.width} height={this.props.height} service={this.props.service}/></div>
<div className="holder2"><BarChart width={this.props.width} height={this.props.height} service={this.props.service}/></div>
</div>
);
}
});

var PieChart = React.createClass({
componentDidMount: function() {
var $this = $(ReactDOM.findDOMNode(this));
console.log("rendered div now engage d3");
// set el height and width etc.
},
render: function() {
return (
<div className="piechart" data-role="piechart" data-width={this.props.width} data-height={this.props.height} data-service={this.props.service}>pie.
</div>
);
}
});




var BarChart = React.createClass({
componentDidMount: function() {
var $this = $(ReactDOM.findDOMNode(this));
console.log("rendered div now engage d3");
// set el height and width etc.
},
render: function() {
return (
<div className="barchart" data-role="barchart" data-width={this.props.width} data-height={this.props.height} data-service={this.props.service}>pie.
</div>
);
}
});


ReactDOM.render(
<MultipleCharts width="200" height="200" service="api.php?mode=GetCars"/>,
document.getElementById('example')
);

</script>


</body>
</html>

Answer

enter image description here

Alright so using the create-react-app as a base..

I've tried to start cutting up the files. I get an error when I try and put the PieChart/BarChart parts into their respective files -- do I need to modify them as a class?

/src/App.css

.App {
  text-align: center;
}

.App-logo {
  animation: App-logo-spin infinite 20s linear;
  height: 80px;
}

.App-header {
  background-color: #222;
  height: 150px;
  padding: 20px;
  color: white;
}

.App-intro {
  font-size: large;
}

@keyframes App-logo-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/src/App.js

import React, { Component } from 'react';
import './App.css';

import BarChart from './BarChart';
import PieChart from './PieChart';
import LineChart from './LineChart';

// Allowed types
const typeMapping = {
  PieChart, // In ES6, it is the same as "PieChart": PieChart, 
  BarChart,
  LineChart
};

class App extends Component {

  getChart(config) {
    const { type, ...props } = config;
    return React.createElement(typeMapping[type], props);
  }

  render() {
      var config = this.props.config;

      return (
          <div>
              {config.map((chartConfig, index) => {
                  return (
                      <div key={index} className={'holder' + index}>
                          {this.getChart(chartConfig)}
                      </div>
                  )
              })}
          </div>
      );
  }
}

export default App;

/src/BarChart.js

//barchart
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
var $ = require("jquery");

class BarChart extends Component {
    componentDidMount() {
        var $this = $(ReactDOM.findDOMNode(this));
        console.log("rendered div now engage d3", $this);
        // set el height and width etc.
    }

    render() {
        return (
            <div className="barchart" data-role="barchart" data-width={this.props.width} data-height={this.props.height}
                data-service={this.props.serviceApi}>bar.
            </div>
        );
    }
};

export default BarChart;

/src/Index.css

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

.piechart{
  background: pink;
  width: 100px;
  height: 50px;
  border: 1px solid black;
}

.barchart{
  background: green;
  width: 100px;
  height: 50px;
  border: 1px solid black;
}

.linechart{
  background: purple;
  width: 100px;
  height: 50px;
  border: 1px solid black;
}

/src/Index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';

var config = [{
  "type": "PieChart",
  "width": 200,
  "height": 200,
  "serviceApi": "api.php?mode=GetCars"
}, {
  "type": "BarChart",
  "width": 100,
  "height": 100,
  "serviceApi": "api.php?mode=GetBoats"
}, {
  "type": "LineChart",
  "width": 100,
  "height": 100,
  "serviceApi": "api.php?mode=GetBoats"
}];

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

/src/LineChart.js

//linechart
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
var $ = require("jquery");

class LineChart extends Component {
    componentDidMount() {
        var $this = $(ReactDOM.findDOMNode(this));
        console.log("rendered div now engage d3", $this);
        // set el height and width etc.
    }

    render() {
        return (
            <div className="linechart" data-role="linechart" data-width={this.props.width} data-height={this.props.height}
                data-service={this.props.serviceApi}>line.
            </div>
        );
    }
};

export default LineChart;

/src/PieChart.js

    //piechart
    import React, { Component } from 'react';
    import ReactDOM from 'react-dom';
    var $ = require("jquery");

    class PieChart extends Component {
        componentDidMount() {
            var $this = $(ReactDOM.findDOMNode(this));
            console.log("rendered div now engage d3", $this);
            // set el height and width etc.



            var dataset = {
              apples: [53245, 28479, 19697, 24037, 40245],
            };

            var width = 460,
                height = 300,
                radius = Math.min(width, height) / 2;

            var color = d3.scale.category20();

            var pie = d3.layout.pie()
                .sort(null);

            var arc = d3.svg.arc()
                .innerRadius(radius - 100)
                .outerRadius(radius - 50);

            var svg = d3.select($this[0]).append("svg")
                .attr("width", width)
                .attr("height", height)
                .append("g")
                .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

            var path = svg.selectAll("path")
                .data(pie(dataset.apples))
              .enter().append("path")
                .attr("fill", function(d, i) { return color(i); })
                .attr("d", arc);


        }

        render() {
            return (
                <div className="piechart" data-role="piechart" data-width={this.props.width} data-height={this.props.height}
                    data-service={this.props.serviceApi}>pie.
                </div>
            );
        }
    };

    export default PieChart;