TibberLink Adapter

[ReblausGT]

@hansjochen said in TibberLink Adapter:

Ich habe mir das Standard-Template so angepasst, dass im Diagramm die aktuelle Zeit mit einer vertikalen Linie markiert wird.
Falls das jemand nutzen möchte:

JA! hier ich!!! Cool, das wollte ich schon die ganze Zeit!! Darf ich das im Adapter als Beispiel veröffentlichen?

[HansJochen]

Hi @reblausgt ,

danke für Dein Feedback.

Klar, bau es gerne ein. Ich habe das ja hier gepostet, weil ich dachte, dass es auch für andere praktisch sein kann.

[ReblausGT]

Mal was anderes.... die X-Achse mit Strings war ein Entwurf der 1h Zeitscheiben.... jetzt, mit den 15 Minuten Scheiben überlege ich ob man das doch lieber im category time ändern sollte.... das zerschmeißt dann halt alles was man sich da schon an template gebastelt hatte.... Ist das ne Katastrophe? oder Überwiegen die Vorteile?

[Schimi]

Ich brauche mal ne Erklärung zum "Batterie laden" Kanal nach der 15min Umstellung

Wenn ich die AmountHours auf z.B. "0,5" stelle, schaltet er dann jede verfügbaren 30min Slot, wo der Preis 25% unter dem höchsten Tagespreis ist auf true? (den highest nutze ich nicht)

[ReblausGT]

@schimi said in TibberLink Adapter:

Ich brauche mal ne Erklärung zum "Batterie laden" Kanal nach der 15min Umstellung

Er sucht die 2 billigsten 15 Minuten und lädt die Batterie. Dann nimmt er den Preis der teuersten Phase = die teuerste Wattstunde im Speicher und rechnet dazu den Wirkungsgradverlust hinzu.... alles was da drunter liegt sperrt er das Entladen, was darüber liegt wird entladen.

[HansJochen]

@reblausgt

Gute Frage. Für mich war das mein erster Berührpunkt mit ECharts. So, wie es jetzt ist, passt es bei mir mit der Skalierung relativ gut. Je nach Fenstergröße auf unterschiedlichen Größen wählt ECharts hier recht vernünftig, welche Punkte auf der Skala weggelassen werden. Beispielsweise sehe ich in dem kleinen Ausschnitt, den ich dem Chart in meiner Visualisierung gönne, die vollen Stunden und wenn ich das Chart alleine im Browser Fullscreen öffne auch die Viertelstunden.

Ich habe mir aber jetzt gerade eine Echart Demo angeschaut (https://echarts.apache.org/examples/en/editor.html?c=area-time-axis), da lässt sich in dem Chart mit dem Mausrad zoomen. Das geht bei uns nicht. Ob die String-Skala der Grund ist, weiß ich nicht. Das könnte ich mir aber vorstellen.

Was wohl in jedem Fall schöner wäre: Es wäre halt der Weg, den ECharts für Zeitserien vorsieht. Das Datum würde nicht ständig wiederholt, sondern nur einmal angezeigt und ansonsten nur die Uhrzeit. Die X-Achse wäre also etwas übersichtlicher.

Mir persönlich wäre die Änderung nicht wichtig, das Template wäre aber leicht anzupassen. Ich kann da bei Bedarf auch gerne unterstützen. Wer sich beispielsweise veränderte Tooltips eingebaut hat, müsste halt selbst noch mal Hand anlegen. Ich würde aber vermuten, wer das hinbekommen hat, wird auch an dem Umbau nicht scheitern.

Übrigens: Ich vermute, dass es einige Nutzer gibt, die mit ECharts keine Berührpunkte hatten und die in ihrer Automatisierung nur für die Tibberpreise benutzen. Dann ist es schon etwas knifflig, die URL für die generierten Charts herauszufinden und die Templates in den Editor zu kopieren könnte auf manche auch etwas abschreckend wirken. Vermutlich benutzen die Meisten eines der Standard Templates ohne Veränderungen.

Da könnte es aus meiner Sicht helfen, wenn die URL im Adapter direkt angezeigt würde und es eine Auswahl der Art "Standard Darstellung", "alternative Darstellung" oder "benutzerdefinierte Darstellung" gäbe und damit der ganze Flexchart Hintergrund samt Erklärungen, Beispielen und Editor nur sichtbar wird, wenn man zuvor "benutzerdefiniert" ausgewählt hat.

[Schimi]

ist das was?

{
	backgroundColor: "#ffffff",

	title: {
		text: "Tibber Preis",
		left: "center",
		textStyle: { color: "#333", fontSize: 16 }
	},

	tooltip: {
		trigger: "axis",
		axisPointer: { type: "cross" },
		valueFormatter: value => value.toFixed(3) + " €"
	},

	grid: {
		left: "8%", right: "4%", top: "10%", bottom: "10%"
	},

	xAxis: {
		type: "time",
		name: "Zeit",
		axisLabel: {
			formatter: value => {
				const date = new Date(value);
				const hours = date.getHours().toString().padStart(2, "0");
				const minutes = date.getMinutes().toString().padStart(2, "0");
				return hours + ":" + minutes;
			}
		},
		splitLine: { show: false }
	},

	yAxis: {
		type: "value",
		name: "Preis (€)",
		axisLabel: { formatter: "{value} €" },
		splitLine: { show: true }
	},

	visualMap: {
		show: false,
		min: 0.2,
		max: 0.4,
		inRange: {
			color: ["green", "yellow", "red"]
		}
	},

	series: [
		{
			name: "Preis",
			type: "line",
			symbol: "none",
			step: "end",
			data: %%yAxisData%%, // Format: [ [timestamp, value], [timestamp, value], ... ]

			markArea: {
				itemStyle: { color: "rgba(120, 200, 120, 0.2)" },
				data: [ %%CalcChannelsData%% ] // z. B. [[{ xAxis: "2025-11-04T10:00" }, { xAxis: "2025-11-04T14:00" }]]
			},

			markLine: {
				symbol: "none",
				label: {
					formatter: "Jetzt",
					position: "end",
					color: "#333"
				},
				lineStyle: { color: "red", type: "solid" },
				data: [
					{
						xAxis: new Date().toISOString()
					}
				]
			}
		}
	]
}

[HansJochen]

@schimi sagte in TibberLink Adapter:

ist das was?

Kunst am Bau?

[Schimi]

@hansjochen

hehe, dachte ich bin mal "clever" und jag es einfach durch ChatGPT

scheint wohl nicht geklappt zu haben....

besser?

{
	backgroundColor: "#ffffff",

	title: {
		text: "Tibber Preis",
		left: "center",
		textStyle: { color: "#333", fontSize: 16 }
	},

	tooltip: {
		trigger: "axis",
		axisPointer: { type: "cross" },
		valueFormatter: value => value.toFixed(3) + " €"
	},

	grid: {
		left: "8%", right: "4%", top: "10%", bottom: "10%"
	},

	xAxis: {
		type: "time",
		name: "Zeit",
		axisLabel: {
			formatter: value => {
				const date = new Date(value);
				const hours = date.getHours().toString().padStart(2, "0");
				const minutes = date.getMinutes().toString().padStart(2, "0");
				return hours + ":" + minutes;
			}
		},
		splitLine: { show: false }
	},

	yAxis: {
		type: "value",
		name: "Preis (€)",
		axisLabel: { formatter: "{value} €" },
		splitLine: { show: true }
	},

	visualMap: {
		show: false,
		min: 0.2,
		max: 0.4,
		inRange: {
			color: ["green", "yellow", "red"]
		}
	},

	series: [
		{
			name: "Preis",
			type: "line",
			symbol: "none",
			smooth: true,          // <<< weiche Kurve statt Stufen
			data: %%yAxisData%%,   // Format: [ [timestamp, value], [timestamp, value], ... ]

			lineStyle: {
				width: 2
			},

			markArea: {
				itemStyle: { color: "rgba(120, 200, 120, 0.2)" },
				data: [ %%CalcChannelsData%% ]
			},

			markLine: {
				symbol: "none",
				label: {
					formatter: "Jetzt",
					position: "end",
					color: "#333"
				},
				lineStyle: { color: "red", type: "solid" },
				data: [
					{
						xAxis: new Date().toISOString()
					}
				]
			}
		}
	]
}

Falls das auch nichts ist, gebe ich auf

[HansJochen]

@schimi sagte in TibberLink Adapter:

scheint wohl nicht geklappt zu haben....

Schwer zu sagen. Falls Du das hier erreichen wolltest, hat es geklappt:

Was ist denn Dein Ziel?

[Schimi]

@hansjochen sieht nicht richtig aus

wollte dein script (für welche die es brauchen, ich habe aktuell keine Verwendung für die Funktion)
umbauen das unten nur Uhrzeit angezeigt wird und nicht immer das Datum (quasi wie ihr danach drüber geschrieben habt)

[HansJochen]

@Schimi

Okay, das fällt dann wohl in die Kategorie "gut gemeint"

Das Verhalten von Hand nachzubilden, solange der Adapter hier noch auf Strings basiert, wäre ziemlich müßig. Echarts macht das ja schon automatisch, wenn @ReblausGT , wie er es hier angedacht hat, den Adapter auf Datumsobjekte umstellt. Das sollte dann aber synchron passieren: Im Adapter und in den Templates.