Skip to content

Commit 0669203

Browse files
author
Matthew Foyle
committed
first pass
0 parents  commit 0669203

18 files changed

+2432
-0
lines changed

‎.gitignore

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# See https://help.github.com/ignore-files/ for more about ignoring files.
2+
3+
#config
4+
src/config.js
5+
6+
# dependencies
7+
/node_modules
8+
9+
# testing
10+
/coverage
11+
12+
# production
13+
/build
14+
15+
# misc
16+
.DS_Store
17+
.env.local
18+
.env.development.local
19+
.env.test.local
20+
.env.production.local
21+
22+
npm-debug.log*
23+
yarn-debug.log*
24+
yarn-error.log*

‎README.md

+1,905
Large diffs are not rendered by default.

‎package.json

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
{
2+
"name": "charts",
3+
"version": "0.1.0",
4+
"private": true,
5+
"dependencies": {
6+
"@moltin/sdk": "^2.3.0",
7+
"chart.js": "^1.1.1",
8+
"moment": "^2.18.1",
9+
"react": "^15.5.4",
10+
"react-bootstrap": "^0.31.0",
11+
"react-bootstrap-grid": "^1.0.0",
12+
"react-chartjs": "^0.8.0",
13+
"react-dom": "^15.5.4",
14+
"react-router": "^4.1.1"
15+
},
16+
"devDependencies": {
17+
"react-scripts": "1.0.6"
18+
},
19+
"scripts": {
20+
"start": "react-scripts start",
21+
"build": "react-scripts build",
22+
"test": "react-scripts test --env=jsdom",
23+
"eject": "react-scripts eject"
24+
}
25+
}

‎public/favicon.ico

24.3 KB
Binary file not shown.

‎public/index.html

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
6+
<meta name="theme-color" content="#000000">
7+
<!--
8+
manifest.json provides metadata used when your web app is added to the
9+
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
10+
-->
11+
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
12+
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
13+
<!--
14+
Notice the use of %PUBLIC_URL% in the tags above.
15+
It will be replaced with the URL of the `public` folder during the build.
16+
Only files inside the `public` folder can be referenced from the HTML.
17+
18+
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
19+
work correctly both with client-side routing and a non-root public URL.
20+
Learn how to configure a non-root public URL by running `npm run build`.
21+
-->
22+
<title>React App</title>
23+
</head>
24+
<body>
25+
<noscript>
26+
You need to enable JavaScript to run this app.
27+
</noscript>
28+
<div id="root"></div>
29+
30+
</body>
31+
</html>

‎public/manifest.json

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{
2+
"short_name": "React App",
3+
"name": "Create React App Sample",
4+
"icons": [
5+
{
6+
"src": "favicon.ico",
7+
"sizes": "192x192",
8+
"type": "image/png"
9+
}
10+
],
11+
"start_url": "./index.html",
12+
"display": "standalone",
13+
"theme_color": "#000000",
14+
"background_color": "#ffffff"
15+
}

‎src/App.css

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
.App {
2+
text-align: center;
3+
}
4+
5+
.App-logo {
6+
animation: App-logo-spin infinite 20s linear;
7+
height: 80px;
8+
}
9+
10+
.App-header {
11+
background-color: #222;
12+
height: 150px;
13+
padding: 20px;
14+
color: white;
15+
}
16+
17+
.App-intro {
18+
font-size: large;
19+
}
20+
21+
@keyframes App-logo-spin {
22+
from { transform: rotate(0deg); }
23+
to { transform: rotate(360deg); }
24+
}

‎src/App.js

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import React, { Component } from 'react';
2+
import Orders from'./components/Orders';
3+
import Revenue from'./components/Revenue';
4+
import { Container } from 'react-bootstrap-grid';
5+
import './App.css';
6+
7+
var style = {
8+
float: 'left',
9+
width: '50%'
10+
}
11+
12+
class App extends Component {
13+
render() {
14+
15+
return (
16+
<div>
17+
<div>
18+
< Orders />
19+
</div>
20+
<div>
21+
< Revenue />
22+
</div>
23+
</div>
24+
);
25+
}
26+
}
27+
28+
export default App;

