components.PowerPortalsPro.Demo.Client.Customizations.Pages.Charts.BarChart.BarChartDemoPage.description
components.PowerPortalsPro.Demo.Client.Customizations.Pages.Charts.BarChart.BarChartDemoPage.main-demo-description
import { ChartType, type ChartDataset } from '@powerportalspro/react-charts';
import { FluentUIChart } from '@powerportalspro/react-fluent';
const LABELS = ['Jan', 'Feb', 'Mar'];
const DATASETS: ChartDataset[] = [
{
label: 'Sales',
data: [{ value: 65 }, { value: 59 }, { value: 80 }],
},
{
label: 'Returns',
data: [{ value: 12 }, { value: 19 }, { value: 8 }],
},
];
export function MyChart() {
return <FluentUIChart type={ChartType.Bar} labels={LABELS} datasets={DATASETS} />;
}<FluentUIChart Type="ChartType.Bar"
Labels="_labels"
Datasets="_datasets" />
@code {
private List<string> _labels = new() { "Jan", "Feb", "Mar" };
private List<ChartDataset> _datasets = new()
{
new ChartDataset
{
Label = "Sales",
Data = new List<DataPoint>
{
new DataPoint(65), new DataPoint(59), new DataPoint(80),
},
},
new ChartDataset
{
Label = "Returns",
Data = new List<DataPoint>
{
new DataPoint(12), new DataPoint(19), new DataPoint(8),
},
},
};
}components.PowerPortalsPro.Demo.Client.Customizations.Pages.Charts.BarChart.BarChartDemoPage.theme-aware-description
components.PowerPortalsPro.Demo.Client.Customizations.Pages.Charts.BarChart.BarChartDemoPage.auto-fill-description
components.PowerPortalsPro.Demo.Client.Customizations.Pages.Charts.BarChart.BarChartDemoPage.click-description
import {
ChartType,
type BaseDataPoint,
type ChartClickEventArgs,
type ChartDataset,
} from '@powerportalspro/react-charts';
import { FluentUIChart } from '@powerportalspro/react-fluent';
// components.PowerPortalsPro.Demo.Client.Customizations.Pages.Charts.BarChart.BarChartDemoPage.snippet-click-react-comment-line1
// components.PowerPortalsPro.Demo.Client.Customizations.Pages.Charts.BarChart.BarChartDemoPage.snippet-click-react-comment-line2
// components.PowerPortalsPro.Demo.Client.Customizations.Pages.Charts.BarChart.BarChartDemoPage.snippet-click-react-comment-line3
interface SalesDataPoint extends BaseDataPoint {
region: string;
}
const DATASETS: ChartDataset<SalesDataPoint>[] = [/* components.PowerPortalsPro.Demo.Client.Customizations.Pages.Charts.BarChart.BarChartDemoPage.snippet-click-react-placeholder-comment */];
function onBarClicked(args: ChartClickEventArgs<SalesDataPoint>) {
const region = args.dataPoint?.region ?? '';
console.log(`${args.label}: ${args.value} (${region})`);
}
export function MyChart() {
return (
<FluentUIChart<SalesDataPoint>
type={ChartType.Bar}
labels={LABELS}
datasets={DATASETS}
onElementClick={onBarClicked}
/>
);
}<FluentUIChart Type="ChartType.Bar"
Labels="_labels"
Datasets="_datasets"
OnElementClick="OnBarClicked" />
@code {
private class SalesDataPoint : DataPoint
{
public SalesDataPoint(double value) : base(value) { }
public string Region { get; set; } = string.Empty;
}
private void OnBarClicked(ChartClickEventArgs args)
{
// components.PowerPortalsPro.Demo.Client.Customizations.Pages.Charts.BarChart.BarChartDemoPage.snippet-click-pattern-comment
if (args.DataPoint is SalesDataPoint sdp)
{
Console.WriteLine($"{args.Label}: {sdp.Value} ({sdp.Region})");
}
}
}components.PowerPortalsPro.Demo.Client.Customizations.Pages.Charts.BarChart.BarChartDemoPage.title-description
<DataverseChart dataSource={source}
type={ChartType.Bar}
title="components.PowerPortalsPro.Demo.Client.Customizations.Pages.Charts.BarChart.BarChartDemoPage.snippet-revenue-by-year-title" /><DataverseChart Source="_source"
Type="ChartType.Bar"
Title="components.PowerPortalsPro.Demo.Client.Customizations.Pages.Charts.BarChart.BarChartDemoPage.snippet-revenue-by-year-title" />components.PowerPortalsPro.Demo.Client.Customizations.Pages.Charts.BarChart.BarChartDemoPage.stacked-description
<DataverseChart dataSource={source}
type={ChartType.Bar}
stacked /><DataverseChart Source="_source"
Type="ChartType.Bar"
Stacked="true" />components.PowerPortalsPro.Demo.Client.Customizations.Pages.Charts.BarChart.BarChartDemoPage.legend-description
// components.PowerPortalsPro.Demo.Client.Customizations.Pages.Charts.BarChart.BarChartDemoPage.snippet-legend-position-comment
<DataverseChart dataSource={source}
legendPosition={ChartLegendPosition.Bottom} />
// components.PowerPortalsPro.Demo.Client.Customizations.Pages.Charts.BarChart.BarChartDemoPage.snippet-legend-hide-comment
<DataverseChart dataSource={source}
legendPosition={ChartLegendPosition.Hidden} /><!-- components.PowerPortalsPro.Demo.Client.Customizations.Pages.Charts.BarChart.BarChartDemoPage.snippet-legend-position-comment -->
<DataverseChart Source="_source"
LegendPosition="ChartLegendPosition.Bottom" />
<!-- components.PowerPortalsPro.Demo.Client.Customizations.Pages.Charts.BarChart.BarChartDemoPage.snippet-legend-hide-comment -->
<DataverseChart Source="_source"
LegendPosition="ChartLegendPosition.Hidden" />components.PowerPortalsPro.Demo.Client.Customizations.Pages.Charts.BarChart.BarChartDemoPage.dataverse-description
import {
AggregateDataverseChartDataSource,
AggregateType,
ChartDateGrouping,
ChartType,
type ChartClickEventArgs,
} from '@powerportalspro/react-charts';
import { DataverseChart } from '@powerportalspro/react-fluent';
import { useMemo } from 'react';
export function MyChart() {
// components.PowerPortalsPro.Demo.Client.Customizations.Pages.Charts.BarChart.BarChartDemoPage.snippet-dataverse-usememo-comment-line1
// components.PowerPortalsPro.Demo.Client.Customizations.Pages.Charts.BarChart.BarChartDemoPage.snippet-dataverse-usememo-comment-line2
const source = useMemo(
() =>
new AggregateDataverseChartDataSource({
tableName: 'opportunity',
groupByColumn: 'actualclosedate',
groupByDateGrouping: ChartDateGrouping.Year,
aggregateColumn: 'estimatedvalue',
aggregate: AggregateType.Sum,
seriesColumn: 'statecode',
filterXml:
"<filter><condition attribute='statecode' operator='ne' value='0' /></filter>",
}),
[],
);
const onBarClicked = (args: ChartClickEventArgs) => {
// components.PowerPortalsPro.Demo.Client.Customizations.Pages.Charts.BarChart.BarChartDemoPage.snippet-dataverse-args-comment-react
};
return (
<DataverseChart
dataSource={source}
type={ChartType.Bar}
title="Estimated Revenue by Year (Stacked)"
stacked
yAxisPrefix="$"
onElementClick={onBarClicked}
/>
);
}<DataverseChart Source="_source"
Type="ChartType.Bar"
Title="Estimated Revenue by Year (Stacked)"
Stacked="true"
YAxisPrefix="$"
OnElementClick="OnBarClicked" />
@code {
private readonly AggregateDataverseChartDataSource _source = new()
{
TableName = "opportunity",
GroupByColumn = "actualclosedate",
GroupByDateGrouping = ChartDateGrouping.Year,
AggregateColumn = "estimatedvalue",
Aggregate = AggregateType.Sum,
SeriesColumn = "statecode",
FilterXml = "<filter><condition attribute='statecode' operator='ne' value='0' /></filter>",
};
private void OnBarClicked(ChartClickEventArgs args)
{
// components.PowerPortalsPro.Demo.Client.Customizations.Pages.Charts.BarChart.BarChartDemoPage.snippet-dataverse-args-comment-razor
}
}components.PowerPortalsPro.Demo.Client.Customizations.Pages.Charts.BarChart.BarChartDemoPage.dataverse-demo-description
components.PowerPortalsPro.Demo.Client.Customizations.Pages.Charts.BarChart.BarChartDemoPage.view-filter-description
import {
AggregateDataverseChartDataSource,
AggregateType,
ChartDateGrouping,
ChartType,
} from '@powerportalspro/react-charts';
import { DataverseChart } from '@powerportalspro/react-fluent';
import { useMemo } from 'react';
const VIEW_IDS = [
'...', // components.PowerPortalsPro.Demo.Client.Customizations.Pages.Charts.BarChart.BarChartDemoPage.snippet-view-won-comment
'...', // components.PowerPortalsPro.Demo.Client.Customizations.Pages.Charts.BarChart.BarChartDemoPage.snippet-view-all-comment
];
const DEFAULT_VIEW_ID = VIEW_IDS[0];
export function MyChart() {
const source = useMemo(
() =>
new AggregateDataverseChartDataSource({
tableName: 'opportunity',
groupByColumn: 'actualclosedate',
groupByDateGrouping: ChartDateGrouping.MonthAndYear,
aggregateColumn: 'estimatedvalue',
aggregate: AggregateType.Sum,
}),
[],
);
return (
<DataverseChart
dataSource={source}
type={ChartType.Bar}
viewIds={VIEW_IDS}
defaultViewId={DEFAULT_VIEW_ID}
yAxisPrefix="$"
/>
);
}<DataverseChart Source="_source"
Type="ChartType.Bar"
ViewIds="_viewIds"
DefaultViewId="@_defaultViewId"
YAxisPrefix="$" />
@code {
private static readonly List<Guid> _viewIds = new()
{
new Guid("..."), // components.PowerPortalsPro.Demo.Client.Customizations.Pages.Charts.BarChart.BarChartDemoPage.snippet-view-won-comment
new Guid("..."), // components.PowerPortalsPro.Demo.Client.Customizations.Pages.Charts.BarChart.BarChartDemoPage.snippet-view-all-comment
};
private static readonly Guid _defaultViewId = _viewIds[0];
private readonly AggregateDataverseChartDataSource _source = new()
{
TableName = "opportunity",
GroupByColumn = "actualclosedate",
GroupByDateGrouping = ChartDateGrouping.MonthAndYear,
AggregateColumn = "estimatedvalue",
Aggregate = AggregateType.Sum,
};
}components.PowerPortalsPro.Demo.Client.Customizations.Pages.Charts.BarChart.BarChartDemoPage.view-filter-demo-description
components.PowerPortalsPro.Demo.Client.Customizations.Pages.Charts.BarChart.BarChartDemoPage.linked-entity-description
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: 'opportunity',
groupByColumn: 'industrycode',
groupByLinkedEntity: {
tableName: 'account',
from: 'accountid',
to: 'customerid',
},
aggregateColumn: 'estimatedvalue',
aggregate: AggregateType.Sum,
}),
[],
);
return (
<DataverseChart
dataSource={source}
type={ChartType.Bar}
title="components.PowerPortalsPro.Demo.Client.Customizations.Pages.Charts.BarChart.BarChartDemoPage.snippet-revenue-by-industry-title"
yAxisPrefix="$"
/>
);
}<DataverseChart Source="_source"
Type="ChartType.Bar"
Title="components.PowerPortalsPro.Demo.Client.Customizations.Pages.Charts.BarChart.BarChartDemoPage.snippet-revenue-by-industry-title"
YAxisPrefix="$" />
@code {
private readonly AggregateDataverseChartDataSource _source = new()
{
TableName = "opportunity",
GroupByColumn = "industrycode",
GroupByLinkedEntity = new ChartLinkedEntity
{
TableName = "account",
From = "accountid",
To = "customerid",
},
AggregateColumn = "estimatedvalue",
Aggregate = AggregateType.Sum,
};
}components.PowerPortalsPro.Demo.Client.Customizations.Pages.Charts.BarChart.BarChartDemoPage.linked-entity-fetchxml-label
<fetch aggregate="true">
<entity name="opportunity">
<attribute name="estimatedvalue" alias="estimatedvalue" aggregate="sum" />
<link-entity name="account" from="accountid" to="customerid" link-type="inner">
<attribute name="industrycode" alias="industrycode" groupby="true" />
<order alias="industrycode" />
</link-entity>
</entity>
</fetch>
components.PowerPortalsPro.Demo.Client.Customizations.Pages.Charts.BarChart.BarChartDemoPage.linked-entity-demo-description
components.PowerPortalsPro.Demo.Client.Customizations.Pages.Charts.BarChart.BarChartDemoPage.see-also