Web Components Linear Gauge Overview

The Ignite UI for Web Components linear gauge component allows for visualizing data in the form of a linear gauge. The IgcLinearGaugeComponent provides a simple and concise view of a value compared against a scale and one or more ranges. It supports one scale, one set of tick marks and one set of labels. The component has also a built-in support for animated transitions. This animation is easily customizable by setting the transitionDuration property. The features of the linear gauge component include configurable orientation and direction, configurable visual elements such as the needle, and more.

Web Components Linear Gauge Example

The following sample demonstrates how setting multiple properties on the same IgcLinearGaugeComponent can transform it to completely different linear gauge.

Dependencies

When installing the Web Components gauge component, the core package must also be installed.

npm install --save igniteui-webcomponents-core
npm install --save igniteui-webcomponents-gauges

Component Modules

The IgcLinearGaugeComponent requires the following modules:

import { IgcLinearGaugeModule } from 'igniteui-webcomponents-gauges';

ModuleManager.register(
    IgcLinearGaugeModule
    );

Usage

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

<igc-linear-gauge
    height="80px" width="400px"
    minimum-value=5 value=43
    maximum-value=55>
    <igc-linear-graph-range
        start-value=0
        end-value=15
        brush="red">
    </igc-linear-graph-range>
    <igc-linear-graph-range
        start-value=50
        end-value=30
         brush="yellow">
    </igc-linear-graph-range>
     <igc-linear-graph-range
        start-value=30
        end-value=55
        brush="green">
    </igc-linear-graph-range>
</igc-linear-gauge>

Needle

Esta é a medida principal exibida pelo componente de medidor linear e é visualizada como uma barra ou você pode personalizá-la para mostrar quase qualquer formato, conforme demonstrado abaixo.

  <igc-linear-gauge
    height="80px" width="400px"
    minimum-value=0
    maximum-value=100
    interval=10
    value=50
    is-needle-dragging-enabled=true
    needle-shape="Custom"
    needle-brush="DodgerBlue"
    needle-out-line="DodgerBlue"
    needle-stroke-thickness=1
    needle-breadth=15
    needle-inner-extent=0.35
    needle-outer-extent=0.65
    needle-outer-point-extent=0.8
    needle-inner-point-extent=0.325
    needle-inner-point-width=0
    needle-outer-point-width=0.3
    needle-inner-base-width=0
    needle-outer-base-width=0.07>
</igc-linear-gauge>

Highlight Needle

O medidor linear 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.

<igc-linear-gauge
    id="gauge"
    height="80px"
    width="100%"
    minimum-value="0" 
    maximum-value="100" 
    value="75"
    interval="10"
    label-interval="10"
    label-extent="0.025"
    labels-pre-terminal="0"
    labels-post-initial="0"
    needle-brush="blue"
    highlight-value-display-mode="Overlay"
    highlight-value=25 
    is-highlight-needle-dragging-enabled=true>
</igc-linear-gauge>

Ranges

Os intervalos são elementos visuais que destacam um intervalo especificado de valores em uma escala. Seu propósito é comunicar visualmente o estado qualitativo da medida da barra de desempenho, ilustrando ao mesmo tempo o grau em que ela reside dentro desse estado.

<igc-linear-gauge
    height="80px" width="400px"
    minimum-value=0 value=50
    maximum-value=100 interval=10
    range-brushes="#a4bd29, #F86232"
    range-outlines="#a4bd29, #F86232" >
    <igc-linear-graph-range
        start-value=0 end-value=50
        inner-start-extent=0.075 inner-end-extent=0.075
        outer-start-extent=0.25 outer-end-extent=0.4>
    </igc-linear-graph-range>
    <igc-linear-graph-range
        start-value=50 end-value=100
        inner-start-extent=0.075 inner-end-extent=0.075
        outer-start-extent=0.4 outer-end-extent=0.55>
    </igc-linear-graph-range>
</igc-linear-gauge>

Tick Marks

As marcas de verificação servem como uma divisão visual da escala em intervalos para aumentar a legibilidade do medidor linear.

Marcas de escala principais – As marcas de escala principais são usadas como delimitadores primários na escala. A frequência em que aparecem, suas extensões e estilo podem ser controlados definindo suas propriedades correspondentes.

Marcas de verificação menores – As marcas de verificação menores representam marcas de verificação auxiliares, que podem ser usadas para melhorar ainda mais a legibilidade da escala e podem ser personalizadas de forma semelhante às principais.

<igc-linear-gauge
    height="80px" width="400px"
    minimum-value=0 value=50
    maximum-value=100
    interval=10
    tick-brush="DodgerBlue"
    ticks-pre-terminal=0
    ticks-post-initial=0
    tick-stroke-thickness=2
    tick-start-extent=0.25
    tick-end-extent=0.05
    minor-tick-count=4
    minor-tick-brush="DarkViolet"
    minor-tick-end-extent=0.05
    minor-tick-start-extent=0.15
    minor-tick-stroke-thickness=1>
</igc-linear-gauge>

Labels

As etiquetas indicam as medidas na escala.

<igc-linear-gauge
    height="80px" width="400px"
    minimum-value=0 value=50
    maximum-value=100 interval=10
    label-interval=10
    label-extent=0.025
    labels-pre-terminal=0
    labels-post-initial=0
    font-brush="DodgerBlue"
    font="11px Verdana">
</igc-linear-gauge>

Backing

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

<igc-linear-gauge
    height="80px" width="400px"
    minimum-value=0 value=20
    maximum-value=100 interval=10
    backing-brush="#bddcfc"
    backing-outline="DodgerBlue"
    backing-stroke-thickness=4
    backing-inner-extent=0
    backing-outer-extent=1>
</igc-linear-gauge>

Scale

A escala é um elemento visual que destaca toda a gama de valores no medidor linear. Você pode personalizar a aparência e o formato da escala. Ela também pode ser invertida (usando a propriedade isScaleInverted) e todos os rótulos serão renderizados da direita para a esquerda em vez da esquerda para a direita.

<igc-linear-gauge
    height="80px" width="400px"
    minimum-value=0 value=50
    maximum-value=100 interval=10
    isScale-inverted=false
    scale-brush="DodgerBlue"
    scale-outline="DarkViolet"
    scale-stroke-thickness=1
    scale-inner-extent=0.05
    scale-outer-extent=0.65
    scale-start-extent=0.05
    scale-end-extent=0.95>
</igc-linear-gauge>

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 linear com todos os recursos e visuais habilitados.

<igc-linear-gauge id="lineargauge"
    height="80px" width="400px"
    minimum-value=0
    maximum-value=100

    label-interval=10
    label-extent=0.025
    labels-pre-terminal=0
    labels-post-initial=0
    font-brush="Black"
    font="11px Verdana"

    interval=10
    tick-brush="Black"
    ticks-pre-terminal=0
    ticks-post-initial=0
    tick-stroke-thickness=2
    tick-start-extent=0.25
    tick-end-extent=0.05

    minor-tick-count=4
    minor-tick-brush="Black"
    minor-tick-end-extent=0.05
    minor-tick-start-extent=0.15
    minor-tick-stroke-thickness=1

    value=50
    is-needle-dragging-enabled=true
    needle-shape="Custom"
    needle-brush="Black"
    needle-outline="Black"
    needle-stroke-thickness=1
    needle-breadth=15
    needle-inner-extent=0.35
    needle-outer-extent=0.65
    needle-outer-point-extent=0.8
    needle-inner-point-extent=0.325
    needle-inner-point-width=0
    needle-outer-point-width=0.3
    needle-inner-base-width=0
    needle-outer-base-width=0.07

    is-scale-inverted=false
    scale-brush="Gray"
    scale-outline="Gray"
    scale-stroke-thickness=1
    scale-inner-extent=0.05
    scale-outer-extent=0.65
    scale-start-extent=0.05
    scale-end-extent=0.95

    backing-brush="#cecece"
    backing-outline="#cecece"
    backing-stroke-thickness=4
    backing-inner-extent=0
    backing-outer-extent=1

    range-brushes ="#C62828, #F96232, #FF9800"
    range-outlines="#C62828, #F96232, #FF9800">
    <igc-linear-graph-range
        start-value=0 end-Value=50
        inner-start-extent=0.075 inner-end-extent=0.075
        outer-start-extent=0.25 outer-end-extent=0.4>
    </igc-linear-graph-range>
    <igc-linear-graph-range
        start-value=50 end-value=100
        inner-start-extent=0.075 inner-end-extent=0.075
        outer-start-extent=0.4 outer-end-extent=0.55>
    </igc-linear-graph-range>
</igc-linear-gauge>

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: