Visão geral React Radial Gauge

O componente React radial gauge fornece uma série de elementos visuais, como uma agulha, marcas de escala, intervalos e rótulos, para criar uma forma e escala predefinidas. O IgrRadialGauge também tem suporte integrado para transições animadas. Essa animação é facilmente personalizável ao definir a propriedade transitionDuration.

React Radial Gauge Example

O exemplo a seguir demonstra como definir várias propriedades no mesmo IgrRadialGauge pode transformá-lo em um calibre radial completamente diferente.

Dependencies

Ao instalar o componente do medidor, o pacote principal também deve ser instalado.

npm install --save igniteui-react-core
npm install --save igniteui-react-gauges

Component Modules

O IgrRadialGauge requer os seguintes módulos:

import { IgrRadialGaugeModule } from 'igniteui-react-gauges';

IgrRadialGaugeModule.register();

Usage

O código a seguir demonstra como criar um medidor radial contendo uma agulha e três faixas comparativas na escala.

 <IgrRadialGauge height="400px" width="400px"
    value={25}
    interval={5}
    minimumValue={0}
    maximumValue={100}>
    <IgrRadialGaugeRange startValue={0}
                         endValue={30}
                         brush="red"/>
    <IgrRadialGaugeRange startValue={30}
                         endValue={60}
                         brush="yellow"/>
    <IgrRadialGaugeRange startValue={60}
                         endValue={100}
                         brush="green"/>
</IgrRadialGauge>

Backing

O componente do medidor radial vem com um formato de apoio desenhado atrás da escala que atua como um plano de fundo para o medidor radial.

O elemento de apoio representa o fundo e a borda do componente de calibre radial. Ele é sempre o primeiro elemento renderizado e todos os outros elementos, como agulha, rótulos e marcas de escala, são sobrepostos em cima dele.

O suporte pode ser circular ou ajustado. Uma forma circular cria um medidor de círculo de 360 graus, enquanto uma forma ajustada cria um segmento de arco preenchido que abrange as propriedades scaleStartAngle e scaleEndAngle. Isso pode ser definido definindo a propriedade backingShape.

<IgrRadialGauge
    backingShape="Fitted"
    backingBrush="#fcfcfc"
    backingOutline="DodgerBlue"
    backingOversweep={5}
    backingCornerRadius={10}
    backingStrokeThickness={5}
    backingOuterExtent={0.8}
    backingInnerExtent={0.15}
    scaleStartAngle={135} scaleEndAngle={45}
    height="300px" width="300px"
    minimumValue={0} value={50}
    maximumValue={80} interval={10} />

Scale

A escala é um elemento visual que destaca a gama completa de valores no medidor que pode ser criada fornecendo valores minimumValue e maximumValue. Junto com o suporte, ele define a forma geral do medidor. As propriedades scaleStartAngle e scaleEndAngle definem os limites do arco da escala. Enquanto isso, a propriedade scaleSweepDirection especifica se a escala varre no sentido horário ou anti-horário. Você pode personalizar a aparência da escala definindo as propriedades scaleBrush, scaleStartExtent e scaleEndExtent.

<IgrRadialGauge
    scaleStartAngle={135}
    scaleEndAngle={45}
    scaleBrush="DodgerBlue"
    scaleSweepDirection="Clockwise"
    scaleOversweep={1}
    scaleOversweepShape="Fitted"
    scaleStartExtent={0.45}
    scaleEndExtent={0.575}
    height="300px" width="300px"
    minimumValue={0} value={50}
    maximumValue={80} interval={10} />

Labels and Titles

Os rótulos de calibre radial são elementos visuais que exibem valores numéricos em um intervalo especificado entre valores das propriedades minimumValue e maximumValue. Você pode posicionar rótulos definindo a propriedade labelExtent como uma fração, onde 0 representa o centro do calibre e 1 representa a extensão externa do suporte do calibre. Além disso, você pode personalizar rótulos definindo várias propriedades de estilo, como fontBrush e font.

Cada um desses rótulos para a agulha tem vários atributos de estilo que você pode aplicar para alterar a fonte, o ângulo, o pincel e a distância do centro do medidor, como titleExtent, titleAngle, SubtitleFontSize, highlightLabelBrush.

