Create a pie chart with oh-chart to show top 5 processes (system information)

I’m using the great system info widget [1] in my UI; - but would like to know what keeps the system busy if there is high cpu usage.

Until I read the thread about the echarts possibilities [2] in OH I was unaware that the integrated chart engine is that powerful. This inspired me to create my own widget to enrich the original system info widget:

image

Widget

image

uid: cpu_top5
tags: []
props:
  parameterGroups: []
timestamp: Sep 23, 2023, 1:35:45 PM
component: f7-card
config: {}
slots:
  content:
    - component: oh-chart
      slots:
        series:
          - component: oh-data-series
            config:
              type: pie
              
              roseType: area
              
              labelLine:
                length: 5
                length2: 10
              
              radius: ['0%', '80%']
              
              data:
                - value: =JSON.parse(items['openhab_process_top_5'].state)[0].CPU
                  name: >
                    =JSON.parse(items['openhab_process_top_5'].state)[0].CMD.split('/').slice(-1).pop() + "\n" +
                     JSON.parse(items['openhab_process_top_5'].state)[0].ARG.replaceAll(" ", "\n")
                - value: =JSON.parse(items['openhab_process_top_5'].state)[1].CPU
                  name: >
                    =JSON.parse(items['openhab_process_top_5'].state)[1].CMD.split('/').slice(-1).pop() + "\n" +
                     JSON.parse(items['openhab_process_top_5'].state)[1].ARG.replaceAll(" ", "\n")
                - value: =JSON.parse(items['openhab_process_top_5'].state)[2].CPU
                  name: >
                    =JSON.parse(items['openhab_process_top_5'].state)[2].CMD.split('/').slice(-1).pop() + "\n" +
                     JSON.parse(items['openhab_process_top_5'].state)[2].ARG.replaceAll(" ", "\n")
                - value: =JSON.parse(items['openhab_process_top_5'].state)[3].CPU
                  name: >
                    =JSON.parse(items['openhab_process_top_5'].state)[3].CMD.split('/').slice(-1).pop() + "\n" +
                     JSON.parse(items['openhab_process_top_5'].state)[3].ARG.replaceAll(" ", "\n")
                - value: =JSON.parse(items['openhab_process_top_5'].state)[4].CPU
                  name: >
                    =JSON.parse(items['openhab_process_top_5'].state)[4].CMD.split('/').slice(-1).pop() + "\n" +
                     JSON.parse(items['openhab_process_top_5'].state)[4].ARG.replaceAll(" ", "\n")
        tooltip:
          - component: oh-chart-tooltip
            config:
              show: true

The information for the chart I collect using the exec binding (only works on linux):

ps -ewo pid,%cpu,user,cmd --sort=-%cpu --no-headers  | awk '$4 !~ /^(awk|jq|ps|sshd)/ {print;}'  | head -n 5  | awk '{print $1","$2","$3","$4","$5,$6,$7,$8,$9,$10}' | jq -R 'split(",") |  { "PID": .[0], "CPU": .[1], "USER": .[2], "CMD": .[3], "ARG": .[4] }' | jq -s '.'

[1]: System Info Widget
[2]: Main UI echarts POC

6 Likes

Nice work. I would suggest posting this to the marketplace so that others can download it directly to their oh instances.

2 Likes