Improve chart layout

3 files changed, 49 insertions, 53 deletions

diff --git a/modern/package.json b/modern/package.json
index 4ac91845..5dfd8ad2 100644
--- a/modern/package.json
+++ b/modern/package.json
@@ -6,7 +6,6 @@
     "@craco/craco": "^5.9.0",
     "@mapbox/mapbox-gl-draw": "^1.3.0",
     "@material-ui/core": "^4.11.4",
-    "@material-ui/data-grid": "^4.0.0-alpha.33",
     "@material-ui/icons": "^4.11.2",
     "@material-ui/lab": "^4.0.0-alpha.58",
     "@reduxjs/toolkit": "^1.6.0",
diff --git a/modern/src/reports/ChartReportPage.js b/modern/src/reports/ChartReportPage.js
index 57c7c689..7056dc70 100644
--- a/modern/src/reports/ChartReportPage.js
+++ b/modern/src/reports/ChartReportPage.js
@@ -1,9 +1,11 @@
 import React, { useState } from 'react';
 import {
-  FormControl, InputLabel, Select, MenuItem,
+  FormControl, InputLabel, Select, MenuItem, makeStyles,
 } from '@material-ui/core';
+import {
+  CartesianGrid, Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis,
+} from 'recharts';
 import ReportFilter, { useFilterStyles } from './components/ReportFilter';
-import Graph from './components/Graph';
 import { useAttributePreference } from '../common/util/preferences';
 import { formatDate } from '../common/util/formatter';
 import { speedFromKnots } from '../common/util/converter';
@@ -11,8 +13,23 @@ import { useTranslation } from '../common/components/LocalizationProvider';
 import PageLayout from '../common/components/PageLayout';
 import ReportsMenu from './components/ReportsMenu';
 
+const typesArray = [
+  ['speed', 'positionSpeed'],
+  ['accuracy', 'positionAccuracy'],
+  ['altitude', 'positionAltitude'],
+];
+const typesMap = new Map(typesArray);
+
+const useStyles = makeStyles(() => ({
+  chart: {
+    flexGrow: 1,
+    overflow: 'hidden',
+  },
+}));
+
 const ChartReportPage = () => {
-  const classes = useFilterStyles();
+  const classes = useStyles();
+  const filterClasses = useFilterStyles();
   const t = useTranslation();
 
   const speedUnit = useAttributePreference('speedUnit');
@@ -20,6 +37,12 @@ const ChartReportPage = () => {
   const [items, setItems] = useState([]);
   const [type, setType] = useState('speed');
 
+  const dataRange = (() => {
+    const values = items.map((it) => it[type]);
+    const result = Math.max(...values) - Math.min(...values);
+    return result;
+  })();
+
   const handleSubmit = async (deviceId, from, to, mail, headers) => {
     const query = new URLSearchParams({
       deviceId, from, to, mail,
@@ -31,7 +54,7 @@ const ChartReportPage = () => {
         speed: Number(speedFromKnots(position.speed, speedUnit)),
         altitude: position.altitude,
         accuracy: position.accuracy,
-        fixTime: formatDate(position.fixTime),
+        fixTime: formatDate(position.fixTime, 'HH:mm:ss'),
       }));
       setItems(formattedPositions);
     }
@@ -40,18 +63,35 @@ const ChartReportPage = () => {
   return (
     <PageLayout menu={<ReportsMenu />} breadcrumbs={['reportTitle', 'reportChart']}>
       <ReportFilter handleSubmit={handleSubmit} showOnly>
-        <div className={classes.item}>
+        <div className={filterClasses.item}>
           <FormControl variant="filled" fullWidth>
             <InputLabel>{t('reportChartType')}</InputLabel>
             <Select value={type} onChange={(e) => setType(e.target.value)}>
-              <MenuItem value="speed">{t('positionSpeed')}</MenuItem>
-              <MenuItem value="accuracy">{t('positionAccuracy')}</MenuItem>
-              <MenuItem value="altitude">{t('positionAltitude')}</MenuItem>
+              {typesArray.map(([key, string]) => (
+                <MenuItem key={key} value={key}>{t(string)}</MenuItem>
+              ))}
             </Select>
           </FormControl>
         </div>
       </ReportFilter>
-      <Graph items={items} type={type} />
+      {items.length > 0 && (
+        <div className={classes.chart}>
+          <ResponsiveContainer>
+            <LineChart
+              data={items}
+              margin={{
+                top: 30, right: 40, left: 10, bottom: 10,
+              }}
+            >
+              <XAxis dataKey="fixTime" />
+              <YAxis type="number" domain={[`dataMin - ${dataRange / 5}`, `dataMax + ${dataRange / 5}`]} />
+              <CartesianGrid strokeDasharray="3 3" />
+              <Tooltip formatter={(value, name) => [value, t(typesMap.get(name))]} />
+              <Line type="natural" dataKey={type} />
+            </LineChart>
+          </ResponsiveContainer>
+        </div>
+      )}
     </PageLayout>
   );
 };
diff --git a/modern/src/reports/components/Graph.js b/modern/src/reports/components/Graph.js
deleted file mode 100644
index 88b51493..00000000
--- a/modern/src/reports/components/Graph.js
+++ /dev/null
@@ -1,43 +0,0 @@
-import React from 'react';
-import { makeStyles } from '@material-ui/core';
-import {
-  LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer,
-} from 'recharts';
-
-const CustomizedAxisTick = ({ x, y, payload }) => {
-  if (!payload.value) {
-    return payload.value;
-  }
-  const parts = payload.value.split(' ');
-  return (
-    <g transform={`translate(${x},${y})`}>
-      <text x={0} y={0} dy={16} textAnchor="end" fill="#666" transform="rotate(-35)">{parts[0]}</text>
-      <text x={0} y={16} dy={16} textAnchor="end" fill="#666" transform="rotate(-35)">{parts[1]}</text>
-    </g>
-  );
-};
-
-const useStyles = makeStyles((theme) => ({
-  chart: {
-    backgroundColor: theme.palette.colors.white,
-  },
-}));
-
-const Graph = ({ type, items }) => {
-  const classes = useStyles();
-
-  return (
-    <ResponsiveContainer height={400} width="100%" debounce={1} className={classes.chart}>
-      <LineChart data={items}>
-        <XAxis dataKey="fixTime" tick={<CustomizedAxisTick />} height={60} />
-        <YAxis />
-        <CartesianGrid strokeDasharray="3 3" />
-        <Tooltip />
-        <Legend />
-        <Line type="natural" dataKey={type} />
-      </LineChart>
-    </ResponsiveContainer>
-  );
-};
-
-export default Graph;