@progress/kendo-react-gauges/index.d.mts

React Gauges provide a set of React components for building beautiful and customizable gauges. KendoReact Gauges package

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
import { Group } from '@progress/kendo-drawing';
import * as React_2 from 'react';
import { Surface } from '@progress/kendo-drawing';

export declare class ArcGauge extends React_2.Component<ArcGaugeProps, {}> {
    private _baseGauge;
    protected gaugeType: any;
    /**
     * @hidden
     */
    get gaugeInstance(): any;
    /**
     * The Drawing `Surface` of the Gauge.
     */
    get surface(): Surface | null;
    /**
     * The DOM element of the Gauge.
     */
    get element(): HTMLDivElement | null;
    /**
     * @hidden
     */
    render(): any;
    /**
     * Exports a Gauge component as a Drawing `Scene`.
     *
     * @param {any} options - The parameters for the export operation.
     * @returns {Promise<Group>} - A promise that returns the root `Group` of the scene.
     */
    exportVisual(options?: any): Promise<Group>;
    private getTarget;
    private deriveOptionsFromParent;
}

/**
 * Represents the props of the [KendoReact ArcGauge component]({% slug overview_arcgauge_gauges %}).
 */
export declare interface ArcGaugeProps extends BaseGaugeProps {
    /**
     * The value of the Gauge.
     */
    value: number;
    /**
     * The color of the value pointer. Accepts a valid CSS color string, including hex and rgb.
     */
    color?: string;
    /**
     * The color ranges of the value pointer
     * ([see example]({% slug colorranges_arcgauge %})).
     */
    colors?: ColorRange[];
    /**
     * The opacity of the value pointer.
     */
    opacity?: number;
    /**
     * The scale options of the ArcGauge.
     */
    scale?: ArcScale;
    /**
     * @hidden
     *
     * Alias for backwards compatbility.
     */
    arcCenterRender?: (value: number, color: string) => React.ReactElement<any>;
    /**
     *
     * A function that renders the center template of the Gauge.
     */
    centerRender?: (value: number, color: string) => React.ReactElement<any>;
}

/**
 * The scale options of the Gauge.
 */
export declare interface ArcScale extends Scale {
    /**
     * Configures the scale labels.
     */
    labels?: RadialLabels;
    /**
     * The distance between the range indicators and the ticks.
     */
    rangeDistance?: number;
    /**
     * The `lineCap` style of the ranges.
     */
    rangeLineCap?: LineCap;
    /**
     * The starting angle of the Gauge. The Gauge is rendered clockwise (0 degrees equal 180 degrees in the polar coordinate system).
     */
    startAngle?: number;
    /**
     * The ending angle of the Gauge. The Gauge is rendered clockwise (0 degrees equals 180 degrees in the polar coordinate system).
     */
    endAngle?: number;
}

/**
 * @hidden
 */
declare interface BaseGaugeProps {
    /**
     * Determines the children nodes.
     */
    children?: React.ReactNode;
    /**
     * Represents the `dir` HTML attribute.
     */
    dir?: string;
    /**
     * The styles that are applied to the component.
     */
    style?: React.CSSProperties;
    /**
     * Sets additional CSS classes to the component.
     */
    className?: string;
    /**
     * Sets the preferred rendering engine. If not supported by the browser, the Gauge switches to the first available mode.
     *
     * The supported values are:
     * - `"svg"`&mdash;If available, renders the component as an inline `.svg` file.
     * - `"canvas"`&mdash;If available, renders the component as a `canvas` element.
     */
    renderAs?: 'svg' | 'canvas';
    /**
     * If set to `true`, the Gauge plays animations when it displays the series. By default, animations are enabled.
     */
    transitions?: boolean;
}

/**
 * The appearance settings for the border lines.
 */
export declare interface Border {
    /**
     * The color of the border line. Accepts valid CSS color strings, including hex and rgb.
     */
    color?: string;
    /**
     * The dash type of the border line.
     */
    dashType?: DashType;
    /**
     * The width of the border line in pixels.
     */
    width?: number;
}

