OH4: Chart's don't want to follow unit configuration of the items

Add-ons UIs
,
1

I have been googling everywhere and I find somewhat relevant posts but either they are for a different scenario or version or for them it works out of the box or just changing the stateDescription works. Nothing works for me.

So I am going to start with a relatively simple thing.

I have added the Systeminfo thing:

UID: systeminfo:computer:2ad9a4f70e
label: Systeminfo
thingTypeUID: systeminfo:computer-2ad9a4f70e
configuration:
  interval_high: 1
  interval_medium: 60
channels:
  - id: memory#total
    channelTypeUID: systeminfo:total
    label: Total
    description: Total size
    configuration:
      priority: Low
  - id: memory#available
    channelTypeUID: systeminfo:available
    label: Available
    description: Available size
    configuration:
      priority: Medium
  - id: memory#used
    channelTypeUID: systeminfo:used
    label: Used
    description: Used size
    configuration:
      priority: High
  - id: memory#availablePercent
    channelTypeUID: systeminfo:availablePercent
    label: Available (%)
    description: Available size in percent
    configuration:
      priority: High
  - id: memory#usedPercent
    channelTypeUID: systeminfo:usedPercent
    label: Used (%)
    description: Used size in percent
    configuration:
      priority: High
  - id: memory#availableHeap
    channelTypeUID: systeminfo:availableHeap
    label: Available Heap
    description: How much data is available in the Java heap.
    configuration:
      priority: Medium
  - id: memory#usedHeapPercent
    channelTypeUID: systeminfo:usedHeapPercent
    label: Used Heap Percent
    description: How much data in percent has been used from the max size the Java
      heap can grow to.
    configuration:
      priority: Medium
  - id: storage#total
    channelTypeUID: systeminfo:total
    label: Total
    description: Total size
    configuration:
      priority: Low
  - id: storage#available
    channelTypeUID: systeminfo:available
    label: Available
    description: Available size
    configuration:
      priority: Medium
  - id: storage#used
    channelTypeUID: systeminfo:used
    label: Used
    description: Used size
    configuration:
      priority: High
  - id: storage#availablePercent
    channelTypeUID: systeminfo:availablePercent
    label: Available (%)
    description: Available size in percent
    configuration:
      priority: High
  - id: storage#usedPercent
    channelTypeUID: systeminfo:usedPercent
    label: Used (%)
    description: Used size in percent
    configuration:
      priority: High
  - id: storage#name
    channelTypeUID: systeminfo:name
    label: Name
    description: Name of the device (process)
    configuration:
      priority: Low
  - id: storage#description
    channelTypeUID: systeminfo:description
    label: Description
    description: Description of the device
    configuration:
      priority: Low
  - id: storage#type
    channelTypeUID: systeminfo:type
    label: Type
    description: Storage type
    configuration:
      priority: Low
  - id: sensors#cpuTemp
    channelTypeUID: systeminfo:cpuTemp
    label: CPU Temperature
    description: CPU Temperature
    configuration:
      priority: High
  - id: sensors#cpuVoltage
    channelTypeUID: systeminfo:cpuVoltage
    label: CPU Voltage
    description: CPU Voltage
    configuration:
      priority: Medium
  - id: sensors#fanSpeed
    channelTypeUID: systeminfo:fanSpeed
    label: Fan Speed
    description: Fan speed in rotations per minute
    configuration:
      priority: Medium
  - id: cpu#name
    channelTypeUID: systeminfo:name
    label: Name
    description: Name of the device (process)
    configuration:
      priority: Low
  - id: cpu#description
    channelTypeUID: systeminfo:description
    label: Description
    description: Description of the device
    configuration:
      priority: Low
  - id: cpu#load
    channelTypeUID: systeminfo:load
    label: Load
    description: Load in percent
    configuration:
      priority: Medium
  - id: cpu#load1
    channelTypeUID: systeminfo:loadAverage
    label: Load Average
    description: Load as a number of processes for the last 1, 5 or 15 minutes
    configuration:
      priority: Medium
  - id: cpu#load5
    channelTypeUID: systeminfo:loadAverage
    label: Load Average
    description: Load as a number of processes for the last 1, 5 or 15 minutes
    configuration:
      priority: Medium
  - id: cpu#load15
    channelTypeUID: systeminfo:loadAverage
    label: Load Average
    description: Load as a number of processes for the last 1, 5 or 15 minutes
    configuration:
      priority: Medium
  - id: cpu#uptime
    channelTypeUID: systeminfo:uptime
    label: System Uptime
    description: System uptime (time after start)
    configuration:
      priority: Medium
  - id: cpu#threads
    channelTypeUID: systeminfo:threads
    label: Number of Threads
    description: Total number of threads currently running
    configuration:
      priority: Medium
  - id: currentProcess#load
    channelTypeUID: systeminfo:load
    label: Load
    description: Load in percent
    configuration:
      priority: High
  - id: currentProcess#used
    channelTypeUID: systeminfo:used
    label: Used
    description: Used size
    configuration:
      priority: High
  - id: currentProcess#name
    channelTypeUID: systeminfo:name
    label: Name
    description: Name of the device (process)
    configuration:
      priority: Low
  - id: currentProcess#threads
    channelTypeUID: systeminfo:threads
    label: Number of Threads
    description: Total number of threads currently running
    configuration:
      priority: Medium
  - id: currentProcess#path
    channelTypeUID: systeminfo:path
    label: Path
    description: The full path
    configuration:
      priority: Low
  - id: process#load
    channelTypeUID: systeminfo:load_process
    label: Load
    description: Load in percent
    configuration:
      priority: High
      pid: 0
  - id: process#used
    channelTypeUID: systeminfo:used_process
    label: Used
    description: Used size
    configuration:
      priority: High
      pid: 0
  - id: process#name
    channelTypeUID: systeminfo:name_process
    label: Name
    description: Name of the device (process)
    configuration:
      priority: Low
      pid: 0
  - id: process#threads
    channelTypeUID: systeminfo:threads_process
    label: Number of Threads
    description: Number of threads for process currently running
    configuration:
      priority: Medium
      pid: 0
  - id: process#path
    channelTypeUID: systeminfo:path_process
    label: Path
    description: The full path
    configuration:
      priority: Low
      pid: 0
  - id: drive#name
    channelTypeUID: systeminfo:name
    label: Name
    description: Name of the device (process)
    configuration:
      priority: Low
  - id: drive#model
    channelTypeUID: systeminfo:model
    label: Model
    description: The model of the device
    configuration:
      priority: Low
  - id: drive#serial
    channelTypeUID: systeminfo:serial
    label: Serial Number
    description: The serial number of the device
    configuration:
      priority: Low
  - id: swap#total
    channelTypeUID: systeminfo:total
    label: Total
    description: Total size
    configuration:
      priority: Low
  - id: swap#available
    channelTypeUID: systeminfo:available
    label: Available
    description: Available size
    configuration:
      priority: High
  - id: swap#used
    channelTypeUID: systeminfo:used
    label: Used
    description: Used size
    configuration:
      priority: High
  - id: swap#availablePercent
    channelTypeUID: systeminfo:availablePercent
    label: Available (%)
    description: Available size in percent
    configuration:
      priority: High
  - id: swap#usedPercent
    channelTypeUID: systeminfo:usedPercent
    label: Used (%)
    description: Used size in percent
    configuration:
      priority: High
  - id: display#information
    channelTypeUID: systeminfo:information
    label: Display Information
    description: Product, manufacturer, SN, width and height of the display in cm
    configuration:
      priority: Low
  - id: battery#name
    channelTypeUID: systeminfo:name
    label: Name
    description: Name of the device (process)
    configuration:
      priority: Low
  - id: battery#remainingCapacity
    channelTypeUID: systeminfo:remainingCapacity
    label: Remaining Capacity
    description: Remaining capacity in percent
    configuration:
      priority: Medium
  - id: battery#remainingTime
    channelTypeUID: systeminfo:remainingTime
    label: Remaining Time
    description: Remaining time
    configuration:
      priority: Medium
  - id: network#ip
    channelTypeUID: systeminfo:ip
    label: IP Address
    description: Host IP address of the network
    configuration:
      priority: Low
  - id: network#networkName
    channelTypeUID: systeminfo:networkName
    label: Network Name
    description: The name of the network.
    configuration:
      priority: Low
  - id: network#networkDisplayName
    channelTypeUID: systeminfo:networkDisplayName
    label: Network Display Name
    description: The display name of the network
    configuration:
      priority: Low
  - id: network#dataSent
    channelTypeUID: systeminfo:dataSent
    label: Data Sent
    description: Volume of data sent
    configuration:
      priority: Medium
  - id: network#dataReceived
    channelTypeUID: systeminfo:dataReceived
    label: Data Received
    description: Volume of data received
    configuration:
      priority: Medium
  - id: network#packetsSent
    channelTypeUID: systeminfo:packetsSent
    label: Packets Sent
    description: Number of packets sent
    configuration:
      priority: Medium
  - id: network#packetsReceived
    channelTypeUID: systeminfo:packetsReceived
    label: Packets Received
    description: Number of packets received
    configuration:
      priority: Medium
  - id: network#mac
    channelTypeUID: systeminfo:mac
    label: Mac Address
    description: Mac address of the network
    configuration:
      priority: Low
  - id: storage0#total
    channelTypeUID: systeminfo:total
    label: Total
    description: Total size
    configuration:
      priority: Low
  - id: storage0#available
    channelTypeUID: systeminfo:available
    label: Available
    description: Available size
    configuration:
      priority: High
  - id: storage0#used
    channelTypeUID: systeminfo:used
    label: Used
    description: Used size
    configuration:
      priority: High
  - id: storage0#availablePercent
    channelTypeUID: systeminfo:availablePercent
    label: Available (%)
    description: Available size in percent
    configuration:
      priority: High
  - id: storage0#usedPercent
    channelTypeUID: systeminfo:usedPercent
    label: Used (%)
    description: Used size in percent
    configuration:
      priority: High
  - id: storage0#name
    channelTypeUID: systeminfo:name
    label: Name
    description: Name of the device (process)
    configuration:
      priority: Low
  - id: storage0#description
    channelTypeUID: systeminfo:description
    label: Description
    description: Description of the device
    configuration:
      priority: Low
  - id: storage0#type
    channelTypeUID: systeminfo:type
    label: Type
    description: Storage type
    configuration:
      priority: Low
  - id: storage1#total
    channelTypeUID: systeminfo:total
    label: Total
    description: Total size
    configuration:
      priority: Low
  - id: storage1#available
    channelTypeUID: systeminfo:available
    label: Available
    description: Available size
    configuration:
      priority: High
  - id: storage1#used
    channelTypeUID: systeminfo:used
    label: Used
    description: Used size
    configuration:
      priority: High
  - id: storage1#availablePercent
    channelTypeUID: systeminfo:availablePercent
    label: Available (%)
    description: Available size in percent
    configuration:
      priority: High
  - id: storage1#usedPercent
    channelTypeUID: systeminfo:usedPercent
    label: Used (%)
    description: Used size in percent
    configuration:
      priority: High
  - id: storage1#name
    channelTypeUID: systeminfo:name
    label: Name
    description: Name of the device (process)
    configuration:
      priority: Low
  - id: storage1#description
    channelTypeUID: systeminfo:description
    label: Description
    description: Description of the device
    configuration:
      priority: Low
  - id: storage1#type
    channelTypeUID: systeminfo:type
    label: Type
    description: Storage type
    configuration:
      priority: Low
  - id: storage2#total
    channelTypeUID: systeminfo:total
    label: Total
    description: Total size
    configuration:
      priority: Low
  - id: storage2#available
    channelTypeUID: systeminfo:available
    label: Available
    description: Available size
    configuration:
      priority: High
  - id: storage2#used
    channelTypeUID: systeminfo:used
    label: Used
    description: Used size
    configuration:
      priority: High
  - id: storage2#availablePercent
    channelTypeUID: systeminfo:availablePercent
    label: Available (%)
    description: Available size in percent
    configuration:
      priority: High
  - id: storage2#usedPercent
    channelTypeUID: systeminfo:usedPercent
    label: Used (%)
    description: Used size in percent
    configuration:
      priority: High
  - id: storage2#name
    channelTypeUID: systeminfo:name
    label: Name
    description: Name of the device (process)
    configuration:
      priority: Low
  - id: storage2#description
    channelTypeUID: systeminfo:description
    label: Description
    description: Description of the device
    configuration:
      priority: Low
  - id: storage2#type
    channelTypeUID: systeminfo:type
    label: Type
    description: Storage type
    configuration:
      priority: Low
  - id: storage3#total
    channelTypeUID: systeminfo:total
    label: Total
    description: Total size
    configuration:
      priority: Low
  - id: storage3#available
    channelTypeUID: systeminfo:available
    label: Available
    description: Available size
    configuration:
      priority: High
  - id: storage3#used
    channelTypeUID: systeminfo:used
    label: Used
    description: Used size
    configuration:
      priority: High
  - id: storage3#availablePercent
    channelTypeUID: systeminfo:availablePercent
    label: Available (%)
    description: Available size in percent
    configuration:
      priority: High
  - id: storage3#usedPercent
    channelTypeUID: systeminfo:usedPercent
    label: Used (%)
    description: Used size in percent
    configuration:
      priority: High
  - id: storage3#name
    channelTypeUID: systeminfo:name
    label: Name
    description: Name of the device (process)
    configuration:
      priority: Low
  - id: storage3#description
    channelTypeUID: systeminfo:description
    label: Description
    description: Description of the device
    configuration:
      priority: Low
  - id: storage3#type
    channelTypeUID: systeminfo:type
    label: Type
    description: Storage type
    configuration:
      priority: Low
  - id: storage4#total
    channelTypeUID: systeminfo:total
    label: Total
    description: Total size
    configuration:
      priority: Low
  - id: storage4#available
    channelTypeUID: systeminfo:available
    label: Available
    description: Available size
    configuration:
      priority: High
  - id: storage4#used
    channelTypeUID: systeminfo:used
    label: Used
    description: Used size
    configuration:
      priority: High
  - id: storage4#availablePercent
    channelTypeUID: systeminfo:availablePercent
    label: Available (%)
    description: Available size in percent
    configuration:
      priority: High
  - id: storage4#usedPercent
    channelTypeUID: systeminfo:usedPercent
    label: Used (%)
    description: Used size in percent
    configuration:
      priority: High
  - id: storage4#name
    channelTypeUID: systeminfo:name
    label: Name
    description: Name of the device (process)
    configuration:
      priority: Low
  - id: storage4#description
    channelTypeUID: systeminfo:description
    label: Description
    description: Description of the device
    configuration:
      priority: Low
  - id: storage4#type
    channelTypeUID: systeminfo:type
    label: Type
    description: Storage type
    configuration:
      priority: Low
  - id: storage5#total
    channelTypeUID: systeminfo:total
    label: Total
    description: Total size
    configuration:
      priority: Low
  - id: storage5#available
    channelTypeUID: systeminfo:available
    label: Available
    description: Available size
    configuration:
      priority: High
  - id: storage5#used
    channelTypeUID: systeminfo:used
    label: Used
    description: Used size
    configuration:
      priority: High
  - id: storage5#availablePercent
    channelTypeUID: systeminfo:availablePercent
    label: Available (%)
    description: Available size in percent
    configuration:
      priority: High
  - id: storage5#usedPercent
    channelTypeUID: systeminfo:usedPercent
    label: Used (%)
    description: Used size in percent
    configuration:
      priority: High
  - id: storage5#name
    channelTypeUID: systeminfo:name
    label: Name
    description: Name of the device (process)
    configuration:
      priority: Low
  - id: storage5#description
    channelTypeUID: systeminfo:description
    label: Description
    description: Description of the device
    configuration:
      priority: Low
  - id: storage5#type
    channelTypeUID: systeminfo:type
    label: Type
    description: Storage type
    configuration:
      priority: Low
  - id: storage6#total
    channelTypeUID: systeminfo:total
    label: Total
    description: Total size
    configuration:
      priority: Low
  - id: storage6#available
    channelTypeUID: systeminfo:available
    label: Available
    description: Available size
    configuration:
      priority: High
  - id: storage6#used
    channelTypeUID: systeminfo:used
    label: Used
    description: Used size
    configuration:
      priority: High
  - id: storage6#availablePercent
    channelTypeUID: systeminfo:availablePercent
    label: Available (%)
    description: Available size in percent
    configuration:
      priority: High
  - id: storage6#usedPercent
    channelTypeUID: systeminfo:usedPercent
    label: Used (%)
    description: Used size in percent
    configuration:
      priority: High
  - id: storage6#name
    channelTypeUID: systeminfo:name
    label: Name
    description: Name of the device (process)
    configuration:
      priority: Low
  - id: storage6#description
    channelTypeUID: systeminfo:description
    label: Description
    description: Description of the device
    configuration:
      priority: Low
  - id: storage6#type
    channelTypeUID: systeminfo:type
    label: Type
    description: Storage type
    configuration:
      priority: Low
  - id: storage7#total
    channelTypeUID: systeminfo:total
    label: Total
    description: Total size
    configuration:
      priority: Low
  - id: storage7#available
    channelTypeUID: systeminfo:available
    label: Available
    description: Available size
    configuration:
      priority: High
  - id: storage7#used
    channelTypeUID: systeminfo:used
    label: Used
    description: Used size
    configuration:
      priority: High
  - id: storage7#availablePercent
    channelTypeUID: systeminfo:availablePercent
    label: Available (%)
    description: Available size in percent
    configuration:
      priority: High
  - id: storage7#usedPercent
    channelTypeUID: systeminfo:usedPercent
    label: Used (%)
    description: Used size in percent
    configuration:
      priority: High
  - id: storage7#name
    channelTypeUID: systeminfo:name
    label: Name
    description: Name of the device (process)
    configuration:
      priority: Low
  - id: storage7#description
    channelTypeUID: systeminfo:description
    label: Description
    description: Description of the device
    configuration:
      priority: Low
  - id: storage7#type
    channelTypeUID: systeminfo:type
    label: Type
    description: Storage type
    configuration:
      priority: Low
  - id: drive0#name
    channelTypeUID: systeminfo:name
    label: Name
    description: Name of the device (process)
    configuration:
      priority: Low
  - id: drive0#model
    channelTypeUID: systeminfo:model
    label: Model
    description: The model of the device
    configuration:
      priority: Low
  - id: drive0#serial
    channelTypeUID: systeminfo:serial
    label: Serial Number
    description: The serial number of the device
    configuration:
      priority: Low
  - id: drive1#name
    channelTypeUID: systeminfo:name
    label: Name
    description: Name of the device (process)
    configuration:
      priority: Low
  - id: drive1#model
    channelTypeUID: systeminfo:model
    label: Model
    description: The model of the device
    configuration:
      priority: Low
  - id: drive1#serial
    channelTypeUID: systeminfo:serial
    label: Serial Number
    description: The serial number of the device
    configuration:
      priority: Low
  - id: drive2#name
    channelTypeUID: systeminfo:name
    label: Name
    description: Name of the device (process)
    configuration:
      priority: Low
  - id: drive2#model
    channelTypeUID: systeminfo:model
    label: Model
    description: The model of the device
    configuration:
      priority: Low
  - id: drive2#serial
    channelTypeUID: systeminfo:serial
    label: Serial Number
    description: The serial number of the device
    configuration:
      priority: Low
  - id: drive3#name
    channelTypeUID: systeminfo:name
    label: Name
    description: Name of the device (process)
    configuration:
      priority: Low
  - id: drive3#model
    channelTypeUID: systeminfo:model
    label: Model
    description: The model of the device
    configuration:
      priority: Low
  - id: drive3#serial
    channelTypeUID: systeminfo:serial
    label: Serial Number
    description: The serial number of the device
    configuration:
      priority: Low

