Skip to content

Commit 8cac462

Browse files
author
Matthew Foyle
committed
add times menu
1 parent 25577f9 commit 8cac462

File tree

6 files changed

+134
-78
lines changed

6 files changed

+134
-78
lines changed

‎public/index.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -19,13 +19,13 @@
1919
work correctly both with client-side routing and a non-root public URL.
2020
Learn how to configure a non-root public URL by running `npm run build`.
2121
-->
22-
<title>React App</title>
22+
<title>Moltin Dashboard</title>
2323
</head>
2424
<body>
2525
<noscript>
2626
You need to enable JavaScript to run this app.
2727
</noscript>
2828
<div id="root"></div>
29-
29+
3030
</body>
3131
</html>

‎src/App.js

+3-32
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,16 @@
11
import React, { Component } from 'react';
2-
import Orders from'./components/Orders';
3-
import Revenue from'./components/Revenue';
4-
import BestSellers from './components/BestSellers';
5-
import { Menu, Icon } from 'semantic-ui-react';
2+
import Nav from './components/Nav';
63
import './App.css';
7-
import {
8-
BrowserRouter as Router,
9-
Route,
10-
Link
11-
} from 'react-router-dom';
124

135
var injectTapEventPlugin = require("react-tap-event-plugin");
146
injectTapEventPlugin();
157

168
class App extends Component {
9+
1710
render() {
1811

1912
return (
20-
<Router>
21-
<div>
22-
<Menu>
23-
<Icon name='dashboard icon' size='large' style={{paddingTop: 9, paddingLeft: 5}}/>
24-
<Menu.Item as={Link} to='/'>
25-
Orders
26-
</Menu.Item>
27-
<Menu.Item as={Link} to='/revenue'>
28-
Revenue
29-
</Menu.Item>
30-
<Menu.Item as={Link} to='/best-sellers'>
31-
Best Sellers
32-
</Menu.Item>
33-
</Menu>
34-
35-
36-
<Route exact path="/" component={Orders}/>
37-
<Route path="/revenue" component={Revenue}/>
38-
<Route path="/best-sellers" component={BestSellers}/>
39-
40-
</div>
41-
</Router>
42-
13+
<Nav />
4314
);
4415
}
4516
}

‎src/components/BestSellers.js

