Skip to content

Commit b870f10

Browse files
author
Jasdeep
committed
Initial commit
0 parents  commit b870f10

23 files changed

+7200
-0
lines changed

‎.gitignore

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

‎README.md

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

‎package.json

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"name": "akqa-app",
3+
"version": "0.1.0",
4+
"private": true,
5+
"devDependencies": {
6+
"react-scripts": "0.9.0"
7+
},
8+
"dependencies": {
9+
"d3": "^4.6.0",
10+
"react": "^15.4.2",
11+
"react-dom": "^15.4.2"
12+
},
13+
"scripts": {
14+
"start": "react-scripts start",
15+
"build": "react-scripts build",
16+
"test": "react-scripts test --env=jsdom",
17+
"eject": "react-scripts eject"
18+
}
19+
}

‎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">
6+
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
7+
<!--
8+
Notice the use of %PUBLIC_URL% in the tag above.
9+
It will be replaced with the URL of the `public` folder during the build.
10+
Only files inside the `public` folder can be referenced from the HTML.
11+
12+
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
13+
work correctly both with client-side routing and a non-root public URL.
14+
Learn how to configure a non-root public URL by running `npm run build`.
15+
-->
16+
<title>Dashboard</title>
17+
</head>
18+
<body>
19+
<div id="app"></div>
20+
<!--
21+
This HTML file is a template.
22+
If you open it directly in the browser, you will see an empty page.
23+
24+
You can add webfonts, meta tags, or analytics to this file.
25+
The build step will place the bundled scripts into the <body> tag.
26+
27+
To begin the development, run `npm start`.
28+
To create a production bundle, use `npm run build`.
29+
-->
30+
</body>
31+
</html>

‎src/app.css

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
.appWrapper {
2+
width: 790px;
3+
margin: 0;
4+
padding: 10px;
5+
background-color: #ECECEC;
6+
}
7+
8+
.app {
9+
padding-left: 27px;
10+
padding-right: 17px;
11+
position: relative;
12+
background-color: white;
13+
width: 100%;
14+
height: 320px;
15+
}

‎src/app.js

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import React, { Component } from 'react';
2+
import './app.css';
3+
import Title from './components/title/title';
4+
import Graph from './components/graph/graph';
5+
import Sales from './components/sales/sales';
6+
import Stats from './components/stats/stats';
7+
8+
class App extends Component {
9+
render() {
10+
return (
11+
<div className="appWrapper">
12+
<div className="app">
13+
<Title title="Sales vs Target for Week 3"></Title>
14+
<Graph></Graph>
15+
<Sales></Sales>
16+
<Stats></Stats>
17+
</div>
18+
</div>
19+
);
20+
}
21+
}
22+
23+
export default App;

‎src/app.test.js

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

‎src/components/graph/graph.css

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
path {
2+
stroke: #007BCD;
3+
stroke-width: 2;
4+
fill: none;
5+
}
6+
7+
path.prediction {
8+
stroke: #D7D7D7;
9+
stroke-dasharray: 3;
10+
}
11+
12+
#graph {
13+
position: absolute;
14+
top: 50px;
15+
}

‎src/components/graph/graph.js

+116
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
import React, { Component } from 'react';
2+
import './graph.css';
3+
import * as d3 from 'd3';
4+
import * as data from '../../data/data.json';
5+
6+
class Graph extends Component {
7+
dataLineGraph = data['line-graph'];
8+
9+
componentDidMount() {
10+
this.convertDataForD3();
11+
this.createGraph(730,102);
12+
}
13+
14+
render() {
15+
return (
16+
<svg id="graph"></svg>
17+
);
18+
}
19+
20+
convertDataForD3() {
21+
this.dataLineGraph.forEach((data, i) => {
22+
data.date = Date.parse(data.date);
23+
data.value = Number(data.value);
24+
});
25+
}
26+
27+
createGraph(width, height) {
28+
let x = d3
29+
.scaleTime().range([0, width])
30+
.domain(d3.extent(this.dataLineGraph, (data) => data.date));
31+
32+
let y = d3
33+
.scaleLinear().range([height, 0])
34+
.domain(d3.extent(this.dataLineGraph, (data) => data.value));
35+
36+
let line = d3.line()
37+
.x((data) => x(data.date))
38+
.y((data) => y(data.value));
39+
40+
let graph = d3.select('#graph')
41+
.attr('width', width)
42+
.attr('height', height)
43+
.append('svg:g')
44+
45+
// Actual line
46+
graph.append('svg:path')
47+
.classed('actual', true)
48+
.attr('d', line(this.dataLineGraph.filter((data) => !data.prediction)));
49+
50+
// Prediction line
51+
graph.append('svg:path')
52+
.classed('prediction', true)
53+
.attr('d', line(this.dataLineGraph.filter((data) => data.prediction)));
54+
55+
// Labels
56+
graph.append('svg:g')
57+
.classed('labels-group', true)
58+
.selectAll('text')
59+
.data(this.dataLineGraph)
60+
.enter()
61+
.append('text')
62+
.attr('fill', '#5C5C5C')
63+
.attr('text-anchor', 'middle')
64+
.attr('font-size', '14px')
65+
.classed('label', true)
66+
.attr('x', (data) => x(data.date))
67+
.attr('y', (data) => y(data.value) - 10)
68+
.text((data) => data.label ? this.formatDate(data.date) : '');
69+
70+
// X-axis year label
71+
graph.append('g')
72+
.append('text')
73+
.attr('fill', '#5C5C5C')
74+
.attr('x', width)
75+
.attr('y', height)
76+
.attr('text-anchor', 'end')
77+
.attr('font-size', '14px')
78+
.text('2018');
79+
}
80+
81+
formatMonth(month) {
82+
var months = [
83+
'Jan',
84+
'Feb',
85+
'Mar',
86+
'Apr',
87+
'May',
88+
'Jun',
89+
'Jul',
90+
'Aug',
91+
'Sep',
92+
'Oct',
93+
'Nov',
94+
'Dec'
95+
];
96+
97+
if (month !== 0 && !month) {
98+
return '';
99+
}
100+
101+
return months[month];
102+
}
103+
104+
formatDate(_date) {
105+
if (!_date) {
106+
return '';
107+
}
108+
let date = new Date(_date);
109+
let day = date.getDate();
110+
let month = this.formatMonth(date.getMonth());
111+
let year = date.getFullYear();
112+
return `${day < 10 ? '0' + day : day} ${month} ${year}`;
113+
}
114+
}
115+
116+
export default Graph;

‎src/components/graph/graph.test.js

+46
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import SutClass from './graph';
2+
3+
describe('formatDate', () => {
4+
let tests = [
5+
{name: 'epoch', input: 1451606400000, output: '01 Jan 2016'},
6+
{name: 'string date', input: '2016-01-01', output: '01 Jan 2016'},
7+
{name: 'an empty string with an empty string', input: '', output: ''},
8+
{name: 'undefined value with an empty string', input: undefined, output: ''},
9+
{name: 'not a number (NaN) with an empty string', input: NaN, output: ''}
10+
];
11+
12+
tests.forEach((test) => {
13+
it('correctly handles ' + test.name, () => {
14+
let sut = new SutClass();
15+
expect(sut.formatDate(test.input)).toEqual(test.output);
16+
sut = null;
17+
});
18+
});
19+
});
20+
21+
describe('formatMonth', () => {
22+
let tests = [
23+
{name: 'month 0 (Jan)', input: 0, output: 'Jan'},
24+
{name: 'month 1 (Feb)', input: 1, output: 'Feb'},
25+
{name: 'month 2 (Mar)', input: 2, output: 'Mar'},
26+
{name: 'month 3 (Apr)', input: 3, output: 'Apr'},
27+
{name: 'month 4 (May)', input: 4, output: 'May'},
28+
{name: 'month 5 (Jun)', input: 5, output: 'Jun'},
29+
{name: 'month 6 (Jul)', input: 6, output: 'Jul'},
30+
{name: 'month 7 (Aug)', input: 7, output: 'Aug'},
31+
{name: 'month 8 (Sep)', input: 8, output: 'Sep'},
32+
{name: 'month 9 (Oct)', input: 9, output: 'Oct'},
33+
{name: 'month 10 (Nov)', input: 10, output: 'Nov'},
34+
{name: 'month 11 (Dec)', input: 11, output: 'Dec'},
35+
{name: 'not a number (NaN)', input: NaN, output: ''},
36+
{name: 'undefined', input: undefined, output: ''}
37+
];
38+
39+
tests.forEach((test) => {
40+
it('correctly handles ' + test.name, () => {
41+
let sut = new SutClass();
42+
expect(sut.formatMonth(test.input)).toEqual(test.output);
43+
sut = null;
44+
});
45+
});
46+
});

‎src/components/sales/sales.css

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
.salesWrapper {
2+
width: 727px;
3+
height: 33px;
4+
margin: 0;
5+
padding: 0;
6+
background-color: #ECECEC;
7+
position: absolute;
8+
top: 165px;
9+
}
10+
11+
.sales, .target {
12+
display: inline-block;
13+
position: relative;
14+
height: 100%;
15+
}
16+
17+
.sales {
18+
background-color: #007BCD;
19+
color: #E7F2FA;
20+
}
21+
22+
.target {
23+
color: #007BCD;
24+
}
25+
26+
.target .text, .sales .text {
27+
text-transform: uppercase;
28+
font-size: 10px;
29+
font-weight: bold;
30+
position: absolute;
31+
left: 13px;
32+
top: 11px;
33+
letter-spacing: -0.2px;
34+
}
35+
36+
.target .value, .sales .value {
37+
position: absolute;
38+
font-size: 17px;
39+
right: 15px;
40+
top: 8px;
41+
}

‎src/components/sales/sales.js

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import React, { Component } from 'react';
2+
import './sales.css';
3+
import * as data from '../../data/data.json';
4+
5+
class Sales extends Component {
6+
render() {
7+
return (
8+
<div className="salesWrapper">
9+
<div className="sales" style={{ width : this.calculateValueAsPercentageWidth(Number(data.sales.current), Number(data.sales.target)) }}>
10+
<div className="text">Sales</div>
11+
<div className="value">{Number(data.sales.current).toLocaleString('en')}</div>
12+
</div>
13+
<div className="target" style={{ width : this.calculateValueAsPercentageWidth(Number(data.sales.target)-Number(data.sales.current), Number(data.sales.target)) }}>
14+
<div className="text">Target</div>
15+
<div className="value">{Number(data.sales.target).toLocaleString('en')}</div>
16+
</div>
17+
</div>
18+
)
19+
}
20+
21+
calculateValueAsPercentageWidth(current, target) {
22+
return ((current / target) * 100) + '%';
23+
}
24+
}
25+
26+
export default Sales;

0 commit comments

Comments
 (0)