eCharts in FHEM (Version 0.0.12.1)

Begonnen von andies, 06 Februar 2024, 22:06:15

Vorheriges Thema - Nächstes Thema

MadMax

Also auf die Art würde ich das einbauen können?
Dann schaue ich mir das nochmal in Ruhe an.
Lenovo M910Q Tiny Debian 12, FHEM 6.3, 2x Siemens Logo 0BA7, Homematic CCU3, Philips HUE, 5x SMA Wechselrichter, BYD HVM, SMA EVCharger, Daikin Wärmepumpe über CAN

Contrib: https://svn.fhem.de/trac/browser/trunk/fhem/contrib/MadMax

andies

Das würde umsetzen, was in stackoverflow als Lösung angegeben wird, ja.
FHEM 6.1 auf RaspPi3 (Raspbian:  6.1.21-v8+; Perl: v5.32.1)
SIGNALduino (433 MHz) und HM-UART (868 MHz), Sonoff, Blitzwolf, Somfy RTS, CAME-Gartentor, Volkszähler, Keyence-Sensor, Homematic-Sensoren und -thermostat, Ferraris-Zähler für Wasseruhr, Openlink-Nachbau Viessmann

andies

#122
Ich verstehe zB nicht, warum in JS diese merkwürdigen Anführungsstriche nötig sind. Aber ich kenne die Sprache nicht, ich frage gleich mal ChatGPT...

MW sind das keine backticks in der Lösung, aber AI sagt
ZitatIn JavaScript, the backtick (`) characters are used to define template literals, a feature introduced in ECMAScript 2015 (ES6). Template literals provide an easy syntax to create strings and to perform string interpolation, where expressions can be embedded into string literals.

Here are some key functions and features of template literals:

1. **Multi-line strings**: Prior to ES6, creating multi-line strings required concatenating strings with the `+` operator or including newline characters (`\n`). With template literals, you can create multi-line strings more naturally, simply by including the line breaks within the backticks.

2. **String interpolation**: Template literals allow embedding expressions within strings. The expressions are enclosed in `${}` and are evaluated, with the result being converted to a string and included in the surrounding text. This makes constructing strings with dynamic content more readable and concise.

3. **Tagged template literals**: A more advanced use of template literals involves tagged templates. This feature allows you to parse template literals through a function, enabling custom processing of the template literals' text and embedded expressions.

Here's a quick example demonstrating multi-line strings and string interpolation with template literals:

```javascript
const name = "Jane";
const greeting = `Hello, ${name}!
Welcome to our website.
Enjoy your stay!`;

console.log(greeting);
```

This example will output:

```
Hello, Jane!
Welcome to our website.
Enjoy your stay!
```

This showcases how backticks (`) and the features of template literals can simplify working with strings in JavaScript.
FHEM 6.1 auf RaspPi3 (Raspbian:  6.1.21-v8+; Perl: v5.32.1)
SIGNALduino (433 MHz) und HM-UART (868 MHz), Sonoff, Blitzwolf, Somfy RTS, CAME-Gartentor, Volkszähler, Keyence-Sensor, Homematic-Sensoren und -thermostat, Ferraris-Zähler für Wasseruhr, Openlink-Nachbau Viessmann

MadMax

Hallo andies,

ich habe mal ein wenig experimentiert.
erstmal hatte ich dies abegändet.