‎src/App.test.js

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import React from 'react';
2+
import ReactDOM from 'react-dom';
3+
import App from './App';
4+
5+
it('renders without crashing', () => {
6+
const div = document.createElement('div');
7+
ReactDOM.render(<App />, div);
8+
});

‎src/components/Bar_Chart.js

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import React, { Component } from 'react';
2+
var BarChart = require("react-chartjs").Bar;
3+
4+
5+
class Bar_Chart extends Component {
6+
7+
render() {
8+
return (
9+
<div>
10+
<p>Orders over time</p>
11+
<BarChart data={this.props.chartData} options={this.props.chartOptions} width="500" height="500"/>
12+
</div>
13+
)
14+
}
15+
};
16+
17+
export default Bar_Chart;

‎src/components/Line_Chart.js

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import React, { Component } from 'react';
2+
var LineChart = require("react-chartjs").Line;
3+
4+
5+
class Line_Chart extends Component {
6+
7+
render() {
8+
return (
9+
<div>
10+
<p>Orders over time</p>
11+
<LineChart data={this.props.chartData} options={this.props.chartOptions} width="500" height="500"/>
12+
</div>
13+
)
14+
}
15+
};
16+
17+
export default Line_Chart;

‎src/components/Orders.js

+139
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,139 @@
1+
import React, { Component } from 'react';
2+
import * as moment from 'moment';
3+
import Line_Chart from './Line_Chart'
4+
import Bar_Chart from './Bar_Chart'
5+
import '../App.css';
6+
var api = require('../utils/moltin.js')
7+
8+
class Orders extends Component {
9+
10+
constructor(props) {
11+
super();
12+
this.state = {orders: null};
13+
}
14+
15+
componentDidMount() {
16+
api.GetOrders()
17+
.then((orders) => {
18+
this.setState(() => {
19+
return {
20+
orders: orders
21+
}
22+
})
23+
})
24+
25+
.catch((error) => {
26+
console.log(error)
27+
})
28+
29+
}
30+
31+
render() {
32+
33+
if(this.state.orders !== null) {
34+
//console.log(this.state.orders.data)
35+
36+
var SevenDaysAgo = moment().subtract(7, 'days').calendar();
37+
var f = moment(SevenDaysAgo).format();
38+
var n = f.slice(8, 10)
39+
//console.log(n);
40+
var OrdersLessThanSevenDaysAgo = this.state.orders.data.filter(function(order) {
41+
return order.meta.timestamps.created_at.slice(8,10) > n;
42+
})
43+
console.log(OrdersLessThanSevenDaysAgo);
44+
45+
var Today = moment().format();
46+
var TodaySliced = Today.slice(8,10)
47+
var OneDayAgo = moment().subtract(1, 'days');
48+
var OneDayAgoFormatted = moment(OneDayAgo).format();
49+
var OneDayAgoSliced = OneDayAgoFormatted.slice(8,10);
50+
var TwoDaysAgo = moment().subtract(2, 'days');
51+
var TwoDaysAgoFormatted = moment(TwoDaysAgo).format();
52+
var TwoDaysAgoSliced = TwoDaysAgoFormatted.slice(8,10);
53+
var ThreeDaysAgo = moment().subtract(3, 'days');
54+
var ThreeDaysAgoFormatted = moment(ThreeDaysAgo).format();
55+
var ThreeDaysAgoSliced = ThreeDaysAgoFormatted.slice(8,10);
56+
var FourDaysAgo = moment().subtract(4, 'days');
57+
var FiveDaysAgo = moment().subtract(5, 'days');
58+
var SixDaysAgo = moment().subtract(6, 'days');
59+
60+
var Data = [0, 0, 0, 0, 0, 0, 0]
61+
var result = OrdersLessThanSevenDaysAgo.forEach(function(order) {
62+
console.log(order.meta.timestamps.created_at.slice(8,10))
63+
// console.log(TodaySliced);
64+
switch(order.meta.timestamps.created_at.slice(8,10)) {
65+
case TodaySliced : Data[6]++;
66+
// case OneDayAgoSliced : Data[5]++;
67+
// case TwoDaysAgoSliced : Data[4]++;
68+
// case ThreeDaysAgoSliced : Data[3]++;
69+
break;
70+
}
71+
72+
//console.log(order.meta.timestamps.created_at.slice(5,7))
73+
//console.log(Data)
74+
});
75+
76+
77+
78+
var chartData = {
79+
labels: [moment(SixDaysAgo).format("MMM Do YYYY"), moment(FiveDaysAgo).format("MMM Do YYYY"), moment(FourDaysAgo).format("MMM Do YYYY"), moment(ThreeDaysAgo).format("MMM Do YYYY"), moment(TwoDaysAgo).format("MMM Do YYYY"), moment(OneDayAgo).format("MMM Do YYYY"), moment(Today).calendar()],
80+
datasets: [{
81+
label: '# of Orders',
82+
data: Data,
83+
backgroundColor: [
84+
'rgba(255, 99, 132, 0.2)',
85+
'rgba(54, 162, 235, 0.2)',
86+
'rgba(255, 206, 86, 0.2)',
87+
'rgba(75, 192, 192, 0.2)',
88+
'rgba(153, 102, 255, 0.2)',
89+
'rgba(255, 159, 64, 0.2)'
90+
],
91+
borderColor: [
92+
'rgba(255,99,132,1)',
93+
'rgba(54, 162, 235, 1)',
94+
'rgba(255, 206, 86, 1)',
95+
'rgba(75, 192, 192, 1)',
96+
'rgba(153, 102, 255, 1)',
97+
'rgba(255, 159, 64, 1)'
98+
],
99+
borderWidth: 1
100+
}]
101+
}
102+
103+
var chartOptions = {
104+
scales: {
105+
yAxes: [{
106+
ticks: {
107+
beginAtZero:true
108+
}
109+
}]
110+
}
111+
};
112+
113+
return (
114+
<div>
115+
<div style={{float : 'left', width: 50 + '%'}}>
116+
<Line_Chart chartData={chartData} chartOptions={chartOptions}/>
117+
</div>
118+
<div style={{float : 'right', width: 50 + '%'}}>
119+
<Bar_Chart chartData={chartData} chartOptions={chartOptions}/>
120+
</div>
121+
122+
</div>
123+
124+
)
125+
126+
}
127+
128+
else {
129+
console.log('no data')
130+
//console.log(this.state)
131+
132+
return (
133+
<p>no data</p>
134+
)
135+
}
136+
}
137+
}
138+
139+
export default Orders;

