first commit

package.json

@@ -30,9 +30,11 @@
     "material-ui": "0.17.0",
     "react": "15.4.2",
     "react-dom": "15.4.2",
+    "react-redux": "5.0.6",
     "react-router": "3.0.2",
     "react-tap-event-plugin": "2.0.1",
-    "recharts": "0.20.8"
+    "recharts": "0.20.8",
+    "redux": "3.7.2"
   },
   "devDependencies": {
     "autoprefixer": "6.7.3",

src/components/frequencyComp/FrequencyFormComp.js

@@ -0,0 +1,36 @@
+import React , { Component } from 'react';
+import RaisedButton from 'material-ui/RaisedButton';
+import TextField from 'material-ui/TextField';
+
+const styles = {
+    buttons: {
+    marginTop: 30,
+    float: 'right'
+    },
+    saveButton: {
+    marginLeft: 5
+    }
+};
+class FrequencyFormComp extends Component {
+
+    render(){
+        return (
+            <form>
+                <TextField
+                hintText="Keyword"
+                floatingLabelText="See how often you have been mentioned."
+                fullWidth={true}
+                />
+
+                <div style={styles.buttons}>
+                <RaisedButton label="Save"
+                                style={styles.saveButton}
+                                type="submit"
+                                primary={true}/>
+                </div>
+            </form>
+        );
+    }
+}
+
+export default FrequencyFormComp;

src/components/frequencyComp/FrequencyLineComp.js

@@ -0,0 +1,48 @@
+import React , { Component } from 'react';
+import Data from './../../data';
+import Paper from 'material-ui/Paper';
+import {white, purple600, purple500} from 'material-ui/styles/colors';
+import {LineChart, Line, ResponsiveContainer} from 'recharts';
+import {typography} from 'material-ui/styles';
+
+
+
+const styles = {
+    paper: {
+        backgroundColor: purple500,
+        height: 150
+      },
+      div: {
+        height: 95,
+        padding: '5px 15px 0 15px'
+      },
+      header: {
+        fontSize: 24,
+        fontWeight: typography.fontWeightLight,
+        color: white,
+        backgroundColor: purple600,
+        padding: 10,
+      }
+};
+
+class FrequencyLineComp extends Component {
+
+    render(){
+        return(
+        <div>
+            <Paper style={styles.paper}>
+                <div style={{...styles.header}}>New Orders</div>
+                <div style={styles.div}>
+                    <ResponsiveContainer >
+                    <LineChart data={Data.dashBoardPage.newOrders}>
+                        <Line type="monotone" dataKey="pv" stroke="#8884d8" strokeWidth={2} />
+                    </LineChart>
+                    </ResponsiveContainer>
+                </div>
+            </Paper>
+        </div>
+        );
+    }
+}
+
+export default FrequencyLineComp;

src/components/frequencyComp/FrequencyTableComp.js

@@ -0,0 +1,91 @@
+import React , { Component } from 'react';
+import {Table, TableBody, TableHeader, TableHeaderColumn, TableRow, TableRowColumn} from 'material-ui/Table';
+import Data from './../../data';
+import Paper from 'material-ui/Paper';
+import {white, purple600, purple500} from 'material-ui/styles/colors';
+import {LineChart, Line, ResponsiveContainer} from 'recharts';
+import {typography} from 'material-ui/styles';
+
+
+
+const styles = {
+    columns: {
+        no: {
+          width: '10%'
+        },
+        name: {
+          width: '40%'
+        },
+        price: {
+          width: '20%'
+        },
+        category: {
+          width: '20%'
+        },
+        edit: {
+          width: '10%'
+        }
+    },
+    paper: {
+        backgroundColor: purple500,
+        height: 150
+      },
+      div: {
+        height: 95,
+        padding: '5px 15px 0 15px'
+      },
+      header: {
+        fontSize: 24,
+        fontWeight: typography.fontWeightLight,
+        color: white,
+        backgroundColor: purple600,
+        padding: 10,
+      }
+};
+
+class FrequencyTableComp extends Component {
+
+    render(){
+        return(
+
+        <div>
+            {/* <Paper style={styles.paper}>
+                <div style={{...styles.header}}>New Orders</div>
+                <div style={styles.div}>
+                    <ResponsiveContainer >
+                    <LineChart data={Data.dashBoardPage.newOrders}>
+                        <Line type="monotone" dataKey="pv" stroke="#8884d8" strokeWidth={2} />
+                    </LineChart>
+                    </ResponsiveContainer>
+                </div>
+            </Paper> */}
+
+            <Table>
+            <TableHeader displaySelectAll={false}
+                        adjustForCheckbox={false}>
+                <TableRow>
+                <TableHeaderColumn style={styles.columns.no}>No.</TableHeaderColumn>
+                <TableHeaderColumn style={styles.columns.name}>Source</TableHeaderColumn>
+                <TableHeaderColumn style={styles.columns.price}>Keyword</TableHeaderColumn>
+                <TableHeaderColumn style={styles.columns.category}>Frequency</TableHeaderColumn>
+                <TableHeaderColumn style={styles.columns.edit}>Date</TableHeaderColumn>
+                </TableRow>
+            </TableHeader>
+            <TableBody displayRowCheckbox={false}>
+                {Data.tablePage.items.map(item =>
+                <TableRow key={item.no}>
+                    <TableRowColumn style={styles.columns.no}>{item.no}</TableRowColumn>
+                    <TableRowColumn style={styles.columns.name}>{item.name}</TableRowColumn>
+                    <TableRowColumn style={styles.columns.price}>{item.price}</TableRowColumn>
+                    <TableRowColumn style={styles.columns.category}>{item.category}</TableRowColumn>
+                    <TableRowColumn style={styles.columns.edit}></TableRowColumn>
+                </TableRow>
+                )}
+            </TableBody>
+            </Table>    
+        </div>
+        );
+    }
+}
+
+export default FrequencyTableComp;

src/containers/App.js

@@ -11,7 +11,7 @@ class App extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      navDrawerOpen: false
+      navDrawerOpen: true
     };
   }
 

