Skip to content

T
toiletcoin
Commit 485f63e0 by Chaiwith Santaweesuk
Options

update

parent ec7dd510
Showing with 105 additions and 37 deletions
src/Pages/Home.js
...@@ -13,25 +13,25 @@ const Data = [ ...@@ -13,25 +13,25 @@ const Data = [
{ {
title: 'Current chart', title: 'Current chart',
backgroundColor: '#51ABAD', backgroundColor: '#51ABAD',
detail: [{ smtitle: 'Total current', smValue: 18.0, iconType: 'money' }], detail: [{ smtitle: 'Total current', smValue: 0, iconType: 'money' }],
}, },
{ {
title: 'Revenue chart', title: 'Revenue chart',
backgroundColor: '#51ABAD', backgroundColor: '#51ABAD',
detail: [ detail: [
{ smtitle: 'Total revenue', smValue: 18.0, iconType: 'money' }, { smtitle: 'Total revenue', smValue: 0, iconType: 'money' },
{ smtitle: 'Avg. revenue', smValue: 17.53, iconType: 'money' }, { smtitle: 'Avg. revenue', smValue: 0, iconType: 'money' },
{ smtitle: 'Max. Revenue', smValue: 18.0, iconType: 'max' }, { smtitle: 'Max. Revenue', smValue: 0, iconType: 'max' },
{ smtitle: 'Min. Revenue', smValue: 17.0, iconType: 'min' }, { smtitle: 'Min. Revenue', smValue: 0, iconType: 'min' },
], ],
}, },
{ {
title: 'People chart', title: 'People chart',
backgroundColor: '#5E73F6', backgroundColor: '#5E73F6',
detail: [ detail: [
{ smtitle: 'Total People', smValue: 1105.0 }, { smtitle: 'Total People', smValue: 0 },
{ smtitle: 'Avg. People', smValue: 3320.53 }, { smtitle: 'Avg. People', smValue: 0 },
{ smtitle: 'Max. People', smValue: 4635.0, iconType: 'max' }, { smtitle: 'Max. People', smValue: 0, iconType: 'max' },
{ smtitle: 'Min. People', smValue: 0, iconType: 'min' }, { smtitle: 'Min. People', smValue: 0, iconType: 'min' },
], ],
}, },
...@@ -49,9 +49,9 @@ const Data = [ ...@@ -49,9 +49,9 @@ const Data = [
title: 'Fingerprint chart', title: 'Fingerprint chart',
backgroundColor: '#5E73F6', backgroundColor: '#5E73F6',
detail: [ detail: [
{ smtitle: 'Total Fingerprint', smValue: 1105.0 }, { smtitle: 'Total Fingerprint', smValue: 0 },
{ smtitle: 'Avg. Fingerprint', smValue: 3320.53 }, { smtitle: 'Avg. Fingerprint', smValue: 0 },
{ smtitle: 'Max. Fingerprint', smValue: 4635.0, iconType: 'max' }, { smtitle: 'Max. Fingerprint', smValue: 0, iconType: 'max' },
{ smtitle: 'Min. Fingerprint', smValue: 0, iconType: 'min' }, { smtitle: 'Min. Fingerprint', smValue: 0, iconType: 'min' },
], ],
}, },
...@@ -72,7 +72,6 @@ class Home extends Component { ...@@ -72,7 +72,6 @@ class Home extends Component {
userToken: null, userToken: null,
kairosUrl: null, kairosUrl: null,
currentUser: null, currentUser: null,
currentFeed: null, currentFeed: null,
currentDetail: null, currentDetail: null,
revenueFeed: null, revenueFeed: null,
...@@ -101,6 +100,7 @@ class Home extends Component { ...@@ -101,6 +100,7 @@ class Home extends Component {
keycardMax: null, keycardMax: null,
keycardMin: null, keycardMin: null,
keycardAvg: null, keycardAvg: null,
table: null,
}; };
async componentDidMount() { async componentDidMount() {
...@@ -158,12 +158,9 @@ class Home extends Component { ...@@ -158,12 +158,9 @@ class Home extends Component {
], ],
}; };
console.log(q_data);
try { try {
axios.defaults.headers.common['Authorization'] = `Bearer ${userToken}`; axios.defaults.headers.common['Authorization'] = `Bearer ${userToken}`;
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({ this.setState({
currentFeed: response.data.queries[0].results[5].values, currentFeed: response.data.queries[0].results[5].values,
revenueFeed: response.data.queries[0].results[4].values, revenueFeed: response.data.queries[0].results[4].values,
...@@ -171,28 +168,91 @@ class Home extends Component { ...@@ -171,28 +168,91 @@ class Home extends Component {
remoteFeed: response.data.queries[0].results[2].values, remoteFeed: response.data.queries[0].results[2].values,
keycardFeed: response.data.queries[0].results[1].values, keycardFeed: response.data.queries[0].results[1].values,
fingerPrintFeed: response.data.queries[0].results[0].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) { } catch (error) {
console.error(error); console.error(error);
} }
}; };
getSelectedFeed = selectedFeed => { getSelectedFeed = selectedFeed => {
console.log(selectedFeed);
const { device, range, breakdown } = selectedFeed; const { device, range, breakdown } = selectedFeed;
this.getFeedData(device, range, breakdown); 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() { render() {
const { const {
...@@ -219,7 +279,7 @@ class Home extends Component { ...@@ -219,7 +279,7 @@ class Home extends Component {
{/* {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} total={this.state.currentLast} /> <DataCard item={Data[0]} feedData={currentFeed} datavalue={[{ title: "last", value: this.state.currentLast }]} />
<DataCard <DataCard
item={Data[1]} item={Data[1]}
feedData={revenueFeed} feedData={revenueFeed}
...@@ -227,6 +287,7 @@ class Home extends Component { ...@@ -227,6 +287,7 @@ class Home extends Component {
max={this.state.revenueMax} max={this.state.revenueMax}
min={this.state.revenueMin} min={this.state.revenueMin}
avg={this.state.revenueAvg} 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 <DataCard
item={Data[2]} item={Data[2]}
...@@ -235,6 +296,7 @@ class Home extends Component { ...@@ -235,6 +296,7 @@ class Home extends Component {
max={this.state.peopleMax} max={this.state.peopleMax}
min={this.state.peopleMin} min={this.state.peopleMin}
avg={this.state.peopleAvg} 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 <DataCard
item={Data[3]} item={Data[3]}
...@@ -243,6 +305,7 @@ class Home extends Component { ...@@ -243,6 +305,7 @@ class Home extends Component {
max={this.state.remoteMax} max={this.state.remoteMax}
min={this.state.remoteMin} min={this.state.remoteMin}
avg={this.state.remoteAvg} 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 <DataCard
item={Data[5]} item={Data[5]}
...@@ -251,6 +314,7 @@ class Home extends Component { ...@@ -251,6 +314,7 @@ class Home extends Component {
max={this.state.fingerPrintMax} max={this.state.fingerPrintMax}
min={this.state.fingerPrintMin} min={this.state.fingerPrintMin}
avg={this.state.fingerPrintAvg} 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 <DataCard
item={Data[4]} item={Data[4]}
...@@ -259,10 +323,11 @@ class Home extends Component { ...@@ -259,10 +323,11 @@ class Home extends Component {
max={this.state.keycardMax} max={this.state.keycardMax}
min={this.state.keycardMin} min={this.state.keycardMin}
avg={this.state.keycardAvg} 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>
<Row> <Row>
<DataTable /> <DataTable table={this.state.table}/>
</Row> </Row>
</Container> </Container>
</> </>
......
src/components/DataCard.js
...@@ -6,8 +6,9 @@ import withWindowDimensions from '../utils/withWindowDimensions'; ...@@ -6,8 +6,9 @@ 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 datavalue = props.datavalue || 0;
const iconStyle = { style: { height: '1.5em', width: '1.5em' } }; const iconStyle = { style: { height: '1.5em', width: '1.5em' } };
return ( return (
<Card style={{ padding: '.7em', color: 'white', backgroundColor: props.backgroundColor }}> <Card style={{ padding: '.7em', color: 'white', backgroundColor: props.backgroundColor }}>
...@@ -25,7 +26,7 @@ const SmCard = props => { ...@@ -25,7 +26,7 @@ const SmCard = props => {
)} )}
</Col> </Col>
<Col> <Col>
<h2 style={{ textAlign: 'right' }}>{smdata.smValue}</h2> <h2 style={{ textAlign: 'right' }}>{datavalue.value}</h2>
</Col> </Col>
</Row> </Row>
</Card> </Card>
...@@ -87,7 +88,7 @@ const DataCard = props => { ...@@ -87,7 +88,7 @@ const DataCard = props => {
{data.detail.map((item, index) => {data.detail.map((item, index) =>
data.detail.length === 1 ? ( data.detail.length === 1 ? (
<Col key={index} md={12} style={{ marginTop: '.7em' }}> <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>
) : ( ) : (
<Col <Col
...@@ -99,7 +100,7 @@ const DataCard = props => { ...@@ -99,7 +100,7 @@ const DataCard = props => {
paddingRight: !props.isMobileSized ? (index % 2 !== 0 ? '15px' : '7.5px') : '15px', 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> </Col>
) )
)} )}
......
src/components/DataTable.js
...@@ -125,17 +125,12 @@ const mockdata = [ ...@@ -125,17 +125,12 @@ const mockdata = [
timestamp: '07/31/2019 14:23', timestamp: '07/31/2019 14:23',
}, },
]; ];
export default class DataTable extends React.Component { export default class DataTable extends React.PureComponent {
constructor(props) {
super(props); state = {
this.state = { data: [],
data: mockdata,
activePage: 1, activePage: 1,
itemsPerPage: 10, itemsPerPage: 10,
};
this.handleClick = this.handleClick.bind(this);
this.prevClick = this.prevClick.bind(this);
this.nextClick = this.nextClick.bind(this);
} }
handleClick(e) { handleClick(e) {
...@@ -160,6 +155,13 @@ export default class DataTable extends React.Component { ...@@ -160,6 +155,13 @@ export default class DataTable extends React.Component {
const currentItem = data.slice(firstIndex, lastIndex); const currentItem = data.slice(firstIndex, lastIndex);
const totalPage = Math.ceil(data.length / itemsPerPage); 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) => { const renderItem = currentItem.map((item, index) => {
return ( return (
<tr key={index}> <tr key={index}>
......
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