import { unsafeCSS, LitElement, html } from "lit";
import { property, query, state } from "lit/decorators.js";
import compentStyle from "./graph-mini.css.js";
import uPlot from "uplot";
import { customElement } from "../../decorator.js";
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __decorateClass = (decorators, target, key, kind) => {
  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
  for (var i = decorators.length - 1, decorator; i >= 0; i--)
    if (decorator = decorators[i])
      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
  if (kind && result) __defProp(target, key, result);
  return result;
};
let ObcGraphMini = class extends LitElement {
  constructor() {
    super(...arguments);
    this.data = [[], []];
    this.y = 24;
    this.uplot = null;
  }
  getCssColor(name) {
    const color = getComputedStyle(this).getPropertyValue(name).trim();
    return color;
  }
  firstUpdated() {
    const opts = {
      width: 48,
      height: 48,
      scales: {
        x: { time: false, show: false },
        y: {
          auto: true,
          show: false,
          range: (_self, initMin, initMax, _scaleKey) => {
            const range = this.maxY ?? initMax - (this.minY ?? initMin);
            return [
              this.minY ?? initMin - range * 0.1,
              this.maxY ?? initMax + range * 0.1
            ];
          }
        }
      },
      series: [
        {},
        {
          stroke: this.getCssColor("--element-neutral-color"),
          width: 2,
          points: { show: false }
        }
      ],
      axes: [
        { show: false },
        { ticks: { show: false }, show: false, grid: { show: false } }
      ],
      legend: { show: false },
      cursor: { show: false }
    };
    this.uplot = new uPlot(opts, this.data, this.chart);
    requestAnimationFrame(() => this.updateY());
  }
  updatePalette() {
    if (!this.uplot) {
      return;
    }
    const stroke = this.getCssColor("--element-neutral-color");
    this.uplot.setSeries(1, { stroke, width: 2, points: { show: false } });
  }
  updateY() {
    if (!this.uplot) {
      return;
    }
    const lastY = this.data[1][this.data[1].length - 1];
    const yRatio = this.uplot.scales.y.valToPct(lastY);
    this.y = yRatio * 32 - 3;
  }
  updated(changedProperties) {
    if (changedProperties.has("data")) {
      this.updatePalette();
      this.uplot?.setData(this.data);
      requestAnimationFrame(() => this.updateY());
    }
  }
  render() {
    return html`
      <div class="chart-container">
        <div id="chart"><div id="dot" style="bottom: ${this.y}px; "></div></div>
      </div>
    `;
  }
};
ObcGraphMini.styles = unsafeCSS(compentStyle);
__decorateClass([
  property({ type: Array })
], ObcGraphMini.prototype, "data", 2);
__decorateClass([
  property({ type: Number })
], ObcGraphMini.prototype, "minY", 2);
__decorateClass([
  property({ type: Number })
], ObcGraphMini.prototype, "maxY", 2);
__decorateClass([
  query("#chart")
], ObcGraphMini.prototype, "chart", 2);
__decorateClass([
  state()
], ObcGraphMini.prototype, "y", 2);
ObcGraphMini = __decorateClass([
  customElement("obc-graph-mini")
], ObcGraphMini);
export {
  ObcGraphMini
};
//# sourceMappingURL=graph-mini.js.map
