aboutsummaryrefslogtreecommitdiff
path: root/modern/src
diff options
context:
space:
mode:
authorAnton Tananaev <anton@traccar.org>2023-05-25 16:29:10 -0700
committerAnton Tananaev <anton@traccar.org>2023-05-25 16:29:26 -0700
commitb756ef71c34dbfb5caa8a908ff890afc168fda3d (patch)
tree7daa71085323dabf7dc3a008535bc4d7a6e4c6ba /modern/src
parent66637ce13f7f9c5f5ac2bd627e2cbe19fb74e7fe (diff)
downloadtrackermap-web-b756ef71c34dbfb5caa8a908ff890afc168fda3d.tar.gz
trackermap-web-b756ef71c34dbfb5caa8a908ff890afc168fda3d.tar.bz2
trackermap-web-b756ef71c34dbfb5caa8a908ff890afc168fda3d.zip
Custom attributes in chart
Diffstat (limited to 'modern/src')
-rw-r--r--modern/src/reports/ChartReportPage.js26
1 files changed, 21 insertions, 5 deletions
diff --git a/modern/src/reports/ChartReportPage.js b/modern/src/reports/ChartReportPage.js
index 3a4aeb4f..2c33f0f5 100644
--- a/modern/src/reports/ChartReportPage.js
+++ b/modern/src/reports/ChartReportPage.js
@@ -31,6 +31,7 @@ const ChartReportPage = () => {
const hours12 = usePreference('twelveHourFormat');
const [items, setItems] = useState([]);
+ const [types, setTypes] = useState(['speed']);
const [type, setType] = useState('speed');
const values = items.map((it) => it[type]);
@@ -45,13 +46,16 @@ const ChartReportPage = () => {
});
if (response.ok) {
const positions = await response.json();
+ const keySet = new Set();
+ const keyList = [];
const formattedPositions = positions.map((position) => {
const data = { ...position, ...position.attributes };
const formatted = {};
formatted.fixTime = formatTime(position.fixTime, 'time', hours12);
- Object.keys(data).forEach((key) => {
+ Object.keys(data).filter((key) => !['id', 'deviceId'].includes(key)).forEach((key) => {
const value = data[key];
if (typeof value === 'number') {
+ keySet.add(key);
const definition = positionAttributes[key] || {};
switch (definition.dataType) {
case 'speed':
@@ -77,6 +81,13 @@ const ChartReportPage = () => {
});
return formatted;
});
+ Object.keys(positionAttributes).forEach((key) => {
+ if (keySet.has(key)) {
+ keyList.push(key);
+ keySet.delete(key);
+ }
+ });
+ setTypes([...keyList, ...keySet]);
setItems(formattedPositions);
} else {
throw Error(await response.text());
@@ -89,9 +100,14 @@ const ChartReportPage = () => {
<div className={classes.filterItem}>
<FormControl fullWidth>
<InputLabel>{t('reportChartType')}</InputLabel>
- <Select label={t('reportChartType')} value={type} onChange={(e) => setType(e.target.value)}>
- {Object.keys(positionAttributes).filter((key) => positionAttributes[key].type === 'number').map((key) => (
- <MenuItem key={key} value={key}>{positionAttributes[key].name}</MenuItem>
+ <Select
+ label={t('reportChartType')}
+ value={type}
+ onChange={(e) => setType(e.target.value)}
+ disabled={!items.length}
+ >
+ {types.map((key) => (
+ <MenuItem key={key} value={key}>{positionAttributes[key]?.name || key}</MenuItem>
))}
</Select>
</FormControl>
@@ -109,7 +125,7 @@ const ChartReportPage = () => {
<XAxis dataKey="fixTime" />
<YAxis type="number" tickFormatter={(value) => value.toFixed(2)} domain={[minValue - valueRange / 5, maxValue + valueRange / 5]} />
<CartesianGrid strokeDasharray="3 3" />
- <Tooltip formatter={(value, key) => [value, positionAttributes[key].name]} />
+ <Tooltip formatter={(value, key) => [value, positionAttributes[key]?.name || key]} />
<Line type="monotone" dataKey={type} />
</LineChart>
</ResponsiveContainer>