Documentation of useTemperature and mock sensor.

c24elipe commented

2026-04-13 08:24:18 +00:00

Collaborator

No description provided.

c24danli was assigned by c24elipe

2026-04-13 08:24:23 +00:00

c24elipe added the

project documentation

frontEnd

API

labels

2026-04-13 08:24:34 +00:00

c24danli commented

2026-04-13 10:56:23 +00:00

Collaborator

API for Temprature
There exist two hooks one for latest datapoint and one for all datapoints.
Both gets called in App.Js with an parameter attached {sensorId} to choose witch sensor to get data from.
Example:
Latest Value:<TemperatureView sensorId={'temp-sensor-004'}/>
All Values:<TemperatureTimeSeriesView sensorId={'temp-sensor-001'}/>

Data returned from hook

useTeperature
Returns an JSON objekt containing data for sensorId,timestamp and temperature.
{"sensorId":"sensorId","timestamp":"timestamp","temperature":"temperature"}
useTemperatureTimeSeriesView
Returns an array of JSON objekts
[
{"sensorId":"sensorId","timestamp":"timestamp","temperature":"temperature"}
{"sensorId":"sensorId","timestamp":"timestamp","temperature":"temperature"}
{"sensorId":"sensorId","timestamp":"timestamp","temperature":"temperature"}
]

View
To impliment a view the hook needs to be importad and called with the parmeter.
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 "./useTemperatureTimeSeriesView";
export default function TemperatureView({sensorId}) {
const { data, loading, error } = useTemperature(sensorId);

Adding values to layout examples

useTemperature
When creating the layout the values gets accesed through data.collumnName when using useTemperature.js(Latest value)
Example:
<Card title="Temperatur">

{data.temperature} °C
Sensor: {data.sensorId}

useTemperatureTimeSeriesView
As data is an array of objects when useTemperatureTimeSeriesView.js(All values) is used the list need to be acceses before useing the JSON objects within.
implimentation 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 (

{time.toLocaleDateString("sv-SE", options)}: {item.temperature} °C ID:{item.sensorId}

)
Adding more sensors
If more Sensors or diffrent sensorId names is 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 mockupdata for temperature sensors where its easy to add more sensors to fit the need.
The API is supose 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 returnes everything in the database, when a view is created/desided on the array will need to be sliced and or filtered to get specific time intervalls and a max amount of objects.

**API for Temprature** There exist two hooks one for latest datapoint and one for all datapoints. Both gets called in App.Js with an parameter attached {sensorId} to choose witch sensor to get data from. _Example:_ Latest Value:`<TemperatureView sensorId={'temp-sensor-004'}/>` All Values:`<TemperatureTimeSeriesView sensorId={'temp-sensor-001'}/>` **Data returned from hook** - useTeperature Returns an JSON objekt containing data for sensorId,timestamp and temperature. `{"sensorId":"sensorId","timestamp":"timestamp","temperature":"temperature"}` - useTemperatureTimeSeriesView Returns an array of JSON objekts `[` ` {"sensorId":"sensorId","timestamp":"timestamp","temperature":"temperature"}` ` {"sensorId":"sensorId","timestamp":"timestamp","temperature":"temperature"}` ` {"sensorId":"sensorId","timestamp":"timestamp","temperature":"temperature"}` `]` **View** To impliment a view the hook needs to be importad and called with the parmeter. _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 "./useTemperatureTimeSeriesView";` `export default function TemperatureView({sensorId}) {` ` const { data, loading, error } = useTemperature(sensorId);` _Adding values to layout examples_ - useTemperature When creating the layout the values gets accesed through data.collumnName when using useTemperature.js(Latest value) _Example:_ ` <Card title="Temperatur">` ` ` ` {data.temperature} °C` ` Sensor: {data.sensorId}` ` ` - useTemperatureTimeSeriesView As data is an array of objects when useTemperatureTimeSeriesView.js(All values) is used the list need to be acceses before useing the JSON objects within. implimentation 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 (` ` ` ` {time.toLocaleDateString("sv-SE", options)}: {item.temperature} °C ID:{item.sensorId}` ` ` ` ) ` **Adding more sensors** If more Sensors or diffrent sensorId names is 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 mockupdata for temperature sensors where its easy to add more sensors to fit the need. The API is supose 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 returnes everything in the database, when a view is created/desided on the array will need to be sliced and or filtered to get specific time intervalls and a max amount of objects.

c24danli commented

2026-04-13 10:57:16 +00:00

Collaborator

Waiting for review before adding it to the wiki

c24danli added the

needs review

label

2026-04-13 10:57:30 +00:00

b24krila was assigned by b24johka

2026-04-13 12:30:50 +00:00

b24erika commented

2026-04-13 12:40:28 +00:00

Collaborator

Documentation

As of now the documentation do not refer to any code/branch/subissue which makes it much harder to review when I can not inspect the actual process.

Suggestion:
Make sure to refer to the implementation.

Wiki formating

Under "Adding more sensors" you have also missed to include var data = new[] in the coding block, use proper formating when using code-format in the Wiki. You can press the three dots on my message, choose edit-message and see how the format is suppose to look like.

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)
}
};