src/containers/FrequencyPage.js

@@ -0,0 +1,48 @@
+import React from 'react';
+// import {Link} from 'react-router';
+// import RaisedButton from 'material-ui/RaisedButton';
+// import MenuItem from 'material-ui/MenuItem';
+// import TextField from 'material-ui/TextField';
+// import SelectField from 'material-ui/SelectField';
+// import Toggle from 'material-ui/Toggle';
+// import DatePicker from 'material-ui/DatePicker';
+// import {grey400} from 'material-ui/styles/colors';
+// import Divider from 'material-ui/Divider';
+import PageBase from '../components/PageBase';
+import FrequencyFormComp from '../components/frequencyComp/FrequencyFormComp';
+import FrequencyLineComp from '../components/frequencyComp/FrequencyLineComp';
+import FrequencyTableComp from '../components/frequencyComp/FrequencyTableComp';
+// import globalStyles from '../styles';
+
+const FrequencyPage = () => {
+
+  return (
+    <div>
+        <div className="row">
+            <div className="col-md-12">
+            <PageBase title="Frequency Form"
+              navigation="Application / Frequency Analysis">
+
+                <FrequencyFormComp/>
+            </PageBase>
+            </div>
+        </div>
+        <div className="row">
+            <div className="col-md-8">
+                <PageBase title="Frequency Chart">
+                    <FrequencyLineComp/>
+                </PageBase>
+                <PageBase title="Data Table">
+                    <FrequencyTableComp/>
+                </PageBase>
+            </div>
+
+            <div className="col-md-4">
+
+            </div>
+        </div>
+    </div>
+  );
+};
+
+export default FrequencyPage;

src/containers/TablePage.js

