import { LitElement, PropertyValues } from 'lit';
import { ChartOptions, ChartDataset } from 'chart.js';
import { InstrumentState, FrameStyle, BorderRadiusPosition, Priority } from '../../navigation-instruments/types.js';
/**
 * Dimension information reported by external scale components.
 * Dispatched via 'scale-dimensions-changed' event from slotted scale elements.
 */
export interface ExternalScaleDimensions {
    /** Which side this scale is positioned on */
    side: 'top' | 'bottom' | 'left' | 'right';
    /** Natural thickness in pixels (width for vertical, height for horizontal) */
    thickness: number;
}
export declare enum XAxisType {
    category = "category",
    time = "time"
}
export declare enum YAxisPosition {
    left = "left",
    right = "right"
}
export declare enum LineMode {
    smooth = "smooth",
    straight = "straight",
    stepped = "stepped"
}
export declare enum TimeDisplay {
    minutes = "minutes",
    date = "date"
}
/**
 * Abstract base class for line and area chart components built on Chart.js.
 *
 * ## Features
 * - **Single or multi-series**: Use `data` for simple single-series or `datasets` for multi-series charts
 * - **Time and category axes**: Supports `category` x-axis (labels) and `time` x-axis (ISO dates or timestamps)
 * - **Line styles**: Choose `smooth` (curved), `straight`, or `stepped` line rendering
 * - **Fill modes**: Area fills with `semitransparent`, `solid`, or `threshold` (red/blue above/below midpoint)
 * - **Stacked charts**: Enable `stacked` for multi-series datasets to stack values on y-axis
 * - **Flexible axes**: Single y-axis via `yAxisPosition` or multi-axis via `yAxes` for complex charts
 * - **Theme-aware**: Automatically updates colors on theme changes using CSS variables
 * - **Responsive sizing**: Fixed height with 1.5:1 aspect ratio (e.g., 320px height → 480px width)
 * - **Grid & ticks**: Toggle grid lines (`showGrid`, `showGridX`, `showGridY`) and tick marks (`showTickMarks`)
 * - **Legend support**: Optional HTML legend showing series labels with `legend` property
 * - **External axis support**: via slots
 * - **Color priority**: Set `priority` to `Priority.enhanced` to use the blue/enhanced
 *   color palette instead of the default gray/regular palette (default: `Priority.regular`)
 *
 * ## Size Behavior
 * - Above 192px: Shows labels, tick marks, and grid lines with standard padding
 * - Below 192px: Hides labels/ticks and uses edge-to-edge rendering for compact display
 *
 * ## Examples
 *
 * Basic single-series with category axis:
 * ```html
 * <obc-line-graph></obc-line-graph>
 * <script>
 *   const chart = document.querySelector('obc-line-graph');
 *   chart.data = [
 *     {label: 'Jan', value: 10},
 *     {label: 'Feb', value: 14},
 *     {label: 'Mar', value: 12}
 *   ];
 *   chart.unit = 'kW';
 *   chart.height = 256;
 * </script>
 * ```
 *
 * Multi-series with time axis and legend:
 * ```html
 * <obc-line-graph></obc-line-graph>
 * <script>
 *   const chart = document.querySelector('obc-line-graph');
 *   chart.xAxisType = 'time';
 *   chart.timeDisplay = 'date';
 *   chart.legend = true;
 *   chart.datasets = [
 *     {label: 'Temperature', data: [{x: '2025-01-01', y: 20}, {x: '2025-01-02', y: 22}]},
 *     {label: 'Humidity', data: [{x: '2025-01-01', y: 65}, {x: '2025-01-02', y: 68}]}
 *   ];
 * </script>
 * ```
 *
 * Stacked area chart with solid fill:
 * ```html
 * <obc-line-graph></obc-line-graph>
 * <script>
 *   const chart = document.querySelector('obc-line-graph');
 *   chart.datasets = [
 *     {label: 'Series A', data: [2, 3, 4, 3, 5]},
 *     {label: 'Series B', data: [1, 2, 3, 2, 4]},
 *     {label: 'Series C', data: [3, 2, 1, 2, 3]}
 *   ];
 *   chart.fill = true;
 *   chart.fillMode = 'solid';
 *   chart.stacked = true;
 *   chart.legend = true;
 * </script>
 * ```
 *
 * Threshold fill (single-series only):
 * ```html
 * <obc-line-graph></obc-line-graph>
 * <script>
 *   const chart = document.querySelector('obc-line-graph');
 *   chart.data = [{label: '1', value: 20}, {label: '2', value: 45}, {label: '3', value: 35}];
 *   chart.fill = true;
 *   chart.fillMode = 'threshold';
 * </script>
 * ```
 *
 * Multi-axis chart with right-side y-axis:
 * ```html
 * <obc-line-graph></obc-line-graph>
 * <script>
 *   const chart = document.querySelector('obc-line-graph');
 *   chart.yAxes = [
 *     {id: 'y-temp', position: 'left', min: 0, max: 100},
 *     {id: 'y-pressure', position: 'right', min: 0, max: 10}
 *   ];
 *   chart.datasets = [
 *     {label: 'Temperature', data: [20, 25, 30], yAxisID: 'y-temp'},
 *     {label: 'Pressure', data: [2, 3, 2.5], yAxisID: 'y-pressure'}
 *   ];
 * </script>
 * ```
 *
 * @property {Array<{label: string, value: number}>} data - Single-series data array. Each object must have `label` (string) and `value` (number). Used when `datasets` is not provided.
 * @property {ChartDataset<'line', (number | {x: string|number|Date; y: number})[]>[]} datasets - Multi-series Chart.js datasets. Takes precedence over `data`. Each dataset can have `label`, `data` (numeric array or `{x, y}` points), and visual properties like `borderColor`, `backgroundColor`, `fill`, etc.
 * @property {(string|number)[]} labels - Explicit labels for category x-axis. If omitted, labels are derived from `data` property or dataset x-values.
 * @property {string[]} colors - Custom color palette (CSS variable names or color strings). Falls back to theme default colors if not provided.
 * @property {'category'|'time'} xAxisType - X-axis mode. `'category'` for labeled data points, `'time'` for time-based data (ISO strings or timestamps). Default: `'category'`.
 * @property {'minutes'|'date'} timeDisplay - Time axis label format when `xAxisType='time'`. `'date'` shows full date/time, `'minutes'` shows minutes relative to first data point. Default: `'date'`.
 * @property {'left'|'right'} yAxisPosition - Single y-axis position. Use this for simple charts with one y-axis. For multiple y-axes, use `yAxes` property instead. Default: `'left'`.
 * @property {Array<{id?: string; position?: 'left'|'right'; min?: number; max?: number; grid?: boolean}>} yAxes - Multiple y-axis definitions for complex charts. Each axis can specify `id` (referenced by dataset `yAxisID`), `position`, `min`/`max` range, and `grid` visibility.
 * @property {boolean} showGrid - Show vertical grid lines (x-axis). When combined with `showGridX` and `showGridY`, controls full grid visibility. Default: `false`.
 * @property {boolean} showGridX - Show vertical grid lines (x-axis). Set to `false` to hide only vertical lines while keeping horizontal lines. Default: `false`.
 * @property {boolean} showGridY - Show horizontal grid lines (y-axis). Set to `false` to hide only horizontal lines while keeping vertical lines. Default: `false`.
 * @property {boolean} showTickMarks - Show axis tick marks and labels. Automatically hidden below 192px height threshold. Default: `false`.
 * @property {boolean} showPoints - Show point markers on data points. Default: `false`.
 * @property {boolean} fill - Enable area fill under/between lines. Use with `fillMode` to control fill style. Default: `false`.
 * @property {'semitransparent'|'solid'|'threshold'} fillMode - Fill rendering mode. `'semitransparent'` uses 50% alpha, `'solid'` uses opaque fill, `'threshold'` (single-series only) fills above/below midpoint with red/blue gradient. Default: `'semitransparent'`.
 * @property {'smooth'|'straight'|'stepped'} lineMode - Line drawing style. `'smooth'` applies bezier curve tension, `'straight'` draws straight lines, `'stepped'` creates step-like lines. Default: `'smooth'`.
 * @property {boolean} stacked - Stack multi-series datasets vertically on y-axis. Ignored for single-series and threshold fill mode. Default: `false`.
 * @property {string} unit - Unit label displayed in tooltips (e.g., 'kW', 'kg', '%'). Default: empty string.
 * @property {number} xTicksLimit - Maximum number of x-axis ticks/grid lines. Useful for matching external axes. Optional.
 * @property {number} xStepSize - Force specific interval between x-axis ticks (e.g., 1, 2, 5). Useful for matching external axes. Optional.
 * @property {number} yTicksLimit - Maximum number of y-axis ticks/grid lines. Useful for matching external axes. Optional.
 * @property {number} yStepSize - Force specific interval between y-axis ticks (e.g., 2, 5, 10). Useful for matching external axes. Optional.
 * @property {boolean} legend - Show HTML legend below chart with series labels and colors. Default: `false`.
 * @property {number} height - Chart height in pixels. Determines chart size with 1.5:1 aspect ratio (width = height × 1.5). Default: `320`.
 * @property {boolean} showDebugOverlay - Development mode: show visual debug overlay with dimension guides. Shows blue border around canvas (axis area) and red border around chart grid (data area). Default: `false`.
 *
 * @ignore This is an abstract base class. Use concrete implementations like ObcLineGraph or ObcAreaGraph instead.
 */
