diff --git a/BlazorBootstrap.Demo.Hosted/Client/wwwroot/appsettings.json b/BlazorBootstrap.Demo.Hosted/Client/wwwroot/appsettings.json index 3a0c857e3..9533f1486 100644 --- a/BlazorBootstrap.Demo.Hosted/Client/wwwroot/appsettings.json +++ b/BlazorBootstrap.Demo.Hosted/Client/wwwroot/appsettings.json @@ -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", diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChartDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChartDocumentation.razor index cedfad00c..d4dfc40f4 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChartDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChartDocumentation.razor @@ -42,6 +42,9 @@ + + + @code { private readonly string pageUrl = "/charts/line-chart"; private readonly string title = "Blazor Line Chart"; diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChart_Demo_05_Tick_Configuration.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChart_Demo_05_Tick_Configuration.razor new file mode 100644 index 000000000..b2d4d56a2 --- /dev/null +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChart_Demo_05_Tick_Configuration.razor @@ -0,0 +1,120 @@ + + +
+ + + +
+ +@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 GetDefaultDataSets(int numberOfDatasets) + { + var datasets = new List(); + + 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 { c.ToRgbString() }, + BorderColor = new List { c.ToRgbString() }, + BorderWidth = new List { 2 }, + HoverBorderWidth = new List { 4 }, + PointBackgroundColor = new List { c.ToRgbString() }, + PointRadius = new List { 0 }, // hide points + PointHoverRadius = new List { 4 } + }; + } + + private List GetRandomData() + { + var data = new List(); + for (var index = 0; index < labelsCount; index++) + { + data.Add(random.Next(200)); + } + + return data; + } + + private List GetDefaultDataLabels(int numberOfLabels) + { + var labels = new List(); + for (var index = 0; index < numberOfLabels; index++) + { + labels.Add(GetNextDataLabel()); + } + + return labels; + } + + private string GetNextDataLabel() + { + labelsCount += 1; + return $"Day {labelsCount}"; + } + + #endregion Data Preparation + +} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Index.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Index.razor index 8a31ead04..8479eebec 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Index.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Index.razor @@ -77,7 +77,7 @@
-

Charts

+

Charts Updated
@@ -87,7 +87,7 @@
-

Confirm Dialog Updated

+

Confirm Dialog
@@ -117,7 +117,7 @@
-

Modals

+

Modals Updated
@@ -137,7 +137,7 @@
-

PDF Viewer Updated

+

PDF Viewer
@@ -162,7 +162,7 @@
-

Ribbon New

+

Ribbon
@@ -172,17 +172,17 @@
-

Sidebar

+

Sidebar Updated
-

Sidebar 2

+

Sidebar 2 Updated
-

Sortable List Preview

+

Sortable List
@@ -197,7 +197,7 @@
-

Tabs Updated

+

Tabs
@@ -270,22 +270,22 @@
-

Bar Chart

+

Bar Chart Updated
-

Doughnut Chart

+

Doughnut Chart Updated
-

Line Chart

+

Line Chart Updated
-

Pie Chart

+

Pie Chart Updated
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/SortableList/SortableListDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/SortableList/SortableListDocumentation.razor index 6281fe554..130e98546 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/SortableList/SortableListDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/SortableList/SortableListDocumentation.razor @@ -4,7 +4,7 @@ -

Blazor Sortable List Preview

+

Blazor Sortable List

The Blazor Bootstrap Sortable List component, built on top of SortableJS, enables drag-and-drop reordering of lists.
diff --git a/BlazorBootstrap.Demo.Server/appsettings.json b/BlazorBootstrap.Demo.Server/appsettings.json index 2f807a814..1815699cf 100644 --- a/BlazorBootstrap.Demo.Server/appsettings.json +++ b/BlazorBootstrap.Demo.Server/appsettings.json @@ -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", diff --git a/BlazorBootstrap.Demo.WebAssembly/wwwroot/appsettings.json b/BlazorBootstrap.Demo.WebAssembly/wwwroot/appsettings.json index a10ce545a..a69fcb17c 100644 --- a/BlazorBootstrap.Demo.WebAssembly/wwwroot/appsettings.json +++ b/BlazorBootstrap.Demo.WebAssembly/wwwroot/appsettings.json @@ -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", diff --git a/blazorbootstrap/Models/Charts/ChartOptions/ChartOptions.cs b/blazorbootstrap/Models/Charts/ChartOptions/ChartOptions.cs index 19a05f535..77f2528dc 100644 --- a/blazorbootstrap/Models/Charts/ChartOptions/ChartOptions.cs +++ b/blazorbootstrap/Models/Charts/ChartOptions/ChartOptions.cs @@ -58,9 +58,7 @@ public class Interaction #region Constructors -#pragma warning disable CS8618 public Interaction() -#pragma warning restore CS8618 { Mode = InteractionMode.Nearest; } @@ -71,15 +69,15 @@ public Interaction() private void SetMode(InteractionMode interactionMode) => ChartInteractionMode = interactionMode switch - { - InteractionMode.Dataset => "dataset", - InteractionMode.Index => "index", - InteractionMode.Nearest => "nearest", - InteractionMode.Point => "point", - InteractionMode.X => "x", - InteractionMode.Y => "y", - _ => "" - }; + { + InteractionMode.Dataset => "dataset", + InteractionMode.Index => "index", + InteractionMode.Nearest => "nearest", + InteractionMode.Point => "point", + InteractionMode.X => "x", + InteractionMode.Y => "y", + _ => "" + }; #endregion @@ -130,7 +128,6 @@ public class Scales [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] public ChartAxes? X { get; set; } = new(); [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] public ChartAxes? Y { get; set; } = new(); - #endregion } @@ -138,7 +135,7 @@ public class Scales public class ChartAxes { #region Properties, Indexers - + // Stacked public bool BeginAtZero { get; set; } = true; @@ -149,7 +146,7 @@ public class ChartAxes public ChartAxesBorder? Border { get; set; } /// - /// Grid settings + /// Gets or sets the grid configuration. /// [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] public ChartAxesGrid? Grid { get; set; } @@ -187,11 +184,14 @@ public class ChartAxes public double? SuggestedMin { get; set; } /// - /// Tick settings + /// Gets or sets the tick configuration. /// [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] public ChartAxesTicks? Ticks { get; set; } + /// + /// Gets or sets the title configuration. + /// [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] public ChartAxesTitle? Title { get; set; } @@ -204,8 +204,10 @@ public class ChartAxes /// public class ChartAxesBorder { + #region Properties, Indexers + /// - /// The color of the border line. + /// The color of the border line. /// [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] public string? Color { get; set; } @@ -240,22 +242,26 @@ public class ChartAxesBorder /// [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] public int? Z { get; set; } + + #endregion } /// -/// Defines options for the grid lines that run perpendicular to the axis. +/// Defines options for the grid lines that run perpendicular to the axis. /// /// public class ChartAxesGrid { + #region Properties, Indexers + /// /// If , gridlines are circular (on radar and polar area charts only). /// [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] public bool? Circular { get; set; } - + /// - /// Color of the grid axis lines. Here one can write a CSS method or even a JavaScript method for a dynamic color. + /// Color of the grid axis lines. Here one can write a CSS method or even a JavaScript method for a dynamic color. /// [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] public string? Color { get; set; } @@ -266,7 +272,8 @@ public class ChartAxesGrid public bool Display { get; set; } = true; /// - /// If , draw lines on the chart area inside the axis lines. This is useful when there are multiple axes and you need to control which grid lines are drawn. + /// If , draw lines on the chart area inside the axis lines. This is useful when there are multiple + /// axes and you need to control which grid lines are drawn. /// public bool DrawOnChartArea { get; set; } = true; @@ -281,19 +288,20 @@ public class ChartAxesGrid public int LineWidth { get; set; } = 1; /// - /// If , grid lines will be shifted to be between labels. This is set to true for a bar chart by default. + /// If , grid lines will be shifted to be between labels. This is set to true for a bar chart by + /// default. /// [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] public bool? Offset { get; set; } = false; /// - /// Length and spacing of the tick mark line. + /// Length and spacing of the tick mark line. /// [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] public List? TickBorderDash { get; set; } /// - /// Offset for the line dash of the tick mark. + /// Offset for the line dash of the tick mark. /// [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] public int? TickBorderDashOffset { get; set; } @@ -310,7 +318,6 @@ public class ChartAxesGrid [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] public int? TickLength { get; set; } - /// /// Width of the tick mark in pixels. /// @@ -322,6 +329,22 @@ public class ChartAxesGrid /// [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] public int? Z { get; set; } + + #endregion +} + +public enum TicksAlignment +{ + Center, // default + Start, + End +} + +public enum TitleAlignment +{ + Center, // default + Start, + End } /// @@ -330,6 +353,31 @@ public class ChartAxesGrid /// public class ChartAxesTicks { + #region Fields and Constants + + private TicksAlignment ticksAlignment; + + #endregion + + #region Methods + + private void SetTicksAlignment(TicksAlignment interactionMode) => + Alignment = interactionMode switch + { + TicksAlignment.Center => "center", + TicksAlignment.Start => "start", + TicksAlignment.End => "end", + _ => null + }; + + #endregion + + #region Properties, Indexers + + [JsonPropertyName("align")] + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public string? Alignment { get; private set; } + /// /// Color of label backdrops /// @@ -341,7 +389,7 @@ public class ChartAxesTicks /// [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] public int? BackdropPadding { get; set; } - + /// /// Color of ticks /// @@ -382,6 +430,19 @@ public class ChartAxesTicks /// [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] public int? TextStrokeWidth { get; set; } + + [JsonIgnore] + public TicksAlignment TicksAlignment + { + get => ticksAlignment; + set + { + ticksAlignment = value; + SetTicksAlignment(value); + } + } + + #endregion } /// @@ -389,10 +450,15 @@ public class ChartAxesTicks /// public class ChartAxesTicksMajor { + #region Properties, Indexers + /// - /// If , major ticks are generated. A major tick will affect autoskipping and major will be defined on ticks in the scriptable options context. + /// If , major ticks are generated. A major tick will affect auto skipping and major will be defined + /// on ticks in the scriptable options context. /// public bool Enabled { get; set; } = false; + + #endregion } /// @@ -401,14 +467,34 @@ public class ChartAxesTicksMajor /// public class ChartAxesTitle { + #region Fields and Constants + + private TitleAlignment titleAlignment; + + #endregion + + #region Methods + + private void SetTitleAlignment(TitleAlignment interactionMode) => + Alignment = interactionMode switch + { + TitleAlignment.Center => "center", // default + TitleAlignment.Start => "start", + TitleAlignment.End => "end", + _ => null + }; + + #endregion + #region Properties, Indexers /// /// Alignment of the title. /// Options are: 'start', 'center', and 'end' /// + [JsonPropertyName("align")] [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public string? Align { get; set; } = "center"; + public string? Alignment { get; private set; } /// /// Color of text. @@ -429,6 +515,17 @@ public class ChartAxesTitle [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] public string? Text { get; set; } + [JsonIgnore] + public TitleAlignment TitleAlignment + { + get => titleAlignment; + set + { + titleAlignment = value; + SetTitleAlignment(value); + } + } + #endregion } diff --git a/docs/blog/2024-05-24-blazorbootstrap-3.0.0-preview.1.md b/docs/blog/2024-06-08-blazorbootstrap-3.0.0-preview.1.md similarity index 87% rename from docs/blog/2024-05-24-blazorbootstrap-3.0.0-preview.1.md rename to docs/blog/2024-06-08-blazorbootstrap-3.0.0-preview.1.md index d909e4959..f263eee24 100644 --- a/docs/blog/2024-05-24-blazorbootstrap-3.0.0-preview.1.md +++ b/docs/blog/2024-06-08-blazorbootstrap-3.0.0-preview.1.md @@ -1,5 +1,5 @@ --- -title: Blazor Bootstrap v3.0.0 +title: Blazor Bootstrap v3.0.0-preview.1 authors: name: Vikram Reddy title: Creator @@ -8,7 +8,7 @@ authors: tags: [v3.0.0, blazor, bootstrap, blazorbootstrap, accordion, button, callout, dropdown, grid, modal, ribbon, tab, sidebar, sidebar2] --- -We are excited to release version 3.0.0, which includes a Grid, Modal, Sidebar, Sidebar2 updates, and other improvements!!! +We are excited to release version v3.0.0-preview.1, which includes a Charts, Grid, Modal, Sidebar, Sidebar2 updates, and other improvements!!! ![image](https://i.imgur.com/XG4Wv17.png "Blazor Bootstrap: Grid Component - Column class") @@ -16,6 +16,10 @@ We are excited to release version 3.0.0, which includes a Grid, Modal, Sidebar, ## What's changed +- `Chart` components + - Tick configuration support added + - Grid configuration support added + - `Grid` component - New parameter **FilterButtonColor** added to change the filter button color. - New parameter **FilterButtonCSSClass** added to apply custom CSS classes.