Hi to Everyone,
this is a simple list widget with a range configurable progress bar.
presently is implemented an action analyzer of defined variable on click, you may change to fit your requirement as well as comment out and remove.
here below an example of my implementation (House energy management)
uid: Progress_list_ByDJD
tags: []
props:
parameters:
- description: Header Text
label: Header
name: header
required: false
type: TEXT
- description: Footer Text
label: Footer
name: footer
required: false
type: TEXT
- description: Icon
label: Icon
name: icon
required: false
type: TEXT
- description: in rgba() or HEX or empty
label: Foreground Color
name: fgcolor
required: false
type: TEXT
- context: item
description: Item for Progressbar
label: Item
name: ProgressItem
required: true
type: TEXT
- default: "0"
label: Minimum value (default 0)
name: minV
required: false
type: TEXT
- default: "100"
label: Maximum value (default 100)
name: maxV
required: false
type: TEXT
parameterGroups: []
timestamp: Apr 27, 2026, 10:45:48 AM
component: oh-list-item
config:
action: analyzer
actionAnalyzerChartType: day
actionAnalyzerCoordSystem: time
actionAnalyzerItems: =props.ProgressItem
after: =items[props.ProgressItem].displayState
icon: =props.icon
subtitle: =props.footer
title: =props.header
slots:
after:
- component: f7-progressbar
config:
progress: =((Number.parseFloat(items[props.ProgressItem].state)-(Number(props.minV)))/((Number(props.maxV))-(Number(props.minV)))*100)
style:
--f7-progressbar-bg-color: black
--f7-progressbar-height: 10px
--f7-theme-color: "=props.fgcolor ? [props.fgcolor] : ['#E64A19']"
position: absolute
right: 1%
top: 100%
width: 30%