export declare class ObcChartLineBase extends LitElement {
    /** Simple single-series data (array of {label, value}). */
    data: {
        label: string;
        value: number;
    }[];
    /** Chart.js-style datasets for multi-series use. If provided, takes precedence over `data`. */
    datasets?: ChartDataset<'line', (number | {
        x: string | number | Date;
        y: number;
    })[]>[];
    /** Optional explicit labels for the x-axis (category mode). If omitted labels are derived from `data` */
    labels?: (string | number)[];
    /** Custom color palette (CSS variable names or color strings). */
    colors: string[];
    /** Show HTML legend below chart with series labels and colors. */
    legend: boolean;
    /** Development mode: show visual debug overlay with dimension guides. */
    showDebugOverlay: boolean;
    /** Width of the chart in pixels. Default: 480. */
    width: number;
    /** Height of the chart in pixels. Default: 320. */
    height: number;
    /**
     * Enable fixed aspect ratio scaling mode.
     * When true, width/height properties define the aspect ratio (not actual pixels).
     * The component fills 100% of parent width and calculates height from aspect ratio.
     * When false (default), width/height are used as actual pixel dimensions.
     */
    fixedAspectRatioScaling: boolean;
    /**
     * Reference size for external scales when using fixedAspectRatioScaling.
     * This value is passed down to external scales to determine their 1:1 Figma design size.
     * At this reference size, scales render at native size; above/below they scale proportionally.
     * Default: 384 (matches Figma design baseline).
     */
    scaleReferenceSize: number;
    /** X-axis mode: 'category' for labeled data points, 'time' for time-based data. */
    xAxisType: XAxisType;
    /** Single y-axis position ('left' or 'right'). For multiple y-axes, use yAxes instead. */
    yAxisPosition: YAxisPosition;
    /** Multiple y-axis definitions for complex multi-axis charts. */
    yAxes?: Array<{
        id?: string;
        position?: 'left' | 'right';
        min?: number;
        max?: number;
        grid?: boolean;
    }>;
    /** Show grid lines. */
    showGrid: boolean;
    /** Show vertical grid lines (x-axis). Default: false. */
    showGridX: boolean;
    /** Show horizontal grid lines (y-axis). Default: false. */
    showGridY: boolean;
    /** Show axis tick marks and labels. */
    showTickMarks: boolean;
    private readonly DEFAULT_TENSION;
    private readonly POINT_RADIUS;
    /** Show point markers on data points. Default: false. */
    showPoints: boolean;
    /** Line drawing style: 'smooth' (curved), 'straight', or 'stepped'. */
    lineMode: LineMode;
    /** Unit label displayed in tooltips (e.g., 'kW', 'kg', '%'). */
    unit: string;
    /** Time axis label format: 'date' (full date/time) or 'minutes' (relative). */
    timeDisplay: TimeDisplay;
    /** Max number of x-axis ticks/grid lines. Useful for matching external axes. */
    xTicksLimit?: number;
    /** Force x-axis tick interval. Useful for matching external axes. */
    xStepSize?: number;
    /** Max number of y-axis ticks/grid lines. Useful for matching external axes. */
    yTicksLimit?: number;
    /** Force y-axis tick interval. Useful for matching external axes. */
    yStepSize?: number;
    /** Instrument state affecting colors of external scales. */
    state: InstrumentState;
    /** Color priority: enhanced uses blue palette instead of default gray. */
    priority: Priority;
    /** Frame style for chart and external scales. */
    frameStyle: FrameStyle;
    /** Border radius position for the chart's own border. */
    borderRadiusPosition?: BorderRadiusPosition;
    /** Border radius position for external scales based on layout. */
    borderRadiusPositionExternalScales?: BorderRadiusPosition;
    /**
     * When true, the chart is used inside an instrument (e.g., gauge-trend).
     * In this mode, only label font size responds to .obc-component-size-* CSS classes.
     * Border radius uses the explicit `borderRadius` property value (or defaults to 8px),
     * rather than reading from CSS variables.
     * @default false
     */
    instrumentMode: boolean;
    /**
     * Explicit border radius value in pixels.
     * When instrumentMode=true, this value is used directly (defaults to 8px).
     * When instrumentMode=false, this is ignored and border radius is read from CSS variable.
     */
    borderRadius?: number;
    /** @internal */
    private canvasEl?;
    /** @internal */
    private legendDiv?;
    /** @internal - Slot elements for external scales */
    private topScaleSlot?;
    private bottomScaleSlot?;
    private leftScaleSlot?;
    private rightScaleSlot?;
    /** @internal */
    private chart?;
    /** @internal */
    private themeObserver?;
    /** @internal - ResizeObserver for tracking height threshold crossings (e.g. MIN_HEIGHT_WITH_LABELS = 192px) */
    private resizeObserver?;
    /** @internal - Track previous state to detect threshold crossing */
    private wasAboveThreshold;
    /** @internal - Track external scale dimensions */
    private externalScaleDimensions;
    /** @internal - Debounce timer for dimension updates */
    private dimensionUpdateTimer?;
    /** @internal - Flag to prevent infinite update loops */
    private isUpdatingScales;
    /** @internal - Border radius observer for theme/size changes */
    private borderRadiusObserver?;
    /** @internal - Current computed border radius in pixels */
    private currentBorderRadiusPx;
    /** @internal - ResizeObserver for aspect ratio scaling */
    private aspectRatioResizeObserver?;
    /** @internal - Computed actual width when using fixed aspect ratio scaling */
    private computedWidth;
    /** @internal - Computed actual height when using fixed aspect ratio scaling */
    private computedHeight;
    /**
     * Should fill be applied to this chart?
     * Line graph returns false, area graph returns true.
     * Must be implemented in subclass.
     */
    protected shouldApplyFill(): boolean;
    /**
     * Get fill mode for area rendering.
     * Line graph returns undefined, area graph returns 'semitransparent' | 'solid' | 'threshold'.
     * Must be implemented in subclass.
     */
    protected getFillMode(): string | undefined;
    /**
     * Should multi-series datasets be stacked?
     * Line graph returns false, area graph returns stacked property value.
     * Must be implemented in subclass.
     */
    protected shouldStack(): boolean;
    /**
     * Compute which corners should be rounded based on borderRadiusPosition and
     * which external scales are present.
     *
     * Logic:
     * - Opposite scales (left+right OR top+bottom) → no rounding (middleChild behavior)
     * - Perpendicular scales (e.g., right+bottom):
     *   - innerFirstChild → round corner adjacent to both scales
     *   - outerLastChild → round free corner opposite to scales
     * - Single-side scales:
     *   - When external scale is on RIGHT, chart is on LEFT
     *     - innerFirstChild → round LEFT corners (top-left + bottom-left)
     *     - outerLastChild → round RIGHT corners (top-right + bottom-right)
     *   - When external scale is on LEFT, chart is on RIGHT (opposite)
     *   - When external scale is on TOP, chart is on BOTTOM
     *     - innerFirstChild → round BOTTOM corners (bottom-left + bottom-right)
     *     - outerLastChild → round TOP corners (top-left + top-right)
     *   - When external scale is on BOTTOM, chart is on TOP (opposite)
     * - middleChild → no rounding
     */
    /**
     * Check if a slotted scale element is actually visible (renders content).
     * For bar-vertical/bar-horizontal elements, checks hasBar and hasScale properties.
     */
    private hasVisibleScale;
    private computeRoundedCorners;
    /**
     * Read current border radius from CSS variable and update state.
     * The chart will be recreated when needed through the normal update mechanism.
     * In instrument mode, uses explicit borderRadius value instead of CSS variable.
     */
    private updateBorderRadius;
    /**
     * Create a Chart.js plugin that draws a border around the chart area with selective corner rounding
     * and clips content to that border.
     */
    private createBorderPlugin;
    /**
     * Check if any external scales are slotted
     */
    private hasExternalScales;
    /**
     * Handle slot change events - when scales are added/removed
     */
    private handleSlotChange;
    /**
     * Handle scale-dimensions-changed events from slotted scales
     */
    private handleScaleDimensionsChanged;
    /**
     * Wait for all slotted scales to report their dimensions
     */
    private waitForScaleDimensions;
    /**
     * Synchronize scale and chart dimensions/data
     * This is the main coordination function
     */
    private syncScalesAndChart;
    /**
     * Calculate chart padding from external scale dimensions
     */
    private calculatePaddingFromScales;
    /**
     * Update properties on slotted scale elements
     */
    private updateScaleProperties;
    private hasAnyChanged;
    /**
     * Apply fillMode rules to datasets. Must be called after the chart is created
     * so scales and pixel coordinates are available for gradient construction.
     *
     * NOTE: For non-threshold modes (solid, semitransparent), backgroundColor is already
     * set correctly in buildDataset(). This method now only handles threshold gradients
     * which require Chart.js scales to be available.
     */
    protected applyFillModes(): void;
    updated(changed: PropertyValues): void;
    firstUpdated(): Promise<void>;
    disconnectedCallback(): void;
    /**
     * Setup resize observer to detect height threshold crossings
     * Recreates chart when crossing MIN_HEIGHT_WITH_LABELS (192px) to show/hide labels
     * Detect when height property changes programmatically (e.g., via Storybook controls or user code)
     */
    private setupResizeObserver;
    /**
     * Setup resize observer for fixed aspect ratio scaling.
     * Observes the wrapper element and recalculates dimensions when parent size changes.
     */
    private setupAspectRatioResizeObserver;
    /**
     * Calculate actual dimensions based on parent width and aspect ratio.
     * Only used when fixedAspectRatioScaling is true.
     */
    private updateComputedDimensions;
    /**
     * Get the effective width for chart rendering.
     * Returns computed width when fixedAspectRatioScaling is true, otherwise the width property.
     */
    protected getEffectiveWidth(): number;
    /**
     * Get the effective height for chart rendering.
     * Returns computed height when fixedAspectRatioScaling is true, otherwise the height property.
     */
    protected getEffectiveHeight(): number;
    /**
     * Get the scale factor for proportional scaling when fixedAspectRatioScaling is true.
     * Returns 1.0 when not in fixed aspect ratio mode.
     * The scale factor is based on computed width vs reference width (the width property).
     */
    protected getScaleFactor(): number;
    /**
     * Build a complete dataset configuration with all styling properties.
     * Handles both new datasets (from values array) and existing datasets (normalization).
     *
     * @param data - Either numeric values array or existing dataset to normalize
     * @param index - Dataset index for color cycling
     * @param chartColors - Color palette array
     * @param totalCount - Total number of datasets (used for stacked divider logic)
     * @returns Fully configured Chart.js dataset
     */
    protected buildDataset(data: number[] | ChartDataset<'line', (number | {
        x: string | number | Date;
        y: number;
    })[]>, index: number, chartColors: string[], totalCount?: number): ChartDataset<'line', number[] | (number | {
        x: string | number | Date;
        y: number;
    })[]>;
    /**
     * Create threshold mode datasets: invisible baseline + main dataset with above/below fills
     */
    protected createThresholdDatasets(values: number[], chartColors: string[]): ChartDataset<'line', number[]>[];
    /**
     * Prepare normalized datasets for multi-series charts
     */
    protected prepareMultiSeriesDatasets(): ChartDataset<"line", number[] | (number | {
        x: string | number | Date;
        y: number;
    })[]>[];
    /**
     * Prepare datasets for single-series charts
     * Handles both regular and threshold fill modes
     */
    protected prepareSingleSeriesDatasets(): {
        datasets: ChartDataset<"line", number[] | (number | {
            x: string | number | Date;
            y: number;
        })[]>[];
        labels: string[];
    };
    /**
     * Get Chart.js options with dynamic sizing and padding
     */
    protected getChartOptions(): ChartOptions<'line'>;
    /**
     * Compute reference timestamp for time axis formatting.
     * Returns earliest timestamp for 'date' mode, latest for 'minutes' mode.
     */
    private computeTimeReference;
    /**
     * Build Chart.js scale configuration with theme-aware styling.
     * Applies CSS variables for grid colors, tick colors, and label typography.
     *
     * @param minX - Reference timestamp for time-based x-axis (used for 'minutes' display)
     * @param isTooSmall - Whether chart is below 192px threshold (hides ticks when true)
     * @param showTickMarks - Whether to show tick marks (overridden to false when external scales present)
     * @returns Configured scales object for Chart.js options
     */
    protected buildScalesConfig(minX?: number, isTooSmall?: boolean, showTickMarks?: boolean): ChartOptions<"line">["scales"];
    /**
     * Prepare chart data and labels for both single and multi-series modes
     */
    private prepareChartDataAndLabels;
    private createChart;
    private updateChart;
    /**
     * Update only chart colors without recalculating layout
     * Used by theme observer for efficient theme changes
     */
    private updateChartColors;
    /**
     * Update the legend HTML content
     */
    private updateLegend;
    render(): import('lit-html').TemplateResult<1>;
    static styles: import('lit').CSSResult[];
}
//# sourceMappingURL=chart-line-base.d.ts.map