Skip to content

T
toiletcoin
Commit c84d5bb8 by OuiAtichat
Options

update

parent df4de448
Showing with 92 additions and 80 deletions
src/Pages/Home.js
import React, { Component } from 'react'; import React, { Component } from 'react';
import app, { db } from '../firebase'; import app, { db } from '../firebase';
import { Row, Container } from 'react-bootstrap'; import { Row, Container, Col } from 'react-bootstrap';
import DataTable from '../components/DataTable'; import DataTable from '../components/DataTable';
import NavBar from '../components/NavBar'; import NavBar from '../components/NavBar';
import DataCard from '../components/DataCard'; import DataCard, { SmCard } from '../components/DataCard';
import GetDataSelection from '../components/GetDataSelection/GetDataSelection'; import GetDataSelection from '../components/GetDataSelection/GetDataSelection';
import Mapbox from '../components/Mapbox'; import Mapbox from '../components/Mapbox';
import axios from 'axios'; import axios from 'axios';
...@@ -13,56 +13,56 @@ const Data = [ ...@@ -13,56 +13,56 @@ const Data = [
{ {
title: 'Current chart', title: 'Current chart',
backgroundColor: '#51ABAD', backgroundColor: '#51ABAD',
detail: [{ smtitle: 'Total current', smnumber: 0, iconType: 'money' }], detail: [{ smtitle: 'Total current', smValue: 18.0, iconType: 'money' }],
}, },
{ {
title: 'Revenue chart', title: 'Revenue chart',
backgroundColor: '#51ABAD', backgroundColor: '#51ABAD',
detail: [ detail: [
{ smtitle: 'Total revenue', smnumber: 18.0, iconType: 'money' }, { smtitle: 'Total revenue', smValue: 18.0, iconType: 'money' },
{ smtitle: 'Avg. revenue', smnumber: 17.53, iconType: 'money' }, { smtitle: 'Avg. revenue', smValue: 17.53, iconType: 'money' },
{ smtitle: 'Max. Revenue', smnumber: 18.0, iconType: 'max' }, { smtitle: 'Max. Revenue', smValue: 18.0, iconType: 'max' },
{ smtitle: 'Min. Revenue', smnumber: 17.0, iconType: 'min' }, { smtitle: 'Min. Revenue', smValue: 17.0, iconType: 'min' },
], ],
}, },
{ {
title: 'People chart', title: 'People chart',
backgroundColor: '#5E73F6', backgroundColor: '#5E73F6',
detail: [ detail: [
{ smtitle: 'Total People', smnumber: 1105.0 }, { smtitle: 'Total People', smValue: 1105.0 },
{ smtitle: 'Avg. People', smnumber: 3320.53 }, { smtitle: 'Avg. People', smValue: 3320.53 },
{ smtitle: 'Max. People', smnumber: 4635.0, iconType: 'max' }, { smtitle: 'Max. People', smValue: 4635.0, iconType: 'max' },
{ smtitle: 'Min. People', smnumber: 0, iconType: 'min' }, { smtitle: 'Min. People', smValue: 0, iconType: 'min' },
], ],
}, },
{ {
title: 'Remote chart', title: 'Remote chart',
backgroundColor: '#5E73F6', backgroundColor: '#5E73F6',
detail: [ detail: [
{ smtitle: 'Total Remote', smnumber: 0 }, { smtitle: 'Total Remote', smValue: 0 },
{ smtitle: 'Avg. Remote', smnumber: 0 }, { smtitle: 'Avg. Remote', smValue: 0 },
{ smtitle: 'Max. Remote', smnumber: 0, iconType: 'max' }, { smtitle: 'Max. Remote', smValue: 0, iconType: 'max' },
{ smtitle: 'Min. Remote', smnumber: 0, iconType: 'min' }, { smtitle: 'Min. Remote', smValue: 0, iconType: 'min' },
], ],
}, },
{ {
title: 'Fingerprint chart', title: 'Fingerprint chart',
backgroundColor: '#5E73F6', backgroundColor: '#5E73F6',
detail: [ detail: [
{ smtitle: 'Total Fingerprint', smnumber: 1105.0 }, { smtitle: 'Total Fingerprint', smValue: 1105.0 },
{ smtitle: 'Avg. Fingerprint', smnumber: 3320.53 }, { smtitle: 'Avg. Fingerprint', smValue: 3320.53 },
{ smtitle: 'Max. Fingerprint', smnumber: 4635.0, iconType: 'max' }, { smtitle: 'Max. Fingerprint', smValue: 4635.0, iconType: 'max' },
{ smtitle: 'Min. Fingerprint', smnumber: 0, iconType: 'min' }, { smtitle: 'Min. Fingerprint', smValue: 0, iconType: 'min' },
], ],
}, },
{ {
title: 'Keycard chart', title: 'Keycard chart',
backgroundColor: '#5E73F6', backgroundColor: '#5E73F6',
detail: [ detail: [
{ smtitle: 'Total Keycard', smnumber: 0 }, { smtitle: 'Total Keycard', smValue: 0 },
{ smtitle: 'Avg. Keycard', smnumber: 0 }, { smtitle: 'Avg. Keycard', smValue: 0 },
{ smtitle: 'Max. Keycard', smnumber: 0, iconType: 'max' }, { smtitle: 'Max. Keycard', smValue: 0, iconType: 'max' },
{ smtitle: 'Min. Keycard', smnumber: 0, iconType: 'min' }, { smtitle: 'Min. Keycard', smValue: 0, iconType: 'min' },
], ],
}, },
]; ];
...@@ -72,19 +72,18 @@ class Home extends Component { ...@@ -72,19 +72,18 @@ class Home extends Component {
userToken: null, userToken: null,
kairosUrl: null, kairosUrl: null,
currentUser: null, currentUser: null,
feedData: null,
};
// constructor(props) {
// super(props);
// // Don't call this.setState() here!
// this.state = { userToken: null, kairosUrl: null, currentUser: null, feedData: null };
// } currentFeed: null,
currentDetail: null,
revenueFeed: null,
peopleFeed: null,
remoteFeed: null,
fingerPrintFeed: null,
keycardFeed: null,
};
async componentDidMount() { async componentDidMount() {
await this.getFireStoreData(); await this.getFireStoreData();
this.getCurrentUser(); this.getCurrentUser();
// await this.getFeedData(); // await this.getFeedData();
} }
...@@ -93,6 +92,7 @@ class Home extends Component { ...@@ -93,6 +92,7 @@ class Home extends Component {
const configData = await db.collection('config').get(); const configData = await db.collection('config').get();
//get all data from collection 'config' //get all data from collection 'config'
configData.forEach(doc => { configData.forEach(doc => {
console.log(doc.data());
this.setState({ this.setState({
kairosUrl: doc.data().kairosUrl, kairosUrl: doc.data().kairosUrl,
userToken: doc.data().userToken, userToken: doc.data().userToken,
...@@ -105,36 +105,14 @@ class Home extends Component { ...@@ -105,36 +105,14 @@ class Home extends Component {
this.setState({ currentUser: displayName || email }); this.setState({ currentUser: displayName || email });
}; };
// getFeedData = async () => { getFeedData = async (deviceId, selectedRange, breakdown) => {
// const response = await axios.get(
// 'https://api.nexpie.io/feed/metric/11add2ec-89e7-4985-8525-b0421896b7a2?token=eyJhbGciOiJFUzI1NiIsInR5cCI6IkpXVCJ9.eyJjdHgiOnsib3duZXIiOiJVNDMwMDQ1Mzc3ODY2In0sInNjb3BlIjpbXSwiaWF0IjoxNTU3MjIzOTQwLCJuYmYiOjE1NTcyMjM5NDAsImV4cCI6MTYyMDMzOTE0MCwiZXhwaXJlSW4iOjYzMTE1MjAwLCJqdGkiOiJua1NKcHMyMSIsImlzcyI6ImNlcjp1c2VydG9rZW4ifQ.1I2m6qdNxPzicYNRuKrFOp-Jn9DaSfV0pdAyDtjD7-BOZzRmsqBeIUWxmE24MQWIFlGXuDXq0tLxvBtiEdySBA&starttime=1564938060076&endtime=1565024340076'
// );
// this.setState({ feedData: response.data.metrics[0].value });
// };
// queryGenerator = (device_id, selectedRange) => {
// // let now = endtime ? endtime : new Date().getTime();
// // console.log(now);
// // console.log(moment().valueOf());
// // const { startDate, endDate } = selectedRange;
// // console.log(startDate, endDate);
// let q_data = ;
// return q_data;
// };
getFeedData = async (
deviceId,
selectedRange = { startDate: moment().valueOf(), endDate: moment().valueOf() },
breakdown
) => {
const { kairosUrl, userToken } = this.state; const { kairosUrl, userToken } = this.state;
const { startDate, endDate } = selectedRange; const { startDate, endDate } = selectedRange;
const now = moment().valueOf();
// let q_data = this.queryGenerator(deviceId, selectedRange);
// let now = new Date().getTime();
let q_data = { let q_data = {
start_absolute: startDate, start_absolute: startDate || now,
end_absolute: endDate, end_absolute: endDate || now,
metrics: [ metrics: [
{ {
name: deviceId, name: deviceId,
...@@ -151,8 +129,8 @@ class Home extends Component { ...@@ -151,8 +129,8 @@ class Home extends Component {
{ {
name: 'avg', name: 'avg',
sampling: { sampling: {
value: 1000, value: 1,
unit: 'milliseconds', unit: breakdown,
}, },
}, },
], ],
...@@ -164,35 +142,59 @@ class Home extends Component { ...@@ -164,35 +142,59 @@ class Home extends Component {
try { try {
const response = await axios.post(kairosUrl, q_data); 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,
peopleFeed: response.data.queries[0].results[3].values,
remoteFeed: response.data.queries[0].results[2].values,
keycardFeed: response.data.queries[0].results[1].values,
fingerPrintFeed: response.data.queries[0].results[0].values,
});
console.log(response); console.log(response);
} catch (error) { } catch (error) {
console.error(error); console.error(error);
} }
}; };
handleConfirm = selectedFeed => { getSelectedFeed = selectedFeed => {
console.log(selectedFeed); console.log(selectedFeed);
const { device, range, breakdown } = selectedFeed; const { device, range, breakdown } = selectedFeed;
this.getFeedData(device, range, breakdown); this.getFeedData(device, range, breakdown);
}; };
render() { render() {
const { currentUser, feedData } = this.state; const {
currentUser,
currentFeed,
revenueFeed,
peopleFeed,
remoteFeed,
fingerPrintFeed,
keycardFeed,
} = this.state;
return ( return (
<> <>
<NavBar user={currentUser} /> <NavBar user={currentUser} />
<Container style={{ padding: '30px', maxWidth: '990px' }}> <Container style={{ padding: '30px', maxWidth: '990px' }}>
<Row> <Row>
<GetDataSelection onConfirm={this.handleConfirm} /> <GetDataSelection onConfirm={this.getSelectedFeed} />
</Row> </Row>
<Row> <Row>
<Mapbox /> <Mapbox />
</Row> </Row>
<Row> <Row>
{Data.map((item, index) => ( {/* {Data.map((item, index) => (
<DataCard key={index} item={item} feedData={feedData} /> <DataCard key={index} item={item} feedData={feedData} />
))} ))} */}
<DataCard item={Data[0]} feedData={currentFeed} />
<DataCard item={Data[1]} feedData={revenueFeed} />
<DataCard item={Data[2]} feedData={peopleFeed} />
<DataCard item={Data[3]} feedData={remoteFeed} />
<DataCard item={Data[5]} feedData={fingerPrintFeed} />
<DataCard item={Data[4]} feedData={keycardFeed} />
</Row> </Row>
<Row> <Row>
<DataTable /> <DataTable />
......
src/components/DataCard.js
import React from 'react'; import React, { useState } from 'react';
import { Card, Col, Row, Button, Tooltip } from 'react-bootstrap'; 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 } from 'recharts'; import { AreaChart, Area, XAxis, YAxis, ResponsiveContainer } from 'recharts';
...@@ -6,7 +6,7 @@ import withWindowDimensions from '../utils/withWindowDimensions'; ...@@ -6,7 +6,7 @@ import withWindowDimensions from '../utils/withWindowDimensions';
import { CSVLink } from 'react-csv'; import { CSVLink } from 'react-csv';
import moment from 'moment'; import moment from 'moment';
const SmCard = props => { export const SmCard = props => {
const smdata = props.smitem; const smdata = props.smitem;
const iconStyle = { style: { height: '1.5em', width: '1.5em' } }; const iconStyle = { style: { height: '1.5em', width: '1.5em' } };
return ( return (
...@@ -25,7 +25,7 @@ const SmCard = props => { ...@@ -25,7 +25,7 @@ const SmCard = props => {
)} )}
</Col> </Col>
<Col> <Col>
<h2 style={{ textAlign: 'right' }}>{smdata.smnumber}</h2> <h2 style={{ textAlign: 'right' }}>{smdata.smValue}</h2>
</Col> </Col>
</Row> </Row>
</Card> </Card>
...@@ -36,7 +36,10 @@ const DataCard = props => { ...@@ -36,7 +36,10 @@ const DataCard = props => {
const data = props.item; const data = props.item;
if (props.feedData) { if (props.feedData) {
var dataObj = props.feedData.map(value => ({ xAxis: moment(value[0]).format('DD MMM YY'), yAxis: value[1] })); var dataObj = props.feedData.map(value => ({
xAxis: moment(value[0]).format('D/M/YY h:mm:ss a'),
yAxis: value[1],
}));
// console.log(dataObj); // console.log(dataObj);
} }
......
src/components/GetDataSelection/DateRangeSeletion.js
...@@ -27,7 +27,6 @@ class PredefinedRanges extends Component { ...@@ -27,7 +27,6 @@ class PredefinedRanges extends Component {
}; };
// handleEvent = (event, picker) => { // handleEvent = (event, picker) => {
// }; // };
handleApply = (event, picker) => { handleApply = (event, picker) => {
......
src/components/GetDataSelection/GetDataSelection.js
import React, { Component } from 'react'; 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';
class GetDataSelection extends Component { class GetDataSelection extends Component {
state = { state = {
device: '', device: '3d2951a5-fa10-4d56-abae-bc471f3d2e1f',
range: [], range: {
breakdown: 'minute', startDate: moment()
.subtract(1, 'days')
.valueOf(),
endDate: moment().valueOf(),
},
breakdown: 'minutes',
}; };
handleClickGo = e => { handleClickGo = e => {
this.props.onConfirm && this.props.onConfirm(this.state); this.props.onConfirm && this.props.onConfirm(this.state);
}; };
handleSelectedRange = selectedRange => { getSelectedRange = selectedRange => {
this.setState({ range: selectedRange }); this.setState({ range: selectedRange });
}; };
...@@ -25,6 +31,7 @@ class GetDataSelection extends Component { ...@@ -25,6 +31,7 @@ class GetDataSelection extends Component {
<Col md> <Col md>
<Form.Control <Form.Control
as="select" as="select"
defaultValue={this.state.device}
onChange={e => { onChange={e => {
console.log(e.target.value); console.log(e.target.value);
this.setState({ device: e.target.value }); this.setState({ device: e.target.value });
...@@ -36,21 +43,22 @@ class GetDataSelection extends Component { ...@@ -36,21 +43,22 @@ class GetDataSelection extends Component {
</Form.Control> </Form.Control>
</Col> </Col>
<Col md> <Col md>
<DateRangeSeletion selectedRange={this.handleSelectedRange} /> <DateRangeSeletion selectedRange={this.getSelectedRange} />
</Col> </Col>
<Col md={3}> <Col md={3}>
<Form.Control <Form.Control
as="select" as="select"
defaultValue={this.state.breakdown}
onChange={e => { onChange={e => {
console.log(e.target.value); console.log(e.target.value);
this.setState({ breakdown: e.target.value }); this.setState({ breakdown: e.target.value });
}} }}
> >
<option value="minute">Breakdown by minute</option> <option value="minutes">Breakdown by minute</option>
<option value="hour">Breakdown by hour</option> <option value="hours">Breakdown by hour</option>
<option value="day">Breakdown by day</option> <option value="days">Breakdown by day</option>
<option value="week">Breakdown by week</option> <option value="weeks">Breakdown by week</option>
<option value="month">Breakdown by month</option> <option value="months">Breakdown by month</option>
</Form.Control> </Form.Control>
</Col> </Col>
<Col md={1}> <Col md={1}>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment