Har i noen måneder brukt uike verktøy til å enkelt generere yaml kode kun ved å beskrive behovene mine. Blir bare mer og mer imponert over utviklingen og hva det er mulig å få til - dersom spørsmålene stilles riktig - med høyst begrensede programmeringskunnskaper.
Et eksempel er denne som fargekoder timene basert på rangering av strømprisen:
type: custom:apexcharts-card
series:
- entity: sensor.nordpool_kwh_oslo_nok_3_10_0
name: Pris
type: column
float_precision: 4
data_generator: >
const today = entity.attributes.raw_today;
const tomorrow = entity.attributes.raw_tomorrow;
const allData = today.concat(tomorrow);
const categorizeHours = (data) => {
const sorted = [...data].sort((a, b) => a.value - b.value);
const categories = {
lowestFour: sorted.slice(0, 4).map(p => p.start),
nextFour: sorted.slice(4, 8).map(p => p.start),
middle: sorted.slice(8, 16).map(p => p.start),
nextHighestFour: sorted.slice(16, 20).map(p => p.start),
highestFour: sorted.slice(20).map(p => p.start)
};
return categories;
};
const todayCategories = categorizeHours(today);
const tomorrowCategories = categorizeHours(tomorrow);
const getColor = (start) => {
for (const day of [todayCategories, tomorrowCategories]) {
if (day.lowestFour.includes(start)) return '#006400'; // Dark Green
if (day.nextFour.includes(start)) return '#90EE90'; // Light Green
if (day.middle.includes(start)) return '#1E90FF'; // Blue
if (day.nextHighestFour.includes(start)) return '#FFA500'; // Orange
if (day.highestFour.includes(start)) return '#FF0000'; // Red
}
return '#808080'; // Default Gray (shouldn't occur)
};
return allData.map(p => ({
x: new Date(p.start).getTime(),
y: p.value,
fillColor: getColor(p.start)
}));
now:
show: true
label: Nå
graph_span: 2d
span:
start: day
locale: nb
apex_config:
chart:
height: 300px
zoom:
enabled: true
toolbar:
show: true
tools:
zoom: true
zoomin: false
zoomout: false
pan: false
reset: true
legend:
show: false
dataLabels:
enabled: false
xaxis:
type: datetime
labels:
datetimeFormatter:
month: ddd
day: ddd
yaxis:
forceNiceScale: false
min: 0
plotOptions:
bar:
columnWidth: '95%'
På den måten kan jeg se når f.eks. varmekabler på bad og VVB er aktvert (som begge er aktivert på døgnets 8 billigste timer, altså mørkegrønne og lysegrønne farger).
Etter nærmere ettertanke kan VVB og varmekabler uansett være aktivert om prisen er under 0.2 kroner.
Gir derfor AI-assistenten følgende beskjed:
can you modify the code and make all bars dark green if the value is bellow 0.2?
og jeg får dette resultatet:
Answer
Certainly! I'll modify the code to make all bars dark green if their value is below 0.2, while keeping the color categorization for the rest. Here's the updated version:
type: custom:apexcharts-card
series:
- entity: sensor.nordpool_kwh_oslo_nok_3_10_0
name: Pris
type: column
float_precision: 4
data_generator: >
const today = entity.attributes.raw_today;
const tomorrow = entity.attributes.raw_tomorrow;
const allData = today.concat(tomorrow);
const categorizeHours = (data) => {
const sorted = [...data].sort((a, b) => b.value - a.value); // Sort descending
const categories = {
highestFour: sorted.slice(0, 4).map(p => p.start),
nextHighestFour: sorted.slice(4, 8).map(p => p.start),
middle: sorted.slice(8, 16).map(p => p.start),
nextLowestFour: sorted.slice(16, 20).map(p => p.start),
lowestFour: sorted.slice(20).map(p => p.start)
};
return categories;
};
const todayCategories = categorizeHours(today);
const tomorrowCategories = categorizeHours(tomorrow);
const getColor = (start, value) => {
if (value < 0.2) return '#006400'; // Dark Green for values below 0.2
for (const day of [todayCategories, tomorrowCategories]) {
if (day.highestFour.includes(start)) return '#FF0000'; // Red
if (day.nextHighestFour.includes(start)) return '#FFA500'; // Orange
if (day.middle.includes(start)) return '#1E90FF'; // Blue
if (day.nextLowestFour.includes(start)) return '#90EE90'; // Light Green
if (day.lowestFour.includes(start)) return '#00FF00'; // Green
}
return '#808080'; // Default Gray (shouldn't occur)
};
return allData.map(p => ({
x: new Date(p.start).getTime(),
y: p.value,
fillColor: getColor(p.start, p.value)
}));
now:
show: true
label: Nå
graph_span: 2d
span:
start: day
locale: nb
apex_config:
chart:
height: 300px
zoom:
enabled: true
toolbar:
show: true
tools:
zoom: true
zoomin: false
zoomout: false
pan: false
reset: true
legend:
show: false
dataLabels:
enabled: false
xaxis:
type: datetime
labels:
datetimeFormatter:
month: ddd
day: ddd
yaxis:
forceNiceScale: false
min: 0
plotOptions:
bar:
columnWidth: '95%'
Som gir meg denne:
...så kan jeg lage automasjonene tilsvarende.
Andre som har fått tilsvarende hjelp?