chore: use monorepo organization

packages/admin-ui/src/pages/Analytics/components/wrappers/OverTimeWrapper.jsx

@@ -0,0 +1,89 @@
+import Switch from '@mui/material/Switch'
+import React, { useState } from 'react'
+import { H2, Label1 } from 'src/components/typography'
+
+import { Select } from 'src/components/inputs'
+import { primaryColor } from 'src/styling/variables'
+
+import Graph from '../../graphs/Graph'
+import LegendEntry from '../LegendEntry'
+import classes from './wrappers.module.css'
+
+const OverTimeDotGraphHeader = ({
+  title,
+  representing,
+  period,
+  data,
+  machines,
+  selectedMachine,
+  handleMachineChange,
+  timezone,
+  currency
+}) => {
+  const [logarithmic, setLogarithmic] = useState()
+
+  const legend = {
+    cashIn: <div className={classes.cashInIcon}></div>,
+    cashOut: <div className={classes.cashOutIcon}></div>,
+    transaction: <div className={classes.txIcon}></div>,
+    median: (
+      <svg height="12" width="18">
+        <path
+          stroke={primaryColor}
+          strokeWidth="3"
+          strokeDasharray="5, 2"
+          d="M 5 6 l 20 0"
+        />
+      </svg>
+    )
+  }
+
+  return (
+    <>
+      <div className={classes.graphHeaderWrapper}>
+        <div className={classes.graphHeaderLeft}>
+          <H2 noMargin>{title}</H2>
+          <div className={classes.graphLegend}>
+            <LegendEntry IconElement={legend.cashIn} label={'Cash-in'} />
+            <LegendEntry IconElement={legend.cashOut} label={'Cash-out'} />
+            <LegendEntry
+              IconElement={legend.transaction}
+              label={'One transaction'}
+            />
+            <LegendEntry IconElement={legend.median} label={'Median'} />
+          </div>
+        </div>
+        <div className={classes.graphHeaderRight}>
+          <div className={classes.graphHeaderSwitchBox}>
+            <Label1 noMargin className="mb-1 text-comet">
+              Log. scale
+            </Label1>
+            <Switch
+              className="m-0"
+              onChange={event => setLogarithmic(event.target.checked)}
+            />
+          </div>
+          <Select
+            label="Machines"
+            onSelectedItemChange={handleMachineChange}
+            items={machines}
+            default={machines[0]}
+            selectedItem={selectedMachine}
+          />
+        </div>
+      </div>
+      <Graph
+        representing={representing}
+        period={period}
+        data={data}
+        timezone={timezone}
+        currency={currency}
+        selectedMachine={selectedMachine}
+        machines={machines}
+        log={logarithmic}
+      />
+    </>
+  )
+}
+
+export default OverTimeDotGraphHeader