Skip to content

Commit 38c95e7

Browse files
gvreddy04gvreddy04
committed
Interop and other updates
1 parent 0759e01 commit 38c95e7

28 files changed

Lines changed: 661 additions & 175 deletions

‎BlazorExpress.ChartJS.Demo.RCL/Pages/Demos/LineChart/LineChartDocumentation.razor‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -86,8 +86,8 @@
8686
@code {
8787
private const string pageUrl = RouteConstants.Demos_LineChart;
8888
private const string pageTitle = "Line Chart";
89-
private const string pageDescription = "Explore interactive Blazor line chart examples and comprehensive documentation. Learn how to visualize time-series data, customize chart appearance, and implement advanced features using the <code>Blazor Line Chart</code> component.";
90-
private const string metaTitle = "Blazor Line Chart Demo & Examples";
91-
private const string metaDescription = "Explore interactive Blazor line chart examples and comprehensive documentation. Learn how to visualize time-series data, customize chart appearance, and implement advanced features using the Blazor Line Chart component.";
89+
private const string pageDescription = "Explore interactive <code>Blazor Line Chart</code> examples with source code. Learn how to visualize time-series data, customize chart appearance, and enhance your Blazor applications. Try live demos and discover practical usage scenarios for the Line Chart component.";
90+
private const string metaTitle = "Blazor Line Chart Examples & Interactive Demos";
91+
private const string metaDescription = "Explore interactive Blazor Line Chart examples with source code. Learn how to visualize time-series data, customize chart appearance, and enhance your Blazor applications. Try live demos and discover practical usage scenarios for the Line Chart component.";
9292
private const string imageUrl = "https://i.imgur.com/8b7jH0D.png"; // TODO: Update with the actual image URL for the Line Chart demo
9393
}

‎BlazorExpress.ChartJS.Demo.RCL/Pages/Demos/PieChart/PieChartDocumentation.razor‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -67,8 +67,8 @@
6767
@code {
6868
private const string pageUrl = RouteConstants.Demos_PieChart;
6969
private const string pageTitle = "Pie Chart";
70-
private const string pageDescription = "Explore interactive Blazor Pie Chart examples with source code. Learn how to visualize categorical data, customize chart appearance, and enhance your Blazor applications using the Pie Chart component. Try live demos and discover practical usage scenarios.";
70+
private const string pageDescription = "Explore interactive <code>Blazor Pie Chart</code> examples with source code. Learn how to visualize categorical data, customize chart appearance, and enhance your Blazor applications. Try live demos and discover practical usage scenarios for the Pie Chart component.";
7171
private const string metaTitle = "Blazor Pie Chart Examples & Interactive Demos";
72-
private const string metaDescription = "Explore interactive Blazor Pie Chart examples with source code. Learn how to visualize categorical data, customize chart appearance, and enhance your Blazor applications using the Pie Chart component. Try live demos and discover practical usage scenarios.";
72+
private const string metaDescription = "Explore interactive Blazor Pie Chart examples with source code. Learn how to visualize categorical data, customize chart appearance, and enhance your Blazor applications. Try live demos and discover practical usage scenarios for the Pie Chart component.";
7373
private const string imageUrl = "https://i.imgur.com/8b7jH0D.png"; // TODO: Update with the actual image URL for the Line Chart demo
7474
}

‎BlazorExpress.ChartJS.Demo.RCL/Pages/Demos/PolarAreaChart/PolarAreaChartDocumentation.razor‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -34,8 +34,8 @@
3434
@code {
3535
private const string pageUrl = RouteConstants.Demos_PolarAreaChart;
3636
private const string pageTitle = "PolarArea Chart";
37-
private const string pageDescription = "Explore interactive Blazor PolarArea Chart examples with source code. Learn how to visualize categorical data, customize chart appearance, and enhance your Blazor applications using the PolarAreaChart component. Try live demos and discover practical usage scenarios.";
38-
private const string metaTitle = "Blazor PolarArea Chart Examples & Interactive Demos";
39-
private const string metaDescription = "Explore interactive Blazor PolarArea Chart examples with source code. Learn how to visualize categorical data, customize chart appearance, and enhance your Blazor applications using the PolarArea Chart component. Try live demos and discover practical usage scenarios.";
37+
private const string pageDescription = "Explore interactive <code>Blazor Polar Area Chart</code> examples with source code. Learn how to visualize categorical data, customize chart appearance, and enhance your Blazor applications. Try live demos and discover practical usage scenarios for the Polar Area Chart component.";
38+
private const string metaTitle = "Blazor Polar Area Chart Examples & Interactive Demos";
39+
private const string metaDescription = "Explore interactive Blazor Polar Area Chart examples with source code. Learn how to visualize categorical data, customize chart appearance, and enhance your Blazor applications. Try live demos and discover practical usage scenarios for the Polar Area Chart component.";
4040
private const string imageUrl = "https://i.imgur.com/8b7jH0D.png"; // TODO: Update with the actual image URL for the Line Chart demo
4141
}

