Skip to content

T
toiletcoin
Commit dbb203d9 by OuiAtichat
Options

add axios mock feed with api

parent cf79696d
Showing with 134 additions and 39 deletions
firebase.json
......@@ -6,5 +6,9 @@
"**/.*",
"**/node_modules/**"
]
},
"firestore": {
"rules": "firestore.rules",
"indexes": "firestore.indexes.json"
}
}
firestore.indexes.json 0 → 100644
{
"indexes": [],
"fieldOverrides": []
}
firestore.rules 0 → 100644
rules_version = '2';
service cloud.firestore {
match /databases/{database}/documents {
match /{document=**} {
allow read, write: if true;
}
}
}
\ No newline at end of file
package.json
......@@ -3,6 +3,7 @@
"version": "0.1.0",
"private": true,
"dependencies": {
"axios": "^0.19.0",
"bootstrap": "^4.3.1",
"bootstrap-daterangepicker": "^3.0.5",
"firebase": "^6.3.3",
......
src/Pages/Home.js
import React, { Component } from 'react';
import app from '../firebase';
import app, { db } from '../firebase';
import { Row, Container } from 'react-bootstrap';
import DataTable from '../components/DataTable';
import NavBar from '../components/NavBar';
import DataCard from '../components/DataCard';
import GetDataSelection from '../components/GetDataSelection/GetDataSelection';
import Mapbox from '../components/Mapbox';
import axios from 'axios';
const Data = [
{
......@@ -68,10 +69,13 @@ const Data = [
class Home extends Component {
state = {
currentUser: null,
feedData: null,
};
componentDidMount() {
this.getCurrentUser();
this.getFeedData();
// this.getFireStoreData();
}
getCurrentUser = async () => {
......@@ -79,8 +83,26 @@ class Home extends Component {
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 });
console.log(response.data.metrics[0].value);
};
render() {
const { currentUser } = this.state;
const { currentUser, feedData } = this.state;
return (
<>
......@@ -94,7 +116,7 @@ class Home extends Component {
</Row>
<Row>
{Data.map((item, index) => (
<DataCard key={index} item={item} />
<DataCard key={index} item={item} feedData={feedData} />
))}
</Row>
<Row>
......
src/components/DataCard.js
import React from 'react';
import { Card, Col, Row, Button } from 'react-bootstrap';
import { FaMoneyBillAlt, FaArrowUp, FaArrowDown, FaUserFriends } from 'react-icons/fa';
import { FaMoneyBillAlt, FaArrowUp, FaArrowDown, FaUserFriends, FaFileCsv } from 'react-icons/fa';
import { AreaChart, Area, XAxis, YAxis, ResponsiveContainer } from 'recharts';
import withWindowDimensions from '../utils/withWindowDimensions';
import { CSVLink } from 'react-csv';
import { FaFileCsv } from 'react-icons/fa';
import moment from 'moment';
const chartdata = [
{
name: 'Page A',
uv: 4000,
},
{
name: 'Page B',
uv: 3000,
},
{
name: 'Page C',
uv: 2000,
},
{
name: 'Page D',
uv: 2780,
},
{
name: 'Page E',
uv: 1890,
},
{
name: 'Page F',
uv: 2390,
},
{
name: 'Page G',
uv: 3490,
},
];
// const chartdata = [
// {
// name: 'Page A',
// uv: 4000,
// },
// {
// name: 'Page B',
// uv: 3000,
// },
// {
// name: 'Page C',
// uv: 2000,
// },
// {
// name: 'Page D',
// uv: 2780,
// },
// {
// name: 'Page E',
// uv: 1890,
// },
// {
// name: 'Page F',
// uv: 2390,
// },
// {
// name: 'Page G',
// uv: 3490,
// },
// ];
const SmCard = props => {
const smdata = props.smitem;
......@@ -65,6 +65,8 @@ const SmCard = props => {
const DataCard = props => {
const data = props.item;
console.log(props.feedData);
return (
<Col md={6}>
<Card
......@@ -79,7 +81,7 @@ const DataCard = props => {
<div style={{ width: '100%', height: 300, padding: '5px' }}>
<ResponsiveContainer>
<AreaChart
data={chartdata}
data={props.feedData}
margin={{
top: 10,
right: 30,
......@@ -87,9 +89,30 @@ const DataCard = props => {
bottom: 0,
}}
>
<XAxis stroke="white" dataKey="name" tick={{ fill: 'white' }} />
<YAxis stroke="white" tick={{ fill: 'white' }} />
<Area type="monotone" dataKey="uv" stroke="white" fill="white" />
{/* <XAxis stroke="white" dataKey="name" tick={{ fill: 'white' }} />
<YAxis stroke="white" tick={{ fill: 'white' }} /> */}
<XAxis
stroke="white"
dataKey={value => {
return moment(value[0]).format('DD MMM YY');
}}
tick={{ fill: 'white' }}
/>
<YAxis
stroke="white"
dataKey={value => {
return value[1];
}}
tick={{ fill: 'white' }}
/>
<Area
type="monotone"
dataKey={value => {
return value[1];
}}
stroke="white"
fill="white"
/>
</AreaChart>
</ResponsiveContainer>
</div>
......
src/firebase.js
import firebase from '@firebase/app';
import '@firebase/auth';
import '@firebase/firestore';
const app = firebase.initializeApp({
apiKey: process.env.REACT_APP_FIREBASE_KEY,
......@@ -11,3 +12,7 @@ const app = firebase.initializeApp({
});
export default app;
const db = app.firestore();
export { db };
yarn.lock
......@@ -2262,6 +2262,14 @@ aws4@^1.8.0:
resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.8.0.tgz#f0e003d9ca9e7f59c7a508945d7b2ef9a04a542f"
integrity sha512-ReZxvNHIOv88FlT7rxcXIIC0fPt4KZqZbOlivyWtXLt8ESx84zd3kMC6iK5jVeS2qt+g7ftS7ye4fi06X5rtRQ==
axios@^0.19.0:
version "0.19.0"
resolved "https://registry.yarnpkg.com/axios/-/axios-0.19.0.tgz#8e09bff3d9122e133f7b8101c8fbdd00ed3d2ab8"
integrity sha512-1uvKqKQta3KBxIz14F2v06AEHZ/dIoeKfbTRkK1E5oqjDnuEerLmYTgJB5AiQZHJcljpg1TuRzdjDR06qNk0DQ==
dependencies:
follow-redirects "1.5.10"
is-buffer "^2.0.2"
axobject-query@^2.0.2:
version "2.0.2"
resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-2.0.2.tgz#ea187abe5b9002b377f925d8bf7d1c561adf38f9"
......@@ -3720,6 +3728,13 @@ debug@2.6.9, debug@^2.2.0, debug@^2.3.3, debug@^2.6.0, debug@^2.6.8, debug@^2.6.
dependencies:
ms "2.0.0"
debug@=3.1.0:
version "3.1.0"
resolved "https://registry.yarnpkg.com/debug/-/debug-3.1.0.tgz#5bb5a0672628b64149566ba16819e61518c67261"
integrity sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==
dependencies:
ms "2.0.0"
debug@^3.2.5, debug@^3.2.6:
version "3.2.6"
resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.6.tgz#e83d17de16d8a7efb7717edbe5fb10135eee629b"
......@@ -4765,6 +4780,13 @@ flush-write-stream@^1.0.0:
inherits "^2.0.3"
readable-stream "^2.3.6"
follow-redirects@1.5.10:
version "1.5.10"
resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.5.10.tgz#7b7a9f9aea2fdff36786a94ff643ed07f4ff5e2a"
integrity sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==
dependencies:
debug "=3.1.0"
follow-redirects@^1.0.0:
version "1.7.0"
resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.7.0.tgz#489ebc198dc0e7f64167bd23b03c4c19b5784c76"
......@@ -5692,6 +5714,11 @@ is-buffer@^1.0.2, is-buffer@^1.1.5:
resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"
integrity sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==
is-buffer@^2.0.2:
version "2.0.3"
resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-2.0.3.tgz#4ecf3fcf749cbd1e472689e109ac66261a25e725"
integrity sha512-U15Q7MXTuZlrbymiz95PJpZxu8IlipAp4dtS3wOdgPXx3mqBnslrWU14kxfHB+Py/+2PVKSr37dMAgM2A4uArw==
is-callable@^1.1.4:
version "1.1.4"
resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.1.4.tgz#1e1adf219e1eeb684d691f9d6a05ff0d30a24d75"
......
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