GaugeChart
O Gauge Chart é indicado para mostrar o progresso em direção a uma meta específica.
Quando usar:
- Use "Gauge charts" quando precisar monitorar e comunicar de forma visual o status de métricas-chave ou indicadores de desempenho;
- Use "Gauge charts" para comunicar o estado geral de uma única métrica de maneira rápida e visualmente impactante.
Quando não usar:
- Evite o uso de "Gauge charts" para representar conjuntos de dados complexos ou multidimensionais. Esse tipo de gráfico é mais eficaz ao exibir uma única métrica em relação a uma escala.
Uso
js
<CdsGaugeChart
variant="green"
size="md"
text="Lorem Ipsum"
@click="gaugeChartClick = true"
/>Preview
Em atendimento: 280
Pendentes: 60
Em acompanhamento: 600
Props
Nome | Tipo | Default | Opções | Descrição |
|---|---|---|---|---|
value | number | 0 | -- | Define o valor indicador de progresso do GaugeChart. O valor deve ser entre 0 e 100. |
variant | string | 'green' | green teal blue indigo violet pink red orange amber dark | A variante de cor. São 9 variantes implementadas: 'green', 'teal', 'turquoise', 'blue', 'indigo', 'violet', 'pink', 'red', 'orange' e 'amber'. |
size | number | 300 | -- | Tamanho, em pixels, do componente na tela. |
subtitle | string | '' | -- | Legenda do indicador de progresso. |
target | number | 0 | -- | Legenda do indicador de progresso. |
showTarget | boolean | false | -- | Controla a exibição do target no GaugeChart. |
Slots
Nome | Descrição |
|---|---|
#popover |