‎BlazorExpress.ChartJS.Demo.RCL/Pages/Demos/PolarAreaChart/PolarAreaChart_Demo_01_Examples.razor‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
<PolarAreaChart @ref="polarAreaChart" Width="600" />
22

33
<div class="mt-5">
4-
<button class="btn btn-primary btn-sm" @onclick="async () => await RandomizeAsync()"> Randomize </button>
5-
<button class="btn btn-primary btn-sm" @onclick="async () => await AddDatasetAsync()"> Add Dataset </button>
6-
<button class="btn btn-primary btn-sm" @onclick="async () => await AddDataAsync()">Add Data</button>
4+
<Button Color="ButtonColor.Primary" Size="ButtonSize.Small" @onclick="RandomizeAsync"> Randomize </Button>
5+
<Button Color="ButtonColor.Link" Size="ButtonSize.Small" @onclick="AddDatasetAsync"> Add Dataset </Button>
6+
<Button Color="ButtonColor.Info" Size="ButtonSize.Small" @onclick="AddDataAsync">Add Data</Button>
77
</div>
88

99
@code {

‎BlazorExpress.ChartJS.Demo.RCL/Pages/Demos/RadarChart/RadarChartDocumentation.razor‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,8 +33,8 @@
3333

3434
@code {
3535
private const string pageUrl = RouteConstants.Demos_RadarChart;
36-
private const string pageTitle = "PolarArea Chart";
37-
private const string pageDescription = "Explore interactive Blazor Radar Chart examples with source code. Learn how to visualize categorical data, customize chart appearance, and enhance your Blazor applications using the Radar Chart component. Try live demos and discover practical usage scenarios.";
36+
private const string pageTitle = "Radar Chart";
37+
private const string pageDescription = "Explore interactive <code>Blazor Radar Chart</code> examples with source code. Learn how to visualize categorical data, customize chart appearance, and enhance your Blazor applications using the Radar Chart component. Try live demos and discover practical usage scenarios.";
3838
private const string metaTitle = "Blazor Radar Chart Examples & Interactive Demos";
3939
private const string metaDescription = "Explore interactive Blazor Radar Chart examples with source code. Learn how to visualize categorical data, customize chart appearance, and enhance your Blazor applications using the Radar Chart component. Try live demos and discover practical usage scenarios.";
4040
private const string imageUrl = "https://i.imgur.com/8b7jH0D.png"; // TODO: Update with the actual image URL for the Line Chart demo

‎BlazorExpress.ChartJS.Demo.RCL/Pages/Demos/RadarChart/RadarChart_Demo_01_Examples.razor‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
<RadarChart @ref="radarChart" Width="600" />
22

33
<div class="mt-5">
4-
<Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="ButtonSize.Small" @onclick="async () => await RandomizeAsync()"> Randomize </Button>
5-
<Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="ButtonSize.Small" @onclick="async () => await AddDatasetAsync()"> Add Dataset </Button>
6-
<Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="ButtonSize.Small" @onclick="async () => await AddDataAsync()"> Add Data </Button>
4+
<Button Color="ButtonColor.Primary" Size="ButtonSize.Small" @onclick="RandomizeAsync"> Randomize </Button>
5+
<Button Color="ButtonColor.Link" Size="ButtonSize.Small" @onclick="AddDatasetAsync"> Add Dataset </Button>
6+
<Button Color="ButtonColor.Info" Size="ButtonSize.Small" @onclick="AddDataAsync"> Add Data </Button>
77
</div>
88

99
@code {

‎BlazorExpress.ChartJS.Demo.RCL/Pages/Demos/ScatterChart/ScatterChartDocumentation.razor‎

Lines changed: 49 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,58 @@
11
@attribute [Route(pageUrl)]
2+
@layout DemosMainLayout
23

3-
<PageHeroSection PageUrl="@pageUrl"
4-
Title="@title"
5-
Heading="@heading"
6-
Description="@description"
7-
ImageUrl="@imageUrl" />
4+
<PageMetaTags PageUrl="@pageUrl" Title="@metaTitle" Description="@metaDescription" ImageUrl="@imageUrl" />
85

9-
<Prerequisites PageUrl="@pageUrl" />
6+
<PageHero Title="@pageTitle">
7+
<SubTitleTemplate>
8+
@((MarkupString)pageDescription)
9+
</SubTitleTemplate>
10+
</PageHero>
11+
12+
<DocsLink Href="@RouteConstants.Docs_ScatterChart" />
1013

11-
<Section Size="HeadingSize.H4" Text="How it works" PageUrl="@pageUrl" HashTagName="how-it-works" />
12-
<div class="mb-3">
13-
In the following example, a categorical 12-color palette is used.
14-
</div>
15-
<BlazorBootstrap.Callout Heading="TIP" Color="CalloutColor.Success">
16-
For data visualization, you can use the predefined palettes <code>ColorUtility.CategoricalTwelveColors</code> for a 12-color palette and <code>ColorUtility.CategoricalSixColors</code> for a 6-color palette.
17-
These palettes offer a range of distinct and visually appealing colors that can be applied to represent different categories or data elements in your visualizations.
18-
</BlazorBootstrap.Callout>
14+
<Prerequisites PageUrl="@pageUrl" />
1915

20-
<Demo Type="typeof(ScatterChart_Demo_01_Examples)" Tabs="true" />
16+
<Section Class="p-0" Size="HeadingSize.H4" Name="How it works" PageUrl="@pageUrl" Link="how-it-works">
17+
<Block>
18+
The <strong>Scatter Chart</strong> component visualizes individual data points as (X, Y) coordinates, making it ideal for displaying relationships or distributions between two numeric variables.
19+
<br /><br />
20+
<strong>How to use:</strong>
21+
<ul>
22+
<li>Add the <code>ScatterChart</code> component to your page and set its dimensions (e.g., <code>Width="560"</code>, <code>Height="480"</code>).</li>
23+
<li>Prepare your chart data by creating one or more <code>ScatterChartDataset</code> objects, each containing a list of <code>ScatterChartDataPoint</code> instances with X and Y values.</li>
24+
<li>Customize the appearance of each dataset using properties like <code>BackgroundColor</code>, <code>BorderColor</code>, and <code>BorderWidth</code>.</li>
25+
<li>Configure chart options using the <code>ScatterChartOptions</code> object as needed.</li>
26+
<li>Initialize the chart in <code>OnAfterRenderAsync</code> by calling <code>scatterChart.InitializeAsync(chartData, scatterChartOptions)</code>.</li>
27+
<li>Refer to the demo code below for practical examples of data preparation, dataset customization, and chart initialization.</li>
28+
</ul>
29+
This demo shows how to set up a scatter chart, bind your data, and customize the chart's appearance to fit your application's needs.
30+
</Block>
31+
<Demo Type="typeof(ScatterChart_Demo_01_Examples)" Tabs="true" />
32+
</Section>
2133

22-
<Section Size="HeadingSize.H4" Text="How it works" PageUrl="@pageUrl" HashTagName="how-it-works" />
23-
<div class="mb-3">
24-
In the following example, a categorical 12-color palette is used.
25-
</div>
26-
<BlazorBootstrap.Callout Heading="TIP" Color="CalloutColor.Success">
27-
For data visualization, you can use the predefined palettes <code>ColorUtility.CategoricalTwelveColors</code> for a 12-color palette and <code>ColorUtility.CategoricalSixColors</code> for a 6-color palette.
28-
These palettes offer a range of distinct and visually appealing colors that can be applied to represent different categories or data elements in your visualizations.
29-
</BlazorBootstrap.Callout>
30-
<Demo Type="typeof(ScatterChart_Demo_02_Dynamic_Data)" Tabs="true" />
34+
<Section Class="p-0" Size="HeadingSize.H4" Name="Dynamic data" PageUrl="@pageUrl" Link="dynamic-data">
35+
<Block>
36+
The <strong>Scatter Chart</strong> component supports dynamic data updates, allowing you to add, remove, or modify data points and datasets at runtime. This is useful for visualizing real-time data or enabling interactive data exploration.
37+
<br /><br />
38+
<strong>How to use:</strong>
39+
<ul>
40+
<li>Add the <code>ScatterChart</code> component to your page and set its <code>Width</code> and <code>Height</code> as needed.</li>
41+
<li>Prepare your chart data using one or more <code>ScatterChartDataset</code> objects, each containing a list of <code>ScatterChartDataPoint</code> (with X and Y values).</li>
42+
<li>Implement methods to update your data dynamically, such as adding new points, randomizing values, or modifying existing datasets.</li>
43+
<li>After updating the data, call <code>scatterChart.UpdateAsync(chartData, scatterChartOptions)</code> to refresh the chart and reflect the changes.</li>
44+
<li>Refer to the demo code below for practical examples of dynamic data manipulation and chart updates in a Blazor application.</li>
45+
</ul>
46+
This demo demonstrates how to work with dynamic data in a scatter chart, enabling interactive and real-time data visualizations in your Blazor projects.
47+
</Block>
48+
<Demo Type="typeof(ScatterChart_Demo_02_Dynamic_Data)" Tabs="true" />
49+
</Section>
3150

3251
@code {
33-
private const string pageUrl = "/charts/scatter-chart";
34-
private const string title = "Blazor Scatter Chart";
35-
private const string heading = "Blazor Scatter Chart";
36-
private const string description = "A Blazor Bootstrap scatter chart components are based on basic line charts with the x-axis changed to a linear axis. To use a scatter chart, data must be passed as objects containing X and Y properties.";
37-
private const string imageUrl = "https://i.imgur.com/MSFDsSo.png";
52+
private const string pageUrl = RouteConstants.Demos_ScatterChart;
53+
private const string pageTitle = "Scatter Chart";
54+
private const string pageDescription = "The <code>Blazor Scatter Chart</code> component displays data values as vertical bars, making it easy to compare multiple data sets or visualize trends over time.";
55+
private const string metaTitle = "Blazor Scatter Chart";
56+
private const string metaDescription = "The Blazor Scatter Chart component displays data values as vertical bars, making it easy to compare multiple data sets or visualize trends over time.";
57+
private const string imageUrl = "https://i.imgur.com/IX3bajc.png"; // TODO: update with the actual image URL for the Bar Chart demo
3858
}

‎BlazorExpress.ChartJS.Demo.RCL/Pages/Demos/ScatterChart/ScatterChart_Demo_01_Examples.razor‎

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
1-
<ScatterChart @ref="scatterChart" Width="560" Height="480" />
1+
<div style="overflow-x: auto;">
2+
<ScatterChart @ref="scatterChart" Width="560" Height="480" />
3+
</div>
24

35
@code {
46
private ScatterChart scatterChart = default!;
@@ -10,14 +12,14 @@
1012
protected override void OnInitialized()
1113
{
1214
chartData = new ChartData
13-
{
14-
Datasets = new()
15+
{
16+
Datasets = new()
1517
{
1618
GetRandomRadarChartDataset(0),
1719
GetRandomRadarChartDataset(1),
1820
GetRandomRadarChartDataset(2)
1921
}
20-
};
22+
};
2123

2224
scatterChartOptions = new() { };
2325
}
@@ -38,14 +40,14 @@
3840
var c = ColorUtility.CategoricalTwelveColors[recordIndex].ToColor();
3941

4042
return new ScatterChartDataset
41-
{
42-
Label = $"Team {recordIndex + 1}",
43-
Data = GetRandomData(),
44-
BackgroundColor = c.ToRgbaString(), // RGBA
45-
BorderColor = c.ToRgbString(), // RGB
46-
BorderWidth = 2,
47-
HoverBorderWidth = 4,
48-
};
43+
{
44+
Label = $"Team {recordIndex + 1}",
45+
Data = GetRandomData(),
46+
BackgroundColor = c.ToRgbaString(), // RGBA
47+
BorderColor = c.ToRgbString(), // RGB
48+
BorderWidth = 2,
49+
HoverBorderWidth = 4,
50+
};
4951
}
5052

5153
private List<ScatterChartDataPoint?> GetRandomData()

‎BlazorExpress.ChartJS.Demo.RCL/Pages/Demos/ScatterChart/ScatterChart_Demo_02_Dynamic_Data.razor‎

Lines changed: 19 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
<ScatterChart @ref="scatterChart" />
22

3+
34
<div class="mt-5">
4-
<Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="ButtonSize.Small" @onclick="async () => await RandomizeAsync()"> Randomize </Button>
5-
<Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="ButtonSize.Small" @onclick="async () => await AddDatasetAsync()"> Add Dataset </Button>
6-
<Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="ButtonSize.Small" @onclick="async () => await AddDataAsync()"> Add Data </Button>
7-
<Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="ButtonSize.Small" @onclick="async () => await ShowHorizontalLineChartAsync()"> Horizontal Line Chart </Button>
8-
<Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="ButtonSize.Small" @onclick="async () => await ShowVerticalLineChartAsync()"> Vertical Line Chart </Button>
5+
<Button Color="ButtonColor.Primary" Size="ButtonSize.Small" @onclick="RandomizeAsync"> Randomize </Button>
6+
<Button Color="ButtonColor.Link" Size="ButtonSize.Small" @onclick="AddDatasetAsync"> Add Dataset </Button>
7+
<Button Color="ButtonColor.Info" Size="ButtonSize.Small" @onclick="AddDataAsync"> Add Data </Button>
8+
<Button Color="ButtonColor.Success" Size="ButtonSize.Small" @onclick="ShowHorizontalLineChartAsync"> Horizontal Line Chart </Button>
9+
<Button Color="ButtonColor.Warning" Size="ButtonSize.Small" @onclick="ShowVerticalLineChartAsync"> Vertical Line Chart </Button>
910
</div>
1011

1112
@code {
@@ -21,8 +22,9 @@
2122
protected override void OnInitialized()
2223
{
2324
chartData = new ChartData { Labels = GetDefaultDataLabels(6), Datasets = GetDefaultDataSets(3) };
24-
scatterChartOptions = new() {
25-
Responsive = true,
25+
scatterChartOptions = new()
26+
{
27+
Responsive = true,
2628
Interaction = new Interaction { Mode = InteractionMode.Index },
2729
};
2830
}
@@ -125,16 +127,16 @@
125127
datasetsCount += 1;
126128

127129
return new ScatterChartDataset
128-
{
129-
Label = $"Team {datasetsCount}",
130-
Data = GetRandomData(),
131-
BackgroundColor = c.ToRgbaString(), // RGBA
132-
BorderColor = c.ToRgbString(), // RGB
133-
BorderWidth = 2,
134-
Fill = true,
135-
HoverBorderWidth = 4,
136-
PointHoverRadius = new List<double>{6},
137-
};
130+
{
131+
Label = $"Team {datasetsCount}",
132+
Data = GetRandomData(),
133+
BackgroundColor = c.ToRgbaString(), // RGBA
134+
BorderColor = c.ToRgbString(), // RGB
135+
BorderWidth = 2,
136+
Fill = true,
137+
HoverBorderWidth = 4,
138+
PointHoverRadius = new List<double> { 6 },
139+
};
138140
}
139141

140142
private List<ScatterChartDataPoint?> GetRandomData()

‎BlazorExpress.ChartJS.Demo.RCL/Shared/DoYouKnow.razor‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<div class="is-size-5 has-text-weight-semibold mb-2"><BootstrapIcon Name="BootstrapIconName.Lightbulb" /> DO YOU KNOW?</div>
77
<div>
88
This demo website is built using the <strong><a href="//www.nuget.org/packages/blazorexpress.bulma/" target="_blank">BlazorExpress.Bulma</a></strong> library and published on the Azure Web App.
9-
See our source code on <a href="@githubUrl" target="_blank">GitHub</a>.
9+
See our source code on <a href="//github.com/BlazorExpress/BlazorExpress.Bulma" target="_blank">GitHub</a>.
1010
</div>
1111
</MessageBody>
1212
</Message>

0 commit comments

Comments
 (0)