Created component for area-chart

Author: booleanhunter

reactjs-adminlte/public/dist/js/chartVendors.bundle.js

@@ -0,0 +1,51 @@
+define(
+    [
+        'react',
+        'jquery',
+        'raphael',
+        'morris'
+    ],
+    function(React, $, Raphael, Morris){
+    	var AreaChart = React.createClass({
+            getDefaultProps: function() {
+                return {
+                    id: 'area-chart-1',
+                    data: [
+                        {y: '2011 Q1', item1: 2666, item2: 2666},
+                        {y: '2011 Q2', item1: 2778, item2: 2294}
+                    ],
+                    xkey: 'y',
+                    ykeys: ['item1', 'item2'],
+                    labels: ['Item 1', 'Item 2'],
+                    lineColors: ['#a0d0e0', '#3c8dbc']
+                }
+            },
+            componentDidMount: function(){
+                var area = new Morris.Area({
+                    element: this.props.id,
+                    resize: true,
+                    data: this.props.data,
+                    xkey: this.props.xkey,
+                    ykeys: this.props.ykeys,
+                    labels: this.props.labels,
+                    lineColors: this.props.lineColors,
+                    hideHover: 'auto'
+                });
+            },
+    		render: function(){
+                var style = {
+                    position: 'relative',
+                    height: '300px'
+                };
+
+    			return (
+                    <div className="chart tab-pane" id={this.props.id} style={style}>
+                        {this.props.children}
+                    </div>
+    			)
+    		}
+    	})
+
+    	return AreaChart;
+    }   
+)     

reactjs-adminlte/public/dist/js/dashboardV1.bundle.js

@@ -21,7 +21,6 @@ define(
                         </ul>
                         <div className="tab-content no-padding">
                             {/* Morris chart - Sales */}
-                            <div className="chart tab-pane" id="revenue-chart" style={style}></div>
                             {this.props.children}
                         </div>
                     </div>

reactjs-adminlte/public/dist/js/generalUIElements.bundle.js

@@ -8,6 +8,7 @@ define(
         './navigation-menu',
         './control-panel',
         './charts/donut-chart',
+        './charts/area-chart',
         './containers/container-one',
         './containers/container-two',
         './containers/container-three',
@@ -18,7 +19,7 @@ define(
         './controls-menu',
         './stat-tile'
     ],
-    function(React, $, Raphael, Morris, HeaderBar, NavigationMenu, ControlPanel, DonutChart, ContainerOne, ContainerTwo, ContainerThree, ContainerFour,ContainerFive,ContainerSix,ContainerSeven,ControlsMenu,StatTile){
+    function(React, $, Raphael, Morris, HeaderBar, NavigationMenu, ControlPanel, DonutChart, AreaChart, ContainerOne, ContainerTwo, ContainerThree, ContainerFour,ContainerFive,ContainerSix,ContainerSeven,ControlsMenu,StatTile){
     	var Dashboard = React.createClass({
             getInitialState: function() {
                 return {
@@ -59,27 +60,6 @@ define(
             },
 
             componentDidUpdate: function(){
-                var area = new Morris.Area({
-                    element: 'revenue-chart',
-                    resize: true,
-                    data: [
-                        {y: '2011 Q1', item1: 2666, item2: 2666},
-                        {y: '2011 Q2', item1: 2778, item2: 2294},
-                        {y: '2011 Q3', item1: 4912, item2: 1969},
-                        {y: '2011 Q4', item1: 3767, item2: 3597},
-                        {y: '2012 Q1', item1: 6810, item2: 1914},
-                        {y: '2012 Q2', item1: 5670, item2: 4293},
-                        {y: '2012 Q3', item1: 4820, item2: 3795},
-                        {y: '2012 Q4', item1: 15073, item2: 5967},
-                        {y: '2013 Q1', item1: 10687, item2: 4460},
-                        {y: '2013 Q2', item1: 8432, item2: 5713}
-                    ],
-                    xkey: 'y',
-                    ykeys: ['item1', 'item2'],
-                    labels: ['Item 1', 'Item 2'],
-                    lineColors: ['#a0d0e0', '#3c8dbc'],
-                    hideHover: 'auto'
-                });
 
                 $('.box ul.nav a').on('shown.bs.tab', function () {
                   area.redraw();
@@ -130,8 +110,27 @@ define(
     							<div className="row">
     								<section className="col-lg-7 connectedSortable ui-sortable" >
     									<ContainerOne>
+                                            <AreaChart 
+                                                id="revenue-chart"
+                                                data = {[
+                                                    {y: '2011 Q1', item1: 2666, item2: 2666},
+                                                    {y: '2011 Q2', item1: 2778, item2: 2294},
+                                                    {y: '2011 Q3', item1: 4912, item2: 1969},
+                                                    {y: '2011 Q4', item1: 3767, item2: 3597},
+                                                    {y: '2012 Q1', item1: 6810, item2: 1914},
+                                                    {y: '2012 Q2', item1: 5670, item2: 4293},
+                                                    {y: '2012 Q3', item1: 4820, item2: 3795},
+                                                    {y: '2012 Q4', item1: 15073, item2: 5967},
+                                                    {y: '2013 Q1', item1: 10687, item2: 4460},
+                                                    {y: '2013 Q2', item1: 8432, item2: 5713}
+                                                ]}
+                                                xkey= 'y'
+                                                ykeys= {['item1', 'item2']}
+                                                labels= {['Item 1', 'Item 2']}
+                                                lineColors= {['#a0d0e0', '#3c8dbc']} />
+                                                
                                             <DonutChart 
-                                                id='sales-chart'
+                                                id="sales-chart"
                                                 colors= {["#3c8dbc", "#f56954", "#00a65a"]}
                                                 data= {[
                                                     {label: "Download Sales", value: 12},