${myChart.getVisual({ seriesIndex: index }
${myChart_'.$name.'.getVisual({ seriesIndex: index }

und

{"toolbox": {"formatter" : (params) => {
{legend: {}, tooltip: {trigger: "axis", formatter :

tooltop, nicht toolbox.

  eCharts_pO 'var MadMaxoption_'.$name.' = {legend: {}, tooltip: {trigger: "axis", formatter : (params) => {var xTime = new Date(params[0].axisValue); let tooltip = `<p>${xTime.toLocaleString()}</p> `; series.forEach((serie, index) => { value = serie.data.reduce((prev, curr) => Math.abs(new Date(curr.value[0]).valueOf() - xTime.valueOf()) < Math.abs(new Date(prev.value[0]).valueOf() - xTime.valueOf()) ? curr : prev).value[1]; tooltip += `<p><span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color: ${myChart_'.$name.'.getVisual({ seriesIndex: index }, "color")}"></span>`; tooltip += `${serie.name} &emsp;&emsp; <b>${value}</b></p>`;}); return tooltip; }}}';
  eCharts_pO 'myChart_'.$name.'.setOption(MadMaxoption_'.$name.');';

Leider findet das script die series nicht, diese werden aber vorher angelegt  ::)
Hast du eine idee?

Gruß
Max
Lenovo M910Q Tiny Debian 12, FHEM 6.3, 2x Siemens Logo 0BA7, Homematic CCU3, Philips HUE, 5x SMA Wechselrichter, BYD HVM, SMA EVCharger, Daikin Wärmepumpe über CAN

Contrib: https://svn.fhem.de/trac/browser/trunk/fhem/contrib/MadMax

MadMax

Ah, im beispiel sind die als var angelegt, darum kommt das sript da dran.

var series = [{
    "name": "sensor 1",
    //step: "end",
    "data": [{
        "value": [
          "2019-02-20T11:47:44.000Z",
          22.2
        ]
      },

und dann wird die var übergeben.

series: series,
Lenovo M910Q Tiny Debian 12, FHEM 6.3, 2x Siemens Logo 0BA7, Homematic CCU3, Philips HUE, 5x SMA Wechselrichter, BYD HVM, SMA EVCharger, Daikin Wärmepumpe über CAN

Contrib: https://svn.fhem.de/trac/browser/trunk/fhem/contrib/MadMax

andies

Genau, und so lange wir die var nicht haben, geht das nicht.
FHEM 6.1 auf RaspPi3 (Raspbian:  6.1.21-v8+; Perl: v5.32.1)
SIGNALduino (433 MHz) und HM-UART (868 MHz), Sonoff, Blitzwolf, Somfy RTS, CAME-Gartentor, Volkszähler, Keyence-Sensor, Homematic-Sensoren und -thermostat, Ferraris-Zähler für Wasseruhr, Openlink-Nachbau Viessmann

MadMax

Meinst du mann könnte den weg gehen und die series erst in eine Variable speichern und dann zuweisen?
Lenovo M910Q Tiny Debian 12, FHEM 6.3, 2x Siemens Logo 0BA7, Homematic CCU3, Philips HUE, 5x SMA Wechselrichter, BYD HVM, SMA EVCharger, Daikin Wärmepumpe über CAN

Contrib: https://svn.fhem.de/trac/browser/trunk/fhem/contrib/MadMax

andies

Das hatte ich vorher und ich habe die Daten jetzt in eine Dataset ausgelagert, weil ich verschiedene x- und y-Achsen zulassen will. Das wäre mit series nicht oder nur sehr umständlich gegangen.

Ich muss mal schauen, ob es da noch einen anderen Weg gibt. Anscheinend geht es ja grundsätzlich, man muss nur den Datensatz "irgendwie" bestimmen. Ich bastle gerade an etwas anderem, werde mir das aber danach mal anschauen.
FHEM 6.1 auf RaspPi3 (Raspbian:  6.1.21-v8+; Perl: v5.32.1)
SIGNALduino (433 MHz) und HM-UART (868 MHz), Sonoff, Blitzwolf, Somfy RTS, CAME-Gartentor, Volkszähler, Keyence-Sensor, Homematic-Sensoren und -thermostat, Ferraris-Zähler für Wasseruhr, Openlink-Nachbau Viessmann

MadMax

Cool, danke.
Wenn ich Zeit finde experimentieren ich auch noch ein wenig.
Lenovo M910Q Tiny Debian 12, FHEM 6.3, 2x Siemens Logo 0BA7, Homematic CCU3, Philips HUE, 5x SMA Wechselrichter, BYD HVM, SMA EVCharger, Daikin Wärmepumpe über CAN

Contrib: https://svn.fhem.de/trac/browser/trunk/fhem/contrib/MadMax

andies

Ich habe mir mal von ChatGPT erklären lassen, was da passiert:
ZitatThis JavaScript code snippet appears to be part of a custom tooltip formatter function for an ECharts chart, a popular open-source visualization library. The function dynamically generates HTML content for the tooltip based on the data point closest to the cursor's x-axis position. Let's break it down step by step:

1. Initialization of `xTime`:
      var xTime = new Date(params[0].axisValue);
   
This line initializes `xTime` as a JavaScript `Date` object using `params[0].axisValue`, which likely represents the x-axis value (e.g., a timestamp) of the point nearest to the cursor or selected by the user. `params` is an array of data passed to the tooltip formatter by ECharts, where each item contains information about the corresponding series at the current cursor position.

2. Starting the Tooltip HTML:
 
   let tooltip = `<p>${xTime.toLocaleString()}</p> `;
 

 This line begins constructing the `tooltip` HTML string with a paragraph that displays the localized string representation of `xTime`. It sets the foundation for appending additional series information.

3. Iterating Over Series:
      series.forEach((serie, index) => { ... });
   
   Here, the code iterates over each series in the chart. For each series, it performs operations to determine the closest data point to `xTime` and constructs part of the tooltip HTML string with specific series information.

4. Finding the Closest Data Point:

   value = serie.data.reduce((prev, curr) => ... ).value[1];
   
   Within the `forEach` loop, `reduce` is used to iterate over the `data` array of the current series to find the data point (`curr`) closest to `xTime` by comparing the absolute differences in their x-axis values (`value[0]`). It then selects either the current data point (`curr`) or the previous closest data point (`prev`) based on which is closer to `xTime`. The result is the `value[1]` of the closest data point, which is used to display in the tooltip.

5. Appending Series Information to the Tooltip:
      tooltip += `<p><span ... ></span>`;
   tooltip += `${serie.name} &emsp;&emsp; <b>${value}</b></p>`;
 

   For each series, this part appends HTML to the `tooltip` string that includes a colored square (indicating the series color) and the series name followed by the value of the closest data point. `myChart_...getVisual({ seriesIndex: index }, "color")` is used to retrieve the series color, which is then set as the background color of the span acting as the colored square. The `&emsp;` entities are used for spacing.

6. Return Statement:
   The function ends with a `return` statement (implied but not fully shown in the snippet), which likely returns the completed `tooltip` HTML string to be displayed as the tooltip content.

Jetzt muss man nur noch schauen, wie man statt series dafür dataset einsetzt. Denn dort sind die Daten abgelegt. Vielleicht kann man in series auf dataset verweisen und dann klappt der Code oder man regelt das oben, indem man nicht series ausliest, sondern dataset ausliest. Aber wie das genau geht, entzieht sich meiner Kenntnis.   
FHEM 6.1 auf RaspPi3 (Raspbian:  6.1.21-v8+; Perl: v5.32.1)
SIGNALduino (433 MHz) und HM-UART (868 MHz), Sonoff, Blitzwolf, Somfy RTS, CAME-Gartentor, Volkszähler, Keyence-Sensor, Homematic-Sensoren und -thermostat, Ferraris-Zähler für Wasseruhr, Openlink-Nachbau Viessmann

andies

Ich habe mal wieder was gebastelt (allerdings ist es mir nicht gelungen, das Problem von MadMax zu lösen, siehe vorigen Post). Es gibt ein neues Attribut, das split heißt. Dabei werden dann die Daten genau in der Mitte geteilt und als zwei Reihen statt einer dargestellt. Das kann man zB benutzen, um die Temperaturen zweier aufeinanderfolgender Tage anzuzeigen o.Ä. Man kann nur in der Mitte teilen, d.h. wahrscheinlich macht das nur Sinn in Verbindung mit fixedrange=2days oder so.

Mir gelingt es noch nicht, die obere x-Achse einzufärben, aber man sieht schon eine ganze Menge. Anbei zwei Fotos im Anhang. Die neueste Version ist wieder im ersten Post.

FHEM 6.1 auf RaspPi3 (Raspbian:  6.1.21-v8+; Perl: v5.32.1)
SIGNALduino (433 MHz) und HM-UART (868 MHz), Sonoff, Blitzwolf, Somfy RTS, CAME-Gartentor, Volkszähler, Keyence-Sensor, Homematic-Sensoren und -thermostat, Ferraris-Zähler für Wasseruhr, Openlink-Nachbau Viessmann