## Documentation As of now the documentation do not refer to any code/branch/subissue which makes it much harder to review when I can not inspect the actual process. Suggestion: Make sure to refer to the implementation. ## Wiki formating Under "Adding more sensors" you have also missed to include ```var data = new[]``` in the coding block, use proper formating when using code-format in the Wiki. You can press the three dots on my message, choose edit-message and see how the format is suppose to look like. ``` C# 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) } }; ```

b24erika removed the

needs review

label

2026-04-13 12:45:30 +00:00

b24krila commented

2026-04-13 13:14:25 +00:00

Collaborator

Overall the documentation is well structure that clearly separates latest values from historical time series data. With the uses of mock sensors the approach is easy to understand and test and it is written in a way that makes it easy to extend and maintain.

However there are some issues that need to be addressed.

Firstly there are multiple spelling and naming inconsistencies/mistakes which results in reduced clarity and they should probably be corrected for consistency (examples: useTeperature, objekts)

Secondly, in the "useTemperature To get latest" example there are some inconsistencies that leads to confusion (e.g. importing useTemperature from a file named useTemperatureTimeSeriesView). useTemperatureTimeSeriesView appears to be intended for retrieving all the data.

Lastly the JSON examples would benefit from using realistic data format.

Instead of this:

{"sensorId":"sensorId","timestamp":"timestamp","temperature":"temperature"}

it should be this:

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

This simple change will increase the readability and makes the API contract clearer and more representative of the actual usage.

Overall the documentation is well structure that clearly separates latest values from historical time series data. With the uses of mock sensors the approach is easy to understand and test and it is written in a way that makes it easy to extend and maintain. However there are some issues that need to be addressed. Firstly there are multiple spelling and naming inconsistencies/mistakes which results in reduced clarity and they should probably be corrected for consistency (examples: useTeperature, objekts) Secondly, in the "useTemperature To get latest" example there are some inconsistencies that leads to confusion (e.g. importing useTemperature from a file named useTemperatureTimeSeriesView). useTemperatureTimeSeriesView appears to be intended for retrieving all the data. Lastly the JSON examples would benefit from using realistic data format. Instead of this: {"sensorId":"sensorId","timestamp":"timestamp","temperature":"temperature"} it should be this: { "sensorId": "temp-sensor-001", "timestamp": "2026-04-13T10:15:00Z", "temperature": 21.7 } This simple change will increase the readability and makes the API contract clearer and more representative of the actual usage.

c24danli commented

2026-04-14 06:40:16 +00:00

Collaborator

Great feedback, will fix the problems

c24danli commented

2026-04-14 07:30:41 +00:00

Collaborator

API for Temperature

There are two hooks one for latest datapoint and one for all datapoints.
Both gets called in App.Js with a parameter attached {sensorId} to choose witch 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 an 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 , Its also merged to team_2_week_1

### API for Temperature There are two hooks one for latest datapoint and one for all datapoints. Both gets called in App.Js with a parameter attached {sensorId} to choose witch 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 an 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"> {data.temperature} °C Sensor: {data.sensorId} ``` - 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 ( {time.toLocaleDateString("sv-SE", options)}: {item.temperature} °C ID:{item.sensorId} ) ``` ### 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 , Its also merged to team_2_week_1

c24danli commented

2026-04-14 07:38:58 +00:00

Collaborator

Changes

added: referring documentation to branch/subissue
changed code blocks to egt proper wiki formatting
fixed spelling issues
made the JSON examples use realistic data format and spaced them out to be easier to read
names of hooks had been placed to the wrong view fixed now

Changes - added: referring documentation to branch/subissue - changed code blocks to egt proper wiki formatting - fixed spelling issues - made the JSON examples use realistic data format and spaced them out to be easier to read - names of hooks had been placed to the wrong view fixed now

c24danli added the

needs review

label

2026-04-14 07:39:49 +00:00

b24krila commented

2026-04-14 09:16:35 +00:00

Collaborator

Overall, the documentation is well structured and clearly separates the latest values. It also gives a clear overview of how the temperature hook and mock sensor setup work. I believe that it is now suitable to be included in the wiki, So it can provide some guidelines before implementation.

One small suggestion is to make sure you use headers instead of just bold text to improve the readability and structure.

Overall, the documentation is well structured and clearly separates the latest values. It also gives a clear overview of how the temperature hook and mock sensor setup work. I believe that it is now suitable to be included in the wiki, So it can provide some guidelines before implementation. One small suggestion is to make sure you use headers instead of just **bold** text to improve the readability and structure.

b24krila added

reviewed

and removed

needs review

labels

2026-04-14 09:16:45 +00:00

c24danli commented

2026-04-14 10:33:24 +00:00

Collaborator

Added to wiki

Added to [wiki](https://git.webug.se/Andras/BoundlessFlowCampus2K/wiki/Documentation-av-useTemperature-och-mock-sensor)

b24krila commented

2026-04-14 11:00:48 +00:00

Collaborator

@c24danli wrote in #249 (comment):

Added to wiki

Good, then this issue can be closed.

@c24danli wrote in https://git.webug.se/Andras/BoundlessFlowCampus2K/issues/249#issuecomment-2660: > Added to [wiki](https://git.webug.se/Andras/BoundlessFlowCampus2K/wiki/Documentation-av-useTemperature-och-mock-sensor) Good, then this issue can be closed.