@progress/kendo-vue-gauges/index.d.ts

TODO

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
import { ArcScale as ArcScale_2 } from './types';
import { ColorRange as ColorRange_2 } from './types';
import { ComponentOptionsMixin } from 'vue';
import { ComponentProvideOptions } from 'vue';
import { DefineComponent } from 'vue';
import { ExtractPropTypes } from 'vue';
import { Group } from '@progress/kendo-drawing';
import { LinearPointer as LinearPointer_2 } from './types';
import { LinearScale as LinearScale_2 } from './types';
import { PropType } from 'vue';
import { PublicProps } from 'vue';
import { RadialPointer as RadialPointer_2 } from './types';
import { RadialScale as RadialScale_2 } from './types';
import { Surface } from '@progress/kendo-drawing';

/**
 * @hidden
 */
export declare const ArcGauge: DefineComponent<ExtractPropTypes<    {
dir: PropType<string>;
renderAs: {
type: PropType<string>;
default: string;
validator: (value: string) => any;
};
gaugeConstructor: PropType<object>;
value: {
type: PropType<number>;
default: any;
};
color: PropType<string>;
colors: {
type: PropType<ColorRange_2[]>;
default: any;
};
opacity: {
type: PropType<number>;
default: any;
};
scale: {
type: PropType<ArcScale_2>;
default: any;
};
centerRender: PropType<any>;
transitions: {
type: PropType<boolean>;
default: any;
};
}>, {}, {
centerStyles: {
top: any;
left: any;
};
arcCenterValue: {
value: string;
color: string;
};
}, {}, {
positionCenter(): void;
gaugeInstance(): any;
surface(): Surface | null;
element(): HTMLDivElement | null;
exportVisual(options?: any): Promise<Group>;
getTarget(): any;
deriveOptionsFromParent(options: any): any;
}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<    {
dir: PropType<string>;
renderAs: {
type: PropType<string>;
default: string;
validator: (value: string) => any;
};
gaugeConstructor: PropType<object>;
value: {
type: PropType<number>;
default: any;
};
color: PropType<string>;
colors: {
type: PropType<ColorRange_2[]>;
default: any;
};
opacity: {
type: PropType<number>;
default: any;
};
scale: {
type: PropType<ArcScale_2>;
default: any;
};
centerRender: PropType<any>;
transitions: {
type: PropType<boolean>;
default: any;
};
}>> & Readonly<{}>, {
value: number;
scale: ArcScale_2;
colors: ColorRange_2[];
opacity: number;
renderAs: string;
transitions: boolean;
}, {}, {}, {}, string, () => {
centerStyles: any;
arcCenterValue: any;
}, true, {}, any>;

/**
 * Represents the props of the [Kendo UI for Vue 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;
    /**
     *
     * A function that renders the center template of the Gauge.
     */
    centerRender?: 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 BaseGaugePrivateProps {
    /**
     * @hidden
     */
    deriveOptionsFromParent?: (options: any) => any;
    /**
     * @hidden
     */
    gaugeConstructor?: object;
    /**
     * @hidden
     */
    getTarget?: () => any;
}

/**
 * @hidden
 */
declare interface BaseGaugeProps extends BaseGaugePrivateProps {
    /**
     * Represents the `dir` HTML attribute.
     */
    dir?: string;
    value?: number;
    scale?: object;
    pointer?: object;
    color?: any;
    colors?: any[];
    opacity?: any;
    /**
     * 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' | string;
    /**
     * If set to `true`, the Gauge plays animations when it displays the series. By default, animations are enabled.
     */
    transitions?: boolean;
    /**
     * The event handler that is called when the component is rendered.
     */
    onRender?: (event: any) => void;
}

/**
 * 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;
}

/**
 * @hidden
 */
export declare const CircularGauge: DefineComponent<    {}, {}, {}, {}, {}, ComponentOptionsMixin, DefineComponent<ExtractPropTypes<    {
dir: PropType<string>;
renderAs: {
type: PropType<string>;
default: string;
validator: (value: string) => any;
};
gaugeConstructor: PropType<object>;
value: {
type: PropType<number>;
default: any;
};
color: PropType<string>;
colors: {
type: PropType<ColorRange_2[]>;
default: any;
};
opacity: {
type: PropType<number>;
default: any;
};
scale: {
type: PropType<ArcScale_2>;
default: any;
};
centerRender: PropType<any>;
transitions: {
type: PropType<boolean>;
default: any;
};
}>, {}, {
centerStyles: {
top: any;
left: any;
};
arcCenterValue: {
value: string;
color: string;
};
}, {}, {
positionCenter(): void;
gaugeInstance(): any;
surface(): Surface;
element(): HTMLDivElement;
exportVisual(options?: any): Promise<Group>;
getTarget(): any;
deriveOptionsFromParent(options: any): any;
}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<    {
dir: PropType<string>;
renderAs: {
type: PropType<string>;
default: string;
validator: (value: string) => any;
};
gaugeConstructor: PropType<object>;
value: {
type: PropType<number>;
default: any;
};
color: PropType<string>;
colors: {
type: PropType<ColorRange_2[]>;
default: any;
};
opacity: {
type: PropType<number>;
default: any;
};
scale: {
type: PropType<ArcScale_2>;
default: any;
};
centerRender: PropType<any>;
transitions: {
type: PropType<boolean>;
default: any;
};
}>> & Readonly<{}>, {
value: number;
scale: ArcScale_2;
colors: ColorRange_2[];
opacity: number;
renderAs: string;
transitions: boolean;
}, {}, {}, {}, string, () => {
centerStyles: any;
arcCenterValue: any;
}, true, {}, any>, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;

/**
 * Represents the props of the [Kendo UI for Vue 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;
}

/**
 * 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;
}

/**
 * @hidden
 */
export declare const LinearGauge: DefineComponent<ExtractPropTypes<    {
dir: PropType<string>;
renderAs: {
type: PropType<string>;
default: string;
validator: (value: string) => any;
};
gaugeConstructor: PropType<object>;
pointer: {
type: PropType<LinearPointer_2 | LinearPointer_2[]>;
default: any;
};
scale: {
type: PropType<LinearScale_2>;
default: any;
};
transitions: {
type: PropType<boolean>;
default: any;
};
}>, {}, {}, {}, {
gaugeInstance(): any;
surface(): Surface | null;
element(): HTMLDivElement | null;
exportVisual(options?: any): Promise<Group>;
getTarget(): any;
deriveOptionsFromParent(options: any): any;
}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<    {
dir: PropType<string>;
renderAs: {
type: PropType<string>;
default: string;
validator: (value: string) => any;
};
gaugeConstructor: PropType<object>;
pointer: {
type: PropType<LinearPointer_2 | LinearPointer_2[]>;
default: any;
};
scale: {
type: PropType<LinearScale_2>;
default: any;
};
transitions: {
type: PropType<boolean>;
default: any;
};
}>> & Readonly<{}>, {
scale: LinearScale_2;
pointer: any;
renderAs: string;
transitions: boolean;
}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;

/**
 * Represents the props of the [Kendo UI for Vue LinearGauge component]({% slug overview_lineargauge_gauges %}).
 */
export declare interface LinearGaugeProps extends BaseGaugeProps {
    /**
     * The configuration of the pointers ([see example]({% slug multiplepointers_lineargauge %})).
     */
    pointer: LinearPointer | LinearPointer[];
    /**
     * The configuration of the scale.
     */
    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;
}

/**
 * @hidden
 */
export declare const RadialGauge: DefineComponent<ExtractPropTypes<    {
dir: PropType<string>;
renderAs: {
type: PropType<string>;
default: string;
validator: (value: string) => any;
};
gaugeConstructor: PropType<object>;
pointer: {
type: PropType<RadialPointer_2 | RadialPointer_2[]>;
default: any;
};
scale: {
type: PropType<RadialScale_2>;
default: any;
};
transitions: {
type: PropType<boolean>;
default: any;
};
}>, {}, {}, {}, {
gaugeInstance(): any;
surface(): Surface | null;
element(): HTMLDivElement | null;
exportVisual(options?: any): Promise<Group>;
getTarget(): any;
deriveOptionsFromParent(options: any): any;
}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<    {
dir: PropType<string>;
renderAs: {
type: PropType<string>;
default: string;
validator: (value: string) => any;
};
gaugeConstructor: PropType<object>;
pointer: {
type: PropType<RadialPointer_2 | RadialPointer_2[]>;
default: any;
};
scale: {
type: PropType<RadialScale_2>;
default: any;
};
transitions: {
type: PropType<boolean>;
default: any;
};
}>> & Readonly<{}>, {
scale: RadialScale_2;
pointer: RadialPointer_2 | RadialPointer_2[];
renderAs: string;
transitions: boolean;
}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;

/**
 * Represents the props of the [Kendo UI for Vue RadialGauge component]({% slug overview_radialgauge_gauges %}).
 */
export declare interface RadialGaugeProps extends BaseGaugeProps {
    /**
     * The configuration of the pointers ([see example]({% slug multiplepointers_radialgauge %})).
     */
    pointer: RadialPointer | RadialPointer[];
    /**
     * The configuration of the scale.
     */
    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 { }