The source code of the very first prototype of this card

[dbuezas]

This is mostly for myself, but it could be interesting for anybody who wants to know the working principle of this card.

import "https://cdn.plot.ly/plotly-2.4.2.min.js";
import "https://www.unpkg.com/deepmerge@4.2.2/dist/umd.js";
const Plotly = window.Plotly;
const deepmerge = window.deepmerge;

class PlotlyCard extends HTMLElement {
  async fetch(hass) {
    this.history = []
    if (!hass) return;
    this._data = [];
    const startDate = new Date(
      new Date().setDate(new Date().getDate() - this.config.days)
    );

    const endDate = new Date();

    const uri =
      "history/period/" +
      startDate.toISOString() +
      "?filter_entity_id=" +
      this.config.entities.map(({ entity }) => entity) +
      "&significant_changes_only=1" +
      "&minimal_response" +
      "&end_time=" +
      endDate.toISOString();
    console.log(uri);
    console.time("fetch");
    this.history = (await hass.callApi("GET", uri)) || [];
    this.fetched = true
    console.timeEnd("fetch");
    
  }

  async plot(hass) {
    if (!this.fetched) {
      await this.fetch(hass);
    }
    console.log(history);
    const data = this.history.map((entity, i) => ({
      x: entity.map(({ last_changed }) => last_changed),
      y: entity.map(({ state }) => state),
      name: entity[0].attributes.friendly_name,
      type: "scatter",
      ...this.config.entities[i]
    }));

    const layoutDefaults = {
      width: parseFloat(window.getComputedStyle(this.content).width),
      paper_bgcolor: "rgba(0,0,0,0)",
      plot_bgcolor: "rgba(0,0,0,0)",
      yaxis: {
        tickcolor: "rgb(63,63,63)",
        gridcolor: "rgb(63,63,63)",
        zerolinecolor: "rgb(63,63,63)",
        zeroline: true,
        showline: true,
      },
      xaxis: {
        tickcolor: "rgb(63,63,63)",
        gridcolor: "rgb(63,63,63)",
        zerolinecolor: "rgb(63,63,63)",
        zeroline: true,
        showline: true,
      },
      font: {
        color: "rgb(136,136,136)",
      },
      margin: {
        b: 40,
        t: 0,
        l: 60,
        r: 10,
      },
      legend: {
        orientation: "h",
        xanchor: "start",
        y: 1.15,
      },
      title:
        !this.fetched
          ? { text: "Loading...", xanchor: "center", yanchor: "middle", y:.5, font:{size:40} }
          : undefined,
    };
    const layout = deepmerge(layoutDefaults, this.config.layout || {});
    console.log(layout);
    Plotly.react(this.content, data, layout);
  }

  // Whenever the state changes, a new `hass` object is set. Use this to
  // update your content.
  set hass(hass) {
    this._hass = hass;
    // Initialize the content if it's not there yet.
    if (!this.content) {
      const style = Array.from(
        document.querySelectorAll(`style[id^="plotly.js"]`)
      )
        .flatMap((styleEl) => Array.from(styleEl.sheet.rules))
        .map((rule) => rule.cssText)
        .join("\n");
      this.innerHTML = `
        <style id="plotly-style-hack">
          .js-plotly-plot .plotly .modebar-btn {
            fill: rgb(136,136,136);
        }
        ${style}
        </style>
        <ha-card>
          <div class="card-content"></div>
        </ha-card>
      `;
      this.content = this.querySelector("div");

      this.plot(hass);
    }
  }
  // The user supplied configuration. Throw an exception and Lovelace will
  // render an error card.
  setConfig(config) {
    if (!config.entities?.[0]?.entity) {
      throw new Error("You need to define at least one entity");
    }
    this.config = config;
    console.log(this.config);
    this.plot(this._hass);
  }

  // The height of your card. Home Assistant uses this to automatically
  // distribute all cards over the available columns.
  getCardSize() {
    return 3;
  }
}

customElements.define("plotly-card", PlotlyCard);