Chart widget with up to three items, and selectable filld area for each item. Refreshes when item is updated.
Changelog
Version 0.1
- initial release
Resources
uid: CHART_Widget
tags: []
props:
parameters:
- description: Header of the cell
label: Header
name: header
required: false
type: TEXT
- description: Icon on top of the card (only f7 icons (without f7:))
label: Icon
name: icon
required: false
type: TEXT
- context: item
label: Graph Item 1
name: graphItem1
required: false
type: TEXT
- label: Area 1 filled
name: area1filled
required: false
type: BOOLEAN
- context: item
label: Graph Item 2
name: graphItem2
required: false
type: TEXT
- label: Area 2 filled
name: area2filled
required: false
type: BOOLEAN
- context: item
label: Graph Item 3
name: graphItem3
required: false
type: TEXT
- label: Area 3 filled
name: area3filled
required: false
type: BOOLEAN
parameterGroups: []
timestamp: Aug 7, 2022, 7:57:23 AM
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:
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
background-color: rgba(0,0,0,0)
slots:
content:
- component: f7-block
config:
style:
display: flex
flex-direction: row
left: 16px
position: absolute
top: -5px
slots:
default:
- component: f7-icon
config:
f7: =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:
- rgba(255,0,0,1)
- rgba(0,255,255,1)
- rgba(0,255,0,1)
period: W
slots:
grid:
- component: oh-chart-page
config:
containLabel: true
includeLabels: true
show: false
width: 95%
left: 20px
top: 16px
height: 85%
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
name: =props.graphItem1
markPoint:
data:
- name: Max
type: "=props.item1max ? 'max' : ''"
- name: Min
type: "=props.item1min ? 'min' : ''"
- name: Average
type: "=props.item1average ? 'average' : ''"
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
name: =props.graphItem2
markPoint:
data:
- name: Max
type: "=props.item2max ? 'max' : ''"
- name: Min
type: "=props.item2min ? 'min' : ''"
- name: Average
type: "=props.item2average ? 'average' : ''"
smooth: true
type: line
xAxisIndex: 0
yAxisIndex: 0
- component: oh-time-series
config:
areaStyle:
opacity: "=props.area3filled ? 0.2 : 0.0"
item: =props.graphItem3
name: =props.graphItem3
markPoint:
data:
- name: Max
type: "=props.item3max ? 'max' : ''"
- name: Min
type: "=props.item3min ? 'min' : ''"
- name: Average
type: "=props.item3average ? 'average' : ''"
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