devextreme-react/cjs/circular-gauge.d.ts

DevExtreme React UI and Visualization Components

/*!
 * devextreme-react
 * Version: 24.2.6
 * Build date: Mon Mar 17 2025
 *
 * Copyright (c) 2012 - 2025 Developer Express Inc. ALL RIGHTS RESERVED
 *
 * This software may be modified and distributed under the terms
 * of the MIT license. See the LICENSE file in the root of the project for details.
 *
 * https://github.com/DevExpress/devextreme-react
 */

import * as React from "react";
import { Ref, ReactElement } from "react";
import dxCircularGauge, { Properties } from "devextreme/viz/circular_gauge";
import { IHtmlOptions, NestedComponentMeta } from "./core/component";
import type { DisposingEvent, DrawnEvent, ExportedEvent, ExportingEvent, FileSavingEvent, IncidentOccurredEvent, InitializedEvent, TooltipHiddenEvent, TooltipShownEvent, CircularGaugeLabelOverlap, CircularGaugeElementOrientation } from "devextreme/viz/circular_gauge";
import type { AnimationEaseMode, DashStyle, Font as ChartsFont, LabelOverlap, ChartsColor, Palette, PaletteExtensionMode, TextOverflow, WordWrap } from "devextreme/common/charts";
import type { ExportFormat, Format as CommonFormat, HorizontalEdge, VerticalEdge, HorizontalAlignment, template } from "devextreme/common";
import type { Format as LocalizationFormat } from "devextreme/common/core/localization";
type ReplaceFieldTypes<TSource, TReplacement> = {
    [P in keyof TSource]: P extends keyof TReplacement ? TReplacement[P] : TSource[P];
};
type ICircularGaugeOptionsNarrowedEvents = {
    onDisposing?: ((e: DisposingEvent) => void);
    onDrawn?: ((e: DrawnEvent) => void);
    onExported?: ((e: ExportedEvent) => void);
    onExporting?: ((e: ExportingEvent) => void);
    onFileSaving?: ((e: FileSavingEvent) => void);
    onIncidentOccurred?: ((e: IncidentOccurredEvent) => void);
    onInitialized?: ((e: InitializedEvent) => void);
    onTooltipHidden?: ((e: TooltipHiddenEvent) => void);
    onTooltipShown?: ((e: TooltipShownEvent) => void);
};
type ICircularGaugeOptions = React.PropsWithChildren<ReplaceFieldTypes<Properties, ICircularGaugeOptionsNarrowedEvents> & IHtmlOptions & {
    centerRender?: (...params: any) => React.ReactNode;
    centerComponent?: React.ComponentType<any>;
    defaultLoadingIndicator?: Record<string, any>;
    defaultSubvalues?: Array<number>;
    defaultValue?: number | undefined;
    onLoadingIndicatorChange?: (value: Record<string, any>) => void;
    onSubvaluesChange?: (value: Array<number>) => void;
    onValueChange?: (value: number | undefined) => void;
}>;
interface CircularGaugeRef {
    instance: () => dxCircularGauge;
}
declare const CircularGauge: (props: React.PropsWithChildren<ICircularGaugeOptions> & {
    ref?: Ref<CircularGaugeRef>;
}) => ReactElement | null;
type IAnimationProps = React.PropsWithChildren<{
    duration?: number;
    easing?: AnimationEaseMode;
    enabled?: boolean;
}>;
declare const Animation: ((props: IAnimationProps) => React.FunctionComponentElement<React.PropsWithChildren<{
    duration?: number | undefined;
    easing?: AnimationEaseMode | undefined;
    enabled?: boolean | undefined;
} & {
    children?: React.ReactNode;
} & {
    elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
type IBackgroundColorProps = React.PropsWithChildren<{
    base?: string | undefined;
    fillId?: string | undefined;
}>;
declare const BackgroundColor: ((props: IBackgroundColorProps) => React.FunctionComponentElement<React.PropsWithChildren<{
    base?: string | undefined;
    fillId?: string | undefined;
} & {
    children?: React.ReactNode;
} & {
    elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
type IBorderProps = React.PropsWithChildren<{
    color?: string;
    dashStyle?: DashStyle;
    opacity?: number | undefined;
    visible?: boolean;
    width?: number;
}>;
declare const Border: ((props: IBorderProps) => React.FunctionComponentElement<React.PropsWithChildren<{
    color?: string | undefined;
    dashStyle?: DashStyle | undefined;
    opacity?: number | undefined;
    visible?: boolean | undefined;
    width?: number | undefined;
} & {
    children?: React.ReactNode;
} & {
    elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
type IColorProps = React.PropsWithChildren<{
    base?: string | undefined;
    fillId?: string | undefined;
}>;
declare const Color: ((props: IColorProps) => React.FunctionComponentElement<React.PropsWithChildren<{
    base?: string | undefined;
    fillId?: string | undefined;
} & {
    children?: React.ReactNode;
} & {
    elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
type IExportProps = React.PropsWithChildren<{
    backgroundColor?: string;
    enabled?: boolean;
    fileName?: string;
    formats?: Array<ExportFormat>;
    margin?: number;
    printingEnabled?: boolean;
    svgToCanvas?: ((svg: any, canvas: any) => any) | undefined;
}>;
declare const Export: ((props: IExportProps) => React.FunctionComponentElement<React.PropsWithChildren<{
    backgroundColor?: string | undefined;
    enabled?: boolean | undefined;
    fileName?: string | undefined;
    formats?: ExportFormat[] | undefined;
    margin?: number | undefined;
    printingEnabled?: boolean | undefined;
    svgToCanvas?: ((svg: any, canvas: any) => any) | undefined;
} & {
    children?: React.ReactNode;
} & {
    elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
type IFontProps = React.PropsWithChildren<{
    color?: string;
    family?: string;
    opacity?: number;
    size?: number | string;
    weight?: number;
}>;
declare const Font: ((props: IFontProps) => React.FunctionComponentElement<React.PropsWithChildren<{
    color?: string | undefined;
    family?: string | undefined;
    opacity?: number | undefined;
    size?: string | number | undefined;
    weight?: number | undefined;
} & {
    children?: React.ReactNode;
} & {
    elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
type IFormatProps = React.PropsWithChildren<{
    currency?: string;
    formatter?: ((value: number | Date) => string);
    parser?: ((value: string) => number | Date);
    precision?: number;
    type?: CommonFormat | string;
    useCurrencyAccountingStyle?: boolean;
}>;
declare const Format: ((props: IFormatProps) => React.FunctionComponentElement<React.PropsWithChildren<{
    currency?: string | undefined;
    formatter?: ((value: number | Date) => string) | undefined;
    parser?: ((value: string) => number | Date) | undefined;
    precision?: number | undefined;
    type?: string | undefined;
    useCurrencyAccountingStyle?: boolean | undefined;
} & {
    children?: React.ReactNode;
} & {
    elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
type IGeometryProps = React.PropsWithChildren<{
    endAngle?: number;
    startAngle?: number;
}>;
declare const Geometry: ((props: IGeometryProps) => React.FunctionComponentElement<React.PropsWithChildren<{
    endAngle?: number | undefined;
    startAngle?: number | undefined;
} & {
    children?: React.ReactNode;
} & {
    elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
type ILabelProps = React.PropsWithChildren<{
    customizeText?: ((scaleValue: {
        value: number;
        valueText: string;
    }) => string);
    font?: ChartsFont;
    format?: LocalizationFormat | undefined;
    hideFirstOrLast?: CircularGaugeLabelOverlap;
    indentFromTick?: number;
    overlappingBehavior?: LabelOverlap;
    useRangeColors?: boolean;
    visible?: boolean;
}>;
declare const Label: ((props: ILabelProps) => React.FunctionComponentElement<React.PropsWithChildren<{
    customizeText?: ((scaleValue: {
        value: number;
        valueText: string;
    }) => string) | undefined;
    font?: ChartsFont | undefined;
    format?: LocalizationFormat | undefined;
    hideFirstOrLast?: CircularGaugeLabelOverlap | undefined;
    indentFromTick?: number | undefined;
    overlappingBehavior?: LabelOverlap | undefined;
    useRangeColors?: boolean | undefined;
    visible?: boolean | undefined;
} & {
    children?: React.ReactNode;
} & {
    elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
type ILoadingIndicatorProps = React.PropsWithChildren<{
    backgroundColor?: string;
    font?: ChartsFont;
    show?: boolean;
    text?: string;
    defaultShow?: boolean;
    onShowChange?: (value: boolean) => void;
}>;
declare const LoadingIndicator: ((props: ILoadingIndicatorProps) => React.FunctionComponentElement<React.PropsWithChildren<{
    backgroundColor?: string | undefined;
    font?: ChartsFont | undefined;
    show?: boolean | undefined;
    text?: string | undefined;
    defaultShow?: boolean | undefined;
    onShowChange?: ((value: boolean) => void) | undefined;
} & {
    children?: React.ReactNode;
} & {
    elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
type IMarginProps = React.PropsWithChildren<{
    bottom?: number;
    left?: number;
    right?: number;
    top?: number;
}>;
declare const Margin: ((props: IMarginProps) => React.FunctionComponentElement<React.PropsWithChildren<{
    bottom?: number | undefined;
    left?: number | undefined;
    right?: number | undefined;
    top?: number | undefined;
} & {
    children?: React.ReactNode;
} & {
    elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
type IMinorTickProps = React.PropsWithChildren<{
    color?: string;
    length?: number;
    opacity?: number;
    visible?: boolean;
    width?: number;
}>;
declare const MinorTick: ((props: IMinorTickProps) => React.FunctionComponentElement<React.PropsWithChildren<{
    color?: string | undefined;
    length?: number | undefined;
    opacity?: number | undefined;
    visible?: boolean | undefined;
    width?: number | undefined;
} & {
    children?: React.ReactNode;
} & {
    elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
type IRangeProps = React.PropsWithChildren<{
    color?: ChartsColor | string;
    endValue?: number;
    startValue?: number;
}>;
declare const Range: ((props: IRangeProps) => React.FunctionComponentElement<React.PropsWithChildren<{
    color?: string | ChartsColor | undefined;
    endValue?: number | undefined;
    startValue?: number | undefined;
} & {
    children?: React.ReactNode;
} & {
    elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
type IRangeContainerProps = React.PropsWithChildren<{
    backgroundColor?: ChartsColor | string;
    offset?: number;
    orientation?: CircularGaugeElementOrientation;
    palette?: Array<string> | Palette;
    paletteExtensionMode?: PaletteExtensionMode;
    ranges?: Array<Record<string, any>> | {
        color?: ChartsColor | string;
        endValue?: number;
        startValue?: number;
    }[];
    width?: number;
}>;
declare const RangeContainer: ((props: IRangeContainerProps) => React.FunctionComponentElement<React.PropsWithChildren<{
    backgroundColor?: string | ChartsColor | undefined;
    offset?: number | undefined;
    orientation?: CircularGaugeElementOrientation | undefined;
    palette?: string[] | Palette | undefined;
    paletteExtensionMode?: PaletteExtensionMode | undefined;
    ranges?: Record<string, any>[] | {
        color?: string | ChartsColor | undefined;
        endValue?: number | undefined;
        startValue?: number | undefined;
    }[] | undefined;
    width?: number | undefined;
} & {
    children?: React.ReactNode;
} & {
    elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
type IScaleProps = React.PropsWithChildren<{
    allowDecimals?: boolean | undefined;
    customMinorTicks?: Array<number>;
    customTicks?: Array<number>;
    endValue?: number;
    label?: Record<string, any> | {
        customizeText?: ((scaleValue: {
            value: number;
            valueText: string;
        }) => string);
        font?: ChartsFont;
        format?: LocalizationFormat | undefined;
        hideFirstOrLast?: CircularGaugeLabelOverlap;
        indentFromTick?: number;
        overlappingBehavior?: LabelOverlap;
        useRangeColors?: boolean;
        visible?: boolean;
    };
    minorTick?: Record<string, any> | {
        color?: string;
        length?: number;
        opacity?: number;
        visible?: boolean;
        width?: number;
    };
    minorTickInterval?: number | undefined;
    orientation?: CircularGaugeElementOrientation;
    scaleDivisionFactor?: number;
    startValue?: number;
    tick?: Record<string, any> | {
        color?: string;
        length?: number;
        opacity?: number;
        visible?: boolean;
        width?: number;
    };
    tickInterval?: number | undefined;
}>;
declare const Scale: ((props: IScaleProps) => React.FunctionComponentElement<React.PropsWithChildren<{
    allowDecimals?: boolean | undefined;
    customMinorTicks?: number[] | undefined;
    customTicks?: number[] | undefined;
    endValue?: number | undefined;
    label?: Record<string, any> | {
        customizeText?: ((scaleValue: {
            value: number;
            valueText: string;
        }) => string) | undefined;
        font?: ChartsFont | undefined;
        format?: LocalizationFormat | undefined;
        hideFirstOrLast?: CircularGaugeLabelOverlap | undefined;
        indentFromTick?: number | undefined;
        overlappingBehavior?: LabelOverlap | undefined;
        useRangeColors?: boolean | undefined;
        visible?: boolean | undefined;
    } | undefined;
    minorTick?: Record<string, any> | {
        color?: string | undefined;
        length?: number | undefined;
        opacity?: number | undefined;
        visible?: boolean | undefined;
        width?: number | undefined;
    } | undefined;
    minorTickInterval?: number | undefined;
    orientation?: CircularGaugeElementOrientation | undefined;
    scaleDivisionFactor?: number | undefined;
    startValue?: number | undefined;
    tick?: Record<string, any> | {
        color?: string | undefined;
        length?: number | undefined;
        opacity?: number | undefined;
        visible?: boolean | undefined;
        width?: number | undefined;
    } | undefined;
    tickInterval?: number | undefined;
} & {
    children?: React.ReactNode;
} & {
    elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
type IShadowProps = React.PropsWithChildren<{
    blur?: number;
    color?: string;
    offsetX?: number;
    offsetY?: number;
    opacity?: number;
}>;
declare const Shadow: ((props: IShadowProps) => React.FunctionComponentElement<React.PropsWithChildren<{
    blur?: number | undefined;
    color?: string | undefined;
    offsetX?: number | undefined;
    offsetY?: number | undefined;
    opacity?: number | undefined;
} & {
    children?: React.ReactNode;
} & {
    elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
type ISizeProps = React.PropsWithChildren<{
    height?: number | undefined;
    width?: number | undefined;
}>;
declare const Size: ((props: ISizeProps) => React.FunctionComponentElement<React.PropsWithChildren<{
    height?: number | undefined;
    width?: number | undefined;
} & {
    children?: React.ReactNode;
} & {
    elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
type ISubtitleProps = React.PropsWithChildren<{
    font?: ChartsFont;
    offset?: number;
    text?: string;
    textOverflow?: TextOverflow;
    wordWrap?: WordWrap;
}>;
declare const Subtitle: ((props: ISubtitleProps) => React.FunctionComponentElement<React.PropsWithChildren<{
    font?: ChartsFont | undefined;
    offset?: number | undefined;
    text?: string | undefined;
    textOverflow?: TextOverflow | undefined;
    wordWrap?: WordWrap | undefined;
} & {
    children?: React.ReactNode;
} & {
    elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
type ISubvalueIndicatorProps = React.PropsWithChildren<{
    arrowLength?: number;
    backgroundColor?: string;
    baseValue?: number | undefined;
    beginAdaptingAtRadius?: number;
    color?: ChartsColor | string;
    horizontalOrientation?: HorizontalEdge;
    indentFromCenter?: number;
    length?: number;
    offset?: number;
    palette?: Array<string> | Palette;
    secondColor?: string;
    secondFraction?: number;
    size?: number;
    spindleGapSize?: number;
    spindleSize?: number;
    text?: Record<string, any> | {
        customizeText?: ((indicatedValue: {
            value: number;
            valueText: string;
        }) => string) | undefined;
        font?: ChartsFont;
        format?: LocalizationFormat | undefined;
        indent?: number;
    };
    type?: "circle" | "rangeBar" | "rectangle" | "rectangleNeedle" | "rhombus" | "textCloud" | "triangleMarker" | "triangleNeedle" | "twoColorNeedle";
    verticalOrientation?: VerticalEdge;
    width?: number;
}>;
declare const SubvalueIndicator: ((props: ISubvalueIndicatorProps) => React.FunctionComponentElement<React.PropsWithChildren<{
    arrowLength?: number | undefined;
    backgroundColor?: string | undefined;
    baseValue?: number | undefined;
    beginAdaptingAtRadius?: number | undefined;
    color?: string | ChartsColor | undefined;
    horizontalOrientation?: HorizontalEdge | undefined;
    indentFromCenter?: number | undefined;
    length?: number | undefined;
    offset?: number | undefined;
    palette?: string[] | Palette | undefined;
    secondColor?: string | undefined;
    secondFraction?: number | undefined;
    size?: number | undefined;
    spindleGapSize?: number | undefined;
    spindleSize?: number | undefined;
    text?: Record<string, any> | {
        customizeText?: ((indicatedValue: {
            value: number;
            valueText: string;
        }) => string) | undefined;
        font?: ChartsFont | undefined;
        format?: LocalizationFormat | undefined;
        indent?: number | undefined;
    } | undefined;
    type?: "circle" | "rangeBar" | "rectangle" | "rectangleNeedle" | "rhombus" | "textCloud" | "triangleMarker" | "triangleNeedle" | "twoColorNeedle" | undefined;
    verticalOrientation?: VerticalEdge | undefined;
    width?: number | undefined;
} & {
    children?: React.ReactNode;
} & {
    elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
type ITextProps = React.PropsWithChildren<{
    customizeText?: ((indicatedValue: {
        value: number;
        valueText: string;
    }) => string) | undefined;
    font?: ChartsFont;
    format?: LocalizationFormat | undefined;
    indent?: number;
}>;
declare const Text: ((props: ITextProps) => React.FunctionComponentElement<React.PropsWithChildren<{
    customizeText?: ((indicatedValue: {
        value: number;
        valueText: string;
    }) => string) | undefined;
    font?: ChartsFont | undefined;
    format?: LocalizationFormat | undefined;
    indent?: number | undefined;
} & {
    children?: React.ReactNode;
} & {
    elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
type ITickProps = React.PropsWithChildren<{
    color?: string;
    length?: number;
    opacity?: number;
    visible?: boolean;
    width?: number;
}>;
declare const Tick: ((props: ITickProps) => React.FunctionComponentElement<React.PropsWithChildren<{
    color?: string | undefined;
    length?: number | undefined;
    opacity?: number | undefined;
    visible?: boolean | undefined;
    width?: number | undefined;
} & {
    children?: React.ReactNode;
} & {
    elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
type ITitleProps = React.PropsWithChildren<{
    font?: ChartsFont;
    horizontalAlignment?: HorizontalAlignment;
    margin?: number | Record<string, any> | {
        bottom?: number;
        left?: number;
        right?: number;
        top?: number;
    };
    placeholderSize?: number | undefined;
    subtitle?: Record<string, any> | string | {
        font?: ChartsFont;
        offset?: number;
        text?: string;
        textOverflow?: TextOverflow;
        wordWrap?: WordWrap;
    };
    text?: string;
    textOverflow?: TextOverflow;
    verticalAlignment?: VerticalEdge;
    wordWrap?: WordWrap;
}>;
declare const Title: ((props: ITitleProps) => React.FunctionComponentElement<React.PropsWithChildren<{
    font?: ChartsFont | undefined;
    horizontalAlignment?: HorizontalAlignment | undefined;
    margin?: number | Record<string, any> | {
        bottom?: number | undefined;
        left?: number | undefined;
        right?: number | undefined;
        top?: number | undefined;
    } | undefined;
    placeholderSize?: number | undefined;
    subtitle?: string | Record<string, any> | {
        font?: ChartsFont | undefined;
        offset?: number | undefined;
        text?: string | undefined;
        textOverflow?: TextOverflow | undefined;
        wordWrap?: WordWrap | undefined;
    } | undefined;
    text?: string | undefined;
    textOverflow?: TextOverflow | undefined;
    verticalAlignment?: VerticalEdge | undefined;
    wordWrap?: WordWrap | undefined;
} & {
    children?: React.ReactNode;
} & {
    elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
type ITooltipProps = React.PropsWithChildren<{
    arrowLength?: number;
    border?: Record<string, any> | {
        color?: string;
        dashStyle?: DashStyle;
        opacity?: number | undefined;
        visible?: boolean;
        width?: number;
    };
    color?: string;
    container?: any | string | undefined;
    contentTemplate?: ((scaleValue: {
        value: number;
        valueText: string;
    }, element: any) => string | any) | template | undefined;
    cornerRadius?: number;
    customizeTooltip?: ((scaleValue: {
        value: number;
        valueText: string;
    }) => Record<string, any>) | undefined;
    enabled?: boolean;
    font?: ChartsFont;
    format?: LocalizationFormat | undefined;
    interactive?: boolean;
    opacity?: number | undefined;
    paddingLeftRight?: number;
    paddingTopBottom?: number;
    shadow?: Record<string, any> | {
        blur?: number;
        color?: string;
        offsetX?: number;
        offsetY?: number;
        opacity?: number;
    };
    zIndex?: number | undefined;
    contentRender?: (...params: any) => React.ReactNode;
    contentComponent?: React.ComponentType<any>;
}>;
declare const Tooltip: ((props: ITooltipProps) => React.FunctionComponentElement<React.PropsWithChildren<{
    arrowLength?: number | undefined;
    border?: Record<string, any> | {
        color?: string | undefined;
        dashStyle?: DashStyle | undefined;
        opacity?: number | undefined;
        visible?: boolean | undefined;
        width?: number | undefined;
    } | undefined;
    color?: string | undefined;
    container?: any | string | undefined;
    contentTemplate?: template | ((scaleValue: {
        value: number;
        valueText: string;
    }, element: any) => string | any) | undefined;
    cornerRadius?: number | undefined;
    customizeTooltip?: ((scaleValue: {
        value: number;
        valueText: string;
    }) => Record<string, any>) | undefined;
    enabled?: boolean | undefined;
    font?: ChartsFont | undefined;
    format?: LocalizationFormat | undefined;
    interactive?: boolean | undefined;
    opacity?: number | undefined;
    paddingLeftRight?: number | undefined;
    paddingTopBottom?: number | undefined;
    shadow?: Record<string, any> | {
        blur?: number | undefined;
        color?: string | undefined;
        offsetX?: number | undefined;
        offsetY?: number | undefined;
        opacity?: number | undefined;
    } | undefined;
    zIndex?: number | undefined;
    contentRender?: ((...params: any) => React.ReactNode) | undefined;
    contentComponent?: React.ComponentType<any> | undefined;
} & {
    children?: React.ReactNode;
} & {
    elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
type IValueIndicatorProps = React.PropsWithChildren<{
    arrowLength?: number;
    backgroundColor?: string;
    baseValue?: number | undefined;
    beginAdaptingAtRadius?: number;
    color?: ChartsColor | string;
    horizontalOrientation?: HorizontalEdge;
    indentFromCenter?: number;
    length?: number;
    offset?: number;
    palette?: Array<string> | Palette;
    secondColor?: string;
    secondFraction?: number;
    size?: number;
    spindleGapSize?: number;
    spindleSize?: number;
    text?: Record<string, any> | {
        customizeText?: ((indicatedValue: {
            value: number;
            valueText: string;
        }) => string) | undefined;
        font?: ChartsFont;
        format?: LocalizationFormat | undefined;
        indent?: number;
    };
    type?: "circle" | "rangeBar" | "rectangle" | "rectangleNeedle" | "rhombus" | "textCloud" | "triangleMarker" | "triangleNeedle" | "twoColorNeedle";
    verticalOrientation?: VerticalEdge;
    width?: number;
}>;
declare const ValueIndicator: ((props: IValueIndicatorProps) => React.FunctionComponentElement<React.PropsWithChildren<{
    arrowLength?: number | undefined;
    backgroundColor?: string | undefined;
    baseValue?: number | undefined;
    beginAdaptingAtRadius?: number | undefined;
    color?: string | ChartsColor | undefined;
    horizontalOrientation?: HorizontalEdge | undefined;
    indentFromCenter?: number | undefined;
    length?: number | undefined;
    offset?: number | undefined;
    palette?: string[] | Palette | undefined;
    secondColor?: string | undefined;
    secondFraction?: number | undefined;
    size?: number | undefined;
    spindleGapSize?: number | undefined;
    spindleSize?: number | undefined;
    text?: Record<string, any> | {
        customizeText?: ((indicatedValue: {
            value: number;
            valueText: string;
        }) => string) | undefined;
        font?: ChartsFont | undefined;
        format?: LocalizationFormat | undefined;
        indent?: number | undefined;
    } | undefined;
    type?: "circle" | "rangeBar" | "rectangle" | "rectangleNeedle" | "rhombus" | "textCloud" | "triangleMarker" | "triangleNeedle" | "twoColorNeedle" | undefined;
    verticalOrientation?: VerticalEdge | undefined;
    width?: number | undefined;
} & {
    children?: React.ReactNode;
} & {
    elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
export default CircularGauge;
export { CircularGauge, ICircularGaugeOptions, CircularGaugeRef, Animation, IAnimationProps, BackgroundColor, IBackgroundColorProps, Border, IBorderProps, Color, IColorProps, Export, IExportProps, Font, IFontProps, Format, IFormatProps, Geometry, IGeometryProps, Label, ILabelProps, LoadingIndicator, ILoadingIndicatorProps, Margin, IMarginProps, MinorTick, IMinorTickProps, Range, IRangeProps, RangeContainer, IRangeContainerProps, Scale, IScaleProps, Shadow, IShadowProps, Size, ISizeProps, Subtitle, ISubtitleProps, SubvalueIndicator, ISubvalueIndicatorProps, Text, ITextProps, Tick, ITickProps, Title, ITitleProps, Tooltip, ITooltipProps, ValueIndicator, IValueIndicatorProps };
import type * as CircularGaugeTypes from 'devextreme/viz/circular_gauge_types';
export { CircularGaugeTypes };