<IgrRadialGauge
    labelExtent={0.65}
    labelInterval={10}
    font="11px Verdana"
    fontBrush="DodgerBlue"
    height="300px" width="300px"
    minimumValue={0} value={50}
    maximumValue={80} interval={10} />

Title & Subtitle

As propriedades titleText e subtitleText estão disponíveis e podem ser usadas para exibir texto personalizado para a agulha. Como alternativa, titleDisplaysValue e subtitleDisplaysValue, quando definidos como true, permitirão exibir o valor da agulha e substituir titleText e subtitleText. Portanto, você pode ocupar texto personalizado para o título, mas mostrar o valor por meio do subtítulo e vice-versa.

Se a agulha de destaque for exibida, conforme explicado abaixo, o texto personalizado poderá ser exibido via highlightLabelText, caso contrário, highlightLabelDisplaysValue poderá ser habilitado e exibir seu valor.

<IgrRadialGauge
    titleText="Global Sales"
    subtitleText="2024"
/>

Optical Scaling

Os rótulos e títulos do medidor radial podem alterar sua escala. Para habilitar isso, primeiro defina opticalScalingEnabled como true. Então você pode definir opticalScalingSize que gerencia o tamanho no qual os rótulos têm escala óptica de 100%. Os rótulos terão fontes maiores quando o tamanho do medidor for maior. Por exemplo, os rótulos terão um tamanho de fonte 200% maior quando esta propriedade for definida como 500 e o tamanho px do medidor for dobrado para, por exemplo, 1000.

Tick Marks

Marcas de escala são linhas finas que irradiam do centro do medidor radial. Existem dois tipos de marcas de escala: principais e secundárias. Marcas de escala principais são exibidas no interval entre as propriedades minimumValue e maximumValue. Use a propriedade minorTickCount para especificar o número de marcas de escala secundárias exibidas entre cada marca de escala principal. Você pode controlar o comprimento das marcas de escala definindo uma fração (entre 0 e 1) para as propriedades tickStartExtent, tickEndExtent, minorTickStartExtent e minorTickEndExtent.

<IgrRadialGauge
    tickStartExtent={0.45}
    tickEndExtent={0.575}
    tickStrokeThickness={2}
    tickBrush="DodgerBlue"
    minorTickCount={4}
    minorTickEndExtent={0.5}
    minorTickStartExtent={0.575}
    minorTickStrokeThickness={1}
    minorTickBrush="DarkViolet"
    height="300px" width="300px"
    minimumValue={0} value={50}
    maximumValue={80} interval={10}/>

Ranges

Um intervalo destaca um conjunto de valores contínuos vinculados por propriedades minimumValue e maximumValue especificadas. Você pode adicionar vários intervalos ao medidor radial especificando seus valores inicial e final. Cada intervalo tem algumas propriedades de personalização, como brush e outline. Como alternativa, você pode definir as propriedades rangeBrushes e rangeOutlines para uma lista de cores para os intervalos.

<IgrRadialGauge
    height="300px" width="300px"
    minimumValue={0} value={50}
    maximumValue={80} interval={10}
    rangeBrushes ="red, yellow, green"
    rangeOutlines="red, yellow, green">
   <IgrRadialGaugeRange
       startValue={1}  endValue={10} brush="yellow" />
   <IgrRadialGaugeRange
       startValue={10}  endValue={25} brush="green" />
   <IgrRadialGaugeRange
       startValue={25}  endValue={40} brush="red" />
    <IgrRadialGaugeRange
       startValue={40}  endValue={80} brush="yellow" />
</IgrRadialGauge>

Needle

Agulhas de calibre radial são elementos visuais usados para significar um valor definido de calibre. As agulhas estão disponíveis em uma das várias formas predefinidas. A agulha pode ter uma forma de pivô, que é colocada no centro do calibre. A forma de pivô também assume uma das formas predefinidas. Formas de pivô que incluem uma sobreposição ou uma subposição podem ter um pincel de pivô separado aplicado à forma.

Os formatos e tampas de agulha suportados são definidos usando as propriedades needleShape e needlePivotShape.

