Refactoring and Improvements in chart report

1 files changed, 48 insertions, 42 deletions

diff --git a/modern/src/reports/ChartReportPage.js b/modern/src/reports/ChartReportPage.js
index 6898933..e37f7ca 100644
--- a/modern/src/reports/ChartReportPage.js
+++ b/modern/src/reports/ChartReportPage.js
@@ -1,43 +1,53 @@
 import React, { useState } from 'react';
-import { Card, CardHeader, CardContent } from '@material-ui/core';
-import { Box, Divider } from '@material-ui/core';
-import { makeStyles } from '@material-ui/core/styles';
+import { Box, Paper, FormControl, InputLabel, Select, MenuItem } from '@material-ui/core';
 import ReportFilter from './ReportFilter';
 import ReportLayoutPage from './ReportLayoutPage';
-import ChartType from './ChartType';
+import t from '../common/localization';
+import { chartTypes } from '../common/chartTypes';
+import { useAttributePreference } from '../common/preferences';
+import { getConverter, formatDate } from '../common/formatter';
 
 import {LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
 
-const useStyles = makeStyles((theme) => ({
-  formControl: {
-    minWidth: 160,
-  },
-}));
+const ReportFilterForm = ({ setItems, setType }) => {
 
-const ReportFilterForm = ({ setItems }) => {
+  const speedUnit = useAttributePreference('speedUnit');
 
   const handleSubmit = async (deviceId, from, to, mail, headers) => {
     const query = new URLSearchParams({ deviceId, from, to, mail });
     const response = await fetch(`/api/reports/route?${query.toString()}`, { headers });
     if (response.ok) {
-      const contentType = response.headers.get('content-type');
-      if (contentType) {
-        if (contentType === 'application/json') {
-          setItems(await response.json());
-        } else {
-          window.location.assign(window.URL.createObjectURL(await response.blob()));
-        }
-      }
+      const data = await response.json();
+      let formattedData = data.map((obj)=>{
+        return Object.assign(obj, 
+                              {speed: getConverter('speed')(obj.speed, speedUnit)},
+                              {fixTime: formatDate(obj.fixTime)}
+                            );
+      })
+      setItems(formattedData);
     }
-  };
+  }
 
-  return <ReportFilter handleSubmit={handleSubmit} showOnly />;
+  return (
+    <ReportFilter handleSubmit={handleSubmit} showOnly >
+      <FormControl variant="filled" margin="normal" fullWidth>
+      <InputLabel>{t('reportChartType')}</InputLabel>
+      <Select defaultValue="speed" onChange={e => setType(e.target.value)}>
+      {chartTypes.map(item => (
+            <MenuItem key={item.id} value={item.id}>{item.name}</MenuItem>
+          ))}
+      </Select>
+      </FormControl>
+    </ReportFilter>
+  )
 };
 
-const CustomizedAxisTick = ({ x, y, stroke, payload }) =>{
+const CustomizedAxisTick = ({ x, y, payload }) =>{
+  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)">{payload.value}</text>
+      <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>
   );
 }
@@ -48,27 +58,23 @@ const ChartReportPage = () => {
   const [type, setType] = useState('speed');
 
   return (
-    <ReportLayoutPage reportFilterForm={ReportFilterForm} setItems={setItems} >
-      <Card>
-        <CardHeader action={<ChartType type={type} setType={setType}/>} />
-        <Divider />
-        <CardContent>
-          <Box height={400} position="relative">
-            <ResponsiveContainer>
-              <LineChart data={items}>
-                <XAxis dataKey="fixTime" interval="preserveStartEnd" height={60} tick={<CustomizedAxisTick/>} />
-                <YAxis />
-                <CartesianGrid strokeDasharray="3 3" />
-                <Tooltip />
-                <Legend />
-                <Line type="monotone" dataKey={type} stroke="#8884d8" />
-              </LineChart>
-            </ResponsiveContainer>
-            </Box>
-        </CardContent>
-      </Card>
+    <ReportLayoutPage reportFilterForm={ReportFilterForm} setItems={setItems} setType={setType}>
+      <Paper>
+        <Box height={400}>
+          <ResponsiveContainer>
+            <LineChart data={items}>
+              <XAxis dataKey="fixTime" tick={<CustomizedAxisTick/>} height={60} />
+              <YAxis />
+              <CartesianGrid strokeDasharray="3 3" />
+              <Tooltip />
+              <Legend />
+              <Line type="natural" dataKey={type} />
+            </LineChart>
+          </ResponsiveContainer>
+        </Box>
+      </Paper>
     </ReportLayoutPage>
   );
-}
+};
 
 export default ChartReportPage;