import { LitElement, PropertyValues } from 'lit';
import { Priority } from '../../navigation-instruments/types.js';
/**
 * `<obc-polar-chart>` – A customizable polar area chart component for visualizing proportional data as sectors, with optional outer labels, angle display, and discrete color bands.
 *
 * This component renders an interactive polar area chart powered by Chart.js, displaying data segments as radial sectors with optional outer labels, angle display, and discrete color bands. It supports customizable colors, monochrome mode, and adapts its layout based on available space. Labels are hidden when the chart is too small (< 192px height), ensuring clarity at all sizes.
 *
 * ## Features
 * - **Fixed Height ⇒ Fixed Circumference:** The chart's circumference is determined by the `fixedHeight` property (default: 320px). This ensures the chart's circumference remains consistent and matches other radial instruments, regardless of the available browser or container width. The chart does not scale to fill the width; instead, it always uses the specified fixed height to define its size and circumference.
 * - **Layout:**
 *   - Full 360° polar area chart layout.
 * - **Outer Labels:**
 *   - Optional labels positioned outside the chart showing sector names or angles.
 *   - Supports percentage or custom units (e.g., "kW", "kg", "MB").
 *   - Configurable decimal places and maximum label length (with trimming).
 *   - Option to display angles (0°, 30°, etc.) instead of sector names.
 * - **Discrete Color Bands:**
 *   - Draw sectors as radial color bands from center outward using the colors array as threshold steps.
 *   - Option to trim sectors to the nearest color band boundary or show exact values with partial band fills.
 * - **Customization:**
 *   - Custom segment colors (with automatic fallback to theme palette).
 *   - Monochrome mode for single-color charts.
 *   - Adjustable outer label formatting and units.
 * - **Color Priority:** Set `priority` to `Priority.enhanced` to use the blue/enhanced
 *   color palette instead of the default gray/regular palette (default: `Priority.regular`).
 * - **Responsive Behavior:**
 *   - Automatically hides labels when height < 192px.
 *   - Maintains aspect ratio and adjusts padding for optimal label positioning.
 * - **Theme Integration:**
 *   - Colors update automatically when the `data-obc-theme` attribute changes on the `<html>` element.
 *   - Example:
 *     ```html
 *     <html lang="en" data-obc-theme="day"></html>
 *     ```
 *
 * ## Example
 *
 * **Basic Usage**
 * ```html
 * <obc-polar-chart></obc-polar-chart>
 * <script>
 *   document.querySelector('obc-polar-chart').data = [
 *     {label: 'Sector A', value: 33},
 *     {label: 'Sector B', value: 22},
 *     {label: 'Sector C', value: 45}
 *   ];
 * </script>
 * ```
 *
 * **With Discrete Color Bands**
 * ```html
 * <obc-polar-chart></obc-polar-chart>
 * <script>
 *   const chart = document.querySelector('obc-polar-chart');
 *   chart.discreteColorStops = true;
 *   chart.data = [
 *     {label: 'A', value: 50},
 *     {label: 'B', value: 30},
 *     {label: 'C', value: 20}
 *   ];
 * </script>
 * ```
 *
 * **Custom Colors and Angle Labels**
 * ```html
 * <obc-polar-chart></obc-polar-chart>
 * <script>
 *   const chart = document.querySelector('obc-polar-chart');
 *   chart.showSectorLabels = true;
 *   chart.outerLabelUnit = '°';
 *   chart.outerLabelDecimalPlaces = 0;
 *   chart.data = [
 *     {label: 'A', value: 20},
 *     {label: 'B', value: 35},
 *     {label: 'C', value: 45}
 *   ];
 *   chart.colors = ['#e74c3c', '#f39c12', '#2ecc71'];
 * </script>
 * ```
 *
 * @property {Array<{label: string, value: number}>} data - Chart data segments (set via JavaScript)
 * @property {string[]} colors - Custom segment colors (set via JavaScript) with fallback to theme palette
 * @property {boolean} monochrome - Use single color for all sectors (uses first color from array, default: false)
 * @property {boolean} discreteColorStops - Draw sectors as radial color bands from center outward using the colors array as threshold steps (default: false)
 * @property {boolean} trimToDiscreteStops - When true, visually trim sectors to the nearest discrete color band boundary. When false, show exact values with partial band fills (default: true)
 * @property {boolean} showSectorLabels - When true, display sector labels from data (e.g. "Sector A"). When false, display angle values (0°, 30°, etc.). Default: false
 * @property {boolean} showUnit - Whether to show unit in angle or outer labels, default: false
 * @property {boolean} showOuterLabels - Show outer labels, default: false
 * @property {string} outerLabelUnit - Unit string to append to outer labels, default: ""
 * @property {number} outerLabelMaxLength - Maximum character length for labels before trim (0 = no limit), default: 0
 * @property {number} outerLabelDecimalPlaces - Number of decimal places in labels, default: 0
 * @property {boolean} showDebugOverlay - Show debug overlay for development, default: false
 * @property {number} fixedHeight - Fixed height of the chart in pixels (mandatory, determines chart circumference), default: 320. The chart's circumference is always based on this fixed height to match other radial instruments.
 * @property {boolean} legend - Whether to display the legend below the chart, default: false
 */
export declare class ObcPolarChart extends LitElement {
    data: {
        label: string;
        value: number;
    }[];
    colors: string[];
    /** @internal */
    private centerFirstSector;
    priority: Priority;
    monochrome: boolean;
    discreteColorStops: boolean;
    showSectorLabels: boolean;
    showUnit: boolean;
    showOuterLabels: boolean;
    outerLabelUnit: string;
    outerLabelMaxLength: number;
    outerLabelDecimalPlaces: number;
    fixedHeight: number;
    legend: boolean;
    showDebugOverlay: boolean;
    /** @internal - Pre-formatted labels for outer label rendering */
    private formattedLabels;
    /** @internal - Calculated chart diameter from layout helper */
    private calculatedChartDiameter;
    /** @internal */
    private canvasEl;
    /** @internal */
    private legendDiv?;
    /** @internal */
    private chart?;
    /** @internal */
    private themeObserver?;
    /** @internal - ResizeObserver for tracking height threshold crossings */
    private resizeObserver?;
    /** @internal - Track previous state to detect threshold crossing */
    private wasAboveThreshold;
    private hasAnyChanged;
    updated(changed: PropertyValues): void;
    firstUpdated(): void;
    disconnectedCallback(): void;
    /**
     * Setup resize observer to detect height threshold crossings
     * Recreates chart when crossing MIN_HEIGHT_WITH_LABELS (192px) to show/hide labels
     */
    private setupResizeObserver;
    private prepareChartData;
    private getLayoutConfig;
    private getChartOptions;
    private createDiscreteColorPlugin;
    private createChart;
    private updateChart;
    /**
     * Update the legend HTML content
     */
    private updateLegend;
    render(): import('lit-html').TemplateResult<1>;
    static styles: import('lit').CSSResult[];
}
declare global {
    interface HTMLElementTagNameMap {
        'obc-polar-chart': ObcPolarChart;
    }
}
//# sourceMappingURL=polar-chart.d.ts.map