Você pode habilitar um modo interativo do medidor (usando a propriedade isNeedleDraggingEnabled) e o usuário final poderá alterar o valor arrastando a agulha entre os valores das propriedades minimumValue e maximumValue.

<IgrRadialGauge
    value={50}
    isNeedleDraggingEnabled={true}
    isNeedleDraggingConstrained={true}
    needleShape="NeedleWithBulb"
    needleBrush="DodgerBlue"
    needleOutline="DodgerBlue"
    needleEndExtent={0.475}
    needleStrokeThickness={1}
    needlePivotShape="CircleOverlay"
    needlePivotBrush="#9f9fa0"
    needlePivotOutline="#9f9fa0"
    needlePivotWidthRatio={0.2}
    needlePivotStrokeThickness={1}
    height="300px" width="300px"
    minimumValue={0}
    maximumValue={80} interval={10} />

Highlight Needle

O medidor radial pode ser modificado para mostrar uma segunda agulha. Isso fará com que o value da agulha principal apareça com uma opacidade menor. Para habilitar isso, primeiro defina highlightValueDisplayMode como Overlay e, em seguida, aplique um highlightValue.

<IgrRadialGauge                    
    highlightValueDisplayMode="Overlay"
    highlightValue="25"
    isHighlightNeedleDraggingEnabled="true"
    isNeedleDraggingEnabled="true"
    titleDisplaysValue="true"
    label-interval="10"
    label-extent="0.65"        
    height="100%"
    width="100%"
    minimumValue={0} value={75}
    maximumValue={80} interval={10}  />

Summary

Para sua conveniência, todos os trechos de código acima são combinados em um bloco de código abaixo que você pode copiar facilmente para seu projeto e ver o medidor radial com todos os recursos e visuais habilitados.

<IgrRadialGauge
    height="300px" width="300px"
    minimumValue={0}
    maximumValue={80}
    scaleStartAngle={135}
    scaleEndAngle={45}
    scaleBrush="#c6c6c6"
    scaleSweepDirection="Clockwise"
    scaleOversweep={1}
    scaleOversweepShape="Fitted"
    scaleStartExtent={0.45}
    scaleEndExtent={0.575}

    value={70}
    isNeedleDraggingEnabled={true}
    isNeedleDraggingConstrained={true}
    needleShape="NeedleWithBulb"
    needleBrush="DodgerBlue"
    needleOutline="DodgerBlue"
    needleEndExtent={0.475}
    needleStrokeThickness={1}
    needlePivotShape="CircleOverlay"
    needlePivotBrush="#9f9fa0"
    needlePivotOutline="#9f9fa0"
    needlePivotWidthRatio={0.2}
    needlePivotStrokeThickness={1}

    interval={10}
    tickStartExtent={0.45}
    tickEndExtent={0.575}
    tickStrokeThickness={2}
    tickBrush="Black"
    minorTickCount={4}
    minorTickEndExtent={0.5}
    minorTickStartExtent={0.575}
    minorTickStrokeThickness={1}
    minorTickBrush="Black"

    labelExtent={0.65}
    labelInterval={10}
    font="11px Verdana"
    fontBrush="Black"

    backingShape="Fitted"
    backingBrush="#ededed"
    backingOutline="Gray"
    backingOversweep={5}
    backingCornerRadius={10}
    backingStrokeThickness={5}
    backingOuterExtent={0.8}
    backingInnerExtent={0.15}

    rangeBrushes ="#a4bd29, #F86232"
    rangeOutlines="#a4bd29, #F86232">
    <IgrRadialGaugeRange
        startValue={20} endValue={40}
        innerStartExtent={0.45} innerEndExtent={0.45}
        outerStartExtent={0.57} outerEndExtent={0.57} />
    <IgrRadialGaugeRange
        startValue={40} endValue={60}
        innerStartExtent={0.45} innerEndExtent={0.45}
        outerStartExtent={0.57} outerEndExtent={0.57} />
</IgrRadialGauge>

API References

A seguir está uma lista de membros da API mencionados nas seções acima:

Additional Resources

Você pode encontrar mais informações sobre outros tipos de medidores nestes tópicos: