import { MeterRange } from '../../../Types/MeterRange'; import { MeterScale } from '../../../Types/MeterScale'; import { RangeBaseElement } from '../Abstracts/RangeBaseElement'; import type { IMeterRingElementProps } from './IMeterRingElementProps'; /** * Represents segment information for the segmented scale mode. * * @private */ interface IMeterRingSegment { /** * The range type of the segment. */ range: MeterRange; /** * The angle in degrees for this segment (0-360). */ angle: number; /** * The start angle offset in degrees. */ startAngle: number; } declare const MeterRingElement_base: (abstract new (...args: Array) => import("../../../Behaviors/Themeable").IThemeableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Variantable").IVariantableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Orientable").IOrientableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Disableable").IDisableableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Labelable").ILabelableProps) & typeof RangeBaseElement & import("../../../Behaviors/Themeable").IThemeableCtor; /** * MeterRing - A circular gauge for displaying numeric measurements within defined ranges. * * @description * The MeterRing component provides elegant circular visualization of measurements with contextual * coloring based on optimum, low, and high thresholds. Supports both continuous ring fill and * segmented arc display modes, making it ideal for dashboards, KPIs, performance metrics, and * status indicators where radial presentation adds visual impact. Features smooth animations, * SVG-based rendering for crisp scaling, and comprehensive accessibility support. * * @name MeterRing * @element mosaik-meter-ring * @category Ranges * * @slot label - Text label content area for meter description or value display * @slot hint - Secondary text content area for additional meter information or status * * @csspart root - Root SVG container for the meter ring component * @csspart bar - Background ring/circle element for the meter track * @csspart fill - Filled arc/circle indicating current value in continuous mode * @csspart segment - Individual arc segment representing a specific range (low/optimum/high) in segmented mode * @csspart marker - Circle marker indicator showing current value position in segmented mode * @csspart label - Text label styling container for meter information * @csspart hint - Hint text styling container for additional information * * @cssprop {String} --meter-ring-background-color - Background color for the meter ring container * @cssprop {String} --meter-ring-border-color - Border color for the meter ring * @cssprop {String} --meter-ring-border-radius - Border radius for the container styling * @cssprop {String} --meter-ring-border-style - Border style for the meter ring * @cssprop {String} --meter-ring-border-width - Border width for the meter ring * @cssprop {String} --meter-ring-fill-color - Fill color for the meter indicator in continuous mode * @cssprop {String} --meter-ring-fill-color-high - Fill color for high range segment (above high threshold) * @cssprop {String} --meter-ring-fill-color-low - Fill color for low range segment (below low threshold) * @cssprop {String} --meter-ring-fill-color-normal - Fill color for normal range segment * @cssprop {String} --meter-ring-fill-color-optimum - Fill color for optimum range segment (between low and high) * @cssprop {String} --meter-ring-font-family - Font family for meter text labels * @cssprop {String} --meter-ring-font-letter-spacing - Letter spacing for meter text * @cssprop {String} --meter-ring-font-line-height - Line height for meter text * @cssprop {String} --meter-ring-font-size - Font size for meter text * @cssprop {String} --meter-ring-font-text-decoration - Text decoration style for meter text * @cssprop {String} --meter-ring-font-text-transform - Text transformation style for meter text * @cssprop {String} --meter-ring-font-weight - Font weight for meter text * @cssprop {String} --meter-ring-foreground-color - Foreground color for meter text and icons * @cssprop {String} --meter-ring-gap - Spacing between ring and label elements * @cssprop {String} --meter-ring-marker-color - Color for the marker indicator in segmented mode * @cssprop {String} --meter-ring-padding-bottom - Bottom padding for the meter ring container * @cssprop {String} --meter-ring-padding-left - Left padding for the meter ring container * @cssprop {String} --meter-ring-padding-right - Right padding for the meter ring container * @cssprop {String} --meter-ring-padding-top - Top padding for the meter ring container * @cssprop {String} --meter-ring-radius - Radius of the circular meter ring * @cssprop {String} --meter-ring-shadow - Drop shadow or elevation effect for the meter ring * @cssprop {String} --meter-ring-thickness - Stroke thickness of the meter ring arc * @cssprop {String} --meter-ring-transition-duration - Animation duration for value changes * @cssprop {String} --meter-ring-transition-mode - Animation easing mode for transitions * @cssprop {String} --meter-ring-transition-property - CSS properties to animate during transitions * @cssprop {String} --meter-ring-translate - Transform translation for positioning * * @dependency {TextElement} - For rendering meter labels and text content * * @fires rangeValueChanged {RangeValueChangedEvent} - Fired when the meter value changes * * @example * Basic circular meter with continuous fill: * ```html * * Performance Score * * ``` * * @example * Segmented meter ring for system health monitoring: * ```html * * System Health * 42% Capacity * * ``` * * @example * Dashboard KPI gauge: * ```html *
* * Conversion Rate * 92% * *
* ``` * * @example * Memory usage indicator: * ```html * * RAM * 12 GB / 16 GB * * ``` * * @public */ export declare class MeterRingElement extends MeterRingElement_base implements IMeterRingElementProps { private _thickness; private _radius; private _high; private _low; private _optimum; private _percent; private _range; private _scale; /** * @public */ constructor(); /** * Returns the `is` property. * The `is` property represents natural name of this element. * * @public * @static * @readonly */ static get is(): string; /** * Gets or sets the thickness property. * * @public * @attr */ get thickness(): number; set thickness(value: number); /** * @public * @attr */ get radius(): number; set radius(value: number); /** * Gets or sets the `high` property. * * @public * @attr */ get high(): number; set high(value: number); /** * Gets or sets the `low` property. * * @public * @attr */ get low(): number; set low(value: number); /** * Gets or sets the `optimum` property. * * @public * @attr */ get optimum(): number; set optimum(value: number); /** * @private * @readonly */ get percent(): number; /** * @private * @hidden * @readonly */ get diameter(): number; /** * Gets or sets the `range` property. * * @public * @readonly * @attr */ get range(): MeterRange; private set range(value); /** * Gets or sets the `scale` property. * Determines how the meter scale is visually represented. * - `continuous`: Single continuous ring with color based on current range (default). * - `segmented`: Visible arc segments for low, optimum, and high zones with a marker for the current value. * * @public * @attr */ get scale(): MeterScale; set scale(value: MeterScale); /** * Gets the segments for the segmented scale mode. * Returns an array of arc segments representing low, optimum, and high zones. * * @public * @readonly */ get segments(): Array; /** * Gets the effective radius for SVG calculations. * * @public * @readonly */ get effectiveRadius(): number; /** * Gets the position of the marker on the ring based on the current value. * * @private * @readonly */ get markerPosition(): { x: number; y: number; }; /** * Generates an SVG arc path for a segment. * * @param startAngle - The start angle in degrees. * @param sweepAngle - The sweep angle in degrees. * @param radius - The radius of the arc. * @param cx - The center x coordinate. * @param cy - The center y coordinate. * @returns The SVG path d attribute string. * * @private */ getArcPath(startAngle: number, sweepAngle: number, radius: number, cx: number, cy: number): string; /** * @protected * @override */ protected onRangeValueChanged(prev: number, next: number): void; protected onPropertyChanged(): void; } /** * @public */ export declare namespace MeterRingElement { type Props = IMeterRingElementProps; } /** * @public */ declare global { interface HTMLElementTagNameMap { 'mosaik-meter-ring': MeterRingElement; } } export {}; //# sourceMappingURL=MeterRingElement.d.ts.map