update

src/Pages/Home.js

@@ -161,7 +161,6 @@ class Home extends Component {
 		const { kairosUrl, userToken } = this.state;
 		const { kairosUrl, userToken } = this.state;
 		const { startDate, endDate } = selectedRange;
 		const { startDate, endDate } = selectedRange;
 		const now = moment().valueOf();
 		const now = moment().valueOf();
-
 		let q_data = {
 		let q_data = {
 			start_absolute: startDate || now,
 			start_absolute: startDate || now,
 			end_absolute: endDate || now,
 			end_absolute: endDate || now,
@@ -283,7 +282,7 @@ class Home extends Component {
 				revenue: data[4].values[i][1],
 				revenue: data[4].values[i][1],
 				remote: data[2].values[i][1],
 				remote: data[2].values[i][1],
 				current: data[5].values[i][1],
 				current: data[5].values[i][1],
-				timestamp: moment(data[1].values[i][0]).format('D/M/YY h:mm:ss a'),
+				timestamp: moment(data[1].values[i][0]).format('D/M/YY H:mm'),
 			};
 			};
 			table[table.length] = v;
 			table[table.length] = v;
 		}
 		}

src/components/DataCard.js

-import React, { useState } from 'react';
-import { Card, Col, Row, Button } from 'react-bootstrap';
+import React from 'react';
+import { Card, Col, Row, Button, Tooltip } from 'react-bootstrap';
 import { FaMoneyBillAlt, FaArrowUp, FaArrowDown, FaUserFriends, FaFileCsv } from 'react-icons/fa';
 import { FaMoneyBillAlt, FaArrowUp, FaArrowDown, FaUserFriends, FaFileCsv } from 'react-icons/fa';
 import { AreaChart, Area, XAxis, YAxis, ResponsiveContainer, Tooltip } from 'recharts';
 import { AreaChart, Area, XAxis, YAxis, ResponsiveContainer, Tooltip } from 'recharts';
 import withWindowDimensions from '../utils/withWindowDimensions';
 import withWindowDimensions from '../utils/withWindowDimensions';
@@ -26,7 +26,7 @@ export const SmCard = props => {
 					)}
 					)}
 				</Col>
 				</Col>
 				<Col>
 				<Col>
-					<h2 style={{ textAlign: 'right' }}>{datavalue.value}</h2>
+					<h3 style={{ textAlign: 'right' }}>{datavalue.value}</h3>
 				</Col>
 				</Col>
 			</Row>
 			</Row>
 		</Card>
 		</Card>
@@ -38,7 +38,7 @@ const DataCard = props => {
 
 
 	if (props.feedData) {
 	if (props.feedData) {
 		var dataObj = props.feedData.map(value => ({
 		var dataObj = props.feedData.map(value => ({
-			xAxis: moment(value[0]).format('D/M/YY h:mm:ss a'),
+			xAxis: moment(value[0]).format('D/M/YY H:mm'),
 			yAxis: value[1],
 			yAxis: value[1],
 		}));
 		}));
 		console.log(dataObj);
 		console.log(dataObj);

src/components/DataTable.js

@@ -25,6 +25,19 @@ export default class DataTable extends React.PureComponent {
 			activePage: this.state.activePage + 1,
 			activePage: this.state.activePage + 1,
 		});
 		});
 	};
 	};
+
+	firstClick = () => {
+		this.setState({
+			activePage: 1,
+		});
+	};
+	lastClick = () => {
+		const { data, itemsPerPage } = this.state;
+		const totalPage = Math.ceil(data.length / itemsPerPage);
+		this.setState({
+			activePage: totalPage,
+		});
+	};
 	render() {
 	render() {
 		const { data, activePage, itemsPerPage } = this.state;
 		const { data, activePage, itemsPerPage } = this.state;
 		const lastIndex = activePage * itemsPerPage;
 		const lastIndex = activePage * itemsPerPage;
@@ -57,13 +70,15 @@ export default class DataTable extends React.PureComponent {
 			pageNumbers.push(i);
 			pageNumbers.push(i);
 		}
 		}
 
 
-		const renderPageNumbers = pageNumbers.map(number => {
-			return (
-				<Pagination.Item active={number === activePage} key={number} id={number} onClick={this.handleClick}>
-					{number}
-				</Pagination.Item>
-			);
-		});
+		const renderPageNumbers = pageNumbers
+			.filter(number => number > activePage - 5 && number < activePage + 5)
+			.map(number => {
+				return (
+					<Pagination.Item active={number === activePage} key={number} id={number} onClick={this.handleClick}>
+						{number}
+					</Pagination.Item>
+				);
+			});
 
 
 		return (
 		return (
 			<Col>
 			<Col>
@@ -88,14 +103,12 @@ export default class DataTable extends React.PureComponent {
 					</thead>
 					</thead>
 					<tbody>{renderItem}</tbody>
 					<tbody>{renderItem}</tbody>
 				</Table>
 				</Table>
-				<Pagination size="sm" style={{ marginTop: 5 }}>
-					{activePage === 1 ? <Pagination.Prev disabled /> : <Pagination.Prev onClick={this.prevClick} />}
+				<Pagination size="sm" style={{ marginTop: 5, justifyContent: 'center' }}>
+					<Pagination.First onClick={this.firstClick} disabled={activePage === 1} />
+					<Pagination.Prev onClick={this.prevClick} disabled={activePage === 1} />
 					{renderPageNumbers}
 					{renderPageNumbers}
-					{activePage === totalPage ? (
-						<Pagination.Next disabled />
-					) : (
-						<Pagination.Next onClick={this.nextClick} />
-					)}
+					<Pagination.Next onClick={this.nextClick} disabled={activePage === totalPage} />
+					<Pagination.Last onClick={this.lastClick} disabled={activePage === totalPage} />
 				</Pagination>
 				</Pagination>
 			</Col>
 			</Col>
 		);
 		);

src/components/GetDataSelection/GetDataSelection.js

@@ -2,7 +2,6 @@ import React, { Component } from 'react';
 import { Col, Form, Button } from 'react-bootstrap';
 import { Col, Form, Button } from 'react-bootstrap';
 import DateRangeSeletion from './DateRangeSeletion';
 import DateRangeSeletion from './DateRangeSeletion';
 import moment from 'moment';
 import moment from 'moment';
-import { db } from '../../firebase';
 
 
 class GetDataSelection extends Component {
 class GetDataSelection extends Component {
 	state = {
 	state = {
@@ -38,7 +37,6 @@ class GetDataSelection extends Component {
 							as="select"
 							as="select"
 							defaultValue={this.state.device}
 							defaultValue={this.state.device}
 							onChange={e => {
 							onChange={e => {
-								console.log(e.target.value);
 								this.setState({ device: e.target.value });
 								this.setState({ device: e.target.value });
 							}}
 							}}
 						>
 						>
@@ -63,7 +61,6 @@ class GetDataSelection extends Component {
 							as="select"
 							as="select"
 							defaultValue={this.state.breakdown}
 							defaultValue={this.state.breakdown}
 							onChange={e => {
 							onChange={e => {
-								console.log(e.target.value);
 								this.setState({ breakdown: e.target.value });
 								this.setState({ breakdown: e.target.value });
 							}}
 							}}
 						>
 						>