Skip to content

T
toiletcoin
Commit 82ea8c4e by OuiAtichat
Options

api feed

parent 3b2fa26c
Showing with 159 additions and 110 deletions
src/Pages/Home.js
......@@ -7,7 +7,6 @@ import DataCard from '../components/DataCard';
import GetDataSelection from '../components/GetDataSelection/GetDataSelection';
import Mapbox from '../components/Mapbox';
import axios from 'axios';
import qs from 'qs';
import moment from 'moment';
const Data = [
......@@ -70,108 +69,113 @@ const Data = [
class Home extends Component {
state = {
userToken: null,
kairosUrl: null,
currentUser: null,
feedData: null,
};
componentDidMount() {
// constructor(props) {
// super(props);
// // Don't call this.setState() here!
// this.state = { userToken: null, kairosUrl: null, currentUser: null, feedData: null };
// }
async componentDidMount() {
await this.getFireStoreData();
this.getCurrentUser();
this.getFeedData();
// this.getFireStoreData();
this.currentWeight();
// await this.getFeedData();
}
getFireStoreData = async () => {
const configData = await db.collection('config').get();
//get all data from collection 'config'
configData.forEach(doc => {
this.setState({
kairosUrl: doc.data().kairosUrl,
userToken: doc.data().userToken,
});
});
};
getCurrentUser = async () => {
const { displayName, email } = await app.auth().currentUser;
this.setState({ currentUser: displayName || email });
};
// getFireStoreData = () => {
// db.collection('user')
// .get()
// .then(querySnapshot => {
// querySnapshot.forEach(doc => {
// console.log(`${doc.id} => ${doc.data()}`);
// });
// });
// 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 });
// };
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;
// };
currentWeight = async (ctx = '', traceback = '1y') => {
// let device_id = ctx.device_id;
const query_generator = (device_id, range, endtime) => {
// var mls = ms('1s');
let now = endtime ? endtime : new Date().getTime();
let q_data = {
start_absolute: now - (60 * 60 * 24 * 1000 * 30),
end_absolute: now,
metrics: [
{
name: device_id,
group_by: [
{
name: 'tag',
tags: ['attr'],
},
],
tags: {
// attr: ['a12'],
getFeedData = async (
deviceId,
selectedRange = { startDate: moment().valueOf(), endDate: moment().valueOf() },
breakdown
) => {
const { kairosUrl, userToken } = this.state;
const { startDate, endDate } = selectedRange;
// let q_data = this.queryGenerator(deviceId, selectedRange);
// let now = new Date().getTime();
let q_data = {
start_absolute: startDate,
end_absolute: endDate,
metrics: [
{
name: deviceId,
group_by: [
{
name: 'tag',
tags: ['attr'],
},
aggregators: [
{
name: 'avg',
sampling: {
value: 1000,
unit: 'milliseconds',
},
},
],
],
tags: {
// attr: ['a12'],
},
],
};
return q_data;
aggregators: [
{
name: 'avg',
sampling: {
value: 1000,
unit: 'milliseconds',
},
},
],
},
],
};
let device_id = '3d2951a5-fa10-4d56-abae-bc471f3d2e1f';
// let q_data = qs.stringify({ device_id, traceback });
let q_data = query_generator(device_id, traceback);
console.log(q_data);
const userToken =
'eyJhbGciOiJFUzI1NiIsInR5cCI6IkpXVCJ9.eyJjdHgiOnsib3duZXIiOiJVNDY0NzAxMzI2MjYwIn0sInNjb3BlIjpbXSwiaWF0IjoxNTY0OTc3MTY4LCJuYmYiOjE1NjQ5NzcxNjgsImV4cCI6MTYyODE0NDg5MSwiZXhwaXJlSW4iOjYzMTY3NzIzLCJqdGkiOiI3QzRNNUY1VyIsImlzcyI6ImNlcjp1c2VydG9rZW4ifQ.B0zXLSlsUucj4ohvH4lNVectCAt4hk--qMPEv-qhCUu82puCnNMsK2ZnnPeO_KE3up-vqVsjMVxLQ2jvmuspNg';
const kairos_url = 'https://feed.nexpie.io/api/v1/datapoints/query';
// const options = {
// url: kairos_url,
// medthod: 'POST',
// headers: {
// 'Content-Type': 'application/json',
// // Authorization: 'Bearer ' + userToken,
// },
// data: q_data,
// // data: q_data,
// auth: {
// username: userToken,
// password: '',
// },
// };
try {
const response = await axios.post(kairos_url, q_data);
// const response = await axios(options);
try {
const response = await axios.post(kairosUrl, q_data);
console.log(response);
} catch (error) {
console.error(error);
}
};
handleConfirm = selectedFeed => {
console.log(selectedFeed);
const { device, range, breakdown } = selectedFeed;
this.getFeedData(device, range, breakdown);
};
render() {
const { currentUser, feedData } = this.state;
......@@ -180,7 +184,7 @@ class Home extends Component {
<NavBar user={currentUser} />
<Container style={{ padding: '30px', maxWidth: '990px' }}>
<Row>
<GetDataSelection />
<GetDataSelection onConfirm={this.handleConfirm} />
</Row>
<Row>
<Mapbox />
......
src/components/GetDataSelection/DateRangeSeletion.js
import React, { Component } from 'react';
import DateRangePicker from 'react-bootstrap-daterangepicker';
import moment from 'moment';
import { FaRegCalendarAlt } from 'react-icons/fa';
import { InputGroup, FormControl } from 'react-bootstrap';
......@@ -27,11 +26,24 @@ class PredefinedRanges extends Component {
},
};
handleEvent = (event, picker) => {
// handleEvent = (event, picker) => {
// };
handleApply = (event, picker) => {
this.setState({
startDate: picker.startDate,
endDate: picker.endDate,
});
this.props.selectedRange &&
this.props.selectedRange({
startDate: this.state.startDate.valueOf(),
endDate: this.state.endDate.valueOf(),
});
// console.log(picker.startDate.format('DD MMM YY HH:MM:SS'));
// console.log(picker.endDate.format('DD MMM YY HH:MM:SS'));
};
render() {
......@@ -48,7 +60,8 @@ class PredefinedRanges extends Component {
startDate={this.state.startDate}
endDate={this.state.endDate}
ranges={this.state.ranges}
onEvent={this.handleEvent}
onApply={this.handleApply}
// onEvent={this.handleEvent}
>
<InputGroup>
<InputGroup.Append>
......
src/components/GetDataSelection/GetDataSelection.js
import React from 'react';
import React, { Component } from 'react';
import { Col, Form, Button } from 'react-bootstrap';
import DateRangeSeletion from './DateRangeSeletion';
const GetDataSelection = () => {
return (
<Col>
<Form.Label>Get data from</Form.Label>
<Form.Row>
<Col md>
<Form.Control as="select">
<option>Choose...</option>
<option>...</option>
</Form.Control>
</Col>
<Col md>
<DateRangeSeletion />
</Col>
<Col md={3}>
<Form.Control as="select">
<option>Choose...</option>
<option>...</option>
</Form.Control>
</Col>
<Col md={1}>
<Button block variant="success">
Go
</Button>
</Col>
</Form.Row>
</Col>
);
};
class GetDataSelection extends Component {
state = {
device: '',
range: [],
breakdown: 'minute',
};
handleClickGo = e => {
this.props.onConfirm && this.props.onConfirm(this.state);
};
handleSelectedRange = selectedRange => {
this.setState({ range: selectedRange });
};
render() {
return (
<Col>
<Form.Label>Get data from</Form.Label>
<Form.Row>
<Col md>
<Form.Control
as="select"
onChange={e => {
console.log(e.target.value);
this.setState({ device: e.target.value });
}}
>
<option value="">Choose...</option>
<option>3d2951a5-fa10-4d56-abae-bc471f3d2e1f</option>
<option>3d2951a5-fa10-4d56-abae-bc471f3d2e12</option>
</Form.Control>
</Col>
<Col md>
<DateRangeSeletion selectedRange={this.handleSelectedRange} />
</Col>
<Col md={3}>
<Form.Control
as="select"
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>
</Form.Control>
</Col>
<Col md={1}>
<Button block variant="success" onClick={this.handleClickGo}>
Go
</Button>
</Col>
</Form.Row>
</Col>
);
}
}
export default GetDataSelection;
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