/**
 * The configuration options for the RadialGauge pointer cap.
 */
export declare interface Cap {
    /**
     * The color of the cap. Accepts valid CSS color strings, including hex and rgb.
     */
    color?: string;
    /**
     * The size of the cap in percent (from 0 to 1).
     */
    size?: number;
}

export declare class CircularGauge extends ArcGauge implements React_2.Component<CircularGaugeProps, {}> {
    protected gaugeType: any;
}

/**
 * Represents the props of the [KendoReact CircularGauge component]({% slug overview_circulargauge_gauges %}).
 */
export declare interface CircularGaugeProps extends ArcGaugeProps {
    /**
     * The color ranges of the value pointer
     * ([see example]({% slug colorranges_circulargauge %})).
     */
    colors?: ColorRange[];
    /**
     * The scale options of the CircularGauge.
     */
    scale?: CircularScale;
}

/**
 * The scale options of the Gauge.
 */
declare interface CircularScale extends ArcScale {
    /**
     * @hidden
     */
    endAngle?: number;
}

/**
 * The color range configuration.
 */
export declare interface ColorRange {
    /**
     * The color of the range. Accepts valid CSS color strings, including hex and rgb.
     */
    color?: string;
    /**
     * The opacity of the range.
     */
    opacity?: number;
    /**
     * The range start value.
     */
    from?: number;
    /**
     * The range end value.
     */
    to?: number;
}

/**
 * The dash type of a line.
 */
export declare type DashType = 'dash' | 'dashDot' | 'dot' | 'longDash' | 'longDashDot' | 'longDashDotDot' | 'solid';

/**
 * The configuration options for the Gauge area. Represents the entire visible area of the Gauge.
 */
export declare interface GaugeArea {
    /**
     * The background of the Gauge area. Accepts valid CSS color strings, including hex and rgb.
     */
    background?: string;
    /**
     * The border of the Gauge area.
     */
    border?: Border;
    /**
     * The height of the Gauge area.
     */
    height?: number;
    /**
     * The margin of the Gauge area.
     */
    margin?: number | Margin;
    /**
     * The height of the Gauge area.
     */
    width?: number;
}

export declare type Gauges = ArcGauge | LinearGauge | RadialGauge;

/**
 * The configuration of the scale labels.
 */
export declare interface Labels {
    /**
     * The background of the labels. Accepts valid CSS color strings, including hex and rgb.
     */
    background?: string;
    /**
     * The border of the labels.
     */
    border?: Border;
    /**
     * The color of the labels. Accepts valid CSS color strings, including hex and rgb.
     */
    color?: string;
    /**
     * The font of the labels.
     */
    font?: string;
    /**
     * The format that is used to display the labels. Uses the IntlService [`format`]({% slug api_intl_intlservice %}#toc-format) method.
     */
    format?: string;
    /**
     * The margin of the labels.
     */
    margin?: number | Margin;
    /**
     * The padding of the labels.
     */
    padding?: number | Padding;
    /**
     * The function which returns the label content.
     *
     * The available fields in the function argument are:
     * - `value`&mdash;The value of the label.
     */
    content?: (e: any) => string;
    /**
     * The visibility of the labels.
     */
    visible?: boolean;
}

/**
 * The scale line options.
 */
export declare interface Line {
    /**
     * The color of the lines. Accepts valid CSS color strings, including hex and rgb.
     */
    color?: string;
    /**
     * The dash type of the line.
     */
    dashType?: DashType;
    /**
     * The visibility of the lines.
     */
    visible?: boolean;
    /**
     * The width of the line.
     */
    width?: number;
}

