@grafana/ui/dist/types/components/RadialGauge/RadialGauge.d.ts

Grafana Components Library

import { DisplayValueAlignmentFactors, FieldDisplay } from '@grafana/data';
export interface RadialGaugeProps {
    values: FieldDisplay[];
    width: number;
    height: number;
    /**
     * Circle or gauge (partial circle)
     */
    shape?: RadialShape;
    gradient?: RadialGradientMode;
    /**
     * Bar width is always relative to size of the gauge.
     * But this gives you control over the width relative to size.
     * Range 0 - 1 (1 being the thickest)
     * Defaults to 0.4
     **/
    barWidthFactor?: number;
    /** Adds a white spotlight for the end position */
    spotlight?: boolean;
    glowBar?: boolean;
    glowCenter?: boolean;
    roundedBars?: boolean;
    thresholdsBar?: boolean;
    /**
     * Number of segments depends on size of gauge but this
     * factor 1-10 gives you relative control
     **/
    segmentCount?: number;
    /**
     * Distance between segments
     * Factor between 0-1
     */
    segmentSpacing?: number;
    /**
     * If multiple is shown in a group (via VizRepeater).
     * This impacts the auto textMode
     */
    vizCount?: number;
    /** Factors that should influence the positioning of the text  */
    alignmentFactors?: DisplayValueAlignmentFactors;
    /** Explicit font size control */
    valueManualFontSize?: number;
    /** Explicit font size control */
    nameManualFontSize?: number;
    /** Specify which text should be visible  */
    textMode?: RadialTextMode;
    showScaleLabels?: boolean;
    /** For data links */
    onClick?: React.MouseEventHandler<HTMLElement>;
}
export type RadialGradientMode = 'none' | 'auto';
export type RadialTextMode = 'auto' | 'value_and_name' | 'value' | 'name' | 'none';
export type RadialShape = 'circle' | 'gauge';
/**
 * https://developers.grafana.com/ui/latest/index.html?path=/docs/plugins-radialgauge--docs
 */
export declare function RadialGauge(props: RadialGaugeProps): import("react/jsx-runtime").JSX.Element;