I have been trying to move away from Grafana. It’s one more thing to manage, and is quite tricky to get looking good and set up, and doesn’t always integrate perfectly with OpenHAB; zooming etc.
I’ve seen a few posts requesting a way to show multiple switch items in a timeline similar to HA.
I’ve managed to hack together something that might be of interest to people. And maybe someone is clever enough to help me make this work with a repeater somehow to make it easier to populate and add/remove items, and resize things gracefully. It’s a bit janky to change the number of items and resize things in this current form.
You will need to adjust the naming scheme to match your items.
I’m also seeing a bug where the chart will look off-center and can’t zoom when first loaded. When I change the time range it loads properly and I can zoom again.
There seems to be lots of properties that don’t accept expressions. This is quite annoying and is maybe a bug that can be fixed. It would be useful to be able to use an expression in the height property so that the entire chart could be resized without having to edit every instance each time for example.
uid: motionHistory
tags: []
props:
parameterGroups: []
parameters:
- name: locations
label: Locations
type: TEXT
description: A text prop
default: Office,Hall,BackHall,Kitchen_Sink,Kitchen_Endboard,Hall_Understairs,Driveway,Bathroom,Landing
- name: height
label: Line Height
type: TEXT
description: A text prop
default: 20
timestamp: Feb 16, 2024, 8:55:53 AM
component: f7-card
config:
noShadow: true
style:
height: 260px
slots:
default:
- component: oh-chart
config:
label: Motion history
period: 6H
slots:
tooltip:
- component: oh-chart-tooltip
config:
show: false
dataZoom:
- component: oh-chart-datazoom
config:
show: true
type: inside
xAxisIndex:
- 0
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
grid:
- component: oh-chart-grid
config:
top: 50
left: 120
right: 20
height: 20
- component: oh-chart-grid
config:
top: 70
left: 120
right: 20
height: 20
- component: oh-chart-grid
config:
top: 90
left: 120
right: 20
height: 20
- component: oh-chart-grid
config:
top: 110
left: 120
right: 20
height: 20
- component: oh-chart-grid
config:
top: 130
left: 120
right: 20
height: "20"
- component: oh-chart-grid
config:
top: "150"
left: 120
right: 20
height: 20
- component: oh-chart-grid
config:
top: 170
left: 120
right: 20
height: 20
- component: oh-chart-grid
config:
top: 190
left: 120
right: 20
height: 20
- component: oh-chart-grid
config:
top: 210
left: 120
right: 20
height: 20
xAxis:
- component: oh-time-axis
config:
gridIndex: 0
axisLabel:
show: false
axisTick:
show: false
- component: oh-time-axis
config:
gridIndex: 1
axisLabel:
show: false
axisTick:
show: false
- component: oh-time-axis
config:
gridIndex: 2
axisLabel:
show: false
axisTick:
show: false
- component: oh-time-axis
config:
gridIndex: 3
axisLabel:
show: false
axisTick:
show: false
- component: oh-time-axis
config:
gridIndex: 4
axisLabel:
show: false
axisTick:
show: false
- component: oh-time-axis
config:
gridIndex: 5
axisLabel:
show: false
axisTick:
show: false
- component: oh-time-axis
config:
gridIndex: 6
axisLabel:
show: false
axisTick:
show: false
- component: oh-time-axis
config:
gridIndex: 7
axisLabel:
show: false
axisTick:
show: false
- component: oh-time-axis
config:
gridIndex: 8
yAxis:
- component: oh-value-axis
config:
gridIndex: 0
name: =props.locations.split(",")[0]
nameGap: -20
position: left
offset: 10
nameTextStyle:
align: right
- component: oh-value-axis
config:
gridIndex: 1
name: =props.locations.split(",")[1]
nameGap: -20
offset: 10
nameTextStyle:
align: right
- component: oh-value-axis
config:
gridIndex: 2
name: =props.locations.split(",")[2]
nameGap: -20
offset: 10
nameTextStyle:
align: right
- component: oh-value-axis
config:
gridIndex: 3
name: =props.locations.split(",")[3]
nameGap: -20
offset: 10
nameTextStyle:
align: right
- component: oh-value-axis
config:
gridIndex: 4
name: =props.locations.split(",")[4]
nameGap: -20
position: left
offset: 10
nameTextStyle:
align: right
- component: oh-value-axis
config:
gridIndex: 5
name: =props.locations.split(",")[5]
nameGap: -20
offset: 10
nameTextStyle:
align: right
- component: oh-value-axis
config:
gridIndex: 6
name: =props.locations.split(",")[6]
nameGap: -20
offset: 10
nameTextStyle:
align: right
- component: oh-value-axis
config:
gridIndex: 7
name: =props.locations.split(",")[7]
nameGap: -20
offset: 10
nameTextStyle:
align: right
- component: oh-value-axis
config:
gridIndex: 8
name: =props.locations.split(",")[8]
nameGap: -20
offset: 10
nameTextStyle:
align: right
series:
- component: oh-time-series
config:
gridIndex: 0
xAxisIndex: 0
yAxisIndex: 0
type: line
slots:
markArea:
- component: oh-mark-area
config:
item: =props.locations.split(",")[0] + "_MotionLightSensor_Motion"
- component: oh-time-series
config:
gridIndex: 1
xAxisIndex: 1
yAxisIndex: 1
type: line
slots:
markArea:
- component: oh-mark-area
config:
item: =props.locations.split(",")[1] + "_MotionLightSensor_Motion"
- component: oh-time-series
config:
gridIndex: 2
xAxisIndex: 2
yAxisIndex: 2
type: line
slots:
markArea:
- component: oh-mark-area
config:
item: =props.locations.split(",")[2] + "_MotionLightSensor_Motion"
- component: oh-time-series
config:
gridIndex: 3
xAxisIndex: 3
yAxisIndex: 3
type: line
slots:
markArea:
- component: oh-mark-area
config:
item: =props.locations.split(",")[3] + "_MotionLightSensor_Motion"
- component: oh-time-series
config:
gridIndex: 4
xAxisIndex: 4
yAxisIndex: 4
type: line
slots:
markArea:
- component: oh-mark-area
config:
item: =props.locations.split(",")[4] + "_MotionLightSensor_Motion"
- component: oh-time-series
config:
gridIndex: 5
xAxisIndex: 5
yAxisIndex: 5
type: line
slots:
markArea:
- component: oh-mark-area
config:
item: =props.locations.split(",")[5] + "_MotionLightSensor_Motion"
- component: oh-time-series
config:
gridIndex: 6
xAxisIndex: 6
yAxisIndex: 6
type: line
slots:
markArea:
- component: oh-mark-area
config:
item: =props.locations.split(",")[6] + "_MotionLightSensor_Motion"
- component: oh-time-series
config:
gridIndex: 7
xAxisIndex: 7
yAxisIndex: 7
type: line
slots:
markArea:
- component: oh-mark-area
config:
item: =props.locations.split(",")[7] + "_MotionLightSensor_Motion"
- component: oh-time-series
config:
gridIndex: 8
xAxisIndex: 8
yAxisIndex: 8
type: line
slots:
markArea:
- component: oh-mark-area
config:
item: =props.locations.split(",")[8] + "_MotionLightSensor_Motion"