Telemetry graph

Displaying graph data

Users can view the readings data on a graph. The X-axis displays the time values and the Y-axis displays the last 10 values for the reading category selected from the reading category dropdown menu.

Use the react package date-time picker to select a date and time to get readings for. The last 10 readings up to that time load and map on the graph's X and Y axes.

Callout	Element	Description
A	Graph	Mapped readings on graph
B	Info icon	Click to view relative information
C	Date-time picker	Pick a date and time to generate the last 10 readings up to that point in time.
D	Reading value dropdown	Select a reading type to map.

Getting and displaying readings on a graph

To display the readings data on a graph, TelemetryChannel.jsx imports and uses the ResponsiveLine library from nivo/line package.

The following code gets all the named user items and filters them for the "ref_app_iot_collection" telemetry collection:

let namedItemsAll = await IafItemSvc.getNamedUserItems();
let telCollections = namedItemsAll._list.find(  (item) => item._userType === "ref_app_iot_collection");

IafItemSvc.getRelatedReadingItems gets the "ref_app_iot_collection" telemetry collection's related readings:

let getRelatedReading = await IafItemSvc.getRelatedReadingItems(  telCollections._id,  undefined,  ctx,  undefined);

setGraphdata maps the readings and their data:

const setGraphdata = () => {  // Define data for the line chart  const data = [    {      id: "data",      data: relatedReading?._list?.slice(-10).map((x, index) => {        const date = new Date(x._ts);        const hours = date.getHours().toString().padStart(2, "0");        const minutes = date.getMinutes().toString().padStart(2, "0");        const formattedDate = date.toLocaleString();
        return {          x: `${hours}:${minutes}`,          y: getYAxisData()[index],          [selectedYAxis.value]: getYAxisData()[index],          z: formattedDate,        };      }),    },  ];  console.log("data", data)  setGraphData(data);};

The X-axis contains the hour and minute values and getYAxisData gets and maps the data to the graph's Y-axis:

const getYAxisData = () => {  const mapYAxisToValues = (yAxis) => {    return (      relatedReading?._list?.slice(-10).map((entry) => entry[yAxis]) || [        0, 0, 0,      ]    );  };
  switch (selectedYAxis.value) {    case "co2":      return mapYAxisToValues("CO2");    case "temperature":      return mapYAxisToValues("Temperature");    case "humidity":      return mapYAxisToValues("Humidity");    case "als":      return mapYAxisToValues("ALS");    case "pm1.0":      return mapYAxisToValues("PM1.0");    case "pm2.5":      return mapYAxisToValues("PM2.5");    case "pm10":      return mapYAxisToValues("PM10");    case "voc":      return mapYAxisToValues("VOC");    default:      return [];  }};