Paradas

O módulo de gráficos PowerPortalsPro oferece gráficos interativos e conscientes de temas, construídos sobre Chart.js. Os gráficos se adaptam automaticamente ao tema ativo da interface Fluent (modo claro/escuro, cores de destaque), carregam dados diretamente do Dataverse via consultas agregadas do FetchXML e suportam eventos de clique que permitem aos usuários analisar os dados subjacentes.

Tipos de Gráficos

Cada tipo de gráfico é renderizado pelo FluentUIChart componente (ou pelo DataverseChart wrapper de conveniência) com o Type parâmetro definido para o valor de enum desejado ChartType .

  • Gráfico de barras — barras verticais para comparar categorias. Suporta modo empilhado e multi-série.
  • Gráfico de Linhas — pontos conectados para tendências ao longo do tempo. Suporta comparações ano a ano.
  • Gráfico de Pizza — fatias proporcionais de uma única medida entre categorias.
  • Quadro de Donuts — igual a torta com centro oco para um visual mais limpo.
  • Mapa de Radar — comparação multidimensional em uma grade radial.
  • Mapa de Área Polar — como torta, mas o raio de cada segmento é proporcional ao seu valor.
  • Gráfico de Funil — visualizar a redução progressiva por etapas, estreitando de cima para baixo.

Principais Recursos

Todos os tipos de gráficos compartilham um conjunto comum de capacidades:

  • Consciente de temas — lê tokens de design de interface fluente para texto, linhas de grade e cores de destaque; Retematização automaticamente quando o usuário alterna o modo claro/escuro.
  • Fontes de dados do Dataverse — dados do gráfico de carga do Dataverse com uma única LoadAsync chamada. Não é necessário usar FetchXML manual para cenários comuns.
  • Consultas agregadas — Soma, Contagem, Coluna Conte, Média, Mínima, Máxima via AggregateDataverseChartDataSource.
  • Clique em interatividade — OnElementClick dispara um ChartClickEventArgs com índice de conjunto de dados, índice de dados, etiqueta, valor e o original IDataPoint para correspondência de padrões.
  • Agrupamento de data — Dia, Semana, Mês, Trimestre, Ano e agrupamentos combinados como MêsAndAno ou TrimestreAndAno.
  • Ano a ano — SeriesDateGrouping divide a mesma coluna de data em várias séries por intervalos de tempo diferentes.
  • Agrupamento de entidades vinculadas — agrupar ou dividir por uma coluna em uma tabela relacionada via GroupByLinkedEntity / SeriesLinkedEntity com aninhamento ilimitado.
  • Filtragem baseada em visualizações — passe ViewIds e DefaultViewId siga DataverseChart para mostrar um menu suspenso que permite aos usuários alternar entre as visualizações salvas do Dataverse. As condições de filtro da visualização selecionada são automaticamente incorporadas à consulta agregada.
  • Gráficos empilhados — Stacked="true" empilham conjuntos de dados uns sobre os outros.
  • Título e legenda — Title para um título acima do gráfico; LegendPosition para topo/baixo/esquerda/direita/oculto.
  • Formatação de valores — YAxisPrefix/YAxisSuffix e XAxisPrefix/XAxisSuffix para moeda, porcentagens e rótulos personalizados.
  • Exporte como imagem — baixe o gráfico como PNG com um clique.
  • Botão de atualizar — recarregue dados do Dataverse sem sair da página.
  • Borda temática — borda arredondada opcional usando tokens de design Fluent via ShowBorder.

Fontes de Dados

Três classes de fonte de dados cobrem o espectro do controle total à configuração zero:

  • DataverseChartDataSource — aceita FetchXML bruto com mapeamentos explícitos de colunas. Máxima flexibilidade para consultas complexas.
  • AggregateDataverseChartDataSource — definem propriedades como TableName, GroupByColumn, AggregateColumn, e Aggregate. A fonte de dados constrói o FetchXML automaticamente.
  • ViewDataverseChartDataSource — resolve FetchXML a partir de uma visualização Dataverse salva. Defina LabelColumn e ValueColumn indique quais colunas mapeiam para rótulos e valores.

Começando

A maneira mais rápida de adicionar um gráfico é o DataverseChart componente de conveniência com um AggregateDataverseChartDataSource. Veja a demonstração do Gráfico de Barras para um guia completo, ou a Referência da API para documentação sobre cada classe e propriedade.