In this series we will continue working on our D3 components that we have created in our past lesson and make them fully reusable, extensible and maintainable. This How to create reusable charts with React and D3 Part1 would cover the basics and then we will dive into more complex scenarios.
Prerequisites:
- You would need basic understanding of React and D3 to follow along with this course. I already have posted many tutorials on creating charts using D3. You can find them here ( https://www.adeveloperdiary.com/category/d3-js/ )
- We will start from where we had left in our last tutorial ( How to How to integrate React and D3 ). In case you have not read it, please go through it and find many useful details.
https://www.adeveloperdiary.com/react-js/how-to-integrate-react-and-d3-the-right-way/
Objectives:
- We will extend out work and make the React components fully reusable, configurable , extensible and maintainable.
- We will create a Analytics Dashboard in order to implement our concept.
Analytics Dashboard
Here is the screen print of the dashboard we will be creating. The 7 Days & 30 Days filter is active, you can click on them to reload the data (We are loading random dataset for this demo)
Click on the button below to see the demo:
HTML Scaffolding:
We will start with the HTML first before we convert everything to React components. You can find the HTML layout here.
We will be using bootstrap for the layout of the page. We have full sized header and a container. Here is the structure of the HTML, just to get enough idea about it. I have intentionally left many styles in the HTML itself so that you don’t have to refer the style.css
all the time.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<div class="container"> <div class="row"> <div class="col-xs-2"></div> <div class="col-xs-2"></div> <div class="col-xs-2"></div> <div class="col-xs-2"></div> <div class="col-xs-2"></div> <div class="col-xs-2"></div> </div> <div class="row"> <div class="col-md-6"></div> <div class="col-md-6"></div> </div> <div class="row"> <div class="col-md-6"></div> <div class="col-md-6"></div> </div> </div> |
React Components:
Our next task would be to convert the HTML into React Components. Add the app.jsx
and here is the structure of the main Page component. The MainRangeSelection
is the top filter then we have the Cards
followed by MainContainer
& SubContainer
.
1 2 3 4 5 6 7 8 9 10 11 12 |
var Page=React.createClass({ render:function(){ return( <div className="container"> <MainRangeSelection/> <Cards /> <MainContainer /> <SubContainer /> </div> ); } }); |
We have the date range filter in 5 different places, so it’s a good to create a React Component for that. Let’s call it Range. We will use svg element to create the small circles. Later we will enhance this component to use events.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
var Range=React.createClass({ render:function(){ return( <div> <span className="range-span"> <svg width="10" height="10"> <circle cx="5" cy="5" r="5" fill="#e58c72"/> </svg> <span className="padding-left-5">7 days</span> </span> <span className="range-span"> <svg width="10" height="10"> <circle cx="5" cy="5" r="5" fill="#8f8f8f"/> </svg> <span className="padding-left-5">30 days</span> </span> </div> ); } }); |
Place the Range inside the MainRangeSelection
component.
1 2 3 4 5 6 7 8 9 10 11 |
var MainRangeSelection=React.createClass({ render:function(){ return( <div className="row range-custom"> <div className="range-custom-child"> <Range /> </div> </div> ); } }); |
Next, we will add the Cards component. We will loop through the color array to generate the cards. We will customize it more later in this series.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
var Cards=React.createClass({ render:function(){ var color=['#53c79f','#64b0cc','#7a6fca','#ca6f96','#e58c72','#e5c072']; var cards=color.map(function(d,i){ var style={ 'backgroundColor':d }; return ( <div className="col-xs-2 custom_padding margin-below-20" key={i}> <div className="card" style={style}> <div className="card_header"> <div className="pull-left"> Visitors </div> <div className="pull-right"> 70% </div> </div> <hr className="hr-custom"/> <div className="card_body"> 3,502 </div> </div> </div> ); }); return( <div className="row"> {cards} </div> ); } }); |
We have 4 panels, so again we will create a Panel
& PanelHeader
component. The Panel component is very straightforward. We will wrap everything in a div and use this.props.children
to place all the child elements inside. this.props.children
is a very powerful component, we will see more use later.
The PanelHeader
displays the title and Range component.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
var Panel=React.createClass({ render:function() { return ( <div className="bg"> {this.props.children} </div> ); } }); var PanelHeader=React.createClass({ propTypes: { title:React.PropTypes.string }, render: function () { return ( <div className="panel-header"> <div className="pull-left panel-title">{this.props.title}</div> <div className="pull-right line-height-30"> {this.props.children} </div> </div> ); } }); |
The MainContainer
is below. The SubContainer
would be exactly same at this point of time. Notice how I have defined Panel
, PanelHeader
& Range
component.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
var MainContainer=React.createClass({ render:function(){ return( <div className="row"> <div className="col-md-6 custom_padding" > <Panel> <PanelHeader title="Traffic Source"> <Range/> </PanelHeader> </Panel> </div> <div className="col-md-6 custom_padding" > <Panel> <PanelHeader title="Traffic Source"> <Range/> </PanelHeader> </Panel> </div> </div> ); } }); |
Code
Please find the code we have changed so far.
Demo
Here is the demo, there is not much of difference from our earlier HTML demo.
Conclusion
We just converted the HTML to React Components in this part. In part2 we will start adding our charts using D3.
Leave a Reply