Fix style and import issues on stats page

bunqCommunity · Oct 22, 2018 · e460565 · e460565
1 parent 5fd2d82
commit e460565
Show file tree

Hide file tree

Showing 7 changed files with 58 additions and 49 deletions.
diff --git a/.babelrc b/.babelrc
@@ -23,8 +23,9 @@
             }
         ],
         "@babel/plugin-proposal-class-properties",
-        "@babel/plugin-transform-react-inline-elements",
         "@babel/plugin-transform-react-constant-elements",
+        "@babel/plugin-transform-react-inline-elements",
+        "@babel/plugin-transform-react-jsx-source",
         "@babel/plugin-syntax-dynamic-import"
     ],
     "env": {

diff --git a/package.json b/package.json
@@ -156,6 +156,7 @@
         "@babel/plugin-syntax-import-meta": "^7.0.0",
         "@babel/plugin-transform-react-constant-elements": "^7.0.0",
         "@babel/plugin-transform-react-inline-elements": "^7.0.0",
+        "@babel/plugin-transform-react-jsx-source": "^7.0.0",
         "@babel/plugin-transform-runtime": "^7.0.0",
         "@babel/preset-env": "^7.0.0",
         "@babel/preset-react": "^7.0.0",

diff --git a/src/react/Pages/Stats/ChartTitle.jsx b/src/react/Pages/Stats/ChartTitle.jsx
@@ -1,7 +1,7 @@
 import React from "react";
 import Typography from "@material-ui/core/Typography";
 
-export default props => ({ children, t, ...rest }) => {
+export default ({ children, t, ...rest }) => {
     return (
         <Typography variant="h6" style={{ textAlign: "center", padding: 8 }} {...rest}>
             {t(children)}

diff --git a/src/react/Pages/Stats/EventCountSection.jsx b/src/react/Pages/Stats/EventCountSection.jsx
@@ -48,7 +48,7 @@ export default props => {
                             ) : (
                                 <EventTransactionPieChart
                                     theme={theme}
-                                    payments={props.payments} // TODO GET FROM PROPS
+                                    payments={props.payments}
                                     requestInquiryTransactionHistory={data.requestInquiryTransactionHistory}
                                     requestResponseTransactionHistory={data.requestResponseTransactionHistory}
                                     bunqMeTabTransactionHistory={data.bunqMeTabTransactionHistory}
@@ -81,6 +81,7 @@ export default props => {
                         )}
                     </Paper>
                 </Grid>
+
                 <Grid item xs={12} sm={6}>
                     <Paper
                         style={{

diff --git a/src/react/Pages/Stats/EventCountSidebarSection.jsx b/src/react/Pages/Stats/EventCountSidebarSection.jsx
@@ -1,6 +1,8 @@
 import React from "react";
-import Grid from "@material-ui/core/Grid";
 import Paper from "@material-ui/core/Paper";
+import List from "@material-ui/core/List";
+import ListItem from "@material-ui/core/ListItem";
+import ListItemText from "@material-ui/core/ListItemText";
 
 const styles = {
     sideBarPaper: {
@@ -10,13 +12,14 @@ const styles = {
 };
 
 export default props => {
+    const { t, data, splitCardTypes } = props;
     return (
         <Paper style={styles.sideBarPaper}>
             <List dense component="nav">
                 <ListItem>
-                    <ListItemText primary={t("Payments")} secondary={this.props.payments.length} />
+                    <ListItemText primary={t("Payments")} secondary={props.payments.length} />
                 </ListItem>
-                {this.state.splitCardTypes ? (
+                {splitCardTypes ? (
                     <React.Fragment>
                         <ListItem>
                             <ListItemText
@@ -45,17 +48,17 @@ export default props => {
                     </React.Fragment>
                 ) : (
                     <ListItem>
-                        <ListItemText primary={t("Card payments")} secondary={this.props.masterCardActions.length} />
+                        <ListItemText primary={t("Card payments")} secondary={props.masterCardActions.length} />
                     </ListItem>
                 )}
                 <ListItem>
-                    <ListItemText primary={t("Requests sent")} secondary={this.props.requestInquiries.length} />
+                    <ListItemText primary={t("Requests sent")} secondary={props.requestInquiries.length} />
                 </ListItem>
                 <ListItem>
-                    <ListItemText primary={t("Requests received")} secondary={this.props.requestResponses.length} />
+                    <ListItemText primary={t("Requests received")} secondary={props.requestResponses.length} />
                 </ListItem>
                 <ListItem>
-                    <ListItemText primary={t("bunqme Requests")} secondary={this.props.bunqMeTabs.length} />
+                    <ListItemText primary={t("bunqme Requests")} secondary={props.bunqMeTabs.length} />
                 </ListItem>
             </List>
         </Paper>

diff --git a/src/react/Pages/Stats/EventHistorySection.jsx b/src/react/Pages/Stats/EventHistorySection.jsx
@@ -16,61 +16,59 @@ export default props => {
                 {displayTransactionAmount ? "Event transaction history" : "Event history count"}
             </ChartTitle>
 
-            <div>
-                {splitCardTypes ? (
-                    displayTransactionAmount ? (
-                        <EventTypeSplitTransactionHistoryChart
-                            height={500}
-                            theme={theme}
-                            labels={data.labels}
-                            requestInquiryTransactionHistory={data.requestInquiryTransactionHistory}
-                            requestResponseTransactionHistory={data.requestResponseTransactionHistory}
-                            bunqMeTabTransactionHistory={data.bunqMeTabTransactionHistory}
-                            paymentTransactionHistory={data.paymentTransactionHistory}
-                            masterCardPaymentTransactionHistory={data.masterCardPaymentTransactionHistory}
-                            maestroPaymentTransactionHistory={data.maestroPaymentTransactionHistory}
-                            tapAndPayPaymentTransactionHistory={data.tapAndPayPaymentTransactionHistory}
-                            applePayPaymentTransactionHistory={data.applePayPaymentTransactionHistory}
-                        />
-                    ) : (
-                        <EventTypeSplitHistoryChart
-                            height={500}
-                            theme={theme}
-                            labels={data.labels}
-                            requestInquiryHistory={data.requestInquiryHistory}
-                            requestResponseHistory={data.requestResponseHistory}
-                            bunqMeTabHistory={data.bunqMeTabHistory}
-                            paymentHistory={data.paymentHistory}
-                            masterCardPaymentCountHistory={data.masterCardPaymentCountHistory}
-                            maestroPaymentCountHistory={data.maestroPaymentCountHistory}
-                            tapAndPayPaymentCountHistory={data.tapAndPayPaymentCountHistory}
-                            applePayPaymentCountHistory={data.applePayPaymentCountHistory}
-                        />
-                    )
-                ) : displayTransactionAmount ? (
-                    <EventTypeTransactionHistoryChart
+            {splitCardTypes ? (
+                displayTransactionAmount ? (
+                    <EventTypeSplitTransactionHistoryChart
                         height={500}
                         theme={theme}
                         labels={data.labels}
                         requestInquiryTransactionHistory={data.requestInquiryTransactionHistory}
                         requestResponseTransactionHistory={data.requestResponseTransactionHistory}
                         bunqMeTabTransactionHistory={data.bunqMeTabTransactionHistory}
                         paymentTransactionHistory={data.paymentTransactionHistory}
-                        masterCardActionTransactionHistory={data.masterCardActionTransactionHistory}
+                        masterCardPaymentTransactionHistory={data.masterCardPaymentTransactionHistory}
+                        maestroPaymentTransactionHistory={data.maestroPaymentTransactionHistory}
+                        tapAndPayPaymentTransactionHistory={data.tapAndPayPaymentTransactionHistory}
+                        applePayPaymentTransactionHistory={data.applePayPaymentTransactionHistory}
                     />
                 ) : (
-                    <EventTypeHistoryChart
+                    <EventTypeSplitHistoryChart
                         height={500}
                         theme={theme}
                         labels={data.labels}
                         requestInquiryHistory={data.requestInquiryHistory}
                         requestResponseHistory={data.requestResponseHistory}
                         bunqMeTabHistory={data.bunqMeTabHistory}
                         paymentHistory={data.paymentHistory}
-                        masterCardActionHistory={data.masterCardActionHistory}
+                        masterCardPaymentCountHistory={data.masterCardPaymentCountHistory}
+                        maestroPaymentCountHistory={data.maestroPaymentCountHistory}
+                        tapAndPayPaymentCountHistory={data.tapAndPayPaymentCountHistory}
+                        applePayPaymentCountHistory={data.applePayPaymentCountHistory}
                     />
-                )}
-            </div>
+                )
+            ) : displayTransactionAmount ? (
+                <EventTypeTransactionHistoryChart
+                    height={500}
+                    theme={theme}
+                    labels={data.labels}
+                    requestInquiryTransactionHistory={data.requestInquiryTransactionHistory}
+                    requestResponseTransactionHistory={data.requestResponseTransactionHistory}
+                    bunqMeTabTransactionHistory={data.bunqMeTabTransactionHistory}
+                    paymentTransactionHistory={data.paymentTransactionHistory}
+                    masterCardActionTransactionHistory={data.masterCardActionTransactionHistory}
+                />
+            ) : (
+                <EventTypeHistoryChart
+                    height={500}
+                    theme={theme}
+                    labels={data.labels}
+                    requestInquiryHistory={data.requestInquiryHistory}
+                    requestResponseHistory={data.requestResponseHistory}
+                    bunqMeTabHistory={data.bunqMeTabHistory}
+                    paymentHistory={data.paymentHistory}
+                    masterCardActionHistory={data.masterCardActionHistory}
+                />
+            )}
         </Paper>
     );
 };
diff --git a/src/react/Pages/Stats/Stats.jsx b/src/react/Pages/Stats/Stats.jsx
@@ -24,7 +24,12 @@ import CategoryTransactionHistoryChart from "./Chart/Timeline/CategoryTransactio
 
 const StatsWorker = require("worker-loader!../../WebWorkers/stats.worker.js");
 
-const styles = {};
+const styles = {
+    sideBarPaper: {
+        padding: 16,
+        marginBottom: 16
+    }
+};
 
 class Stats extends React.Component {
     constructor(props, context) {