export declare class LinearGauge extends React_2.Component<LinearGaugeProps, {}> {
    private _baseGauge;
    /**
     * @hidden
     */
    get gaugeInstance(): any;
    /**
     * The Drawing `Surface` of the Gauge.
     */
    get surface(): Surface | null;
    /**
     * The DOM element of the Gauge.
     */
    get element(): HTMLDivElement | null;
    /**
     * @hidden
     */
    render(): any;
    /**
     * Exports a Gauge component as a Drawing `Scene`.
     *
     * @param {any} options - The parameters for the export operation.
     * @returns {Promise<Group>} - A promise that returns the root `Group` of the scene.
     */
    exportVisual(options?: any): Promise<Group>;
    private getTarget;
    private deriveOptionsFromParent;
}

/**
 * Represents the props of the [KendoReact LinearGauge component]({% slug overview_lineargauge_gauges %}).
 */
export declare interface LinearGaugeProps extends BaseGaugeProps {
    /**
     * The configuration of the pointers ([see example]({% slug multiplepointers_lineargauge %})).
     *
     * Example:
     * ```jsx
     * <LinearGauge pointer={{ value: 75 }} />
     * ```
     */
    pointer: LinearPointer | LinearPointer[];
    /**
     * The configuration of the scale.
     *
     * Example:
     * ```jsx
     * <LinearGauge scale={{ min: 0, max: 100 }} />
     * ```
     */
    scale?: LinearScale;
}

/**
 * The configuration options for the LinearGauge pointer.
 */
export declare interface LinearPointer {
    /**
     * The border of the Gauge area.
     */
    border?: Border;
    /**
     * The color of the pointer. Accepts valid CSS color strings, including hex and rgb.
     */
    color?: string;
    /**
     * The margin of the pointer.
     */
    margin?: number | Margin;
    /**
     * The opacity of the pointer.
     */
    opacity?: number;
    /**
     * The shape of the pointer.
     */
    shape?: LinearPointerShape;
    /**
     * The size of the pointer.
     */
    size?: number;
    /**
     * The value of the pointer.
     */
    value?: number;
}

/**
 * The shape of the pointer.
 */
export declare type LinearPointerShape = 'barIndicator' | 'arrow';

/**
 * The scale options of the Gauge.
 */
export declare interface LinearScale extends Scale {
    /**
     * Configures the scale line.
     */
    line?: Line;
    /**
     * The ranges of the scale.
     */
    ranges?: Range_2[];
    /**
     * Mirrors the scale labels and ticks. If the labels are normally on the left side of the scale, the mirroring of the scale will render them to the right.
     */
    mirror?: boolean;
    /**
     * Specifies if the scale will be vertical ([see example]({% slug orientation_lineargauge %})).
     *
     * @default true
     */
    vertical?: boolean;
}

/**
 * The cap style of a line.
 */
export declare type LineCap = 'butt' | 'round' | 'square';

/**
 * The margin configuration for each side.
 */
export declare interface Margin {
    /**
     * The top margin in pixels.
     */
    top?: number;
    /**
     * The right margin in pixels.
     */
    right?: number;
    /**
     * The bottom margin in pixels.
     */
    bottom?: number;
    /**
     * The left margin in pixels.
     */
    left?: number;
}

/**
 * The padding configuration for each side.
 */
export declare interface Padding {
    /**
     * The top padding in pixels.
     */
    top?: number;
    /**
     * The right padding in pixels.
     */
    right?: number;
    /**
     * The bottom padding in pixels.
     */
    bottom?: number;
    /**
     * The left padding in pixels.
     */
    left?: number;
}

export declare class RadialGauge extends React_2.Component<RadialGaugeProps, {}> {
    private _baseGauge;
    /**
     * @hidden
     */
    get gaugeInstance(): any;
    /**
     * The Drawing `Surface` of the Gauge.
     */
    get surface(): Surface | null;
    /**
     * The DOM element of the Gauge.
     */
    get element(): HTMLDivElement | null;
    /**
     * @hidden
     */
    render(): any;
    /**
     * Exports a Gauge component as a Drawing `Scene`.
     *
     * @param {any} options - The parameters for the export operation.
     * @returns {Promise<Group>} - A promise that returns the root `Group` of the scene.
     */
    exportVisual(options?: any): Promise<Group>;
    private getTarget;
    private deriveOptionsFromParent;
}

