Finished visualisation

src/Components/DashboardComponent/Dashboard.tsx

@@ -10,7 +10,8 @@ export default class Dashboard extends React.Component<{
 }, {
 	dto: API_DTO,
 	response: RESPONSE_DTO,
-	ReportingRepository: ReportingRepository
+	ReportingRepository: ReportingRepository,
+	showGraph: boolean
 }> {
 	constructor(props: any) {
 		super(props);
@@ -25,7 +26,8 @@ export default class Dashboard extends React.Component<{
 				this.state = {
 					 dto: DTO,
 					 response: new RESPONSE_DTO(),
-					 ReportingRepository: new ReportingRepository(DTO)
+					 ReportingRepository: new ReportingRepository(DTO),
+					 showGraph: false
 				}
 			}
 		} catch (err) {
@@ -41,7 +43,8 @@ export default class Dashboard extends React.Component<{
 	   			this.state = {
 	   				 dto: DTO,
 					 response: new RESPONSE_DTO(),
-	   				 ReportingRepository: new ReportingRepository(DTO)
+					 ReportingRepository: new ReportingRepository(DTO),
+					 showGraph: false
 	   			}
 	   		} else {
 	   			// Route back to / if neither is the case.
@@ -52,6 +55,8 @@ export default class Dashboard extends React.Component<{
 		this.checkSecondDate = this.checkSecondDate.bind(this);
 		this.getItemsFromApi = this.getItemsFromApi.bind(this);
 		this.getResponseDTO = this.getResponseDTO.bind(this);
+		this.getGraphEnabled = this.getGraphEnabled.bind(this);
+		this.setGraph = this.setGraph.bind(this);
 		this.getItemsFromApi();
 	}
 
@@ -90,12 +95,22 @@ export default class Dashboard extends React.Component<{
 		return this.state.response;
 	}
 
+	getGraphEnabled() {
+		return this.state.showGraph;
+	}
+
+	setGraph() {
+		this.setState({ showGraph: !this.state.showGraph });
+	}
+
 	render () {
 		return (<DashboardView
 					checkFirstDate={this.checkFirstDate}
 					checkSecondDate={this.checkSecondDate}
 					getItemsFromApi={this.getItemsFromApi}
 					getResponseDTO={this.getResponseDTO}
+					getGraphEnabled={this.getGraphEnabled}
+					setGraph={this.setGraph}
 				/>)
 	}
 }

src/Views/DashboardView.tsx

@@ -1,14 +1,17 @@
 import React from 'react';
 import { Container, Row, Col, FormControl, Button, InputGroup, Card } from 'react-bootstrap';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faSync } from '@fortawesome/free-solid-svg-icons';
-import Table from "./TableView";
+import { faSync, faChartLine } from '@fortawesome/free-solid-svg-icons';
+import TableView from "./TableView";
+import GraphView from "./GraphView";
 
 export default class DashboardView extends React.Component<{
 	checkFirstDate: any,
 	checkSecondDate: any,
 	getItemsFromApi: any,
-	getResponseDTO: any
+	getResponseDTO: any,
+	getGraphEnabled: any,
+	setGraph: any
 }> {
 	render () {
 		return (
@@ -85,7 +88,19 @@ export default class DashboardView extends React.Component<{
 						</Col>
 					</Row>
 					<Row>
-						<Table
+						<Col>
+							<br />
+							<Button variant="secondary" onClick={this.props.setGraph}><FontAwesomeIcon icon={faChartLine} /></Button>
+							{ this.props.getGraphEnabled() && 
+								<GraphView 
+									data={ this.props.getResponseDTO().by_date }
+								/>
+							}
+						</Col>
+					</Row>
+					<Row>
+						<Col>
+						<TableView
 						  columns={[{
 							  dataField: 'date',
 							  text: 'Date',
@@ -101,6 +116,8 @@ export default class DashboardView extends React.Component<{
 							  text: 'Visitors With Conversation Count'
 							}]}
 						  data={ this.props.getResponseDTO().by_date } />
+						</Col>
+						
 					</Row>
 					<Row>
 						<Col>

src/Views/GraphView.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import { ResponsiveAreaBump } from '@nivo/bump';
+
+interface IData {
+    id: string;
+    data: Array<{
+        x: any,
+        y: any
+    }>
+};
+
+export default class GraphView extends React.Component<{
+	data: any
+}> {
+    parseData(): Array<IData>{
+      // Object needing to be returned: 
+      // { id: "missed_chat_count", data: [{x: int (DATE), y: int (Count)}] }
+      // { id: "conversation_count", data: [{x: int (DATE), y: int (Count)}] }
+      // { id: "visitors_with_conversation_count", data: [{x: int (DATE), y: int (Count)}] }
+      const array: Array<IData> = new Array<IData>();
+      array.push({ id: "missed_chat_count", data: [] });
+      array.push({ id: "conversation_count", data: [] });
+      array.push({ id: "visitors_with_conversation_count", data: [] });
+      this.props.data.forEach((_item: any) => {
+        array[0].data.push({ x: _item.date, y: _item.missed_chat_count });
+        array[1].data.push({ x: _item.date, y: _item.conversation_count });
+        array[2].data.push({ x: _item.date, y: _item.visitors_with_conversation_count });
+      });
+      return array;
+    }
+
+
+	render () {
+		return (
+        <div className="GraphView">
+            <ResponsiveAreaBump
+                data={this.parseData()}
+                margin={{ top: 40, right: 100, bottom: 40, left: 100 }}
+                spacing={4}
+                colors={{ scheme: 'nivo' }}
+                blendMode="multiply"
+                startLabel="id"
+                axisTop={{
+                    tickSize: 5,
+                    tickPadding: 5,
+                    tickRotation: 0,
+                    legend: '',
+                    legendPosition: 'middle',
+                    legendOffset: -36
+                }}
+                axisBottom={{
+                    tickSize: 5,
+                    tickPadding: 5,
+                    tickRotation: 0,
+                    legend: '',
+                    legendPosition: 'middle',
+                    legendOffset: 32
+                }}
+            />
+        </div>
+        )
+	}
+}

src/Views/TableView.tsx

@@ -4,13 +4,13 @@ import paginationFactory from 'react-bootstrap-table2-paginator';
 import 'react-bootstrap-table-next/dist/react-bootstrap-table2.min.css';
 import 'react-bootstrap-table2-paginator/dist/react-bootstrap-table2-paginator.min.css';
 
-export default class Table extends React.Component<{
+export default class TableView extends React.Component<{
 	columns: any,
 	data: any
 }> {
 	render () {
-		return (<div className="fullSize">
-		<br />
+		return (<div>
+				<br />
 				<BootstrapTable
 				  bootstrap4
 				  keyField='date'

src/index.css

@@ -28,11 +28,10 @@ body {
 	border-radius: 7px;
 }
 
-.btn {
+.btn-primary {
 	width: 100%;
 }
 
-.fullSize {
-	width: 96%;
-	margin: 0 auto;
-}
+.GraphView {
+	height: 250px;
+}