import type ApexCharts from 'apexcharts'; import { LitElement } from 'lit'; import { type ChartDefinition, type ChartFormat, type ChartModel, type ChartType, type RenderChartOptions } from './features/chart.js'; import { type ApexGridEnterprise } from './grid-enterprise.js'; export declare const CHART_TAG = "apex-grid-chart"; /** Where the chart panel pulls its model from. */ export type ChartSource = 'auto' | 'selection' | 'view'; /** * A serializable snapshot of a chart's configuration, returned by {@link ApexGridChart.toJSON} and * consumed by {@link ApexGridChart.restore}. Plain JSON (no functions), so an app can persist it * anywhere (localStorage, a server, a saved view) and rebuild the chart later. Excludes * `apexOptions`, which is author code (may hold functions) and is reapplied by the app, not restored. */ export interface ChartConfig { readonly type?: ChartType | 'auto'; readonly source?: ChartSource; readonly definition?: ChartDefinition; readonly format?: ChartFormat; readonly heading?: string; readonly crossFilter?: boolean; /** A frozen model, present for snapshot charts (see {@link ApexGridChart.staticModel}). */ readonly staticModel?: ChartModel | null; } /** * Built-in chart panel for ``. Mount it beside (or below) a grid and set its * `grid` property: it renders the grid's current chart model (cell selection, or grouping/pivot * view) with ApexCharts, switches chart type from a gallery, and **live-redraws** as the selection * or view changes. * * Two container modes via `mode`: `'inline'` renders in place; `'dialog'` (default) renders a * floating, draggable panel — append it to `document.body` and call {@link show}. ApexCharts is * dynamically imported, so registering the element costs nothing until a chart is drawn. * * Unlike the other companion elements, this one renders in **light DOM**: ApexCharts injects global * styles and measures layout and cannot render inside a shadow root. * * @element apex-grid-chart * * @fires apex-chart-created - After a chart renders: `{ chart, type }`. * @fires apex-chart-type-changed - When the gallery changes type: `{ type }`. * @fires apex-chart-closed - When a dialog panel is dismissed. * * @csspart panel - The panel container. * @csspart header - Dialog header (drag handle + title + close). * @csspart toolbar - The type gallery / theme switcher row. * @csspart type-button - A chart-type button in the gallery. * @csspart canvas - The light-DOM element ApexCharts renders into. * @csspart placeholder - Shown when there is nothing to chart. */ export declare class ApexGridChart extends LitElement { #private; static get tagName(): string; static register(): void; protected createRenderRoot(): this; /** The enterprise grid to chart. Setting it (re)binds the live listeners. */ grid: ApexGridEnterprise> | null; /** `'inline'` renders in place; `'dialog'` (default) is a floating, draggable panel. */ mode: 'inline' | 'dialog'; /** Active chart type, or `'auto'` (the recommended-type heuristic). */ type: ChartType | 'auto'; /** Which model to chart: selection if present else view (`'auto'`), or force one. */ source: ChartSource; /** * How the grid data is mapped to the chart: category column, measure columns, and per-series * aggregation (see {@link ChartDefinition}). An empty definition (the default) keeps the automatic * mapping — first non-numeric column is the category, every numeric column a series, summed per * category. Applies to the selection and flat-view models (not grouping/pivot, which carry their * own aggregation). */ definition: ChartDefinition; /** * A frozen model to chart instead of reading the live grid. When set, the panel ignores * `source`/`definition`/cross-filter and always renders this snapshot — how several independent * charts coexist (each captures a different slice at creation). `null` (default) keeps the panel * live-bound to the grid. */ staticModel: ChartModel | null; /** * The handful of frequently-changed formatting options (colors, legend, data labels, gridlines, * number format) surfaced by the Format popover. Only fields you set are applied, layered over * `apexOptions`, so it never clobbers author options you didn't touch. See {@link ChartFormat}. */ format: ChartFormat; /** * Palette. Defaults to `'grid'`: the chart follows the grid's theme, deriving its colors and * light/dark mode from the grid's tokens. Set `'light'`/`'dark'` to force a mode (programmatic * escape hatch — there is no built-in theme picker). */ theme: 'grid' | 'light' | 'dark'; /** Dialog open state (no-op for `mode="inline"`). */ open: boolean; /** Panel heading (dialog mode). */ heading: string; /** Chart height in px. Applies to `mode="inline"`; a dialog chart fills its (resizable) panel. */ height: number; /** * Cross-filter mode: clicking a category filters the grid to it (and toggles off on re-click). * The chart reads the grid's full, unfiltered data, so it keeps all categories rather than * collapsing to the filtered subset. */ crossFilter: boolean; /** Extra ApexCharts options, merged last (escape hatch — the thin-Format story). */ apexOptions: RenderChartOptions['apexOptions']; private hasModel; /** Whether the Export dropdown in the toolbar is open. */ private exportOpen; /** Whether the Format popover in the toolbar is open. */ private formatOpen; /** Whether the Data (mapping) popover in the toolbar is open. */ private dataOpen; /** Whether the dialog heading is in inline-rename mode. */ private headingEditing; /** Draft name/formula for the Data popover's "add calculated field" form. */ private calcName; private calcFormula; /** Chartable columns from the grid (key/label/numeric), for the Data popover + secondary-axis map. */ private dataFields; /** Series names from the last rendered model, so the Format popover can offer a swatch per series. */ private seriesNames; disconnectedCallback(): void; protected willUpdate(changed: Map): void; protected updated(changed: Map): void; /** Open the dialog panel (and move focus into it so Escape / tabbing work). */ show(): void; /** Close the dialog panel and notify (e.g. so a launcher can remove it). */ close(): void; /** The live ApexCharts instance, or `null`. */ getChart(): ApexCharts | null; /** * A serializable {@link ChartConfig} capturing this chart's configuration (type, source, mapping, * format, heading, cross-filter, and any frozen snapshot). Named `toJSON` so `JSON.stringify(panel)` * just works. `apexOptions` is deliberately excluded — it is author code and may hold functions. */ toJSON(): ChartConfig; /** * Apply a {@link ChartConfig} (from a previous {@link toJSON}) to this chart, then redraw. Only the * fields present in `config` are set, so a partial config patches the current state. Bind `grid` * separately (a config is data, not a grid reference). */ restore(config: ChartConfig): void; /** * Download the current chart as a raster **PNG** (`'png'`, default) or a scalable **SVG** * (`'svg'`). Resolves `false` when there is no chart yet or the browser can't produce the file. * PNG goes through ApexCharts' own `dataURI()` (so it captures exactly what's drawn); SVG * serializes the rendered `` directly. */ exportImage(format?: 'png' | 'svg'): Promise; /** * Copy the current chart to the clipboard as a PNG image. Resolves `false` when there is no chart, * the Clipboard `write` API / `ClipboardItem` is unavailable, or the write is blocked. */ copyImage(): Promise; /** * Re-read the model and redraw (called automatically on live signals). * * Serialized: creating/updating an ApexCharts instance is async, so without a guard two * overlapping refreshes (rapid drag-select plus a view signal) could both observe `#chart === null` * and render twice into the same canvas — the flicker / "sometimes it doesn't render" failure mode. * One render runs at a time; any calls that arrive mid-render collapse into a single trailing rerun * that picks up the latest model. */ refresh(): Promise; /** * Toggle the cross-filter on the category at `index` (the programmatic form of clicking a chart * segment): filters the grid to that category, or clears it if it was already active. Reads the * grid's full data so it is independent of the current filter. */ selectCategory(index: number): void; protected render(): import("lit-html").TemplateResult<1>; } declare global { interface HTMLElementTagNameMap { [CHART_TAG]: ApexGridChart; } }