Skip to content

Commit

Permalink
added dashboard stats #10
Browse files Browse the repository at this point in the history
  • Loading branch information
@perminder-klair
perminder-klair committed May 9, 2019
1 parent def4abf commit be7aac5
Show file tree
Hide file tree
Showing 8 changed files with 190 additions and 198 deletions.
48 changes: 24 additions & 24 deletions src/containers/Dashboards/Store/components/ETH.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
import React, { PureComponent } from 'react';
import { Card, CardBody, Col } from 'reactstrap';
import { AreaChart, Tooltip, Area, ResponsiveContainer } from 'recharts';
import TrendingDownIcon from 'mdi-react/TrendingDownIcon';
// import { AreaChart, Tooltip, Area, ResponsiveContainer } from 'recharts';
import TrendingUpIcon from 'mdi-react/TrendingUpIcon';
import PropTypes from 'prop-types';

const data = [{ name: 'Mon', eth: 70.23 },
{ name: 'Tue', eth: 80.5 },
{ name: 'Wed', eth: 38.45 },
{ name: 'Thu', eth: 89.2 },
{ name: 'Fri', eth: 105.61 },
{ name: 'Sat', eth: 98.6 },
{ name: 'Sun', eth: 115 }];
// const data = [{ name: 'Mon', eth: 70.23 },
// { name: 'Tue', eth: 80.5 },
// { name: 'Wed', eth: 38.45 },
// { name: 'Thu', eth: 89.2 },
// { name: 'Fri', eth: 105.61 },
// { name: 'Sat', eth: 98.6 },
// { name: 'Sun', eth: 115 }];

