I would like to share the following extension:
In addition to different time ranges, different grafana pages can be selected as well:
Code:
uid: Grafana_charts_with_timeranges_MikeTheTux
tags: []
props:
parameters:
- description: Title of the chart
label: Title
name: title
required: false
type: TEXT
- description: Grafana URL with "{period}" and "{panel}" placeholder. Example: "http://nas:3000/d-solo/VCS_VtN4k/openhab?orgId=1&{period}&panelId={panel}"
label: Grafana source URL
name: URL
required: true
type: TEXT
- default: from=now-6h&to=now,6h;from=now-12h&to=now,12h;from=now-1d&to=now,24h;from=now/d&to=now/d,Day;from=now-3d&to=now,Last 3 Days;from=now-7d&to=now,Last 7 Days;from=now-14d&to=now,Last 14 Days
description: List of time ranges (separated with semicolon). Example: "from=now-6h&to=now,-6h;from=now-1d/d&to=now-1d/d,yesterday" for past "6h" and "yesterday". First entry is default.
label: Grafana time range options
name: timerange
required: true
type: TEXT
- default: 27,PV Status;22,PV Forecast
description: List of panels (separated with semicolon). Example: "27,PV Status;22,PV Forecast" for two panels with ID "27" and "22". First entry is default.
label: Grafana Panel IDs
name: panel
required: true
type: TEXT
- description: Height of the Frame (empty = default)
label: Height
name: height
required: false
type: TEXT
parameterGroups: []
timestamp: Oct 29, 2023, 9:59:50 AM
component: f7-card
config:
title: =props.title
outline: true
style:
--f7-card-margin-horizontal: 10px
--f7-card-margin-vertical: 3px
--f7-card-padding-horizontal: 10px
--f7-card-padding-vertical: 100px
margin-top: 10px
margin-bottom: 10px
noShadow: false
border-radius: var(--f7-card-expandable-border-radius)
box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.3)
slots:
default:
- component: oh-webframe-card
config:
borders: false
noBorder: false
noShadow: true
height: =props.height
src: =props.URL.replace('{period}', vars.selectedPeriod || [props.timerange.split(';')[0].split(',')[0]]).replace('{panel}', vars.selectedPanel || [props.panel.split(';')[0].split(',')[0]])
class:
- display-block
- component: f7-segmented
config:
round: false
outline: false
class:
- padding-bottom-half
style:
margin-left: 10px
margin-right: 10px
--f7-button-font-size: 14px
--f7-button-text-color: "=themeOptions.dark === 'light' ? 'black' : 'white'"
--f7-button-text-transform: none
--f7-button-border-radius: 4px
--f7-button-outline-border-width: 1px
--f7-button-font-weight: 300
--f7-button-padding-vertical: 0px
--f7-button-padding-horizontal: 0px
slots:
default:
- component: oh-repeater
config:
sourceType: range
for: size
fragment: true
slots:
default:
- component: oh-repeater
config:
fragment: true
for: period
in: =[props.timerange.split(";")[loop.size].split(",")[1]]
slots:
default:
- component: oh-button
config:
text: =loop.period
fill: "=(([props.timerange.split(';')[loop.size].split(',')[0]] == vars.selectedPeriod) || (props.timerange.split(';')[0].split(',')[1] === loop.period) && !vars.selectedPeriod) ? true : false"
round: false
outline: true
style:
--f7-button-border-color: var(--f7-card-outline-border-color)
action: variable
actionVariable: selectedPeriod
actionVariableValue: =props.timerange.split(";")[loop.size].split(",")[0]
- component: f7-segmented
config:
round: false
outline: false
class:
- padding-bottom-half
style:
margin-left: 10px
margin-right: 10px
--f7-button-font-size: 14px
--f7-button-text-color: "=themeOptions.dark === 'light' ? 'black' : 'white'"
--f7-button-text-transform: none
--f7-button-border-radius: 4px
--f7-button-outline-border-width: 1px
--f7-button-font-weight: 300
--f7-button-padding-vertical: 0px
--f7-button-padding-horizontal: 0px
slots:
default:
- component: oh-repeater
config:
sourceType: range
for: size
fragment: true
slots:
default:
- component: oh-repeater
config:
fragment: true
for: panel
in: =[props.panel.split(";")[loop.size].split(",")[1]]
slots:
default:
- component: oh-button
config:
text: =loop.panel
fill: "=(([props.panel.split(';')[loop.size].split(',')[0]] == vars.selectedPanel) || (props.panel.split(';')[0].split(',')[1] === loop.panel) && !vars.selectedPanel) ? true : false"
round: false
outline: true
style:
--f7-button-border-color: var(--f7-card-outline-border-color)
action: variable
actionVariable: selectedPanel
actionVariableValue: =props.panel.split(";")[loop.size].split(",")[0]
Have fun!