Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Demos and Docs update #746

Merged
merged 5 commits into from
Jun 8, 2024
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"version": "3.0.0-preview.1",
"release": {
"short_description": "Grid, Modal, Sidebar, Sidebar2 updates, and other improvements!!!"
"short_description": "Charts, Grid, Modal, Sidebar, Sidebar2 updates, and other improvements!!!"
},
"urls": {
"docs": "//docs.blazorbootstrap.com/docs/getting-started/blazor-webassembly",
Original file line number Diff line number Diff line change
@@ -42,6 +42,9 @@
<SectionHeading Size="HeadingSize.H4" Text="Data labels" PageUrl="@pageUrl" HashTagName="data-labels" />
<Demo Type="typeof(LineChart_Demo_04_Datalabels)" Tabs="true" />

<SectionHeading Size="HeadingSize.H4" Text="Tick Configuration" PageUrl="@pageUrl" HashTagName="tick-configuration" />
<Demo Type="typeof(LineChart_Demo_05_Tick_Configuration)" Tabs="true" />

@code {
private readonly string pageUrl = "/charts/line-chart";
private readonly string title = "Blazor Line Chart";
Original file line number Diff line number Diff line change
@@ -0,0 +1,120 @@
<LineChart @ref="lineChart" Width="500" Height="200" />

<div class="mt-5">
<Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="ButtonSize.Small" @onclick="async () => await ChangeTicksAlignmentToStart()"> Alignment: start </Button>
<Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="ButtonSize.Small" @onclick="async () => await ChangeTicksAlignmentToCenter()"> Alignment: center (default) </Button>
<Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="ButtonSize.Small" @onclick="async () => await ChangeTicksAlignmentToEnd()"> Alignment: end </Button>
</div>

@code {
private LineChart lineChart = default!;
private LineChartOptions lineChartOptions = default!;
private ChartData chartData = default!;

private int datasetsCount;
private int labelsCount;

private Random random = new();

protected override void OnInitialized()
{
chartData = new ChartData { Labels = GetDefaultDataLabels(6), Datasets = GetDefaultDataSets(3) };
lineChartOptions = new() { Responsive = true, Interaction = new Interaction { Mode = InteractionMode.Index } };

// set ticks color
lineChartOptions.Scales.X!.Ticks = new ChartAxesTicks { Color = "red" };
lineChartOptions.Scales.Y!.Ticks = new ChartAxesTicks { Color = ColorUtility.CategoricalTwelveColors[4] };
}

protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
await lineChart.InitializeAsync(chartData, lineChartOptions);
}
await base.OnAfterRenderAsync(firstRender);
}

private async Task ChangeTicksAlignmentToStart()
{
lineChartOptions.Scales.X!.Ticks!.TicksAlignment = TicksAlignment.Start;
await lineChart.UpdateAsync(chartData, lineChartOptions);
}

private async Task ChangeTicksAlignmentToCenter()
{
lineChartOptions.Scales.X!.Ticks!.TicksAlignment = TicksAlignment.Center;
await lineChart.UpdateAsync(chartData, lineChartOptions);
}

private async Task ChangeTicksAlignmentToEnd()
{
lineChartOptions.Scales.X!.Ticks!.TicksAlignment = TicksAlignment.End;
await lineChart.UpdateAsync(chartData, lineChartOptions);
}

#region Data Preparation

private List<IChartDataset> GetDefaultDataSets(int numberOfDatasets)
{
var datasets = new List<IChartDataset>();

for (var index = 0; index < numberOfDatasets; index++)
{
datasets.Add(GetRandomLineChartDataset());
}

return datasets;
}

private LineChartDataset GetRandomLineChartDataset()
{
var c = ColorUtility.CategoricalTwelveColors[datasetsCount].ToColor();

datasetsCount += 1;

return new LineChartDataset
{
Label = $"Team {datasetsCount}",
Data = GetRandomData(),
BackgroundColor = new List<string> { c.ToRgbString() },
BorderColor = new List<string> { c.ToRgbString() },
BorderWidth = new List<double> { 2 },
HoverBorderWidth = new List<double> { 4 },
PointBackgroundColor = new List<string> { c.ToRgbString() },
PointRadius = new List<int> { 0 }, // hide points
PointHoverRadius = new List<int> { 4 }
};
}

private List<double> GetRandomData()
{
var data = new List<double>();
for (var index = 0; index < labelsCount; index++)
{
data.Add(random.Next(200));
}

return data;
}

private List<string> GetDefaultDataLabels(int numberOfLabels)
{
var labels = new List<string>();
for (var index = 0; index < numberOfLabels; index++)
{
labels.Add(GetNextDataLabel());
}

return labels;
}

private string GetNextDataLabel()
{
labelsCount += 1;
return $"Day {labelsCount}";
}

#endregion Data Preparation

}
26 changes: 13 additions & 13 deletions BlazorBootstrap.Demo.RCL/Components/Pages/Index.razor
Original file line number Diff line number Diff line change
@@ -77,7 +77,7 @@
</div>
<div class="col-sm-4 mb-2">
<a class="d-block pe-lg-4 text-decoration-none lh-sm" href="/charts">
<h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.BarChartLineFill" class="me-2" /> Charts</h4>
<h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.BarChartLineFill" class="me-2" /> Charts <Badge Color="BadgeColor.Success">Updated</Badge></h4>
</a>
</div>
<div class="col-sm-4 mb-2">
@@ -87,7 +87,7 @@
</div>
<div class="col-sm-4 mb-2">
<a class="d-block pe-lg-4 text-decoration-none lh-sm" href="/confirm-dialog">
<h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.QuestionDiamondFill" class="me-2" /> Confirm Dialog <Badge Color="BadgeColor.Success">Updated</Badge></h4>
<h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.QuestionDiamondFill" class="me-2" /> Confirm Dialog</h4>
</a>
</div>
<div class="col-sm-4 mb-2">
@@ -117,7 +117,7 @@
</div>
<div class="col-sm-4 mb-2">
<a class="d-block pe-lg-4 text-decoration-none lh-sm" href="/modals">
<h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.WindowStack" class="me-2" /> Modals</h4>
<h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.WindowStack" class="me-2" /> Modals <Badge Color="BadgeColor.Success">Updated</Badge></h4>
</a>
</div>
<div class="col-sm-4 mb-2">
@@ -137,7 +137,7 @@
</div>
<div class="col-sm-4 mb-2">
<a class="d-block pe-lg-4 text-decoration-none lh-sm" href="/pdf-viewer">
<h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.FilePdfFill" class="me-2" /> PDF Viewer <Badge Color="BadgeColor.Success">Updated</Badge></h4>
<h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.FilePdfFill" class="me-2" /> PDF Viewer</h4>
</a>
</div>
<div class="col-sm-4 mb-2">
@@ -162,7 +162,7 @@
</div>
<div class="col-sm-4 mb-2">
<a class="d-block pe-lg-4 text-decoration-none lh-sm" href="/ribbon">
<h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.WindowStack" class="me-2" /> Ribbon <Badge Color="BadgeColor.Danger">New</Badge></h4>
<h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.WindowStack" class="me-2" /> Ribbon</h4>
</a>
</div>
<div class="col-sm-4 mb-2">
@@ -172,17 +172,17 @@
</div>
<div class="col-sm-4 mb-2">
<a class="d-block pe-lg-4 text-decoration-none lh-sm" href="/sidebar">
<h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.LayoutSidebarInset" class="me-2" /> Sidebar</h4>
<h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.LayoutSidebarInset" class="me-2" /> Sidebar <Badge Color="BadgeColor.Success">Updated</Badge></h4>
</a>
</div>
<div class="col-sm-4 mb-2">
<a class="d-block pe-lg-4 text-decoration-none lh-sm" href="/sidebar2">
<h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.ListNested" class="me-2" /> Sidebar 2</h4>
<h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.ListNested" class="me-2" /> Sidebar 2 <Badge Color="BadgeColor.Success">Updated</Badge></h4>
</a>
</div>
<div class="col-sm-4 mb-2">
<a class="d-block pe-lg-4 text-decoration-none lh-sm" href="/sortable-list">
<h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.ArrowsMove" class="me-2" /> Sortable List <Badge Color="BadgeColor.Danger">Preview</Badge></h4>
<h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.ArrowsMove" class="me-2" /> Sortable List</h4>
</a>
</div>
<div class="col-sm-4 mb-2">
@@ -197,7 +197,7 @@
</div>
<div class="col-sm-4 mb-2">
<a class="d-block pe-lg-4 text-decoration-none lh-sm" href="/tabs">
<h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.WindowPlus" class="me-2" /> Tabs <Badge Color="BadgeColor.Success">Updated</Badge></h4>
<h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.WindowPlus" class="me-2" /> Tabs</h4>
</a>
</div>
<div class="col-sm-4 mb-2">
@@ -270,22 +270,22 @@
<div class="row g-3 mt-5">
<div class="col-sm-4 mb-2">
<a class="d-block pe-lg-4 text-decoration-none lh-sm" href="/charts/bar-chart">
<h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.BarChartFill" class="me-2" /> Bar Chart</h4>
<h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.BarChartFill" class="me-2" /> Bar Chart <Badge Color="BadgeColor.Success">Updated</Badge></h4>
</a>
</div>
<div class="col-sm-4 mb-2">
<a class="d-block pe-lg-4 text-decoration-none lh-sm" href="/charts/doughnut-chart">
<h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.CircleFill" class="me-2" /> Doughnut Chart</h4>
<h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.CircleFill" class="me-2" /> Doughnut Chart <Badge Color="BadgeColor.Success">Updated</Badge></h4>
</a>
</div>
<div class="col-sm-4 mb-2">
<a class="d-block pe-lg-4 text-decoration-none lh-sm" href="/charts/line-chart">
<h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.GraphUp" class="me-2" /> Line Chart</h4>
<h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.GraphUp" class="me-2" /> Line Chart <Badge Color="BadgeColor.Success">Updated</Badge></h4>
</a>
</div>
<div class="col-sm-4 mb-2">
<a class="d-block pe-lg-4 text-decoration-none lh-sm" href="/charts/pie-chart">
<h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.PieChart" class="me-2" /> Pie Chart</h4>
<h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.PieChart" class="me-2" /> Pie Chart <Badge Color="BadgeColor.Success">Updated</Badge></h4>
</a>
</div>
</div>
Original file line number Diff line number Diff line change
@@ -4,7 +4,7 @@

