From 6b6d52d7b0d8946bfbab173ed5826e9e118f3a08 Mon Sep 17 00:00:00 2001
From: Cesar <26280794+csrapr@users.noreply.github.com>
Date: Mon, 7 Dec 2020 19:58:20 +0000
Subject: [PATCH] Fix: make percentage chart work properly

Fix: code review
---
 new-lamassu-admin/package-lock.json           |   5 +
 .../SystemPerformance/Graphs/Scatterplot.js   | 134 ------------------
 .../pages/Transactions/DetailsCard.styles.js  |   5 +-
 new-lamassu-admin/src/routing/routes.js       |  12 --
 4 files changed, 8 insertions(+), 148 deletions(-)
 delete mode 100644 new-lamassu-admin/src/pages/Dashboard/SystemPerformance/Graphs/Scatterplot.js

diff --git a/new-lamassu-admin/package-lock.json b/new-lamassu-admin/package-lock.json
index 44c2094f..441bf0ad 100644
--- a/new-lamassu-admin/package-lock.json
+++ b/new-lamassu-admin/package-lock.json
@@ -8327,6 +8327,11 @@
             "picomatch": "^2.0.5"
           }
         },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
+        },
         "normalize-path": {
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
diff --git a/new-lamassu-admin/src/pages/Dashboard/SystemPerformance/Graphs/Scatterplot.js b/new-lamassu-admin/src/pages/Dashboard/SystemPerformance/Graphs/Scatterplot.js
deleted file mode 100644
index ef08a169..00000000
--- a/new-lamassu-admin/src/pages/Dashboard/SystemPerformance/Graphs/Scatterplot.js
+++ /dev/null
@@ -1,134 +0,0 @@
-/*eslint-disable*/
-import { scaleLinear, scaleTime, max, axisLeft, axisBottom, select } from 'd3'
-import React, { useMemo } from 'react'
-import moment from 'moment'
-
-const data = [
-  [0, '2020-11-08T18:00:05.664Z'],
-  [40.01301, '2020-11-09T11:17:05.664Z']
-]
-
-const marginTop = 10
-const marginRight = 30
-const marginBottom = 30
-const marginLeft = 60
-const width = 510 - marginLeft - marginRight
-const height = 141 - marginTop - marginBottom
-
-const Scatterplot = ({ data: realData }) => {
-  const x = scaleTime()
-    .domain([
-      moment()
-        .add(-1, 'day')
-        .valueOf(),
-      moment().valueOf()
-    ])
-    .range([0, width])
-    .nice()
-
-  const y = scaleLinear()
-    .domain([0, 1000])
-    .range([height, 0])
-    .nice()
-
-  // viewBox="0 0 540 141"
-  return (
-    <>
-      <svg
-        width={width + marginLeft + marginRight}
-        height={height + marginTop + marginBottom}>
-        <g transform={`translate(${marginLeft},${marginTop})`}>
-          <XAxis
-            transform={`translate(0, ${height + marginTop})`}
-            scale={x}
-            numTicks={6}
-          />
-          <g>{axisLeft(y)}</g>
-          {/* <YAxis transform={`translate(0, 0)`} scale={y} numTicks={6} /> */}
-          <RenderCircles data={data} scale={{ x, y }} />
-        </g>
-      </svg>
-    </>
-  )
-}
-
-const XAxis = ({
-  range = [10, 500],
-  transform,
-  scale: xScale,
-  numTicks = 7
-}) => {
-  const ticks = useMemo(() => {
-    return xScale.ticks(numTicks).map(value => ({
-      value,
-      xOffset: xScale(value)
-    }))
-  }, [range.join('-')])
-
-  return (
-    <g transform={transform}>
-      {ticks.map(({ value, xOffset }) => (
-        <g key={value} transform={`translate(${xOffset}, 0)`}>
-          <text
-            key={value}
-            style={{
-              fontSize: '10px',
-              textAnchor: 'middle',
-              transform: 'translateY(10px)'
-            }}>
-            {value.getHours()}
-          </text>
-        </g>
-      ))}
-    </g>
-  )
-}
-
-const YAxis = ({
-  range = [10, 500],
-  transform,
-  scale: xScale,
-  numTicks = 7
-}) => {
-  const ticks = useMemo(() => {
-    return xScale.ticks(numTicks).map(value => ({
-      value,
-      xOffset: xScale(value)
-    }))
-  }, [range.join('-')])
-
-  return (
-    <g transform={transform}>
-      {ticks.map(({ value, xOffset }) => (
-        <g key={value} transform={`translate(0, ${xOffset})`}>
-          <text
-            key={value}
-            style={{
-              fontSize: '10px',
-              textAnchor: 'middle',
-              transform: 'translateX(-10px)'
-            }}>
-            {value}
-          </text>
-        </g>
-      ))}
-    </g>
-  )
-}
-
-const RenderCircles = ({ data, scale }) => {
-  let renderCircles = data.map((item, idx) => {
-    return (
-      <circle
-        cx={scale.x(new Date(item[1]))}
-        cy={scale.y(item[0])}
-        r="4"
-        style={{ fill: 'rgba(25, 158, 199, .9)' }}
-        key={idx}
-      />
-    )
-  })
-  return <g>{renderCircles}</g>
-}
-
-export default Scatterplot
diff --git a/new-lamassu-admin/src/pages/Transactions/DetailsCard.styles.js b/new-lamassu-admin/src/pages/Transactions/DetailsCard.styles.js
index cc9233ac..7bc345cf 100644
--- a/new-lamassu-admin/src/pages/Transactions/DetailsCard.styles.js
+++ b/new-lamassu-admin/src/pages/Transactions/DetailsCard.styles.js
@@ -3,7 +3,7 @@ import { offColor } from 'src/styling/variables'
 
 const { p } = typographyStyles
 
-export default {
+const styles = {
   wrapper: {
     display: 'flex',
     flexDirection: 'column',
@@ -43,7 +43,6 @@ export default {
     extend: p,
     display: 'flex',
     padding: [[11, 8]],
-    // rework this into a proper component
     '& > div': {
       display: 'flex',
       flexDirection: 'column',
@@ -82,3 +81,5 @@ export default {
     width: 215
   }
 }
+
+export default styles
diff --git a/new-lamassu-admin/src/routing/routes.js b/new-lamassu-admin/src/routing/routes.js
index 0e98e255..be3e1c2c 100644
--- a/new-lamassu-admin/src/routing/routes.js
+++ b/new-lamassu-admin/src/routing/routes.js
@@ -51,18 +51,6 @@ const useStyles = makeStyles({
 })
 
 const tree = [
-  /*   {
-    key: 'dashboard',
-    label: 'Dashboard',
-    route: '/dashboard',
-    component: Dashboard
-  }, */
-  /*   {
-    key: 'machines',
-    label: 'Machines',
-    route: '/machines',
-    component: Machines
-  }, */
   {
     key: 'transactions',
     label: 'Transactions',