Commit 6a0aa669 by Tonk

update icon

parent fb063297
......@@ -11,14 +11,14 @@ const Data = [
{
title: 'Current chart',
backgroundColor: '#51ABAD',
detail: [{ smtitle: 'Total current', smnumber: 0 }],
detail: [{ smtitle: 'Total current', smnumber: 0, iconType: 'money' }],
},
{
title: 'Revenue chart',
backgroundColor: '#51ABAD',
detail: [
{ smtitle: 'Total revenue', smnumber: 18.0 },
{ smtitle: 'Avg. revenue', smnumber: 17.53 },
{ 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' },
],
......
import React from 'react';
import { Card, Col, Row, Button } from 'react-bootstrap';
import { FaMoneyBillAlt, FaArrowUp, FaArrowDown } from 'react-icons/fa';
import { FaMoneyBillAlt, FaArrowUp, FaArrowDown, FaUserFriends } 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';
const chartdata = [
{
......@@ -48,8 +49,10 @@ const SmCard = props => {
<FaArrowUp {...iconStyle} />
) : smdata.iconType === 'min' ? (
<FaArrowDown {...iconStyle} />
) : (
) : smdata.iconType === 'money' ? (
<FaMoneyBillAlt {...iconStyle} />
) : (
<FaUserFriends {...iconStyle} />
)}
</Col>
<Col>
......@@ -114,7 +117,8 @@ const DataCard = props => {
</Row>
<Row style={{ justifyContent: 'flex-end', marginRight: 1 }}>
<CSVLink data={data.detail} filename={data.title}>
<Button variant="light" style={{ marginTop: '.5em' }}>
<Button variant="outline-dark" style={{ marginTop: '.5em' }}>
<FaFileCsv style={{ margin: '0 2px 2px 0' }} />
Export to CSV
</Button>
</CSVLink>
......
import React from 'react';
import { Col, Table, Row, Button } from 'react-bootstrap';
import { CSVLink } from 'react-csv';
import { FaFileCsv } from 'react-icons/fa';
const data = [
{ site: 'Pichaiyat Building', people: 2670.0, revenue: 17.0, timestamp: '07/31/2019 14:23' },
{ site: 'Pichaiyat Building', people: 2670.0, revenue: 17.0, timestamp: '07/31/2019 14:23' },
......@@ -22,6 +23,14 @@ const data = [
const DataTable = () => {
return (
<Col>
<Row style={{ marginLeft: 1 }}>
<CSVLink data={data} filename={'data-table'}>
<Button variant="outline-dark" style={{ marginTop: '.5em' }}>
<FaFileCsv style={{ margin: '0 2 5 0' }} />
Export to CSV
</Button>
</CSVLink>
</Row>
<Table striped bordered hover size="sm" style={{ margin: '1em 0 0 0' }}>
<thead style={{ backgroundColor: '#49b9ff', color: 'white' }}>
<tr>
......@@ -42,13 +51,6 @@ const DataTable = () => {
))}
</tbody>
</Table>
<Row style={{ justifyContent: 'flex-end', marginRight: 1 }}>
<CSVLink data={data} filename={'data-table'}>
<Button variant="light" style={{ marginTop: '.5em' }}>
Export to CSV
</Button>
</CSVLink>
</Row>
</Col>
);
};
......
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