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 app, { db } from '../firebase';
import { Row, Container } from 'react-bootstrap';
import { Row, Container, Col } from 'react-bootstrap';
import DataTable from '../components/DataTable';
import NavBar from '../components/NavBar';
import DataCard from '../components/DataCard';
import DataCard, { SmCard } from '../components/DataCard';
import GetDataSelection from '../components/GetDataSelection/GetDataSelection';
import Mapbox from '../components/Mapbox';
import axios from 'axios';
......@@ -13,56 +13,56 @@ const Data = [
{
title: 'Current chart',
backgroundColor: '#51ABAD',
detail: [{ smtitle: 'Total current', smnumber: 0, iconType: 'money' }],
detail: [{ smtitle: 'Total current', smValue: 18.0, iconType: 'money' }],
},
{
title: 'Revenue chart',
backgroundColor: '#51ABAD',
detail: [
{ smtitle: 'Total revenue', smnumber: 18.0, iconType: 'money' },
{ smtitle: 'Avg. revenue', smnumber: 17.53, iconType: 'money' },
{ smtitle: 'Max. Revenue', smnumber: 18.0, iconType: 'max' },
{ smtitle: 'Min. Revenue', smnumber: 17.0, iconType: 'min' },
{ 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' },
],
},
{
title: 'People chart',
backgroundColor: '#5E73F6',
detail: [
{ smtitle: 'Total People', smnumber: 1105.0 },
{ smtitle: 'Avg. People', smnumber: 3320.53 },
{ smtitle: 'Max. People', smnumber: 4635.0, iconType: 'max' },
{ smtitle: 'Min. People', smnumber: 0, iconType: 'min' },
{ smtitle: 'Total People', smValue: 1105.0 },
{ smtitle: 'Avg. People', smValue: 3320.53 },
{ smtitle: 'Max. People', smValue: 4635.0, iconType: 'max' },
{ smtitle: 'Min. People', smValue: 0, iconType: 'min' },
],
},
{
title: 'Remote chart',
backgroundColor: '#5E73F6',
detail: [
{ smtitle: 'Total Remote', smnumber: 0 },
{ smtitle: 'Avg. Remote', smnumber: 0 },
{ smtitle: 'Max. Remote', smnumber: 0, iconType: 'max' },
{ smtitle: 'Min. Remote', smnumber: 0, iconType: 'min' },
{ smtitle: 'Total Remote', smValue: 0 },
{ smtitle: 'Avg. Remote', smValue: 0 },
{ smtitle: 'Max. Remote', smValue: 0, iconType: 'max' },
{ smtitle: 'Min. Remote', smValue: 0, iconType: 'min' },
],
},
{
title: 'Fingerprint chart',
backgroundColor: '#5E73F6',
detail: [
{ smtitle: 'Total Fingerprint', smnumber: 1105.0 },
{ smtitle: 'Avg. Fingerprint', smnumber: 3320.53 },
{ smtitle: 'Max. Fingerprint', smnumber: 4635.0, iconType: 'max' },
{ smtitle: 'Min. Fingerprint', smnumber: 0, iconType: 'min' },
{ smtitle: 'Total Fingerprint', smValue: 1105.0 },
{ smtitle: 'Avg. Fingerprint', smValue: 3320.53 },
{ smtitle: 'Max. Fingerprint', smValue: 4635.0, iconType: 'max' },
{ smtitle: 'Min. Fingerprint', smValue: 0, iconType: 'min' },
],
},
{
title: 'Keycard chart',
backgroundColor: '#5E73F6',
detail: [
{ smtitle: 'Total Keycard', smnumber: 0 },
{ smtitle: 'Avg. Keycard', smnumber: 0 },
{ smtitle: 'Max. Keycard', smnumber: 0, iconType: 'max' },
{ smtitle: 'Min. Keycard', smnumber: 0, iconType: 'min' },
{ smtitle: 'Total Keycard', smValue: 0 },
{ smtitle: 'Avg. Keycard', smValue: 0 },
{ smtitle: 'Max. Keycard', smValue: 0, iconType: 'max' },
{ smtitle: 'Min. Keycard', smValue: 0, iconType: 'min' },
],
},
];
......@@ -72,19 +72,18 @@ class Home extends Component {
userToken: null,
kairosUrl: 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() {
await this.getFireStoreData();
this.getCurrentUser();
// await this.getFeedData();
}
......@@ -93,6 +92,7 @@ class Home extends Component {
const configData = await db.collection('config').get();
//get all data from collection 'config'
configData.forEach(doc => {
console.log(doc.data());
this.setState({
kairosUrl: doc.data().kairosUrl,
userToken: doc.data().userToken,
......@@ -105,36 +105,14 @@ class Home extends Component {
this.setState({ currentUser: displayName || email });
};
// getFeedData = async () => {
// 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
) => {
getFeedData = async (deviceId, selectedRange, breakdown) => {
const { kairosUrl, userToken } = this.state;
const { startDate, endDate } = selectedRange;
const now = moment().valueOf();
// let q_data = this.queryGenerator(deviceId, selectedRange);
// let now = new Date().getTime();
let q_data = {
start_absolute: startDate,
end_absolute: endDate,
start_absolute: startDate || now,
end_absolute: endDate || now,
metrics: [
{
name: deviceId,
......@@ -151,8 +129,8 @@ class Home extends Component {
{
name: 'avg',
sampling: {
value: 1000,
unit: 'milliseconds',
value: 1,
unit: breakdown,
},
},
],
......@@ -164,35 +142,59 @@ class Home extends Component {
try {
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);
} catch (error) {
console.error(error);
}
};
handleConfirm = selectedFeed => {
getSelectedFeed = selectedFeed => {
console.log(selectedFeed);
const { device, range, breakdown } = selectedFeed;
this.getFeedData(device, range, breakdown);
};
render() {
const { currentUser, feedData } = this.state;
const {
currentUser,
currentFeed,
revenueFeed,
peopleFeed,
remoteFeed,
fingerPrintFeed,
keycardFeed,
} = this.state;
return (
<>
<NavBar user={currentUser} />
<Container style={{ padding: '30px', maxWidth: '990px' }}>
<Row>
<GetDataSelection onConfirm={this.handleConfirm} />
<GetDataSelection onConfirm={this.getSelectedFeed} />
</Row>
<Row>
<Mapbox />
</Row>
<Row>
{Data.map((item, index) => (
{/* {Data.map((item, index) => (
<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>
<DataTable />
......
src/components/DataCard.js
import React from 'react';
import React, { useState } from 'react';
import { Card, Col, Row, Button, Tooltip } from 'react-bootstrap';
import { FaMoneyBillAlt, FaArrowUp, FaArrowDown, FaUserFriends, FaFileCsv } from 'react-icons/fa';
import { AreaChart, Area, XAxis, YAxis, ResponsiveContainer } from 'recharts';
......@@ -6,7 +6,7 @@ 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 iconStyle = { style: { height: '1.5em', width: '1.5em' } };
return (
......@@ -25,7 +25,7 @@ const SmCard = props => {
)}
</Col>
<Col>
<h2 style={{ textAlign: 'right' }}>{smdata.smnumber}</h2>
<h2 style={{ textAlign: 'right' }}>{smdata.smValue}</h2>
</Col>
</Row>
</Card>
......@@ -36,7 +36,10 @@ const DataCard = props => {
const data = props.item;
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);
}
......
src/components/GetDataSelection/DateRangeSeletion.js
......@@ -27,7 +27,6 @@ class PredefinedRanges extends Component {
};
// handleEvent = (event, picker) => {
// };
handleApply = (event, picker) => {
......
src/components/GetDataSelection/GetDataSelection.js
import React, { Component } from 'react';
import { Col, Form, Button } from 'react-bootstrap';
import DateRangeSeletion from './DateRangeSeletion';
import moment from 'moment';
class GetDataSelection extends Component {
state = {
device: '',
range: [],
breakdown: 'minute',
device: '3d2951a5-fa10-4d56-abae-bc471f3d2e1f',
range: {
startDate: moment()
.subtract(1, 'days')
.valueOf(),
endDate: moment().valueOf(),
},
breakdown: 'minutes',
};
handleClickGo = e => {
this.props.onConfirm && this.props.onConfirm(this.state);
};
handleSelectedRange = selectedRange => {
getSelectedRange = selectedRange => {
this.setState({ range: selectedRange });
};
......@@ -25,6 +31,7 @@ class GetDataSelection extends Component {
<Col md>
<Form.Control
as="select"
defaultValue={this.state.device}
onChange={e => {
console.log(e.target.value);
this.setState({ device: e.target.value });
......@@ -36,21 +43,22 @@ class GetDataSelection extends Component {
</Form.Control>
</Col>
<Col md>
<DateRangeSeletion selectedRange={this.handleSelectedRange} />
<DateRangeSeletion selectedRange={this.getSelectedRange} />
</Col>
<Col md={3}>
<Form.Control
as="select"
defaultValue={this.state.breakdown}
onChange={e => {
console.log(e.target.value);
this.setState({ breakdown: e.target.value });
}}
>
<option value="minute">Breakdown by minute</option>
<option value="hour">Breakdown by hour</option>
<option value="day">Breakdown by day</option>
<option value="week">Breakdown by week</option>
<option value="month">Breakdown by month</option>
<option value="minutes">Breakdown by minute</option>
<option value="hours">Breakdown by hour</option>
<option value="days">Breakdown by day</option>
<option value="weeks">Breakdown by week</option>
<option value="months">Breakdown by month</option>
</Form.Control>
</Col>
<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