Initial commit

jasdeepkhalsa · Feb 23, 2017 · b870f10 · b870f10
commit b870f10
Show file tree

Hide file tree

Showing 23 changed files with 7,200 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,18 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
diff --git a/README.md b/README.md
diff --git a/package.json b/package.json
@@ -0,0 +1,19 @@
+{
+  "name": "akqa-app",
+  "version": "0.1.0",
+  "private": true,
+  "devDependencies": {
+    "react-scripts": "0.9.0"
+  },
+  "dependencies": {
+    "d3": "^4.6.0",
+    "react": "^15.4.2",
+    "react-dom": "^15.4.2"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  }
+}
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,31 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <!--
+      Notice the use of %PUBLIC_URL% in the tag above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>Dashboard</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start`.
+      To create a production bundle, use `npm run build`.
+    -->
+  </body>
+</html>
diff --git a/src/app.css b/src/app.css
@@ -0,0 +1,15 @@
+.appWrapper {
+    width: 790px;
+    margin: 0;
+    padding: 10px;
+    background-color: #ECECEC;
+}
+
+.app {
+    padding-left: 27px;
+    padding-right: 17px;
+    position: relative;
+    background-color: white;
+    width: 100%;
+    height: 320px;
+}
diff --git a/src/app.js b/src/app.js
@@ -0,0 +1,23 @@
+import React, { Component } from 'react';
+import './app.css';
+import Title from './components/title/title';
+import Graph from './components/graph/graph';
+import Sales from './components/sales/sales';
+import Stats from './components/stats/stats';
+
+class App extends Component {
+  render() {
+    return (
+        <div className="appWrapper">
+            <div className="app">
+                <Title title="Sales vs Target for Week 3"></Title>
+                <Graph></Graph>
+                <Sales></Sales>
+                <Stats></Stats>
+            </div>
+        </div>
+    );
+  }
+}
+
+export default App;
diff --git a/src/app.test.js b/src/app.test.js
@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './app';
+
+describe('App test', () => {
+    it('renders without crashing', () => {
+      const div = document.createElement('div');
+      ReactDOM.render(<App />, div);
+    });
+});
diff --git a/src/components/graph/graph.css b/src/components/graph/graph.css
@@ -0,0 +1,15 @@
+path {
+    stroke: #007BCD;
+    stroke-width: 2;
+    fill: none;
+}
+
+path.prediction {
+    stroke: #D7D7D7;
+    stroke-dasharray: 3;
+}
+
+#graph {
+    position: absolute;
+    top: 50px;
+}
diff --git a/src/components/graph/graph.js b/src/components/graph/graph.js
@@ -0,0 +1,116 @@
+import React, { Component } from 'react';
+import './graph.css';
+import * as d3 from 'd3';
+import * as data from '../../data/data.json';
+
+class Graph extends Component {
+    dataLineGraph = data['line-graph'];
+
+    componentDidMount() {
+        this.convertDataForD3();
+        this.createGraph(730,102);
+    }
+
+    render() {
+        return (
+            <svg id="graph"></svg>
+        );
+    }
+
+    convertDataForD3() {
+        this.dataLineGraph.forEach((data, i) => {
+            data.date = Date.parse(data.date);
+            data.value = Number(data.value);
+        });
+    }
+
+    createGraph(width, height) {
+        let x = d3
+                .scaleTime().range([0, width])
+                .domain(d3.extent(this.dataLineGraph, (data) => data.date));
+
+        let y = d3
+                .scaleLinear().range([height, 0])
+                .domain(d3.extent(this.dataLineGraph, (data) => data.value));
+
+        let line = d3.line()
+            .x((data) => x(data.date))
+            .y((data) => y(data.value));
+
+        let graph = d3.select('#graph')
+            .attr('width', width)
+            .attr('height', height)
+            .append('svg:g')
+
+        // Actual line
+        graph.append('svg:path')
+            .classed('actual', true)
+            .attr('d', line(this.dataLineGraph.filter((data) => !data.prediction)));
+
+        // Prediction line
+        graph.append('svg:path')
+            .classed('prediction', true)
+            .attr('d', line(this.dataLineGraph.filter((data) => data.prediction)));
+
+        // Labels
+        graph.append('svg:g')
+            .classed('labels-group', true)
+            .selectAll('text')
+            .data(this.dataLineGraph)
+            .enter()
+            .append('text')
+            .attr('fill', '#5C5C5C')
+            .attr('text-anchor', 'middle')
+            .attr('font-size', '14px')
+            .classed('label', true)
+            .attr('x', (data) => x(data.date))
+            .attr('y', (data) => y(data.value) - 10)
+            .text((data) => data.label ? this.formatDate(data.date) : '');
+
+        // X-axis year label
+        graph.append('g')
+            .append('text')
+            .attr('fill', '#5C5C5C')
+            .attr('x', width)
+            .attr('y', height)
+            .attr('text-anchor', 'end')
+            .attr('font-size', '14px')
+            .text('2018');
+    }
+
+    formatMonth(month) {
+        var months = [
+            'Jan',
+            'Feb',
+            'Mar',
+            'Apr',
+            'May',
+            'Jun',
+            'Jul',
+            'Aug',
+            'Sep',
+            'Oct',
+            'Nov',
+            'Dec'
+        ];
+
+        if (month !== 0 && !month) {
+            return '';
+        }
+
+        return months[month];
+    }
+
+    formatDate(_date) {
+        if (!_date) {
+            return '';
+        }
+        let date = new Date(_date);
+        let day = date.getDate();
+        let month = this.formatMonth(date.getMonth());
+        let year = date.getFullYear();
+        return `${day < 10 ? '0' + day : day} ${month} ${year}`;
+    }
+}
+
+export default Graph;
diff --git a/src/components/graph/graph.test.js b/src/components/graph/graph.test.js
@@ -0,0 +1,46 @@
+import SutClass from './graph';
+
+describe('formatDate', () => {
+    let tests = [
+      {name: 'epoch', input: 1451606400000, output: '01 Jan 2016'},
+      {name: 'string date', input: '2016-01-01', output: '01 Jan 2016'},
+      {name: 'an empty string with an empty string', input: '', output: ''},
+      {name: 'undefined value with an empty string', input: undefined, output: ''},
+      {name: 'not a number (NaN) with an empty string', input: NaN, output: ''}
+    ];
+
+    tests.forEach((test) => {
+        it('correctly handles ' + test.name, () => {
+            let sut = new SutClass();
+            expect(sut.formatDate(test.input)).toEqual(test.output);
+            sut = null;
+        });
+    });
+});
+
+describe('formatMonth', () => {
+    let tests = [
+      {name: 'month 0 (Jan)', input: 0, output: 'Jan'},
+      {name: 'month 1 (Feb)', input: 1, output: 'Feb'},
+      {name: 'month 2 (Mar)', input: 2, output: 'Mar'},
+      {name: 'month 3 (Apr)', input: 3, output: 'Apr'},
+      {name: 'month 4 (May)', input: 4, output: 'May'},
+      {name: 'month 5 (Jun)', input: 5, output: 'Jun'},
+      {name: 'month 6 (Jul)', input: 6, output: 'Jul'},
+      {name: 'month 7 (Aug)', input: 7, output: 'Aug'},
+      {name: 'month 8 (Sep)', input: 8, output: 'Sep'},
+      {name: 'month 9 (Oct)', input: 9, output: 'Oct'},
+      {name: 'month 10 (Nov)', input: 10, output: 'Nov'},
+      {name: 'month 11 (Dec)', input: 11, output: 'Dec'},
+      {name: 'not a number (NaN)', input: NaN, output: ''},
+      {name: 'undefined', input: undefined, output: ''}
+    ];
+
+    tests.forEach((test) => {
+        it('correctly handles ' + test.name, () => {
+            let sut = new SutClass();
+            expect(sut.formatMonth(test.input)).toEqual(test.output);
+            sut = null;
+        });
+    });
+});
diff --git a/src/components/sales/sales.css b/src/components/sales/sales.css
@@ -0,0 +1,41 @@
+.salesWrapper {
+    width: 727px;
+    height: 33px;
+    margin: 0;
+    padding: 0;
+    background-color: #ECECEC;
+    position: absolute;
+    top: 165px;
+}
+
+.sales, .target {
+    display: inline-block;
+    position: relative;
+    height: 100%;
+}
+
+.sales {
+    background-color: #007BCD;
+    color: #E7F2FA;
+}
+
+.target {
+    color: #007BCD;
+}
+
+.target .text, .sales .text {
+    text-transform: uppercase;
+    font-size: 10px;
+    font-weight: bold;
+    position: absolute;
+    left: 13px;
+    top: 11px;
+    letter-spacing: -0.2px;
+}
+
+.target .value, .sales .value {
+    position: absolute;
+    font-size: 17px;
+    right: 15px;
+    top: 8px;
+}
diff --git a/src/components/sales/sales.js b/src/components/sales/sales.js
@@ -0,0 +1,26 @@
+import React, { Component } from 'react';
+import './sales.css';
+import * as data from '../../data/data.json';
+
+class Sales extends Component {
+    render() {
+        return (
+            <div className="salesWrapper">
+                <div className="sales" style={{ width : this.calculateValueAsPercentageWidth(Number(data.sales.current), Number(data.sales.target)) }}>
+                    <div className="text">Sales</div>
+                    <div className="value">{Number(data.sales.current).toLocaleString('en')}</div>
+                </div>
+                <div className="target" style={{ width : this.calculateValueAsPercentageWidth(Number(data.sales.target)-Number(data.sales.current), Number(data.sales.target)) }}>
+                    <div className="text">Target</div>
+                    <div className="value">{Number(data.sales.target).toLocaleString('en')}</div>
+                </div>
+            </div>
+        )
+    }
+
+    calculateValueAsPercentageWidth(current, target) {
+        return ((current / target) * 100) + '%';
+    }
+}
+
+export default Sales;