Feat: add new style to percentage chart

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

@@ -3,12 +3,7 @@ import classnames from 'classnames'
 import React from 'react'
 import { ReactComponent as CashIn } from 'src/styling/icons/direction/cash-in.svg'
 import { ReactComponent as CashOut } from 'src/styling/icons/direction/cash-out.svg'
-import {
+import { fontSize3, fontSecondary, fontColor } from 'src/styling/variables'
-  zircon,
-  fontSize3,
-  fontSecondary,
-  fontColor
-} from 'src/styling/variables'
 
 const styles = {
   wrapper: {
@@ -17,7 +12,6 @@ const styles = {
     marginTop: -8
   },
   percentageBox: {
-    backgroundColor: zircon,
     height: 130,
     borderRadius: 4,
     display: 'flex',

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

@@ -223,4 +223,30 @@ const SystemPerformance = () => {
   )
 }
 
+/**
+<Grid item xs={4}>
+              <div style={{ display: 'flex' }}>
+                <Label2>Direction</Label2>
+                <div style={{ marginLeft: 8, display: 'flex' }}>
+                  <div
+                    style={{
+                      width: 8,
+                      height: 8,
+                      borderRadius: 2,
+                      marginTop: 18,
+                      marginRight: 8,
+                      backgroundColor: 'pink'
+                    }}
+                  />
+                  <p>In</p>
+                </div>
+              </div>
+              <Grid container>
+                <Grid item xs>
+                  <PercentageChart data={getDirectionPercent()} />
+                </Grid>
+              </Grid>
+            </Grid>
+ */
+
 export default SystemPerformance