aboutsummaryrefslogtreecommitdiff
path: root/modern/src/reports/ChartReportPage.js
diff options
context:
space:
mode:
authorAnton Tananaev <anton@traccar.org>2022-05-25 09:34:24 -0700
committerAnton Tananaev <anton@traccar.org>2022-05-25 09:34:24 -0700
commitececc155f86163843f602c39002dd48769da2ce0 (patch)
tree785b1f4fea94a23c3c39b410104c6e0b976865b4 /modern/src/reports/ChartReportPage.js
parent09954c06d8970f27ad14f8b30ed14cf357a1fa5e (diff)
downloadtrackermap-web-ececc155f86163843f602c39002dd48769da2ce0.tar.gz
trackermap-web-ececc155f86163843f602c39002dd48769da2ce0.tar.bz2
trackermap-web-ececc155f86163843f602c39002dd48769da2ce0.zip
Fix chart units (fix #943)
Diffstat (limited to 'modern/src/reports/ChartReportPage.js')
-rw-r--r--modern/src/reports/ChartReportPage.js52
1 files changed, 39 insertions, 13 deletions
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>