Hi! So I tried creating a widget (quite new to this) myself and I though I had it working but alas… no. And I couldn’t for the life of me figure out why and so I had to start over trying to get ChatGPT to help me out and it wrote the following code for me:
uid: power_usage_widget_rrd4j
tags:
- power
props:
parameter:
label: Power Consumption Item
context: item
barChartColor:
label: Bar Chart Color
context: visualization
description: Set the color of the bar chart. Default is blue.
default: blue
slots:
content:
- component: f7-card
slots:
header:
- component: f7-card-header
slots:
default:
- component: f7-row
slots:
left:
- component: f7-col
slots:
default:
- component: Label
config:
text: Daily Power Usage
style:
font-weight: bold
right:
- component: f7-col
slots:
default:
- component: f7-button
config:
text: Refresh
raised: true
fill: true
iconF7: refresh
on:
click:
then:
- component: oh-repeater
config:
fragment: true
for: item in props.parameter
sourceType: currentStates
filter:
- type: item
item: =item.name
transform:
- name: calculateDailyUsage
params:
fieldName: usageDaily
function: |
var startTime = now.toDateMidnight().toInstant();
var endTime = now.toInstant();
var data = items[item.name].getHistoricState(startTime, endTime, "rrd4j").getStateSeries();
var total = 0;
data.forEach(function(element) {
total += element.doubleValue();
});
return Math.round(total * 100) / 100;
slots:
default:
- component: oh-list-item
config:
title: =item.label
item: =item.name
icon: f7:bolt
action: none
badge: "={{Math.round(items[item.name].state)}} W"
badgeColor: =props.barChartColor
badgeStyle:
font-size: 14px
- component: ChartCard
config:
type: bar
label: Daily Power Usage
data:
datasets:
- label: Power Usage
backgroundColor: =props.barChartColor
data: =items[item.name].historicState(now.toDateMidnight, "rrd4j").filter(startDate > now.minusDays(1)).sortedByState.sumSince(startDate).groupBy("HOUR").averageByGroup
options:
scales:
yAxes:
- ticks:
beginAtZero: true
scaleLabel:
display: true
labelString: "Watts"
legend:
display: false
tooltips:
enabled: false
animation:
duration: 0
responsive: true
maintainAspectRatio: false
aspectRatio: 2
style:
height: 200px
margin-top: 5px
margin-bottom: 5px
configRefresh:
type: simple
timeout: 300000
When I input this into the widget creator, nothing shows up. Its just blank and I cannot figure out why that is. What I’m trying to create is just a simple bar chart with the daily power consumption for one single item. Any ideas?