This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

API for Temperature

There are two hooks: one for the latest datapoint, and one for all datapoints. Both gets called in App.Js with a parameter attached {sensorId} to choose which sensor to get data from. Example:

Latest Value: <TemperatureView sensorId={'temp-sensor-004'}/>

All Values: <TemperatureTimeSeriesView sensorId={'temp-sensor-001'}/>

Data returned from hook

• useTemperature Returns a JSON object containing data for sensorId, timestamp and temperature.

   {
  "sensorId":"temp-sensor-001",
  "timestamp":"2026-04-13T10:15:00Z",
  "temperature":"17.5
  "}

• useTemperatureTimeSeriesView Returns an array of JSON objects

[
  {
  "sensorId":"temp-sensor-002",
  "timestamp":"2026-04-13T10:15:00Z",
  "temperature":"19.2"
  }
  {
  "sensorId":"temp-sensor-002",
  "timestamp":"2026-04-13T10:16:00Z",
  "temperature":"23.9"
  }
  {
  "sensorId":"temp-sensor-002",
  "timestamp":"2026-04-13T10:17:00Z",
  "temperature":"22.8"
  }
]

View

To implement a view, the hook needs to be imported and called with the parameter. Example:

• useTemperatureTimeSeriesView: To get all

import {useTemperatureTimeSeriesView} from "./useTemperatureTimeSeriesView";
export default function TemperatureTimeSeriesView({sensorId}) {

    const {data, loading, error} = useTemperatureTimeSeriesView(sensorId);

• useTemperature: To get latest

import {useTemperature} from './useTemperature';
export default function TemperatureView({sensorId}) {
    const {data, loading, error} = useTemperature(sensorId);

Adding values to layout examples

• useTemperature When creating the layout, the values get accessed through data.collumnName when using useTemperature.js(Latest value) Example:

    <Card title="Temperature">
      <p style={{ fontSize: '2rem', fontWeight: 'bold', margin: 0 }}>
        {data.temperature} °C
        Sensor: {data.sensorId}
      </p>

• useTemperatureTimeSeriesView As data is an array of objects when useTemperatureTimeSeriesView.js(All values) is used the list needs to be accessed before using the JSON objects within. implementation depends on what the view will do but an Example is using.

const timeSeries = data.map((item, index)=> and call the values with item.ColumnName

 return (
        <p key={index} style={{ color: '#5d9e57', fontSize: '1rem', marginTop: '0.5rem' }}> 
            {time.toLocaleDateString("sv-SE", options)}: {item.temperature} °C ID:{item.sensorId}
        </p>
        )   

Adding more sensors

If more Sensors or different sensorId names are needed/wanted, you can add it in \tempSensorMockup by adding a new sensor with a name to the array.

  var data = new[]
  {
    new
    {
      sensorId = "temp-sensor-001",
      timestamp = DateTime.UtcNow,
      temperature = Math.Round(rand.NextDouble() * 15 + 10, 2)
    },
    new
    {
      sensorId = "temp-sensor-002",
      timestamp = DateTime.UtcNow,
      temperature = Math.Round(rand.NextDouble() * 15 + 10, 2)
     }
  };

The decision and why

The intention was to create a mockup data for temperature sensors where it’s easy to add more sensors to fit the need. The API is supposed to be able to return data for the latest datapoint of a specific sensor as well as an array with historic values. Right now, the historic data returns everything in the database, when a view is created/decided on the array will need to be sliced and or filtered to get specific time intervals and a max amount of objects.

This documentation is of Branch issue#7-multipleTemperatureMockSensors, issue: #7, #12 & #249 , Its also merged to team_2_week_1