test_raw.js - master - Starolat/DeepDive

test_raw.js
123 строки3 KB
Starolat Sergei
chore: sync project state for Gitverse
16 июн 2026, 16:06
16 июн 2026, 16:061cb951e
// @ts-check
/**
 * SummarySCurveWidget — S-кривая (ECharts) с барами и расширенной настройкой.
 * Адаптация под Consta Design System.
 *
 * @tag summary-s-curve-widget
 * @attr {string} report-date — Дата отчёта YYYY-MM-DD
 * @attr {boolean} animation-disabled — Отключить анимацию
 */
class SummarySCurveWidget extends HTMLElement {
  /* ---------- Data ---------- */
  #baseline = [];
  #actual = [];
  #forecast = [];
  #xAxisData = [];
  #milestones = [];

  /* ---------- Chart ---------- */
  #chart = null;
  #reportDate = null;
  #animationDisabled = false;
  #observer = null;
  #resizeObserver = null;
  #compactionHandler = null;

  /* ---------- Config ---------- */
  #config = {
    /* visibility */
    showPlan: true,
    showActual: true,
    showForecast: true,

    /* type: 'line' | 'bar' | 'both' */
    planType: "both",
    actualType: "both",
    forecastType: "both",

    /* line style */
    smooth: true,
    showSymbols: false,
    lineWidth: 3,

    /* bar style */
    barWidth: "40%",
    barGap: "20%",
    barBorderRadius: [2, 2, 0, 0],

    /* bar data: 'period' = diff(cumulative), 'cumulative' = raw */
    barDataMode: "period",

    /* general */
    showLegend: true,
    showTooltip: true,
    showDataZoom: true,
    showReportLine: true,
    showMilestones: true,

    /* y-axis */
    yMin: 0,
    yMax: 100,
    yAuto: true,
  };

  #settingsOpen = false;

  constructor() {
    super();
    this.attachShadow({ mode: "open" });
  }

  static get observedAttributes() {
    return ["report-date", "animation-disabled"];
  }

  attributeChangedCallback(name, oldValue, newValue) {
    if (name === "report-date") {
      if (newValue) {
        const parsed = new Date(newValue);
        this.#reportDate = !isNaN(parsed.getTime()) ? parsed : null;
      } else {
        this.#reportDate = null;
      }
      if (this.isConnected && this.#chart) this.updateChart();
    }
    if (name === "animation-disabled") {
      this.#animationDisabled = this.hasAttribute("animation-disabled");
      if (this.isConnected && this.#chart) this.updateChart();
    }
  }

  get reportDate() {
    return this.#reportDate
      ? this.#reportDate.toISOString().split("T")[0]
      : null;
  }

  set reportDate(value) {
    let newDate = null;
    if (value instanceof Date) {
      newDate = !isNaN(value.getTime()) ? value : null;
    } else if (typeof value === "string") {
      const parsed = new Date(value);
      newDate = !isNaN(parsed.getTime()) ? parsed : null;
    }
    const oldStr = this.#reportDate ? this.#reportDate.toISOString() : null;
    const newStr = newDate ? newDate.toISOString() : null;
    if (oldStr !== newStr) {
      this.#reportDate = newDate;
      if (this.isConnected && this.#chart) this.updateChart();
    }
  }

  /* ---------- Lifecycle ---------- */
  connectedCallback() {
    this.render();
    this.#syncSettingsUI();
    this.#initResizeListener();
    this.#setupLazyInit();
    this.#bindSettingsEvents();
    this.#compactionHandler = (e) => this.#setCompactionMode(e.detail?.mode);
  #syncSettingsUI() {}
}
export { SummarySCurveWidget };