DonutChart

Um componente de gráfico reutilizável para exibir dados visualmente, de modo um pouco mais legível que o PieChart.

---

⚠️ Esse componente vai substituir o PieChart nas próximas versões do Cuida

Quando usar:

• Exibir dados em formatos visuais;
• Visualizar tendências, proporções ou comparações em dados;
• Exibir proporções ou partes de um todo, onde cada fatia representa uma parcela do total;
• Funciona bem com categorias mutuamente exclusivas;

Quando não usar:

• Para informações simples que podem ser exibidas em um formato tabular ou em texto;
• Quando os dados apresentarem muitas categorias ou subcategorias;
• Não é apropriado para dados contínuos ou dados temporais.

---

⚠️ O DonutChart aceita 3 tipos de configuração de cor: Por cores, por variant e por tema.

---

Uso

<CdsDonutChart
	:data="chartData"
	:variant="variant"
	:labels="chartLabels"
	@chart-click="logChartClick"
/>

---

Por tema

Ao utilizar a configuração por temas, o DonutChart aplicará cores pré-definidas, previamente testadas para garantir legibilidade e harmonia visual. Por hora existem 2 temas definidios, o blue e o indigo. Cada cor possui 10 cores cada, de modo que funcionarão sem repetição para gráficos com até 10 datasets Ex.: :tema="blue"

Por cores

Enviando um array de cores para a prop colors, as cores do Donut serão definidas a partir desse array, com cada segemento do gráfico correspondendo à cor definida na posição correspondente do array.

Por variante

Caso deseje utilizar o gráfico no modo monocromático, o DonutChart possuia prop variant. Essa prop aceita cores da paleta do Cuida e utiliza diferentes shades dessa cor para construir o gráfico. Ex.: :variant="green"

Mostrar log

⚡Nenhum evento foi disparado

---

Props

Nome	Tipo	Default	Opções	Descrição
* data (required)	object		--	Define o conjunto de dados a serem mostrados no gráfico. O objeto deve conter o parâmetro `name` (para identificar o conjunto de dados) e `datasets`, array de objetos que apresentará `label` (indicar o rótulo do dado) e `data` (array com os valores númericos).
* variant (required)	string	'green'	green teal turquoise blue indigo violet pink red orange amber gray dark	Personaliza a paleta de cores do gráfico. São 11 variantes implementadas: `green`, `teal`, `turquoise`, `blue`, `indigo`, `violet`, `pink`, `red`, `orange`, `amber`, `gray`, `dark`.
theme	string	''	blue indigo	Define o tema do gráfico.
* labels (required)	array	[]	--	Defina as labels do gráfico
colors	array	[]	--	Defina as cores do gráfico. Essa prop sobrescreve as shades da variante. A prop espera um Array de variantes de cor. Ex.: ['green', 'turquoise']

Eventos

Nome	Descrição
@chart-click