Template für Daten von tibberLink

[MyHomeMyData]

Es werden zwei Templates zur Darstellung von Daten aus dem tibberLink-Adapter mit flexcharts als Basis für eigene Charts beschrieben. Das Ergebnis sieht z.B. so aus:

Variante 1: Einfaches Template auf Basis eines ioBroker States

Zum Ausprobieren sind nur ein paar Schritte notwendig.

1. Objekte importieren
   0_userdata.0.flexcharts.tibberLink.json
   Das erzeugt folgende Objektstruktur:
   

2. Skript anlegen und starten
   Ein Skript mit folgendem Inhalt anlegen und starten. Name ist unwichtig.

//
// Create chart for Tibber weekly data to be used with flexcharts
//

const ID_TIBBER_WEEKLY = '0_userdata.0.flexcharts.tibberLink.tibberWeekly';    // State id containing tibber data (json format)
const ID_CHART_WEEKLY  = '0_userdata.0.flexcharts.tibberLink.chartWeekly';     // State id containing template for chart data (json format)
const TITLE_WEEKLY     = 'Tibber weekly';

evalTibberData(ID_TIBBER_WEEKLY, ID_CHART_WEEKLY, TITLE_WEEKLY);    // Convert data on start of script

on({id: ID_TIBBER_WEEKLY, change: "any"}, function (obj) {
    evalTibberData(ID_TIBBER_WEEKLY, ID_CHART_WEEKLY, TITLE_WEEKLY);
});

function evalTibberData(idTibber, idChart, title) {
    const tibber = JSON.parse(getState(idTibber).val);  // Read tibber data
    const chart = JSON.parse(getState(idChart).val);    // Read chart template
    const xAxis  = [];
    const yAxis0 = [];
    const yAxis1 = [];
    for (const data of Object.values(tibber)) {
        const isHourly = (new Date(data.from).getHours() != new Date(data.to).getHours());  // Hourly data?
        const xValue = (isHourly ? new Date(data.from).toLocaleTimeString() : new Date(data.from).toLocaleDateString());
        xAxis.push(xValue);
        yAxis0.push((data.consumption ? data.consumption.toFixed(2) : 0));  // push 0 on null values
        yAxis1.push((data.cost ? data.cost.toFixed(2) : 0));                // push 0 on null values
    }
    chart.title.text = title;           // Set chart title
    chart.xAxis[0].data  = xAxis;       // Set chart x-axis data
    chart.series[0].data = yAxis0;      // Set chart y-values consumption
    chart.series[1].data = yAxis1;      // Set chart y-values cost
    setState(idChart, JSON.stringify(chart), true); // Write changed chart data to state
    console.log('Evaluation of tibber weekly data done. Title: '+title);
}

3. Im Browser oder in einem iFrame folgende Adresse aufrufen:
   http://localhost:8082/flexcharts/echarts.html?source=state&id=0_userdata.0.flexcharts.tibberLink.chartWeekly
   Ggf. localhost durch den Namen des Rechners ersetzen, auf dem flexcharts läuft.

Nun werden die Chartdaten immer neu erzeugt, wenn der State "tibberWeekly" geschrieben wird. Das Chart kann per Hand oder regelmäßig mit der Option refresh (siehe Readme) neu geladen werden.

Variante 2: Erweitertes Template auf Basis einer Callback-Funktion

Folgender Ansatz kann mit stündlichen, täglichen, wöchentlichen und monatlichen Daten umgehen und benötigt keine zusätzlichen States. Es sind nur 3 Schritte zum Ausprobieren notwendig:

1. Skript in Instanz 0 des Javascript-Adapters anlegen (Name spielt keine Rolle):

//
// Create chart for Tibber data. To be used with flexcharts.
//
// Sample http request for hourly data chart:
// http://localhost:8082/flexcharts/echarts.html?source=script&message=tibber&chart=hourly
//

// Replace 'MY-TOKEN' with your own token:
const ID_TIBBER = 'tibberlink.0.Homes.MY-TOKEN.Consumption';

const IDS = { hourly:  '.jsonHourly',  // hourly data
              daily:   '.jsonDaily',   // daily data
              weekly:  '.jsonWeekly',  // weekly data
              monthly: '.jsonMonthly'  // monthly data
            };

onMessage('tibber', (httpParams, callback) => {
    // Use hourly data in case of invalid chart type
    const id = (httpParams.chart && httpParams.chart in IDS ? ID_TIBBER+IDS[httpParams.chart] : ID_TIBBER+IDS['hourly']);
    if (existsState(id)) { 
        evalTibberData(httpParams.chart, id, result => callback(result));
    } else {
        console.log('Requested state is not available >>'+id+'<<');
        callback({title: { left: "center", textStyle: { color: "#ff0000" }, text: "REQUESTED STATE IS NOT AVAILABLE: >>" + id +"<<" }});
    }
});

function evalTibberData(myChart, id, callback) {
    const tibber = JSON.parse(getState(id).val);  // Read tibber data
    const chart = {
                    tooltip: { trigger: "axis", axisPointer: { type: "cross" }},
                    legend: { show: true, orient: "horizontal", left: "center", top: 25 },
                    title: { left: "center", text: "Tibber " },
                    grid: { right: "20%" },
                    toolbox: { feature: { dataView: { show: true, readOnly: false }, restore: { show: true }, saveAsImage: { show: true }}},
                    xAxis: [{ type: "category", axisTick: { alignWithLabel: true }, data: []}],
                    yAxis: [{ type: "value", position: "left",  alignTicks: true, axisLine: { show: true, lineStyle: { color: "#5470C6" }}, axisLabel: { formatter: "{value} kWh" }},
                            { type: "value", position: "right", alignTicks: true, axisLine: { show: true, lineStyle: { color: "#91CC75" }}, axisLabel: { formatter: "{value} €" }}],
                    series: [{ name: "Consumption", type: "bar", yAxisIndex: 0, data: []},
                             { name: "Cost",        type: "bar", yAxisIndex: 1, data: []}]
                   };
    const xAxis  = [];
    const yAxis0 = [];
    const yAxis1 = [];
    for (const data of Object.values(tibber)) {
        const isHourly = (myChart == 'hourly');  // Hourly data?
        const xValue = (isHourly ?
                        new Date(data.from).toLocaleTimeString('de-DE', { hour12: false, hour: '2-digit', minute: '2-digit' }) :
                        new Date(data.from).toLocaleDateString('de-DE', { year: 'numeric', month: '2-digit', day: '2-digit' })
                       );
        xAxis.push(xValue);
        yAxis0.push((data.consumption ? data.consumption.toFixed(2) : 0));  // push 0 on null values
        yAxis1.push((data.cost ? data.cost.toFixed(2) : 0));                // push 0 on null values
    }
    chart.xAxis[0].data  = xAxis;       // Set chart x-axis data
    chart.series[0].data = yAxis0;      // Set chart y-values consumption
    chart.series[1].data = yAxis1;      // Set chart y-values cost
    chart.title.text += myChart;             // Add type of chart to title
    console.log('Evaluation of tibber '+myChart+' data done.');
    callback(chart);
}

2. In der Konstante ID_TIBBER MY-TOKEN durch das eigene Token ersetzen und das Skript starten.
   Die Daten müssen in folgendem Format vorliegen:

[
  {
    "from": "2025-01-06T00:00:00.000+01:00",
    "to": "2025-01-06T00:00:00.000+01:00",
    "cost": 10.7284204741,
    "unitPrice": 0.287942,
    "unitPriceVAT": 0.045974,
    "consumption": 37.259,
    "consumptionUnit": "kWh",
    "totalCost": 10.3727235241,
    "unitCost": 10.7284204741,
    "currency": "EUR"
  },
  ...
]

3. Im Browser oder in einem iFrame folgende Adresse aufrufen (Beispiel für stündliche Daten):
   http://localhost:8082/flexcharts/echarts.html?source=script&message=tibber&chart=hourly
   Ggf. localhost durch den Namen des Rechners ersetzen, auf dem flexcharts läuft.
   Mit "daily", "weekly", "monthly" statt "hourly" werden die anderen Chart-Typen ausgewählt.

Das Ergebnis ist das gleiche, wie bei Variante 1.
Das Chart kann per Hand oder regelmäßig mit der Option refresh (siehe Readme) neu geladen werden. Oder über entsprechende Einstellungen des iFrames.

Um das Chart anders zu gestalten, kann die Konstante "chart" im Skript entsprechend angepasst werden. Bei Änderungen an der Datenstruktur muss natürlich auch die Aufbereitung der Daten angepasst werden.