Then I have picked 3 channels from that and linked to items:
Available Memory
Available Storage Space
CPU Load

image
image2220Ă—593 55.1 KB

image
image2351Ă—1111 103 KB

image
image2203Ă—981 98.7 KB

Then I put them all together in a chart:

config:
  label: Page Systeminfo
  sidebar: true
slots:
  grid:
    - component: oh-chart-grid
      config: {}
  legend:
    - component: oh-chart-legend
      config:
        orient: horizontal
        show: true
  series:
    - component: oh-time-series
      config:
        gridIndex: 0
        item: Systeminfo_Storage_Available
        name: Storage Available
        type: line
        xAxisIndex: 0
        yAxisIndex: 0
    - component: oh-time-series
      config:
        gridIndex: 0
        item: Systeminfo_Memory_Available
        name: Memory Available
        type: line
        xAxisIndex: 0
        yAxisIndex: 0
    - component: oh-time-series
      config:
        gridIndex: 0
        item: Systeminfo_CPU_Load
        name: CPU Load
        type: line
        xAxisIndex: 0
        yAxisIndex: 1
  title:
    - component: oh-chart-title
      config:
        show: true
  tooltip:
    - component: oh-chart-tooltip
      config:
        orient: vertical
        show: true
      slots: null
  xAxis:
    - component: oh-time-axis
      config:
        gridIndex: 0
  yAxis:
    - component: oh-value-axis
      config:
        gridIndex: 0
    - component: oh-value-axis
      config:
        gridIndex: 0
        name: Percent