const CustomTooltip = ({ active, payload }) => {
if (active) {
Expand All @@ -37,31 +37,31 @@ CustomTooltip.defaultProps = {
};

export default class ETH extends PureComponent {
constructor() {
super();
this.state = {
activeIndex: 0,
};
}
// constructor() {
// super();
// this.state = {
// activeIndex: 0,
// };
// }

render() {
const { activeIndex } = this.state;
const activeItem = data[activeIndex];
// const { activeIndex } = this.state;
// const activeItem = data[activeIndex];
const { data } = this.props;

return (
<Col md={12} xl={3} lg={6} xs={12}>
<Card>
<CardBody className="dashboard__card-widget">
<div className="card__title">
<h5 className="bold-text">ETH</h5>
<h5 className="subhead">Ethereum</h5>
<h5 className="bold-text">Total Order</h5>
</div>
<div className="dashboard__total dashboard__total--area">
<TrendingDownIcon className="dashboard__trend-icon" />
<div className="dashboard__total">
<TrendingUpIcon className="dashboard__trend-icon" />
<p className="dashboard__total-stat">
${(activeItem.eth).toFixed(2)}
{data.totalOrders}
</p>
<ResponsiveContainer height={70} className="dashboard__chart-container">
{/* <ResponsiveContainer height={70} className="dashboard__chart-container">
<AreaChart data={data} margin={{ top: 0, left: 0, bottom: 0 }}>
<Tooltip content={<CustomTooltip />} />
<Area
Expand All @@ -73,7 +73,7 @@ export default class ETH extends PureComponent {
fillOpacity={0.2}
/>
</AreaChart>
</ResponsiveContainer>
</ResponsiveContainer> */}
</div>
</CardBody>
</Card>
Expand Down
64 changes: 32 additions & 32 deletions src/containers/Dashboards/Store/components/OrdersToday.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,46 +1,46 @@
/* eslint-disable react/no-array-index-key */
import React, { PureComponent } from 'react';
import { Card, CardBody, Col } from 'reactstrap';
import { BarChart, Bar, Cell, ResponsiveContainer } from 'recharts';
import TrendingDownIcon from 'mdi-react/TrendingDownIcon';
// import { BarChart, Bar, Cell, ResponsiveContainer } from 'recharts';
import TrendingUpIcon from 'mdi-react/TrendingUpIcon';
import { translate } from 'react-i18next';
import PropTypes from 'prop-types';

const data = [
{ name: 'Page A', pv: 255 },
{ name: 'Page B', pv: 452 },
{ name: 'Page C', pv: 154 },
{ name: 'Page D', pv: 85 },
{ name: 'Page E', pv: 545 },
{ name: 'Page F', pv: 438 },
{ name: 'Page G', pv: 523 },
{ name: 'Page H', pv: 226 },
{ name: 'Page I', pv: 112 },
{ name: 'Page J', pv: 101 },
];
// const data = [
// { name: 'Page A', pv: 255 },
// { name: 'Page B', pv: 452 },
// { name: 'Page C', pv: 154 },
// { name: 'Page D', pv: 85 },
// { name: 'Page E', pv: 545 },
// { name: 'Page F', pv: 438 },
// { name: 'Page G', pv: 523 },
// { name: 'Page H', pv: 226 },
// { name: 'Page I', pv: 112 },
// { name: 'Page J', pv: 101 },
// ];

class OrdersToday extends PureComponent {
static propTypes = {
t: PropTypes.func.isRequired,
};

constructor() {
super();
this.state = {
activeIndex: 0,
};
}
// constructor() {
// super();
// this.state = {
// activeIndex: 0,
// };
// }

handleClick = (index) => {
this.setState({
activeIndex: index,
});
};
// handleClick = (index) => {
// this.setState({
// activeIndex: index,
// });
// };

render() {
const { activeIndex } = this.state;
const activeItem = data[activeIndex];
const { t } = this.props;
// const { activeIndex } = this.state;
// const activeItem = data[activeIndex];
const { t, data } = this.props;

return (
<Col md={12} xl={3} lg={6} xs={12}>
Expand All @@ -50,11 +50,11 @@ class OrdersToday extends PureComponent {
<h5 className="bold-text">{t('dashboard_commerce.orders_today')}</h5>
</div>
<div className="dashboard__total">
<TrendingDownIcon className="dashboard__trend-icon" />
<TrendingUpIcon className="dashboard__trend-icon" />
<p className="dashboard__total-stat">
{(activeItem.pv)}
{(data.ordersToday)}
</p>
<ResponsiveContainer height={50} className="dashboard__chart-container">
{/* <ResponsiveContainer height={50} className="dashboard__chart-container">
<BarChart data={data}>
<Bar dataKey="pv" onClick={this.handleClick}>
{
Expand All @@ -68,7 +68,7 @@ class OrdersToday extends PureComponent {
}
</Bar>
</BarChart>
</ResponsiveContainer>
</ResponsiveContainer> */}
</div>
</CardBody>
</Card>
Expand Down
88 changes: 21 additions & 67 deletions src/containers/Dashboards/Store/components/RecentOrders.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,84 +2,38 @@ import React from 'react';
import { Badge, Table } from 'reactstrap';
import { translate } from 'react-i18next';
import PropTypes from 'prop-types';
import dayjs from 'dayjs';

import Panel from '../../../../shared/components/Panel';

const RecentOrders = ({ t }) => (
const RecentOrders = ({ t, invoices }) => (
<Panel lg={12} title={t('dashboard_commerce.recent_orders')}>
<Table responsive className="table--bordered">
<thead>
<tr>
<th>#</th>
<th>Invoice</th>
<th>Customer Name</th>
<th>Product</th>
<th>Quantity</th>
<th>Date</th>
<th>Location</th>
<th>TX Hash</th>
<th>Fiat Amount</th>
<th>Crypto Amount</th>
<th>Status</th>
<th>Created At</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>In-123356</td>
<td>Lok Morisson</td>
<td>Xiaomi Mi 6</td>
<td>1</td>
<td>2017/12/25</td>
<td>Melbourne</td>
<td><Badge color="success">In Progress</Badge></td>
</tr>
<tr>
<td>2</td>
<td>In-254875</td>
<td>Norman Brown</td>
<td>Apple Iphone 6 Plus</td>
<td>1</td>
<td>2017/12/13</td>
<td>Tokio</td>
<td><Badge color="primary">Completed</Badge></td>
</tr>
<tr>
<td>3</td>
<td>In-877868</td>
<td>Sam Medinberg</td>
<td>Xiaomi Mi 6</td>
<td>1</td>
<td>2017/12/13</td>
<td>Moscow</td>
<td><Badge color="success">In Progress</Badge></td>
</tr>
<tr>
<td>4</td>
<td>In-619876</td>
<td>Dave Morisson</td>
<td>Apple Iphone 5 S</td>
<td>1</td>
<td>2017/12/07</td>
<td>Melbourne</td>
<td><Badge color="primary">Completed</Badge></td>
</tr>
<tr>
<td>5</td>
<td>In-218778</td>
<td>Klara Brown</td>
<td>Apple Iphone 6 Plus</td>
<td>1</td>
<td>2017/12/05</td>
<td>London</td>
<td><Badge color="primary">Completed</Badge></td>
</tr>
<tr>
<td>6</td>
<td>In-626268</td>
<td>Molly Medinberg</td>
<td>Apple Iphone 7 Plus</td>
<td>1</td>
<td>2017/12/01</td>
<td>Rome</td>
<td><Badge color="primary">Completed</Badge></td>
</tr>
{invoices.map(invoice => (
<tr key={invoice.id}>
<td>
<a target="_blank" rel="noopener noreferrer" href={`https://app.dexpay.me/invoice/${invoice.invoiceNumber}`}>
{invoice.invoiceNumber}
</a>
</td>
<td>{invoice.txHash}</td>
<td>{invoice.fiatAmount} {invoice.fiatCurrency}</td>
<td>{invoice.cryptoAmount} {invoice.assetUsed}</td>
<td><Badge color="success">{invoice.status}</Badge></td>
<td>{dayjs(invoice.createdAt).format('DD/MM/YYYY HH:mm')}</td>
</tr>
))}
</tbody>
</Table>
</Panel>
Expand Down
60 changes: 30 additions & 30 deletions src/containers/Dashboards/Store/components/TotalProducts.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,46 +1,46 @@
/* eslint-disable react/no-array-index-key */
import React, { PureComponent } from 'react';
import { Card, CardBody, Col } from 'reactstrap';
import { BarChart, Bar, Cell, ResponsiveContainer } from 'recharts';
// import { BarChart, Bar, Cell, ResponsiveContainer } from 'recharts';
import TrendingUpIcon from 'mdi-react/TrendingUpIcon';
import { translate } from 'react-i18next';
import PropTypes from 'prop-types';

const data = [
{ 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 },
{ name: 'Page H', uv: 2000 },
{ name: 'Page I', uv: 2780 },
{ name: 'Page J', uv: 1890 },
];
// const data = [
// { 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 },
// { name: 'Page H', uv: 2000 },
// { name: 'Page I', uv: 2780 },
// { name: 'Page J', uv: 1890 },
// ];

class TotalProducts extends PureComponent {
static propTypes = {
t: PropTypes.func.isRequired,
};

constructor() {
super();
this.state = {
activeIndex: 0,
};
}
// constructor() {
// super();
// this.state = {
// activeIndex: 0,
// };
// }

handleClick = (index) => {
this.setState({
activeIndex: index,
});
};
// handleClick = (index) => {
// this.setState({
// activeIndex: index,
// });
// };

render() {
const { activeIndex } = this.state;
const activeItem = data[activeIndex];
const { t } = this.props;
// const { activeIndex } = this.state;
// const activeItem = data[activeIndex];
const { t, data } = this.props;

return (
<Col md={12} xl={3} lg={6} xs={12}>
Expand All @@ -52,9 +52,9 @@ class TotalProducts extends PureComponent {
<div className="dashboard__total">
<TrendingUpIcon className="dashboard__trend-icon" />
<p className="dashboard__total-stat">
{activeItem.uv}
{data.totalProducts}
</p>
<ResponsiveContainer height={50} className="dashboard__chart-container">
{/* <ResponsiveContainer height={50} className="dashboard__chart-container">
<BarChart data={data}>
<Bar dataKey="uv" onClick={this.handleClick}>
{
Expand All @@ -68,7 +68,7 @@ class TotalProducts extends PureComponent {
}
</Bar>
</BarChart>
</ResponsiveContainer>
</ResponsiveContainer> */}
</div>
</CardBody>
</Card>
Expand Down
Loading

0 comments on commit be7aac5

Please sign in to comment.