+5-30
Original file line numberDiff line numberDiff line change
@@ -31,31 +31,6 @@ class BestSellers extends Component {
3131
render() {
3232

3333
if(this.state.orders !== null) {
34-
//var Data = [0, 0, 0]
35-
36-
//var orders = this.state.orders.data;
37-
38-
// var SevenDaysAgo = moment().subtract(7, 'days').format('YYYY-MM-DD');
39-
40-
// var OrdersLessThanSevenDaysAgo = this.state.orders.data.filter(function(order) {
41-
// return order.meta.timestamps.created_at.slice(0,10) > SevenDaysAgo;
42-
// })
43-
44-
// var status = orders.forEach(function(order) {
45-
// var shipping_status = order.shipping;
46-
//
47-
// switch(shipping_status) {
48-
// case 'not_shipped' : Data[2]++;
49-
// break;
50-
// case 'partial' : Data[1]++;
51-
// break;
52-
// case 'shipped' : Data[0]++;
53-
// break;
54-
// default : return;
55-
// }
56-
//
57-
// console.log(Data)
58-
// });
5934

6035
return (
6136
<Center style={{paddingTop: 100}}>
@@ -75,7 +50,7 @@ class BestSellers extends Component {
7550
<Image src='/assets/images/avatar/small/lena.png' shape='rounded' size='mini' />
7651
<Header.Content>
7752
Product A
78-
<Header.Subheader>Human Resources</Header.Subheader>
53+
<Header.Subheader>Description</Header.Subheader>
7954
</Header.Content>
8055
</Header>
8156
</Table.Cell>
@@ -92,7 +67,7 @@ class BestSellers extends Component {
9267
<Image src='/assets/images/avatar/small/matthew.png' shape='rounded' size='mini' />
9368
<Header.Content>
9469
Product B
95-
<Header.Subheader>Fabric Design</Header.Subheader>
70+
<Header.Subheader>Description</Header.Subheader>
9671
</Header.Content>
9772
</Header>
9873
</Table.Cell>
@@ -109,7 +84,7 @@ class BestSellers extends Component {
10984
<Image src='/assets/images/avatar/small/lindsay.png' shape='rounded' size='mini' />
11085
<Header.Content>
11186
Product C
112-
<Header.Subheader>Entertainment</Header.Subheader>
87+
<Header.Subheader>Description</Header.Subheader>
11388
</Header.Content>
11489
</Header>
11590
</Table.Cell>
@@ -125,8 +100,8 @@ class BestSellers extends Component {
125100
<Header as='h4' image>
126101
<Image src='/assets/images/avatar/small/mark.png' shape='rounded' size='mini' />
127102
<Header.Content>
128-
Mark
129-
<Header.Subheader>Executive</Header.Subheader>
103+
Product D
104+
<Header.Subheader>Description</Header.Subheader>
130105
</Header.Content>
131106
</Header>
132107
</Table.Cell>

‎src/components/Nav.js

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import React, { Component } from 'react';
2+
import { Menu, Icon } from 'semantic-ui-react';
3+
import Orders from './Orders';
4+
import Revenue from './Revenue';
5+
import BestSellers from './BestSellers';
6+
import TimeNav from './TimeNav';
7+
import {
8+
BrowserRouter as Router,
9+
Route,
10+
Link
11+
} from 'react-router-dom';
12+
13+
class Nav extends Component {
14+
15+
render() {
16+
return (
17+
<Router>
18+
<div>
19+
<Menu>
20+
<Icon name='dashboard' size='large' style={{paddingTop: 9, paddingLeft: 5}}/>
21+
<Menu.Item as={Link} to='/'>
22+
Orders
23+
</Menu.Item>
24+
<Menu.Item as={Link} to='/revenue'>
25+
Revenue
26+
</Menu.Item>
27+
<Menu.Item as={Link} to='/best-sellers'>
28+
Best Sellers
29+
</Menu.Item>
30+
<TimeNav />
31+
</Menu>
32+
33+
34+
<Route exact path="/" component={Orders}/>
35+
<Route path="/revenue" component={Revenue}/>
36+
<Route path="/best-sellers" component={BestSellers}/>
37+
38+
</div>
39+
</Router>
40+
)
41+
}
42+
};
43+
44+
export default Nav;

‎src/components/Revenue.js

+53-14
Original file line numberDiff line numberDiff line change
@@ -34,35 +34,71 @@ class Revenue extends Component {
3434

3535
render() {
3636

37-
var revenue7 = 0
38-
var revenue14 = 0
37+
var revenue7 = 0;
38+
var revenue14 = 0;
39+
var revenueMonth = 0;
40+
var revenueTwoMonths = 0;
3941

4042
if(this.state.orders !== null) {
4143

42-
var SevenDaysAgo = moment().subtract(7, 'days').format('YYYY-MM-DD');
44+
var past = (num, frame) => {
45+
return moment().subtract(num, frame).format('YYYY-MM-DD');
46+
};
47+
48+
var OrdersLessThanX = (oldNum, oldFrame, newNum, newFrame) => {
49+
this.state.orders.data.filter(function(order) {
50+
return order.meta.timestamps.created_at.slice(0,10) > past(oldNum, oldFrame) && order.meta.timestamps.created_at.slice(0,10) < past(newNum, newFrame);
51+
})
52+
}
53+
4354
var OrdersLessThanSevenDaysAgo = this.state.orders.data.filter(function(order) {
44-
return order.meta.timestamps.created_at.slice(0,10) > SevenDaysAgo;
55+
return order.meta.timestamps.created_at.slice(0,10) > past(7, 'days');;
4556
})
57+
4658
OrdersLessThanSevenDaysAgo.forEach(function(order) {
4759
revenue7 = revenue7 + order.meta.display_price.with_tax.amount/100
4860
})
4961

50-
var FourteenDaysAgo = moment().subtract(14, 'days').format('YYYY-MM-DD');
5162
var OrdersLessThanFourteenDaysAgo = this.state.orders.data.filter(function(order) {
52-
return order.meta.timestamps.created_at.slice(0,10) > FourteenDaysAgo && order.meta.timestamps.created_at.slice(0,10) < SevenDaysAgo;
63+
return order.meta.timestamps.created_at.slice(0,10) > past(14, 'days') && order.meta.timestamps.created_at.slice(0,10) < past(7, 'days');
5364
})
65+
5466
OrdersLessThanFourteenDaysAgo.forEach(function(order) {
5567
revenue14 = revenue14 + order.meta.display_price.with_tax.amount/100
5668
})
5769

58-
var round_rev7 = Math.round(revenue7)
70+
71+
var OrdersLessThanOneMonthAgo = this.state.orders.data.filter(function(order) {
72+
return order.meta.timestamps.created_at.slice(0,10) > past(1, 'month');
73+
})
74+
OrdersLessThanOneMonthAgo.forEach(function(order) {
75+
revenueMonth = revenueMonth + order.meta.display_price.with_tax.amount/100
76+
})
77+
78+
var OrdersLessThanTwoMonthAgo = this.state.orders.data.filter(function(order) {
79+
return order.meta.timestamps.created_at.slice(0,10) > past(2, 'months');
80+
})
81+
OrdersLessThanTwoMonthAgo.forEach(function(order) {
82+
revenueTwoMonths = revenueTwoMonths + order.meta.display_price.with_tax.amount/100
83+
})
84+
85+
var round_revTwoMonths = Math.round(revenueTwoMonths);
86+
var formatted_revTwoMonths = format({prefix: '$'})(round_revTwoMonths);
87+
88+
var round_revMonth = Math.round(revenueMonth);
89+
var formatted_revMonth = format({prefix: '$'})(round_revMonth);
90+
91+
var round_rev7 = Math.round(revenue7);
5992
var formatted_rev7 = format({prefix: '$'})(round_rev7);
60-
var round_rev14 = Math.round(revenue14)
93+
94+
var round_rev14 = Math.round(revenue14);
6195
var formatted_rev14 = format({prefix: '$'})(round_rev14);
62-
var diff = percentDiff(round_rev14, round_rev7, true)
63-
// console.log(round_rev7)
64-
// console.log(round_rev14)
65-
// console.log(diff)
96+
97+
var diff = percentDiff(round_rev14, round_rev7, true);
98+
99+
100+
// console.log(round_revMonth)
101+
// console.log(round_revTwoMonths)
66102

67103
return (
68104
<div style={{paddingTop: 50, width: 100 + '%', height: 100 + '%'}}>
@@ -93,13 +129,16 @@ class Revenue extends Component {
93129
<Center>
94130
<Card>
95131
<div style={{textAlign: 'center', paddingTop: 5}}>
96-
<Icon name='percent icon' size='large'/>
132+
<Icon name='percent' size='large'/>
97133
</div>
98-
<Statistic value={diff} color='violet' label='% difference' style={{paddingBottom: 5}}/>
134+
<Statistic value={diff} color='violet' label='Difference' style={{paddingBottom: 5}}/>
99135
</Card>
100136
</Center>
101137
</Col>
102138
</Row>
139+
140+
141+
103142
</Grid>
104143
</div>
105144
)

‎src/components/TimeNav.js

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import React, { Component } from 'react';
2+
import { Menu } from 'semantic-ui-react';
3+
4+
class TimeNav extends Component {
5+
state = {}
6+
7+
handleItemClick = (e, { name }) => this.setState({ activeItem: name })
8+
9+
render() {
10+
const { activeItem } = this.state
11+
12+
13+
return (
14+
<Menu.Menu position='right'>
15+
<Menu.Item name='24h' active={activeItem === '24 Hours'} onClick={this.handleItemClick}>
16+
Last 24 Hours
17+
</Menu.Item>
18+
19+
<Menu.Item name='7d' active={activeItem === 'Last 7 Days'} onClick={this.handleItemClick}>
20+
Last 7 Days
21+
</Menu.Item>
22+
</Menu.Menu>
23+
)
24+
}
25+
};
26+
27+
export default TimeNav;

0 commit comments

Comments
 (0)