Fix: make percentage chart work properly

Fix: code review

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",

new-lamassu-admin/src/pages/Dashboard/SystemPerformance/Graphs/Scatterplot.js

@@ -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

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

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',