import { LitElement, PropertyValues } from 'lit';
import { Priority } from '../../navigation-instruments/types.js';
/**
 * `<obc-radial-bar-chart>` – A customizable radial bar chart for visualizing multiple metrics as concentric rings, with dynamic ring thickness and cutout calculation.
 *
 * This component renders multiple data values as concentric arcs (rings), each representing a different metric. It supports full circle (360°) or three-quarter circle (270°) layouts, dynamic ring thickness, and automatic cutout calculation to ensure all rings fit within the available space. The chart adapts its layout based on the number of rings and available space, and hides labels when the chart is too small (< 192px height) for clarity.
 *
 * ## 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° or 270° (three-quarter) circle layout, controlled by the `circumference` property.
 *   - Multiple concentric rings, each representing a data value.
 * - **Dynamic Ring Thickness:**
 *   - All rings maintain equal thickness when possible.
 *   - The `cutout` value serves as the maximum/preferred cutout percentage.
 *   - When many rings are present, cutout is automatically reduced to fit rings at `minRingThickness`.
 *   - Cutout will not go below 20% (minimum to maintain visible center).
 *   - If rings still don't fit with 20% cutout, ring thickness is reduced proportionally.
 * - **Customization:**
 *   - Custom ring colors (with automatic fallback to theme palette).
 *   - Adjustable minimum ring thickness (`minRingThickness`).
 *   - Adjustable arc span (`circumference`).
 * - **Color Priority:** Set `priority` to `Priority.enhanced` to use the blue/enhanced
 *   color palette instead of the default gray/regular palette (default: `Priority.regular`).
 * - **Capacity Visualization:**
 *   - Each ring shows a filled and remaining segment based on the `max` value.
 * - **Responsive Behavior:**
 *   - Automatically hides labels and reduces spacing when height < 192px.
 *   - Maintains aspect ratio and adjusts padding for optimal ring 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-radial-bar-chart></obc-radial-bar-chart>
 * <script>
 *   document.querySelector('obc-radial-bar-chart').data = [70, 50, 30];
 * </script>
 * ```
 *
 * **Three-Quarter Circle with Custom Colors**
 * ```html
 * <obc-radial-bar-chart></obc-radial-bar-chart>
 * <script>
 *   const chart = document.querySelector('obc-radial-bar-chart');
 *   chart.circumference = 270;
 *   chart.data = [80, 60, 40, 20];
 *   chart.colors = ['#e74c3c', '#f39c12', '#2ecc71', '#3498db'];
 * </script>
 * ```
 *
 * **Custom Minimum Ring Thickness and Max Value**
 * ```html
 * <obc-radial-bar-chart></obc-radial-bar-chart>
 * <script>
 *   const chart = document.querySelector('obc-radial-bar-chart');
 *   chart.minRingThickness = 20;
 *   chart.max = 200;
 *   chart.data = [120, 80, 40];
 * </script>
 * ```
 *
 * @property {number[]} data - Array of values for each ring (set via JavaScript)
 * @property {string[]} colors - Custom ring colors (set via JavaScript) with fallback to theme palette
 * @property {number} max - Maximum value for calculating remaining empty area, default: 100
 * @property {number} circumference - Arc span in degrees: 360 for full circle, 270 for 3/4 circle, default: 270
 * @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 {number} minRingThickness - Minimum thickness of each ring in pixels, excluding borders, default: 16
 * @property {boolean} legend - Whether to display the legend below the chart, default: false
 */
export declare class ObcRadialBarChart extends LitElement {
    data: number[];
    colors: string[];
    priority: Priority;
    max: number;
    circumference: number;
    legend: boolean;
    showDebugOverlay: boolean;
    fixedHeight: number;
    minRingThickness: number;
    /** @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;
    /**
     * Calculate optimal cutout percentage and whether rings should use minimum thickness
     * based on available chart space and number of rings.
     *
     * Algorithm:
     * 1. Calculate total space needed for all rings at minRingThickness
     * 2. If enough space: use equal thickness and adjust cutout
     * 3. If not enough space with minCutout: reduce cutout to minimum
     * 4. If still not enough: rings must be thinner than minimum
     *
     * @param chartDiameter - Available chart diameter in pixels
     * @param isTooSmall - Whether chart is below MIN_HEIGHT_WITH_LABELS (affects border width)
     * @returns Object with calculated cutout percentage and flag for using minimum thickness
     */
    private calculateOptimalLayout;
    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 getChartOptions;
    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-radial-bar-chart': ObcRadialBarChart;
    }
}
//# sourceMappingURL=radial-bar-chart.d.ts.map