Feature Request: Reports use attribute "Web: Report Color" to display lines

[michalis97500]

I'm always frustrated when trying to produce reports of several vehicles at the same time. All lines are drawn with the same blue color and thus distinguishing routes of different vehicles becomes extremely difficult

Each vehicle can get the color from its attribute as a way to display the routes in the reports.

No alternatives to this. The data must be exported, analyzed and plotted manually (maybe by python?) which defeats the purpose of the reports

[michalis97500]

My solution to this is

In CombinedReportsPage.jsx

 // Define an array of colors
  const colors = [
    '#FF0000', '#00FF00', '#0000FF', '#FFFF00', '#FF00FF', '#00FFFF',
    '#FFA500', '#800080', '#008000', '#000080', '#FF4500', '#FF1493',
    '#00CED1', '#FFD700', '#8A2BE2', '#7FFF00', '#DC143C', '#00BFFF',
    '#FF69B4', '#32CD32', '#FF8C00', '#4B0082', '#ADFF2F', '#FF00FF',
    '#1E90FF', '#FFD700', '#FF6347', '#00FA9A', '#FFA07A', '#20B2AA',
    '#FFC0CB', '#7CFC00', '#BA55D3', '#FF4500', '#00FFFF', '#FF1493',
    '#00BFFF', '#FF69B4', '#32CD32', '#FF8C00', '#4B0082', '#ADFF2F'
  ];

  // Function to get a color for a device
  const getColorForDevice = (deviceId) => {
    const colorIndex = deviceId % colors.length;
    return colors[colorIndex];
  };

and modify MapRoutePath as :

                <MapRoutePath
                    key={item.deviceId}
                    name={devices[item.deviceId].name}
                    positions={item.positions}
                    coordinates={item.route}
                    color1={deviceColor}
                  />

then in MapRoutePath.js:

Modify this line to add color1

const MapRoutePath = ({ name, positions, coordinates, color1 }) => {

construct variable as:

const reportColor = useSelector((state) => {
    const position = positions?.find(() => true);
    console.log(`positions: ${positions}`); // Debug log
    if (position) {
      const attributes = state.devices.items[position.deviceId]?.attributes;
      console.log(`attributes: ${attributes}`); // Debug log
      if (attributes) {
        const color = color1;
        console.log(`color1: ${color1}`); // Debug log
        if (color) {
          console.log(`Returning Color: ${color}`); // Debug log
          return color;
        }
      }
    }
    if (color1) {
      console.log(`Returning Color: ${color1}`); // Debug log
      return color1;
    }
    return theme.palette.geometry.main;
  });

Add the color property as follows:

useEffect(() => {
    map.addSource(id, {
      type: 'geojson',
      data: {
        type: 'Feature',
        geometry: {
          type: 'LineString',
          coordinates: [],
        },
      properties: {
        color: reportColor,
      },
    },
    });

[DanielNagy]

Hi @michalis97500

color1={deviceColor}

where is deviceColor defined?

[michalis97500]

@DanielNagy Apologies for missing this, I did it as :

{items.map((item) => { const deviceColor = getColorForDevice(item.deviceId); console.log(Device ID: ${item.deviceId}, Color: ${deviceColor}`); // Debug log

            return (
              <MapRoutePath
                key={item.deviceId}
                name={devices[item.deviceId].name}
                positions={item.positions}
                coordinates={item.route}
                color1={deviceColor}
              />
            );
          })}

`

the getColorForDevice() function is given in my previous comment. I would have posted the whole file for ease of use, but I modified some other parameters and tried to give code that can be easily added to the original file instead

[DanielNagy]

the getColorForDevice() function is given in my previous comment. I would have posted the whole file for ease of use, but I modified some other parameters and tried to give code that can be easily added to the original file instead

Great, I did do something smilar in the end.

For others following along, github broke the formatting above, here is a fixed version.

                {items.map((item) => { const deviceColor = getColorForDevice(item.deviceId); console.log(`Device ID: ${item.deviceId}, Color: ${deviceColor}`); // Debug log

                  return (
                    <MapRoutePath
                      key={item.deviceId}
                      name={devices[item.deviceId].name}
                      positions={item.positions}
                      coordinates={item.route}
                      color1={deviceColor}
                    />
                  );
                })}

Now to work out how to add Ant path function, instead of arrows to indicate direction.
https://docs.mapbox.com/mapbox-gl-js/example/animate-ant-path/

[hypoclone]

Hello @DanielNagy, please were you able to implement this?

Now to work out how to add Ant path function, instead of arrows to indicate direction.
https://docs.mapbox.com/mapbox-gl-js/example/animate-ant-path/
Thank you

[Amc-101]

Hi @DanielNagy and @michalis97500 . Sorry, newbie questions:
. are these changes all in CombinedReportPage.jsx and MapRoutePath.js or are there other files too, eg for the deviceColor definition?
. it's not obvious to me how some of the updates are inserted (eg whether the useEffect in MapRoutePath.js is in addition to the useEffect already there).
If one of you could post complete files as examples (even if they have other mods in them as well) that would be great.
Thanks

[Amc-101]

Sorry, I'm an idiot. I see the correct useEffect in MapRoutePath.js to change.
Question about the deviceColor definition (and ideally sample files) still stands.
Thanks

[michalis97500]

@Amc-101 Hope im not too late in answering, those files were the only changes. Unfortunately I don't have the files anymore as I have overwritten them with the newer updates... I moved to generating the reports in another way via accessing the DB directly

[Amc-101]

@michalis97500 - thanks for replying. That's a shame about the overwrites but maybe you remember (even roughly) where the deviceColor definition fits? eg the block that starts with:
'{items.map((item) => { const deviceColor = getColorForDevice(item.deviceId);' and returns a MapRoutePath?

I tried replacing the original items.map call to 'MapRouteCoordinates' in CombinedReportPage.jsx because I couldn't see any better place to try but that doesn't seem to be it. I think it's the only bit I haven't sorted.
Any tips appreciated. Thanks