update

src/Pages/Home.js

@@ -13,25 +13,25 @@ const Data = [
 	{
 		title: 'Current chart',
 		backgroundColor: '#51ABAD',
-		detail: [{ smtitle: 'Total current', smValue: 18.0, iconType: 'money' }],
+		detail: [{ smtitle: 'Total current', smValue: 0, iconType: 'money' }],
 	},
 	{
 		title: 'Revenue chart',
 		backgroundColor: '#51ABAD',
 		detail: [
-			{ smtitle: 'Total revenue', smValue: 18.0, iconType: 'money' },
-			{ smtitle: 'Avg. revenue', smValue: 17.53, iconType: 'money' },
-			{ smtitle: 'Max. Revenue', smValue: 18.0, iconType: 'max' },
-			{ smtitle: 'Min. Revenue', smValue: 17.0, iconType: 'min' },
+			{ smtitle: 'Total revenue', smValue: 0, iconType: 'money' },
+			{ smtitle: 'Avg. revenue', smValue: 0, iconType: 'money' },
+			{ smtitle: 'Max. Revenue', smValue: 0, iconType: 'max' },
+			{ smtitle: 'Min. Revenue', smValue: 0, iconType: 'min' },
 		],
 	},
 	{
 		title: 'People chart',
 		backgroundColor: '#5E73F6',
 		detail: [
-			{ smtitle: 'Total People', smValue: 1105.0 },
-			{ smtitle: 'Avg. People', smValue: 3320.53 },
-			{ smtitle: 'Max. People', smValue: 4635.0, iconType: 'max' },
+			{ smtitle: 'Total People', smValue: 0 },
+			{ smtitle: 'Avg. People', smValue: 0 },
+			{ smtitle: 'Max. People', smValue: 0, iconType: 'max' },
 			{ smtitle: 'Min. People', smValue: 0, iconType: 'min' },
 		],
 	},
@@ -49,9 +49,9 @@ const Data = [
 		title: 'Fingerprint chart',
 		backgroundColor: '#5E73F6',
 		detail: [
-			{ smtitle: 'Total Fingerprint', smValue: 1105.0 },
-			{ smtitle: 'Avg. Fingerprint', smValue: 3320.53 },
-			{ smtitle: 'Max. Fingerprint', smValue: 4635.0, iconType: 'max' },
+			{ smtitle: 'Total Fingerprint', smValue: 0 },
+			{ smtitle: 'Avg. Fingerprint', smValue: 0 },
+			{ smtitle: 'Max. Fingerprint', smValue: 0, iconType: 'max' },
 			{ smtitle: 'Min. Fingerprint', smValue: 0, iconType: 'min' },
 		],
 	},
@@ -72,7 +72,6 @@ class Home extends Component {
 		userToken: null,
 		kairosUrl: null,
 		currentUser: null,
-
 		currentFeed: null,
 		currentDetail: null,
 		revenueFeed: null,
@@ -101,6 +100,7 @@ class Home extends Component {
 		keycardMax: null,
 		keycardMin: null,
 		keycardAvg: null,
+		table: null,
 	};
 
 	async componentDidMount() {
@@ -158,12 +158,9 @@ class Home extends Component {
 			],
 		};
 
-		console.log(q_data);
-
 		try {
 			axios.defaults.headers.common['Authorization'] = `Bearer ${userToken}`;
 			const response = await axios.post(kairosUrl, q_data);
-			console.log(response.data.queries[0].results);
 			this.setState({
 				currentFeed: response.data.queries[0].results[5].values,
 				revenueFeed: response.data.queries[0].results[4].values,
@@ -171,28 +168,91 @@ class Home extends Component {
 				remoteFeed: response.data.queries[0].results[2].values,
 				keycardFeed: response.data.queries[0].results[1].values,
 				fingerPrintFeed: response.data.queries[0].results[0].values,
+				currentLast: response.data.queries[0].results[5].values[response.data.queries[0].results[5].values.length - 1][1],
+				revenueTotal: this.getTotal(response.data.queries[0].results[4].values),
+				revenueMax: this.getMax(response.data.queries[0].results[4].values),
+				revenueMin: this.getMin(response.data.queries[0].results[4].values),
+				revenueAvg: this.getAvg(response.data.queries[0].results[4].values),
+				peopleTotal: this.getTotal(response.data.queries[0].results[4].values),
+				peopleMax: this.getMax(response.data.queries[0].results[3].values),
+				peopleMin: this.getMin(response.data.queries[0].results[3].values),
+				peopleAvg: this.getAvg(response.data.queries[0].results[3].values),
+				remoteTotal: this.getTotal(response.data.queries[0].results[2].values),
+				remoteMax: this.getMax(response.data.queries[0].results[2].values),
+				remoteMin: this.getMin(response.data.queries[0].results[2].values),
+				remoteAvg: this.getAvg(response.data.queries[0].results[2].values),
+				fingerPrintTotal: this.getTotal(response.data.queries[0].results[0].values),
+				fingerPrintMax: this.getMax(response.data.queries[0].results[0].values),
+				fingerPrintMin: this.getMin(response.data.queries[0].results[0].values),
+				fingerPrintAvg: this.getAvg(response.data.queries[0].results[0].values),
+				keycardTotal: this.getTotal(response.data.queries[0].results[1].values),
+				keycardMax: this.getMax(response.data.queries[0].results[1].values),
+				keycardMin: this.getMin(response.data.queries[0].results[1].values),
+				keycardAvg: this.getAvg(response.data.queries[0].results[1].values),
+				table:this.getTable(response.data.queries[0].results)
+
 			});
-			console.log(response);
 		} catch (error) {
 			console.error(error);
 		}
 	};
 
 	getSelectedFeed = selectedFeed => {
-		console.log(selectedFeed);
 		const { device, range, breakdown } = selectedFeed;
 		this.getFeedData(device, range, breakdown);
 	};
 
-	getMax() {}
+	getMax = (data) => {
+		let max = data[0][1]
+		for (let i = 1, len = data.length; i < len; i++) {
+			let v = data[i][1];
+			max = (v > max) ? v : max;
+		}
+		return max
+	}
 
-	getMin() {}
+	getMin = (data) => {
+		let min = data[0][1]
+		for (let i = 1, len = data.length; i < len; i++) {
+			let v = data[i][1];
+			min = (v < min) ? v : min;
+		}
+		return min
+	}
 
-	getAvg() {}
+	getAvg(data) {
+		let avg = data[0][1];
+		for (let i = 1, len = data.length; i < len; i++) {
+			let v = data[i][1];
+			avg = avg + v;
+		}
+		return avg / data.length
+	}
 
-	getTotal() {}
+	getTotal(data) {
+		let total = data[0][1];
+		for (let i = 1, len = data.length; i < len; i++) {
+			let v = data[i][1];
+			total = total + v;
+		}
+		return total
+	}
 
-	getLast() {}
+	getTable(data) {
+		let table = [];
+		for (let i = 0, len = data[1].values.length; i < len; i++) {
+			let v = {
+				site: 'Pichaiyat Building',
+				people: data[1].values[i][1],
+				revenue: data[4].values[i][1],
+				remote: data[2].values[i][1],
+				current: data[5].values[i][1],
+				timestamp: moment(data[1].values[i][0]).format('D/M/YY h:mm:ss a')
+			};
+			table[table.length] = v
+		}
+		return table
+	}
 
 	render() {
 		const {
@@ -219,7 +279,7 @@ class Home extends Component {
 						{/* {Data.map((item, index) => (
 							<DataCard key={index} item={item} feedData={feedData} />
 						))} */}
-						<DataCard item={Data[0]} feedData={currentFeed} total={this.state.currentLast} />
+						<DataCard item={Data[0]} feedData={currentFeed} datavalue={[{ title: "last", value: this.state.currentLast }]} />
 						<DataCard
 							item={Data[1]}
 							feedData={revenueFeed}
@@ -227,6 +287,7 @@ class Home extends Component {
 							max={this.state.revenueMax}
 							min={this.state.revenueMin}
 							avg={this.state.revenueAvg}
+							datavalue={[{ title: "total", value: this.state.revenueTotal }, { title: "avg", value: this.state.revenueAvg }, { title: "max", value: this.state.revenueMax }, { title: "min", value: this.state.revenueMin }]}
 						/>
 						<DataCard
 							item={Data[2]}
@@ -235,6 +296,7 @@ class Home extends Component {
 							max={this.state.peopleMax}
 							min={this.state.peopleMin}
 							avg={this.state.peopleAvg}
+							datavalue={[{ title: "total", value: this.state.peopleTotal }, { title: "avg", value: this.state.peopleAvg }, { title: "max", value: this.state.peopleMax }, { title: "min", value: this.state.peopleMin }]}
 						/>
 						<DataCard
 							item={Data[3]}
@@ -243,6 +305,7 @@ class Home extends Component {
 							max={this.state.remoteMax}
 							min={this.state.remoteMin}
 							avg={this.state.remoteAvg}
+							datavalue={[{ title: "total", value: this.state.remoteTotal }, { title: "avg", value: this.state.remoteAvg }, { title: "max", value: this.state.remoteMax }, { title: "min", value: this.state.remoteMin }]}
 						/>
 						<DataCard
 							item={Data[5]}
@@ -251,6 +314,7 @@ class Home extends Component {
 							max={this.state.fingerPrintMax}
 							min={this.state.fingerPrintMin}
 							avg={this.state.fingerPrintAvg}
+							datavalue={[{ title: "total", value: this.state.fingerPrintTotal }, { title: "avg", value: this.state.fingerPrintAvg }, { title: "max", value: this.state.fingerPrintMax }, { title: "min", value: this.state.fingerPrintMin }]}
 						/>
 						<DataCard
 							item={Data[4]}
@@ -259,10 +323,11 @@ class Home extends Component {
 							max={this.state.keycardMax}
 							min={this.state.keycardMin}
 							avg={this.state.keycardAvg}
+							datavalue={[{ title: "total", value: this.state.keycardTotal }, { title: "avg", value: this.state.keycardAvg }, { title: "max", value: this.state.keycardMax }, { title: "min", value: this.state.keycardMin }]}
 						/>
 					</Row>
 					<Row>
-						<DataTable />
+						<DataTable table={this.state.table}/>
 					</Row>
 				</Container>
 			</>

src/components/DataCard.js

@@ -6,8 +6,9 @@ import withWindowDimensions from '../utils/withWindowDimensions';
 import { CSVLink } from 'react-csv';
 import moment from 'moment';
 
-const SmCard = props => {
+export const SmCard = props => {
 	const smdata = props.smitem;
+	const datavalue = props.datavalue || 0;
 	const iconStyle = { style: { height: '1.5em', width: '1.5em' } };
 	return (
 		<Card style={{ padding: '.7em', color: 'white', backgroundColor: props.backgroundColor }}>
@@ -25,7 +26,7 @@ const SmCard = props => {
 					)}
 				</Col>
 				<Col>
-					<h2 style={{ textAlign: 'right' }}>{smdata.smValue}</h2>
+					<h2 style={{ textAlign: 'right' }}>{datavalue.value}</h2>
 				</Col>
 			</Row>
 		</Card>
@@ -87,7 +88,7 @@ const DataCard = props => {
 				{data.detail.map((item, index) =>
 					data.detail.length === 1 ? (
 						<Col key={index} md={12} style={{ marginTop: '.7em' }}>
-							<SmCard backgroundColor={data.backgroundColor} smitem={item} />
+							<SmCard backgroundColor={data.backgroundColor} smitem={item} datavalue={props.datavalue[index]}/>
 						</Col>
 					) : (
 						<Col
@@ -99,7 +100,7 @@ const DataCard = props => {
 								paddingRight: !props.isMobileSized ? (index % 2 !== 0 ? '15px' : '7.5px') : '15px',
 							}}
 						>
-							<SmCard backgroundColor={data.backgroundColor} smitem={item} />
+							<SmCard backgroundColor={data.backgroundColor} smitem={item} datavalue={props.datavalue[index]}/>
 						</Col>
 					)
 				)}

src/components/DataTable.js

@@ -125,17 +125,12 @@ const mockdata = [
 		timestamp: '07/31/2019 14:23',
 	},
 ];
-export default class DataTable extends React.Component {
-	constructor(props) {
-		super(props);
-		this.state = {
-			data: mockdata,
-			activePage: 1,
-			itemsPerPage: 10,
-		};
-		this.handleClick = this.handleClick.bind(this);
-		this.prevClick = this.prevClick.bind(this);
-		this.nextClick = this.nextClick.bind(this);
+export default class DataTable extends React.PureComponent {
+
+	state = {
+		data: [],
+		activePage: 1,
+		itemsPerPage: 10,
 	}
 
 	handleClick(e) {
@@ -160,6 +155,13 @@ export default class DataTable extends React.Component {
 		const currentItem = data.slice(firstIndex, lastIndex);
 		const totalPage = Math.ceil(data.length / itemsPerPage);
 
+		if (this.props.table) {
+			let data1 = this.props.table
+			this.setState({
+				data: data1
+			})
+		}
+
 		const renderItem = currentItem.map((item, index) => {
 			return (
 				<tr key={index}>
@@ -223,8 +225,8 @@ export default class DataTable extends React.Component {
 					{activePage === totalPage ? (
 						<Pagination.Next disabled />
 					) : (
-						<Pagination.Next onClick={this.nextClick} />
-					)}
+							<Pagination.Next onClick={this.nextClick} />
+						)}
 				</Pagination>
 			</Col>
 		);