@@ -55,7 +55,7 @@ const TablePage = () => {
         <Table>
           <TableHeader>
             <TableRow>
-              <TableHeaderColumn style={styles.columns.id}>ID</TableHeaderColumn>
+              <TableHeaderColumn style={styles.columns.id}>No</TableHeaderColumn>
               <TableHeaderColumn style={styles.columns.name}>Name</TableHeaderColumn>
               <TableHeaderColumn style={styles.columns.price}>Price</TableHeaderColumn>
               <TableHeaderColumn style={styles.columns.category}>Category</TableHeaderColumn>
@@ -65,7 +65,7 @@ const TablePage = () => {
           <TableBody>
             {Data.tablePage.items.map(item =>
               <TableRow key={item.id}>
-                <TableRowColumn style={styles.columns.id}>{item.id}</TableRowColumn>
+                <TableRowColumn style={styles.columns.id}>{item.no}</TableRowColumn>
                 <TableRowColumn style={styles.columns.name}>{item.name}</TableRowColumn>
                 <TableRowColumn style={styles.columns.price}>{item.price}</TableRowColumn>
                 <TableRowColumn style={styles.columns.category}>{item.category}</TableRowColumn>

src/data.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import Assessment from 'material-ui/svg-icons/action/assessment';
+import MultilineChart from 'material-ui/svg-icons/editor/multiline-chart';
 import GridOn from 'material-ui/svg-icons/image/grid-on';
 import PermIdentity from 'material-ui/svg-icons/action/perm-identity';
 import Web from 'material-ui/svg-icons/av/web';
@@ -11,20 +12,21 @@ import ChevronRight from 'material-ui/svg-icons/navigation/chevron-right';
 const data = {
   menus: [
     { text: 'DashBoard', icon: <Assessment/>, link: '/dashboard' },
+    { text: 'Frequency Analysis', icon: <MultilineChart/>, link: '/frequency'},
     { text: 'Form Page', icon: <Web/>, link: '/form' },
     { text: 'Table Page', icon: <GridOn/>, link: '/table' },
     { text: 'Login Page', icon: <PermIdentity/>, link: '/login' }
   ],
   tablePage: {
     items: [
-      {id: 1, name: 'Product 1', price: '$50.00', category: 'Category 1'},
-      {id: 2, name: 'Product 2', price: '$150.00', category: 'Category 2'},
-      {id: 3, name: 'Product 3', price: '$250.00', category: 'Category 3'},
-      {id: 4, name: 'Product 4', price: '$70.00', category: 'Category 4'},
-      {id: 5, name: 'Product 5', price: '$450.00', category: 'Category 5'},
-      {id: 6, name: 'Product 6', price: '$950.00', category: 'Category 6'},
-      {id: 7, name: 'Product 7', price: '$550.00', category: 'Category 7'},
-      {id: 8, name: 'Product 8', price: '$750.00', category: 'Category 8'}
+      {no: 1, name: 'Product 1', price: '$50.00', category: 'Category 1'},
+      {no: 2, name: 'Product 2', price: '$150.00', category: 'Category 2'},
+      {no: 3, name: 'Product 3', price: '$250.00', category: 'Category 3'},
+      {no: 4, name: 'Product 4', price: '$70.00', category: 'Category 4'},
+      {no: 5, name: 'Product 5', price: '$450.00', category: 'Category 5'},
+      {no: 6, name: 'Product 6', price: '$950.00', category: 'Category 6'},
+      {no: 7, name: 'Product 7', price: '$550.00', category: 'Category 7'},
+      {no: 8, name: 'Product 8', price: '$750.00', category: 'Category 8'}
     ]
   },
   dashBoardPage: {

src/routes.js

@@ -6,13 +6,15 @@ import LoginPage from './containers/LoginPage';
 import FormPage from './containers/FormPage';
 import TablePage from './containers/TablePage';
 import Dashboard from './containers/DashboardPage';
-
+import FrequencyPage from './containers/FrequencyPage';
 export default (
+  // the route need to be exact location where frontend menu is.
   <Route>
     <Route path="login" component={LoginPage}/>
     <Route path="/" component={App}>
       <IndexRoute component={Dashboard}/>
       <Route path="dashboard" component={Dashboard}/>
+      <Route path="frequency" component={FrequencyPage}/>
       <Route path="form" component={FormPage}/>
       <Route path="table" component={TablePage}/>
       <Route path="*" component={NotFoundPage}/>