and this is the result:

image
image2917Ă—1719 227 KB

Why doesn’t it use the nice units as in the item view?

PS: why doesn’t the tooltip show all values when hovering and instead only shows the CPU usage?

2

The charts use whatever data is stored in persistence. If you have not configured the unit metadata for the items, then what is stored in persistence is the default unit (in the case bytes).

You can either adjust the unit metadata for the items, or change the labels on the chart.

Here’s the docs for formatting the chart labels:

In OH that looks like this. Here’s a chart with the default byte data from persistence. The axis is just the basic config:

  yAxis:
    - component: oh-value-axis
      config:
        gridIndex: 0

image
image1123Ă—354 4.49 KB

But with the addition of the axis formatter:

  yAxis:
    - component: oh-value-axis
      config:
        gridIndex: 0
        axisLabel:
          formatter: =v => `${v / 1000000000000} TB`

image
image1054Ă—307 2.53 KB

3

OK so I added the Metadata Unit “%” and “MiB” to the items (just guessing here) and it seems to work, however, all old data is now 100 and 1000000 times smaller in the chart.

So looking at your other solution, I am never quite sure if I can look up the echarts documentation or not, because it seems only a subset of features will work in openhab or is named differently.

So looking at the doc I am a bit flabbergasted as to how one could come to that syntax:

that seems radically different to what the docs you linked say:

    axisLabel: {
        formatter: function (value) {
<snip>
            return 'blahblah';
        }

where do I find the syntax you are using?

Many thanks for your help!

4

Yes, sorry I should have pointed that out. Changing the unit on the item does not retroactively change all the persistence data. All the old data will remain the same and only the newly persisted data will have the correct scaling. If it is important to you to maintain consistency with the old data then you either can’t use the unit metadata solution or have to go into whatever database you are persisting the data to and manually re-scale the old data. If the older data isn’t really that important then you can just keep the unit metadata and after a period of time the old data will no longer be on the chart and the chart data will all be properly scaled.

Everything (as far as I know) in the eCharts docs can be accessed from the OH yaml except for a very small number of properties that are hard coded into the OH chart calls. The only trick is that in some cases you have to put those extra properties in an options object:

- component: some-chart-piece
  config:
    options:
      eChartOptionsHere: option setting

and sometimes the property can just go directly in the config itself as I showed up above. Honestly, I never even try to remember which is which and just try one and if that doesn’t work, I use the other.

This comes from understanding what going on with the yaml syntax. The eCharts docs show that the axisLabel property accepts a function. The widget expression system, however, does not support defining functions using a function declaration. It only supports functions using the arrow sytax (=>). So, in any true javascript environement the function I used:

v => `${v / 1000000000000} TB`

is nearly equivalent to

function (v) {
  return `${v / 1000000000000} TB`
}

You also have to proceed the yaml function with the = so that the expression parser knows to parse that into a function instead of just treating it as a string.

5

Heya,

thanks for this thorough and detailed explanation. That will really help me in the future!

One more thing:

After adding the metadata “unit” to the sizes (MiB) and the percentage (%) now the axis and values are correct, but they are still displayed without the actual units. Does that mean I have to do both or am I still missing some metadata/configuration?

image
image2701Ă—1700 219 KB