@synergy-design-system/components/dist/chunks/chunk.4K6ROBWF.js

import {
  chart_styles_default
} from "./chunk.KPO6RJLG.js";
import {
  synergyLightTheme
} from "./chunk.MLDHXUGM.js";
import {
  PALETTE_TOKENS
} from "./chunk.JOYNXTII.js";
import {
  resolveConfigInput
} from "./chunk.UOCJ2U5N.js";
import {
  applyAxisDefaultsPreprocessor
} from "./chunk.KMZLWOXI.js";
import {
  component_styles_default
} from "./chunk.2NT3B5WJ.js";
import {
  SynergyElement
} from "./chunk.L2IYPRPF.js";
import {
  __decorateClass
} from "./chunk.VK2FVWOF.js";

// src/components/chart/chart.component.ts
import {
  init,
  registerPreprocessor,
  registerTheme,
  use
} from "echarts/core.js";
import { CanvasRenderer } from "echarts/renderers.js";
import { html } from "lit";
import { property } from "lit/decorators.js";
import { query } from "lit/decorators/query.js";
import { LineChart } from "echarts/charts.js";
import {
  GridComponent,
  LegendComponent,
  TitleComponent,
  TooltipComponent
} from "echarts/components.js";
use([
  CanvasRenderer,
  LineChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent
]);
var SynChart = class extends SynergyElement {
  constructor() {
    super(...arguments);
    this.resolvedConfig = {};
    this.config = {};
    this.palette = "categorical";
  }
  /** Resolves palette CSS custom properties to computed color values and applies them to the chart. */
  applyPalette() {
    if (!this.chartInstance) return;
    if (Array.isArray(this.resolvedConfig.color) && this.resolvedConfig.color.length > 0) return;
    const tokens = PALETTE_TOKENS[this.palette];
    const computedStyles = getComputedStyle(this);
    const colors = tokens.map((token) => computedStyles.getPropertyValue(token).trim()).filter(Boolean);
    if (colors.length > 0) {
      const oldOption = this.chartInstance.getOption();
      if (!oldOption) return;
      oldOption.color = colors;
      this.chartInstance.setOption(oldOption, { notMerge: true });
    }
  }
  updated(changedProperties) {
    if (changedProperties.has("config") && this.chartInstance) {
      this.resolvedConfig = resolveConfigInput(this.config);
      this.chartInstance.setOption(this.resolvedConfig, { notMerge: true });
    }
    if ((changedProperties.has("palette") || changedProperties.has("config")) && this.chartInstance) {
      this.applyPalette();
    }
  }
  connectedCallback() {
    super.connectedCallback();
    registerTheme("default", synergyLightTheme);
    registerPreprocessor(applyAxisDefaultsPreprocessor);
  }
  // Initialize echarts instance and resize observer
  firstUpdated(_changedProperties) {
    if (this.chartContainer !== null && this.chartContainer !== void 0) {
      this.chartInstance = init(this.chartContainer, "default");
      this.resizeObserver = new ResizeObserver(() => {
        var _a;
        (_a = this.chartInstance) == null ? void 0 : _a.resize();
      });
      this.resizeObserver.observe(this.chartContainer);
      this.resolvedConfig = resolveConfigInput(this.config);
      if (Object.keys(this.resolvedConfig).length > 0) {
        this.chartInstance.setOption(this.resolvedConfig);
      }
      this.applyPalette();
    }
  }
  disconnectedCallback() {
    var _a, _b;
    super.disconnectedCallback();
    (_a = this.resizeObserver) == null ? void 0 : _a.disconnect();
    (_b = this.chartInstance) == null ? void 0 : _b.dispose();
  }
  /**
   * Returns the underlying ECharts instance, giving direct access to the full
   * [ECharts API](https://echarts.apache.org/en/api.html#echartsInstance).
   *
   * Use this when the `config` property alone is not sufficient — for example to
   * imperatively call `setOption()` with custom merge flags, listen to ECharts events,
   * trigger actions, or retrieve chart data.
   *
   * Returns `undefined` if called before the component has been connected to the DOM
   * (i.e. before `firstUpdated` has run).
   *
   * @example
   * ```js
   * const instance = chart.getInstance();
   *
   * // Listen to ECharts events
   * instance?.on('click', params => console.log(params));
   *
   * // Partial update without replacing the full option
   * instance?.setOption({ series: [{ data: [1, 2, 3] }] }, { replaceMerge: 'series' });
   * ```
   */
  getInstance() {
    return this.chartInstance;
  }
  // eslint-disable-next-line class-methods-use-this
  render() {
    return html`
      <div
        part="base"
        class="chart">
      </div>
    `;
  }
};
SynChart.styles = [
  component_styles_default,
  chart_styles_default
];
__decorateClass([
  query(".chart")
], SynChart.prototype, "chartContainer", 2);
__decorateClass([
  property({ attribute: false })
], SynChart.prototype, "config", 2);
__decorateClass([
  property({ reflect: true })
], SynChart.prototype, "palette", 2);

export {
  SynChart
};
//# sourceMappingURL=chunk.4K6ROBWF.js.map