/**
 * Represents the props of the [KendoReact RadialGauge component]({% slug overview_radialgauge_gauges %}).
 */
export declare interface RadialGaugeProps extends BaseGaugeProps {
    /**
     * The configuration of the pointers ([see example]({% slug multiplepointers_radialgauge %})).
     *
     * Example:
     * ```jsx
     * <RadialGauge pointer={{ value: 50 }} />
     * ```
     */
    pointer: RadialPointer | RadialPointer[];
    /**
     * The configuration of the scale.
     *
     * Example:
     * ```jsx
     * <RadialGauge scale={{ startAngle: -90, endAngle: 180 }} />
     * ```
     */
    scale?: RadialScale;
}

/**
 * The position of the RadialGauge labels.
 */
export declare type RadialLabelPosition = 'inside' | 'outside';

export declare interface RadialLabels extends Labels {
    /**
     * The position of the labels.
     */
    position?: RadialLabelPosition;
}

/**
 * The configuration options for the RadialGauge pointer.
 */
export declare interface RadialPointer {
    /**
     * The configuration options for the cap.
     */
    cap?: Cap;
    /**
     * The color of the pointer. Accepts valid CSS color strings, including hex and rgb.
     */
    color?: string;
    /**
     * The pointer length (in percent) that is based on the distance to the scale. The default length of `1` indicates that the pointer exactly reaches the scale. Accepts values between `0.1` and `1.5`.
     */
    length?: number;
    /**
     * The pointer value.
     */
    value?: number;
}

/**
 * The scale options of the Gauge.
 */
export declare interface RadialScale extends Scale {
    /**
     * Configures the scale labels.
     */
    labels?: RadialLabels;
    /**
     * The distance between the range indicators and the ticks.
     */
    rangeDistance?: number;
    /**
     * The ranges of the scale.
     */
    ranges?: Range_2[];
    /**
     * The starting angle of the Gauge. The Gauge is rendered clockwise (0 degrees equal 180 degrees in the polar coordinate system).
     */
    startAngle?: number;
    /**
     * The ending angle of the Gauge. The Gauge is rendered clockwise (0 degrees equal to 180 degrees in the polar coordinate system).
     */
    endAngle?: number;
}

/**
 * The configuration for the scale ranges.
 */
declare interface Range_2 {
    /**
     * The start position of the range.
     */
    from?: number;
    /**
     * The end position of the range.
     */
    to?: number;
    /**
     * The range opacity.
     */
    opacity?: number;
    /**
     * The color of the range. Accepts valid CSS color strings, including hex and rgb.
     */
    color?: string;
}
export { Range_2 as Range }

/**
 * The scale options of the Gauge.
 */
export declare interface Scale {
    /**
     * Configures the scale labels.
     */
    labels?: Labels;
    /**
     * Configures the major scale ticks.
     */
    majorTicks?: Ticks;
    /**
     * Configures the minor scale ticks.
     */
    minorTicks?: Ticks;
    /**
     * The minimum value of the scale.
     */
    min?: number;
    /**
     * The maximum value of the scale.
     */
    max?: number;
    /**
     * The interval between minor divisions.
     */
    minorUnit?: number;
    /**
     * The interval between major divisions.
     */
    majorUnit?: number;
    /**
     * Reverses the scale direction.
     */
    reverse?: boolean;
    /**
     * The width of the range indicators.
     */
    rangeSize?: number;
    /**
     * The default color of the ranges.
     */
    rangePlaceholderColor?: string;
}

/**
 * The options for the scale ticks.
 */
export declare interface Ticks {
    /**
     * The color of the ticks. Accepts a valid CSS color string, including hex and rgb.
     */
    color?: string;
    /**
     * The size of the ticks. Represents the length of the line (in pixels) that is drawn to indicate the tick on the scale.
     */
    size?: number;
    /**
     * The visibility of the ticks.
     */
    visible?: boolean;
    /**
     * The ticks width (in pixels).
     */
    width?: number;
}

export { }