From ececc155f86163843f602c39002dd48769da2ce0 Mon Sep 17 00:00:00 2001
From: Anton Tananaev <anton@traccar.org>
Date: Wed, 25 May 2022 09:34:24 -0700
Subject: Fix chart units (fix #943)

---
 modern/src/reports/ChartReportPage.js | 52 ++++++++++++++++++++++++++---------
 1 file changed, 39 insertions(+), 13 deletions(-)

(limited to 'modern/src/reports')

diff --git a/modern/src/reports/ChartReportPage.js b/modern/src/reports/ChartReportPage.js
index becdfb57..860d99f0 100644
--- a/modern/src/reports/ChartReportPage.js
+++ b/modern/src/reports/ChartReportPage.js
@@ -13,6 +13,8 @@ import PageLayout from '../common/components/PageLayout';
 import ReportsMenu from './components/ReportsMenu';
 import usePositionAttributes from '../common/attributes/usePositionAttributes';
 import { useCatch } from '../reactHelper';
+import { useAttributePreference } from '../common/util/preferences';
+import { distanceFromMeters, speedFromKnots, volumeFromLiters } from '../common/util/converter';
 
 const useStyles = makeStyles(() => ({
   chart: {
@@ -28,14 +30,17 @@ const ChartReportPage = () => {
 
   const positionAttributes = usePositionAttributes(t);
 
+  const distanceUnit = useAttributePreference('distanceUnit');
+  const speedUnit = useAttributePreference('speedUnit');
+  const volumeUnit = useAttributePreference('volumeUnit');
+
   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 values = items.map((it) => it[type]);
+  const minValue = Math.min(...values);
+  const maxValue = Math.max(...values);
+  const valueRange = maxValue - minValue;
 
   const handleSubmit = useCatch(async (deviceId, from, to, mail, headers) => {
     const query = new URLSearchParams({
@@ -44,11 +49,32 @@ const ChartReportPage = () => {
     const response = await fetch(`/api/reports/route?${query.toString()}`, { headers });
     if (response.ok) {
       const positions = await response.json();
-      const formattedPositions = positions.map((position) => ({
-        ...position,
-        ...position.attributes,
-        fixTime: formatDate(position.fixTime, 'HH:mm:ss'),
-      }));
+      const formattedPositions = positions.map((position) => {
+        const data = { ...position, ...position.attributes };
+        const formatted = {};
+        formatted.fixTime = formatDate(position.fixTime, 'HH:mm:ss');
+        Object.keys(data).forEach((key) => {
+          const value = data[key];
+          if (typeof value === 'number') {
+            const definition = positionAttributes[key] || {};
+            switch (definition.dataType) {
+              case 'speed':
+                formatted[key] = speedFromKnots(value, speedUnit).toFixed(2);
+                break;
+              case 'distance':
+                formatted[key] = distanceFromMeters(value, distanceUnit).toFixed(2);
+                break;
+              case 'volume':
+                formatted[key] = volumeFromLiters(value, volumeUnit).toFixed(2);
+                break;
+              default:
+                formatted[key] = value;
+                break;
+            }
+          }
+        });
+        return formatted;
+      });
       setItems(formattedPositions);
     } else {
       throw Error(await response.text());
@@ -79,10 +105,10 @@ const ChartReportPage = () => {
               }}
             >
               <XAxis dataKey="fixTime" />
-              <YAxis type="number" domain={[`dataMin - ${dataRange / 5}`, `dataMax + ${dataRange / 5}`]} />
+              <YAxis type="number" domain={[minValue - valueRange / 5, maxValue + valueRange / 5]} />
               <CartesianGrid strokeDasharray="3 3" />
-              <Tooltip formatter={(value, name) => [value, positionAttributes[name].name]} />
-              <Line type="natural" dataKey={type} />
+              <Tooltip formatter={(value, key) => [value, positionAttributes[key].name]} />
+              <Line type="monotone" dataKey={type} />
             </LineChart>
           </ResponsiveContainer>
         </div>
-- 
cgit v1.2.3