<MetaTags PageUrl="@pageUrl" Title="@title" Description="@description" ImageUrl="@imageUrl" />

<h1>Blazor Sortable List <Badge Color="BadgeColor.Danger">Preview</Badge></h1>
<h1>Blazor Sortable List</h1>
<div class="lead mb-3">
The Blazor Bootstrap Sortable List component, built on top of <b>SortableJS</b>, enables drag-and-drop reordering of lists.
</div>
2 changes: 1 addition & 1 deletion BlazorBootstrap.Demo.Server/appsettings.json
Original file line number Diff line number Diff line change
@@ -8,7 +8,7 @@
"AllowedHosts": "*",
"version": "3.0.0-preview.1",
"release": {
"short_description": "Grid, Modal, Sidebar, Sidebar2 updates, and other improvements!!!"
"short_description": "Charts, Grid, Modal, Sidebar, Sidebar2 updates, and other improvements!!!"
},
"urls": {
"docs": "//docs.blazorbootstrap.com/getting-started/blazor-webassembly-net-8",
2 changes: 1 addition & 1 deletion BlazorBootstrap.Demo.WebAssembly/wwwroot/appsettings.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"version": "3.0.0-preview.1",
"release": {
"short_description": "Grid, Modal, Sidebar, Sidebar2 updates, and other improvements!!!"
"short_description": "Charts, Grid, Modal, Sidebar, Sidebar2 updates, and other improvements!!!"
},
"urls": {
"docs": "//docs.blazorbootstrap.com/getting-started/blazor-webassembly-net-8",
Loading
Loading