@synergy-design-system/components/dist/components/chart/chart.component.d.ts

import { type EChartsType } from 'echarts/core.js';
import type { CSSResultGroup, PropertyValues } from 'lit';
import SynergyElement from '../../internal/synergy-element.js';
import { type ChartPalette } from './chart.palettes.js';
import type { ChartConfigType } from './types.js';
/**
 * @summary The `<syn-chart>` component is a container for displaying charts. It provides a structured layout and styling for chart elements, allowing for consistent presentation across different types of charts. The chart component is based on [Apache ECharts](https://echarts.apache.org)
 *
 * @documentation https://synergy-design-system.github.io/?path=/docs/charting-syn-chart--docs
 * @status experimental
 * @since 3.15.0
 *
 * @csspart base - The component's base wrapper.
 */
export default class SynChart extends SynergyElement {
    static styles: CSSResultGroup;
    private chartContainer;
    private chartInstance;
    private resizeObserver;
    private resolvedConfig;
    /**
     * The ECharts configuration input.
     *
     * This property accepts either:
     * - a plain `ECConfig` object, or
     * - a callback that receives a typed preset handle and applies chart presets.
     *
     * The resolved result maps 1:1 to the ECharts `option` parameter passed to
     * `setOption()`.
     * Consult the [ECharts option documentation](https://echarts.apache.org/en/option.html)
     * and assign either the object directly or build it through the handle.
     *
     * > **Note:** Currently only **line charts** (`series[].type: 'line'`) are supported.
     * > Support for additional chart types (bar, pie, etc.) will be added in future releases or can be requested.
     *
     * Assigning a new config input completely replaces the previous chart
     * configuration (`notMerge: true`).
     * To update only parts of the chart, access the underlying ECharts instance directly and
     * call `setOption()` with custom merge options.
     *
     * @example
     * ```js
     * // Using a plain object
     * chart.config = {
     *   xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed'] },
     *   yAxis: { type: 'value' },
     *   series: [{ type: 'line', data: [150, 230, 224] }],
     * };
     *
     * // Using the handle with method chaining
     * chart.config = (handle) => handle
     *   .baseConfig({
     *     xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed'] },
     *     yAxis: { type: 'value' },
     *     series: [{ type: 'line', data: [150, 230, 224] }],
     *   })
     *   .axesShowSplitLines();
     *
     * // Using the handle with sequential calls
     * chart.config = (handle) => {
     *   handle.baseConfig({
     *     xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed'] },
     *     yAxis: { type: 'value' },
     *     series: [{ type: 'line', data: [150, 230, 224] }],
     *   });
     *   handle.axesShowSplitLines();
     * };
     * ```
     */
    config: ChartConfigType;
    /**
     * The color palette to apply to chart series.
     *
     * - `categorical` (default) — 12 distinct colors for comparing unrelated data series
     * - `sequential-01` … `sequential-07` — 10-step single-hue ramps:
     *   `01`=primary, `02`=accent, `03`=muted, `04`=purple, `05`=teal, `06`=magenta, `07`=neutral
     * - `sequential-status-critical`, `sequential-status-error`, `sequential-status-info`,
     *   `sequential-status-success`, `sequential-status-warning` — 10-step status ramps
     *
     * The palette sets the ECharts `color` array. If `config.color` is explicitly provided,
     * it takes precedence over the palette.
     */
    palette: ChartPalette;
    /** Resolves palette CSS custom properties to computed color values and applies them to the chart. */
    private applyPalette;
    protected updated(changedProperties: PropertyValues<this>): void;
    connectedCallback(): void;
    protected firstUpdated(_changedProperties: PropertyValues): void;
    disconnectedCallback(): void;
    /**
     * 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(): EChartsType | undefined;
    render(): import("lit").TemplateResult<1>;
}