‎src/components/Revenue.js

+59
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import React, { Component } from 'react';
2+
import * as moment from 'moment';
3+
import Line_Chart from './Line_Chart'
4+
import '../App.css';
5+
var api = require('../utils/moltin.js')
6+
7+
8+
class Revenue extends Component {
9+
10+
constructor(props) {
11+
super();
12+
this.state = {orders: null};
13+
}
14+
15+
componentDidMount() {
16+
api.GetOrders()
17+
.then((orders) => {
18+
this.setState(() => {
19+
return {
20+
orders: orders
21+
}
22+
})
23+
})
24+
25+
.catch((error) => {
26+
console.log(error)
27+
})
28+
29+
}
30+
31+
render() {
32+
33+
var revenue = 0
34+
35+
if(this.state.orders !== null) {
36+
//console.log(this.state.orders.data)
37+
38+
var SevenDaysAgo = moment().subtract(7, 'days').calendar();
39+
var f = moment(SevenDaysAgo).format();
40+
var n = f.slice(8, 10)
41+
console.log(n);
42+
43+
var OrdersLessThanSevenDaysAgo = this.state.orders.data.filter(function(order) {
44+
return order.meta.timestamps.created_at.slice(8,10) > n;
45+
})
46+
47+
var RevenueLessThanSevenDaysAgo = OrdersLessThanSevenDaysAgo.forEach(function(order) {
48+
revenue = revenue + order.meta.display_price.with_tax.amount/100
49+
})
50+
51+
};
52+
53+
return (
54+
<p style={{'text-align': 'center'}}>revenue last seven days: ${revenue}</p>
55+
)
56+
}
57+
}
58+
59+
export default Revenue;

0 commit comments

Comments
 (0)