import { LitElement, PropertyValues } from 'lit';
import { Priority } from '../../navigation-instruments/types.js';
/**
 * `<obc-donut-chart>` – A customizable donut chart component for visualizing proportional data with a center total readout.
 *
 * This component renders an interactive donut chart powered by Chart.js, displaying data segments as arcs with optional outer labels and a centered total value. It supports both full-circle (360°) and half-circle (180°) layouts, making it versatile for dashboards, analytics, and data visualization interfaces.
 *
 * The chart automatically calculates percentages, handles remaining/unfilled capacity, and adapts its layout based on available space. Labels and center readouts are hidden when the chart is too small (< 192px height), ensuring visual clarity at all sizes.
 *
 * ## Features
 * - **Fixed Height ⇒ Fixed Circumference:** The chart's circumference is determined by the `fixedHeight` property (default: 320px). This ensures the donut'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 Modes:**
 *   - `Full Circle` (default): Complete 360° donut chart.
 *   - `Half Circle`: Semicircular 180° layout, useful for gauges or space-constrained displays.
 * - **Center Readout:**
 *   - Displays the sum total of all data values with a customizable label (e.g., "Total", "Power", "Usage").
 * - **Outer Labels:**
 *   - Optional labels positioned outside the chart showing segment names and values.
 *   - Supports percentage or custom units (e.g., "kW", "kg", "MB").
 *   - Configurable decimal places and maximum label length (with trimming).
 * - **Capacity Visualization:**
 *   - Optionally show remaining/unfilled capacity when `max` is set higher than the total.
 *   - Remaining sector uses a distinct color to indicate available space.
 * - **Customization:**
 *   - Custom segment colors (with automatic fallback to theme palette).
 *   - Adjustable ring thickness (default 24px).
 * - **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 and center readout 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 lang="en" data-obc-theme="day"></html>
 *     ```
 *
 * ## Example
 *
 * **Basic Usage (Half Circle)**
 * ```html
 * <obc-donut-chart
 *   half
 * ></obc-donut-chart>
 * <script>
 *   document.querySelector('obc-donut-chart').data = [
 *     {label: 'Engine', value: 75.5},
 *     {label: 'HVAC', value: 42.3},
 *     {label: 'Lights', value: 12.8}
 *   ];
 * </script>
 * ```
 *
 * **Custom Colors**
 * ```html
 * <obc-donut-chart></obc-donut-chart>
 * <script>
 *   const chart = document.querySelector('obc-donut-chart');
 *   chart.data = [
 *     {label: 'Critical', value: 20},
 *     {label: 'Warning', value: 35},
 *     {label: 'Normal', 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} half - Whether to display as half-circle (180°) or full circle (360°), default: false
 * @property {boolean} showOuterLabels - Show outer labels, default: false
 * @property {boolean} showUnit - Whether to show unit in 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 {string} centerReadoutLabel - Text label shown below the center total value, default: "Total"
 * @property {string} centerReadoutUnit - Unit string shown inline after the label in the center readout, default: "%"
 * @property {number} max - Maximum value for calculating remaining empty sector, default: 100
 * @property {number} thickness - Donut ring thickness in pixels, default: 24
 * @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 ObcDonutChart extends LitElement {
    data: {
        label: string;
        value: number;
    }[];
    colors: string[];
    priority: Priority;
    half: boolean;
    showOuterLabels: boolean;
    showUnit: boolean;
    outerLabelUnit: string;
    outerLabelMaxLength: number;
    outerLabelDecimalPlaces: number;
    centerReadoutLabel: string;
    centerReadoutUnit: string;
    max: number;
    thickness: number;
    legend: boolean;
    showDebugOverlay: boolean;
    fixedHeight: number;
    /** @internal */
    private total;
    /** @internal - Pre-formatted labels for outer label rendering */
    private formattedLabels;
    /** @internal */
    private canvasEl?;
    /** @internal */
    private legendDiv?;
    /** @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;
    private hasAnyChanged;
    /**
     * Get layout configuration for canvas calculation
     */
    private getLayoutConfig;
    willUpdate(changed: PropertyValues): void;
    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
     * Detect when fixedHeight property changes programmatically (e.g., via Storybook controls or user code)
     */
    private setupResizeObserver;
    private prepareChartData;
    /**
     * Build a dataset configuration object shared by both createChart and updateChart
     */
    private createDatasetConfig;
    /**
     * Get Chart.js options using centralized fixed height layout calculation
     */
    private getChartOptions;
    private createOuterLabelDonutPlugin;
    private createCenterReadoutDonutPlugin;
    private getBorderRadius;
    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[];
}
declare global {
    interface HTMLElementTagNameMap {
        'obc-donut-chart': ObcDonutChart;
    }
}
//# sourceMappingURL=donut-chart.d.ts.map