Chart widget with up to three items and selectable filld area, min, max, averager and color for each item. Refreshes when item is updated.
Changelog
added options to set min, max, average and color for every item and default period
Version 0.1
- initial release
Version 0.2
- added more options
Resources
uid: CHART_Widget
tags: []
props:
parameters:
- description: Header of the cell
label: Header
name: header
required: false
type: TEXT
- description: Use oh:iconName (openHAB icon), f7:iconName (Framework7 icon), material:iconName (Material icon) or iconify:iconSet:iconName (Iconify icon, requires being online if not in cache)
label: Icon
name: icon
required: false
type: TEXT
- description: Period 4H,D,W,2H
label: Graph Period
name: graphPeriod
required: false
type: TEXT
- context: item
label: Graph Item 1
name: graphItem1
required: false
type: TEXT
- description: Use colorname, hexcolor, rgba or leave it empty
label: Item color 1
name: item1color
required: false
type: TEXT
- context: item
label: Show Item 1 maximum
name: item1max
required: false
type: BOOLEAN
- context: item
label: Show Item 1 minimum
name: item1min
required: false
type: BOOLEAN
- context: item
label: Show Item 1 average
name: item1average
required: false
type: BOOLEAN
- label: Area 1 filled
name: area1filled
required: false
type: BOOLEAN
- context: item
label: Graph Item 2
name: graphItem2
required: false
type: TEXT
- description: Use colorname, hexcolor, rgba or leave it empty
label: Item color 2
name: item2color
required: false
type: TEXT
- context: item
label: Show Item 2 maximum
name: item2max
required: false
type: BOOLEAN
- context: item
label: Show Item 2 minimum
name: item2min
required: false
type: BOOLEAN
- context: item
label: Show Item 2 average
name: item2average
required: false
type: BOOLEAN
- label: Area 2 filled
name: area2filled
required: false
type: BOOLEAN
- context: item
label: Graph Item 3
name: graphItem3
required: false
type: TEXT
- description: Use colorname, hexcolor, rgba or leave it empty
label: Item color 3
name: item3color
required: false
type: TEXT
- context: item
label: Show Item 3 maximum
name: item3max
required: false
type: BOOLEAN
- context: item
label: Show Item 3 minimum
name: item3min
required: false
type: BOOLEAN
- context: item
label: Show Item 3 average
name: item3average
required: false
type: BOOLEAN
- label: Area 3 filled
name: area3filled
required: false
type: BOOLEAN
parameterGroups: []
timestamp: Nov 21, 2023, 8:18:12 PM
component: f7-card
config:
key: =Math.random() + items[props.graphItem1].state.split(" ")[0] + items[props.graphItem2].state.split(" ")[0] + items[props.graphItem3].state.split(" ")[0]
style:
background-color: rgba(0,0,0,0)
border-radius: var(--f7-card-expandable-border-radius)
box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
margin-left: 5px
margin-right: 5px
noShadow: false
padding: 0px
slots:
content:
- component: f7-block
config:
style:
display: flex
flex-direction: row
left: 16px
position: absolute
top: -5px
slots:
default:
- component: oh-icon
config:
icon: =props.icon
size: 18
style:
margin-right: 10px
visible: "=props.icon ? true : false"
- component: Label
config:
style:
font-size: 12px
margin-top: 0px
text: "=props.header ? props.header : ''"
default:
- component: oh-chart
config:
options:
color:
- "=props.item1color ? props.item1color : 'rgba(255,0,0,1)'"
- "=props.item2color ? props.item2color : 'rgba(0,255,255,1)'"
- "=props.item3color ? props.item3color : 'rgba(0,255,0,1)'"
period: "=props.graphPeriod ? props.graphPeriod : 'W'"
slots:
grid:
- component: oh-chart-page
config:
containLabel: true
height: 85%
includeLabels: true
left: 20px
show: false
top: 16px
width: 90%
legend:
- component: oh-chart-legend
config:
bottom: 0px
show: true
type: scroll
series:
- component: oh-time-series
config:
areaStyle:
opacity: "=props.area1filled ? 0.2 : 0.0"
item: =props.graphItem1
markLine:
data:
- name: Average
type: average
lineStyle:
opacity: "=props.item1average ? 1 : 0.0"
markPoint:
data:
- name: Max
type: "=props.item1max ? 'max' : ''"
- name: Min
type: "=props.item1min ? 'min' : ''"
name: =props.graphItem1
smooth: true
type: line
xAxisIndex: 0
yAxisIndex: 0
- component: oh-time-series
config:
areaStyle:
opacity: "=props.area2filled ? 0.2 : 0.0"
gridIndex: 0
item: =props.graphItem2
markLine:
data:
- name: Average
type: average
lineStyle:
opacity: "=props.item2average ? 1 : 0.0"
markPoint:
data:
- name: Max
type: "=props.item2max ? 'max' : ''"
- name: Min
type: "=props.item2min ? 'min' : ''"
name: =props.graphItem2
smooth: true
type: line
xAxisIndex: 0
yAxisIndex: 0
- component: oh-time-series
config:
areaStyle:
opacity: "=props.area3filled ? 0.2 : 0.0"
item: =props.graphItem3
markLine:
data:
- name: Average
type: average
lineStyle:
opacity: "=props.item3average ? 1 : 0.0"
markPoint:
data:
- name: Max
type: "=props.item3max ? 'max' : ''"
- name: Min
type: "=props.item3min ? 'min' : ''"
name: =props.graphItem3
smooth: true
type: line
xAxisIndex: 0
yAxisIndex: 0
tooltip:
- component: oh-chart-tooltip
config:
confine: true
orient: vertical
show: true
smartFormatter: true
xAxis:
- component: oh-time-axis
config:
gridIndex: 0
yAxis:
- component: oh-value-axis
config:
gridIndex: 0
