complete reports

Author: webdevstar

src/admin/client/reports/ordersBar/barChart.js

@@ -0,0 +1,63 @@
+import React from 'react';
+import Paper from 'material-ui/Paper';
+import { Bar } from 'react-chartjs-2';
+import style from './style.css';
+
+const BarChart = ({ data, title, subTitle, legendDisplay }) => (
+	<div className="row row--no-gutter">
+		<div className="col--no-gutter col-xs-12">
+			<Paper className="paper-box" zDepth={1}>
+				<div className={style.title}>{title}</div>
+				<div className={style.subTitle}>{subTitle}</div>
+				<div style={{ padding: 30 }}>
+					<Bar
+						data={data}
+						width={100}
+						height={200}
+						options={{
+							legend: {
+								display: legendDisplay
+							},
+							scales: {
+								xAxes: [
+									{
+										stacked: true,
+										barPercentage: 0.99,
+										categoryPercentage: 0.99,
+										gridLines: {
+											display: false,
+											drawBorder: false
+										},
+										ticks: {
+											display: true,
+											fontColor: 'rgba(0,0,0,0.3)',
+											padding: 0
+										}
+									}
+								],
+								yAxes: [
+									{
+										stacked: true,
+										gridLines: {
+											display: true,
+											drawBorder: false,
+											color: 'rgba(0,0,0,0.08)'
+										},
+										ticks: {
+											maxTicksLimit: 4,
+											display: true,
+											padding: 10,
+											fontColor: 'rgba(0,0,0,0.3)'
+										}
+									}
+								]
+							}
+						}}
+					/>
+				</div>
+			</Paper>
+		</div>
+	</div>
+);
+
+export default BarChart;

src/admin/client/reports/ordersBar/index.js

@@ -0,0 +1,63 @@
+import React from 'react';
+import messages from 'lib/text';
+import api from 'lib/api';
+import BarChart from './barChart';
+import * as utils from './utils';
+import moment from 'moment';
+
+export default class OrdersBar extends React.Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			ordersData: null,
+			salesData: null
+		};
+	}
+
+	componentDidMount() {
+		this.fetchData();
+	}
+
+	fetchData = () => {
+		const filter = {
+			draft: false,
+			cancelled: false,
+			date_placed_min: moment()
+				.subtract(1, 'months')
+				.hour(0)
+				.minute(0)
+				.second(0)
+				.toISOString()
+		};
+
+		api.orders
+			.list(filter)
+			.then(({ status, json }) => {
+				const reportData = utils.getReportDataFromOrders(json);
+				const ordersData = utils.getOrdersDataFromReportData(reportData);
+				const salesData = utils.getSalesDataFromReportData(reportData);
+				this.setState({ ordersData, salesData });
+			})
+			.catch(error => {
+				console.log(error);
+			});
+	};
+
+	render() {
+		const { ordersData, salesData } = this.state;
+		return (
+			<div>
+				<BarChart
+					data={ordersData}
+					legendDisplay={true}
+					title={messages.drawer_orders}
+				/>
+				<BarChart
+					data={salesData}
+					legendDisplay={false}
+					title={messages.salesReport}
+				/>
+			</div>
+		);
+	}
+}

src/admin/client/reports/ordersBar/style.css

@@ -0,0 +1,13 @@
+.title {
+  padding: 30px 30px 0px 30px;
+  font-size: 26px;
+  color: rgba(0,0,0,0.87);
+  font-weight: 300;
+}
+
+.subTitle {
+  padding: 5px 30px 0px 30px;
+  font-size: 16px;
+  color: rgba(0,0,0,0.54);
+  font-weight: 400;
+}

src/admin/client/reports/ordersBar/utils.js

@@ -0,0 +1,104 @@
+import messages from 'lib/text';
+import moment from 'moment';
+
+const chartColors = {
+	red: 'rgb(255, 99, 132)',
+	orange: 'rgb(255, 159, 64)',
+	yellow: 'rgb(255, 205, 86)',
+	green: 'rgb(75, 192, 192)',
+	blue: 'rgb(54, 162, 235)',
+	purple: 'rgb(153, 102, 255)',
+	grey: 'rgb(201, 203, 207)'
+};
+
+const transparentize = (color, opacity) => {
+	const alpha = opacity === undefined ? 0.5 : 1 - opacity;
+	return Color(color)
+		.alpha(alpha)
+		.rgbString();
+};
+
+const getOrdersByDate = (orders, dateMoment) => {
+	return orders.filter(order =>
+		moment(order.date_placed).isSame(dateMoment, 'day')
+	);
+};
+
+const filterSuccessOrders = order =>
+	order.paid === true || order.closed === true;
+const filterNewOrders = order => !order.paid && !order.closed;
+
+export const getReportDataFromOrders = ordersResponse => {
+	let reportItems = [];
+	let dateFrom = moment().subtract(1, 'months');
+	let dateTo = moment();
+	const daysDiff = dateFrom.diff(dateTo, 'days');
+
+	for (let i = daysDiff; i < 1; i++) {
+		const reportingDate = moment().add(i, 'days');
+		const ordersPlacedThisDate = getOrdersByDate(
+			ordersResponse.data,
+			reportingDate
+		);
+		const totalOrdersCount = ordersPlacedThisDate.length;
+		const successOrdersCount = ordersPlacedThisDate.filter(filterSuccessOrders)
+			.length;
+		const newOrdersCount = ordersPlacedThisDate.filter(filterNewOrders).length;
+		const successOrdersRevenue = ordersPlacedThisDate
+			.filter(filterSuccessOrders)
+			.reduce((a, b) => {
+				return a + b.grand_total;
+			}, 0);
+
+		reportItems.push({
+			date: reportingDate.format('D MMM'),
+			total: totalOrdersCount,
+			success: successOrdersCount,
+			new: newOrdersCount,
+			revenue: successOrdersRevenue
+		});
+	}
+
+	return reportItems;
+};
+
+export const getOrdersDataFromReportData = reportData => {
+	const labels = reportData.map(item => item.date);
+	const successData = reportData.map(item => item.success);
+	const newData = reportData.map(item => item.new);
+
+	return {
+		labels: labels,
+		datasets: [
+			{
+				label: messages.closedAndPaidOrders,
+				data: successData,
+				backgroundColor: chartColors.blue,
+				hoverBackgroundColor: transparentize(chartColors.blue, 0.4)
+			},
+			{
+				label: messages.newOrders,
+				data: newData,
+				backgroundColor: chartColors.yellow,
+				hoverBackgroundColor: transparentize(chartColors.yellow, 0.4)
+			}
+		]
+	};
+};
+
+export const getSalesDataFromReportData = reportData => {
+	const labels = reportData.map(item => item.date);
+	const revenueData = reportData.map(item => item.revenue);
+
+	return {
+		labels: labels,
+		datasets: [
+			{
+				label: messages.closedAndPaidOrders,
+				data: revenueData,
+				backgroundColor: chartColors.blue,
+				hoverBackgroundColor: transparentize(chartColors.blue, 0.4)
+			}
+		]
+	};
+};