Uma coluna numérica geralmente forma uma barra para cada valor que contém — um gráfico de idade com uma barra para 23, outra para 24 e assim por diante. Agrupado em intervalos, ele forma uma barra para cada faixa da coluna: 20 – 24, 25 – 29, 30 – 34. Define GroupByRangeSize (groupByRangeSize no React) para as barras, ou SeriesRangeSize (seriesRangeSize) para dividir cada barra em um conjunto de dados para cada intervalo. É o mesmo agrupamento que as linhas de uma grade recebem de RangeSize, então um gráfico e uma grade ao lado agrupam uma coluna igualmente.
O Dataverse agrupa um agregado por um valor, nunca por um intervalo de valores, então o gráfico pede uma linha para cada valor — ou cada par de valores, quando uma série os divide — e o servidor soma as linhas em seus intervalos antes que o gráfico as desenhe. Um intervalo começa em múltiplo do seu tamanho: com tamanho 5, 23 cai em 20 – 24.
20 – 24. Uma coluna com decimais, ou um tamanho com eles, lê-se do início até abaixo do final, 1.0 to under 1.5, com tantos decimais quanto a coluna manter. Defina GroupByFormat ou SeriesFormat para mostrar os finais em um formato próprio, como N1.Ajustado GroupByRangeSize em e AggregateDataverseChartDataSource ao tamanho de cada faixa. As barras voltam na ordem de seus alcances, mais baixas primeiro, com a barra dos discos sem valor liderando-as.
import {
AggregateDataverseChartDataSource,
AggregateType,
ChartType,
} from '@powerportalspro/react-charts';
import { DataverseChart } from '@powerportalspro/react-fluent';
import { useMemo } from 'react';
export function MyChart() {
const source = useMemo(
() =>
new AggregateDataverseChartDataSource({
tableName: 'contact',
groupByColumn: 'ppp_age',
groupByRangeSize: 5, // 0 – 4, 5 – 9, 10 – 14 …
aggregateColumn: 'contactid',
aggregate: AggregateType.Count,
}),
[],
);
return (
<DataverseChart
dataSource={source}
type={ChartType.Bar}
title="Contatos por Idade"
/>
);
}<DataverseChart Source="_source"
Type="ChartType.Bar"
Title="Contatos por Idade" />
@code {
private readonly AggregateDataverseChartDataSource _source = new()
{
TableName = "contact",
GroupByColumn = "ppp_age",
GroupByRangeSize = 5, // 0 – 4, 5 – 9, 10 – 14 …
AggregateColumn = "contactid",
Aggregate = AggregateType.Count,
};
}Os contatos contados pela idade. Escolha quantos anos cada barra cobre, ou uma barra para cada idade. Cada escolha constrói uma nova fonte de dados, e o gráfico carrega novamente porque a fonte pede outra coisa.
Definido SeriesRangeSize quando a coluna em intervalos é a série em vez das barras: o gráfico agrupa suas barras por GroupByColumn e divide cada uma em um conjunto de dados para cada faixa de SeriesColumn. Empilhadas, cada barra mostra como seu total se divide entre os intervalos. Ambas podem estar em intervalos ao mesmo tempo — idade ao longo do eixo, faixas salariais empilhadas em cada barra.
const source = useMemo(
() =>
new AggregateDataverseChartDataSource({
tableName: 'contact',
groupByColumn: 'gendercode',
seriesColumn: 'ppp_age',
seriesRangeSize: 20, // um conjunto de dados para 0 – 19, 20 – 39, 40 – 59 ...
aggregateColumn: 'contactid',
aggregate: AggregateType.Count,
}),
[],
);
return <DataverseChart dataSource={source} type={ChartType.Bar} stacked />;<DataverseChart Source="_source"
Type="ChartType.Bar"
Stacked="true" />
@code {
private readonly AggregateDataverseChartDataSource _source = new()
{
TableName = "contact",
GroupByColumn = "gendercode",
SeriesColumn = "ppp_age",
SeriesRangeSize = 20, // um conjunto de dados para 0 – 19, 20 – 39, 40 – 59 ...
AggregateColumn = "contactid",
Aggregate = AggregateType.Count,
};
}Os contatos contados por gênero, cada barra empilhada por faixa etária. Escolha quantos anos cada faixa cobre; a legenda lista os intervalos, o menor primeiro.
Registros sem valor na coluna são uma barra própria, rotulada (Blank) — ou, em uma série, um (Blank) conjunto de dados. Isso vale para qualquer agrupamento, não apenas para intervalos. Definir GroupByIncludeBlank ou SeriesIncludeBlank para false deixá-los fora do gráfico.
new AggregateDataverseChartDataSource({
tableName: 'contact',
groupByColumn: 'ppp_age',
groupByRangeSize: 10,
groupByIncludeBlank: false, // sem barra (em branco)
aggregateColumn: 'contactid',
aggregate: AggregateType.Count,
});_source = new AggregateDataverseChartDataSource
{
TableName = "contact",
GroupByColumn = "ppp_age",
GroupByRangeSize = 10,
GroupByIncludeBlank = false, // sem barra (em branco)
AggregateColumn = "contactid",
Aggregate = AggregateType.Count,
};Um gráfico que compartilha a ViewDataSource com uma grade agrupa em intervalos da mesma forma: definido RangeSize em suas agregações GroupBy (ou Series). Clicando em uma barra destaca cada linha da grade cujo valor está no intervalo daquela barra, e clicando na (Blank) barra destaca as linhas sem valor.
const dataSource = useViewDataSource({
viewId,
aggregations: [
{
groupBy: { column: 'ppp_age', rangeSize: 10 },
aggregateColumn: 'contactid',
aggregate: AggregateType.Count,
},
],
});_dataSource = new ViewDataSource(GridService, new ViewDataSourceOptions
{
ViewId = _viewId,
Aggregations =
[
new ChartAggregation
{
GroupBy = new ChartGrouping { Column = "ppp_age", RangeSize = 10 },
AggregateColumn = "contactid",
Aggregate = AggregateType.Count,
},
],
});Um gráfico em intervalos lê até 10.000 linhas de valores — valores distintos, ou pares de valores quando uma série os divide. Um com mais valores mostra um erro dizendo isso, em vez de um gráfico incompleto. Configurado RangeGroupingOptions.MaximumRangedValues na inicialização do host para alterar esse limite para cada grade e gráfico no portal. Um gráfico pode pedir um limite inferior próprio com MaximumRangedValues (maximumRangedValues); um que peça mais do que o do portal é mantido no do portal.
// Este gráfico mostra menos
new AggregateDataverseChartDataSource({
tableName: 'contact',
groupByColumn: 'ppp_age',
groupByRangeSize: 5,
aggregateColumn: 'contactid',
aggregate: AggregateType.Count,
maximumRangedValues: 2000,
});// Program.cs — Cada grade e gráfico no portal
builder.Services.Configure<RangeGroupingOptions>(o => o.MaximumRangedValues = 20_000);
// Este gráfico mostra menos
_source = new AggregateDataverseChartDataSource
{
TableName = "contact",
GroupByColumn = "ppp_age",
GroupByRangeSize = 5,
AggregateColumn = "contactid",
Aggregate = AggregateType.Count,
MaximumRangedValues = 2_000,
};O Dataverse retorna no máximo 5.000 linhas por consulta, então após 4.999 os valores são lidos em 5.000 de cada vez. Aumentar o limite tem esses custos para cada grade ou gráfico cuja coluna tenha esse número de valores:
SplitOverRecordLimit, o que multiplica novamente as solicitações.Uma coluna com tantos valores geralmente é melhor agrupada em intervalos maiores, que lê as mesmas linhas mas desenha menos barras, ou filtrada primeiro, que lê menos linhas.
Veja também