Bar chart Api documentation

BlazorExpress.ChartJS.Demo.RCL/Components/Pages/BarCharts/BarChartDocumentation_01.razor

@@ -18,6 +18,68 @@
 </BlazorBootstrap.Callout>
 <Demo Type="typeof(BarChart_Demo_01_Examples)" Tabs="true" />
 
+<SectionHeading Size="HeadingSize.H2" Text="Parameters" PageUrl="@pageUrl" HashTagName="parameters" />
+<DocxTable TItem="BarChart" DocType="DocType.Parameters">
+    <DocxTRow TItem="BarChart" PropertyName="@nameof(BarChart.Height)" DefaultValue="null" Required="false" Description="Gets or sets chart container height." AddedVersion="1.0.0" />
+    <DocxTRow TItem="BarChart" PropertyName="@nameof(BarChart.HeightUnit)" DefaultValue="Unit.Px" Required="false" Description="Gets or sets chart container height unit of measure." AddedVersion="1.0.0" />
+    <DocxTRow TItem="BarChart" PropertyName="@nameof(BarChart.Width)" DefaultValue="null" Required="false" Description="Gets or sets chart container width." AddedVersion="1.0.0" />
+    <DocxTRow TItem="BarChart" PropertyName="@nameof(BarChart.WidthUnit)" DefaultValue="Unit.Px" Required="false" Description="Gets or sets chart container width unit of measure." AddedVersion="1.0.0" />
+</DocxTable>
+
+<SectionHeading Size="HeadingSize.H2" Text="Methods" PageUrl="@pageUrl" HashTagName="methods" />
+<DocxTable TItem="BarChart" DocType="DocType.Methods">
+    <DocxTRow TItem="BarChart" MethodName="AddDataAsync(ChartData chartData, string dataLabel, IChartDatasetData data)" ReturnType="Task<ChartData>" Description="Adds data to chart." AddedVersion="1.0.0" />
+    <DocxTRow TItem="BarChart" MethodName="AddDataAsync(ChartData chartData, string dataLabel, IReadOnlyCollection<IChartDatasetData> data)" ReturnType="Task<ChartData>" Description="Adds dataset to chart." AddedVersion="1.0.0" />
+    <DocxTRow TItem="BarChart" MethodName="AddDatasetAsync(ChartData chartData, IChartDataset chartDataset, IChartOptions chartOptions)" ReturnType="Task<ChartData>" Description="Adds dataset to chart." AddedVersion="1.10.0" />
+    <DocxTRow TItem="BarChart" MethodName="InitializeAsync(ChartData chartData, IChartOptions chartOptions, string[]? plugins = null)" ReturnType="Task" Description="Initialize the chat." AddedVersion="1.0.0" />
+    <DocxTRow TItem="BarChart" MethodName="ResizeAsync(int width, int height, Unit widthUnit = Unit.Px, Unit heightUnit = Unit.Px)" ReturnType="Task" Description="Resize the chart." AddedVersion="1.0.0" />
+    <DocxTRow TItem="BarChart" MethodName="UpdateAsync(ChartData chartData, IChartOptions chartOptions)" ReturnType="Task" Description="Update the chart." AddedVersion="1.0.0" />
+</DocxTable>
+
+<SectionHeading Size="HeadingSize.H2" Text="ChartData Members" PageUrl="@pageUrl" HashTagName="chartdata-Members" />
+<DocxTable TItem="ChartData" DocType="DocType.Properties">
+    <DocxTRow TItem="ChartData" PropertyName="@nameof(ChartData.Datasets)" PropertyType="List<IChartDataset>" DefaultValue="null" Required="true" Description="Gets or sets the Datasets." AddedVersion="1.0.0" />
+    <DocxTRow TItem="ChartData" PropertyName="@nameof(ChartData.Labels)" PropertyType="List<string>" DefaultValue="Unit.Px" Required="true" Description="Gets or sets the Labels." AddedVersion="1.0.0" />
+</DocxTable>
+
+<SectionHeading Size="HeadingSize.H2" Text="BarChartDataset Members" PageUrl="@pageUrl" HashTagName="barchart-dataset-members" />
+<DocxTable TItem="BarChartDataset" DocType="DocType.Properties">
+    <DocxTRow TItem="BarChartDataset" PropertyName="@nameof(BarChartDataset.BackgroundColor)" PropertyType="List<string>" DefaultValue="null" Required="false" Description="Get or sets the background color." AddedVersion="1.0.0" />
+    <DocxTRow TItem="BarChartDataset" PropertyName="@nameof(BarChartDataset.BarPercentage)" DefaultValue="0.8" Required="false" Description="Percent (0-1) of the available width each bar should be within the category width. 1.0 will take the whole category width and put the bars right next to each other." AddedVersion="1.0.0" />
+    <DocxTRow TItem="BarChartDataset" PropertyName="@nameof(BarChartDataset.BorderColor)" PropertyType="List<string>" DefaultValue="null" Required="false" Description="Get or sets the border color." AddedVersion="1.0.0" />
+    <DocxTRow TItem="BarChartDataset" PropertyName="@nameof(BarChartDataset.BorderRadius)" DefaultValue="0" Required="false" Description="Gets or sets the border radius." AddedVersion="1.0.0" />
+    <DocxTRow TItem="BarChartDataset" PropertyName="@nameof(BarChartDataset.BorderWidth)" PropertyType="List<double>" DefaultValue="null" Required="false" Description="Gets or sets the border width." AddedVersion="1.0.0" />
+    <DocxTRow TItem="BarChartDataset" PropertyName="@nameof(BarChartDataset.CategoryPercentage)" DefaultValue="0.8" Required="false" Description="Percent (0-1) of the available width each category should be within the sample width." AddedVersion="1.0.0" />
+    <DocxTRow TItem="BarChartDataset" PropertyName="@nameof(BarChartDataset.Clip)" DefaultValue="null" Required="false" Description="How to clip relative to chartArea. Positive value allows overflow, negative value clips that many pixels inside chartArea. 0 = clip at chartArea. Clipping can also be configured per side: clip: {left: 5, top: false, right: -2, bottom: 0}" AddedVersion="1.0.0" />
+    <DocxTRow TItem="BarChartDataset" PropertyName="@nameof(BarChartDataset.Datalabels)" PropertyType="BarChartDatasetDataLabels" DefaultValue="" Required="false" Description="Get or sets the data labels" AddedVersion="1.0.0" />
+    <DocxTRow TItem="BarChartDataset" PropertyName="@nameof(BarChartDataset.Data)" PropertyType="List<double>" DefaultValue="null" Required="false" Description="Get or sets the Data." AddedVersion="1.0.0" />
+    <DocxTRow TItem="BarChartDataset" PropertyName="@nameof(BarChartDataset.Hidden)" DefaultValue="false" Required="false" Description="	Configures the visibility state of the dataset. Set it to true, to hide the dataset from the chart." AddedVersion="1.0.0" />
+    <DocxTRow TItem="BarChartDataset" PropertyName="@nameof(BarChartDataset.HoverBackgroundColor)" PropertyType="List<string>" DefaultValue="null" Required="true" Description="Get or sets the HoverBackgroundColor." AddedVersion="1.0.0" />
+    <DocxTRow TItem="BarChartDataset" PropertyName="@nameof(BarChartDataset.HoverBorderColor)" PropertyType="List<string>" DefaultValue="null" Required="true" Description="Get or sets the HoverBorderColor." AddedVersion="1.0.0" />
+    <DocxTRow TItem="BarChartDataset" PropertyName="@nameof(BarChartDataset.HoverBorderWidth)" PropertyType="List<string>" DefaultValue="null" Required="true" Description="Get or sets the HoverBorderWidth." AddedVersion="1.0.0" />
+    <DocxTRow TItem="BarChartDataset" PropertyName="@nameof(BarChartDataset.Label)" DefaultValue="null" Required="false" Description="The label for the dataset which appears in the legend and tooltips." AddedVersion="1.0.0" />
+    <DocxTRow TItem="BarChartDataset" PropertyName="@nameof(BarChartDataset.Type)" DefaultValue="null" Required="false" Description="Get or sets the chart type." AddedVersion="1.0.0" />
+    <DocxTRow TItem="BarChartDataset" PropertyName="@nameof(BarChartDataset.XAxisID)" DefaultValue="null" Required="false" Description="The ID of the x axis to plot this dataset on." AddedVersion="1.0.0" />
+    <DocxTRow TItem="BarChartDataset" PropertyName="@nameof(BarChartDataset.YAxisID)" DefaultValue="null" Required="false" Description="The ID of the y axis to plot this dataset on." AddedVersion="1.0.0" />
+</DocxTable>
+
+<SectionHeading Size="HeadingSize.H2" Text="BarChartDatasetDataLabels Members" PageUrl="@pageUrl" HashTagName="barchart-dataset-data-labels-members" />
+<DocxTable TItem="BarChartDatasetDataLabels" DocType="DocType.Properties">
+    <DocxTRow TItem="BarChartDatasetDataLabels" PropertyName="@nameof(BarChartDatasetDataLabels.Align)" DefaultValue="center" Required="false" Description="Gets or sets the align." AddedVersion="1.0.0" />
+    <DocxTRow TItem="BarChartDatasetDataLabels" PropertyName="@nameof(BarChartDatasetDataLabels.Anchor)" DefaultValue="center" Required="false" Description="Gets or sets the anchor." AddedVersion="1.0.0" />
+</DocxTable>
+
+<SectionHeading Size="HeadingSize.H2" Text="BarChartOptions Members" PageUrl="@pageUrl" HashTagName="barchart-options-members" />
+<DocxTable TItem="BarChartOptions" DocType="DocType.Properties">
+    <DocxTRow TItem="BarChartOptions" PropertyName="@nameof(BarChartOptions.IndexAxis)" DefaultValue="x" Required="false" Description="The base axis of the chart. 'x' for vertical charts and 'y' for horizontal charts." AddedVersion="1.0.0" />
+    <DocxTRow TItem="BarChartOptions" PropertyName="@nameof(BarChartOptions.Interaction)" PropertyType="Interaction" DefaultValue="" Required="false" Description="Gets or sets the Interaction." AddedVersion="1.0.0" />
+    <DocxTRow TItem="BarChartOptions" PropertyName="@nameof(BarChartOptions.Layout)" PropertyType="ChartLayout" DefaultValue="" Required="false" Description="Gets or sets the ChartLayout." AddedVersion="1.0.0" />
+    <DocxTRow TItem="BarChartOptions" PropertyName="@nameof(BarChartOptions.Locale)" DefaultValue="null" Required="false" Description="Gets or sets the locale. By default, the chart is using the default locale of the platform which is running on." AddedVersion="1.0.0" />
+    <DocxTRow TItem="BarChartOptions" PropertyName="@nameof(BarChartOptions.Plugins)" PropertyType="BarChartPlugins" DefaultValue="" Required="false" Description="	Gets or sets the Plugins." AddedVersion="1.0.0" />
+    <DocxTRow TItem="BarChartOptions" PropertyName="@nameof(BarChartOptions.Responsive)" DefaultValue="false" Required="false" Description="Gets or sets the Responsive." AddedVersion="1.0.0" />
+    <DocxTRow TItem="BarChartOptions" PropertyName="@nameof(BarChartOptions.Scales)" PropertyType="Scales" DefaultValue="" Required="false" Description="Gets or sets the Scales." AddedVersion="1.0.0" />
+</DocxTable>
+
 @code {
     private const string pageUrl = "/charts/bar-chart";
     private const string title = "Blazor Bar Chart";

BlazorExpress.ChartJS.Demo.RCL/Components/Pages/BarCharts/BarChart_Demo_01_Examples.razor

@@ -1,10 +1,10 @@
 <BarChart @ref="barChart" Width="600" />
 
 <div class="mt-5">
-    <button class="btn btn-primary btn-sm" @onclick="async () => await RandomizeAsync()"> Randomize </button>
-    <button class="btn btn-primary btn-sm" @onclick="async () => await AddDatasetAsync()"> Add Dataset </button>
-    <button class="btn btn-primary btn-sm" @onclick="async () => await AddDataAsync()">Add Data</button>
-    <button class="btn btn-primary btn-sm" @onclick="async () => await ShowHorizontalBarChartAsync()">Horizontal Bar Chart</button>
+    <button class="btn btn-primary btn-sm mb-1" @onclick="async () => await RandomizeAsync()"> Randomize </button>
+    <button class="btn btn-primary btn-sm mb-1" @onclick="async () => await AddDatasetAsync()"> Add Dataset </button>
+    <button class="btn btn-primary btn-sm mb-1" @onclick="async () => await AddDataAsync()">Add Data</button>
+    <button class="btn btn-primary btn-sm mb-1" @onclick="async () => await ShowHorizontalBarChartAsync()">Horizontal Bar Chart</button>
     <button class="btn btn-primary btn-sm" @onclick="async () => await ShowVerticalBarChartAsync()">Vertical Bar Chart</button>
 </div>
 

BlazorExpress.ChartJS.Demo.RCL/Components/Shared/Constants/StringConstants.cs

@@ -0,0 +1,37 @@
+namespace BlazorExpress.ChartJS.Demo.RCL;
+
+internal static class StringConstants
+{
+    #region Fields and Constants
+
+    public const string Nullable = "Nullable";
+    public const string PropertyTypeNameInt16 = "Int16";
+    public const string PropertyTypeNameInt32 = "Int32";
+    public const string PropertyTypeNameInt64 = "Int64";
+    public const string PropertyTypeNameChar = "Char";
+    public const string PropertyTypeNameString = "String";
+    public const string PropertyTypeNameSingle = "Single"; // float
+    public const string PropertyTypeNameDecimal = "Decimal";
+    public const string PropertyTypeNameDouble = "Double";
+    public const string PropertyTypeNameDateOnly = "DateOnly";
+    public const string PropertyTypeNameDateTime = "DateTime";
+    public const string PropertyTypeNameBoolean = "Boolean";
+    public const string PropertyTypeNameEnum = "Enum";
+    public const string PropertyTypeNameGuid = "Guid";
+
+    public const string PropertyTypeNameInt16CSharpTypeKeyword = "short";
+    public const string PropertyTypeNameInt32CSharpTypeKeyword = "int";
+    public const string PropertyTypeNameInt64CSharpTypeKeyword = "long";
+    public const string PropertyTypeNameCharCSharpTypeKeyword = "char";
+    public const string PropertyTypeNameStringCSharpTypeKeyword = "string";
+    public const string PropertyTypeNameSingleCSharpTypeKeyword = "float";
+    public const string PropertyTypeNameDecimalCSharpTypeKeyword = "decimal";
+    public const string PropertyTypeNameDoubleCSharpTypeKeyword = "double";
+    public const string PropertyTypeNameDateOnlyCSharpTypeKeyword = "DateOnly";
+    public const string PropertyTypeNameDateTimeCSharpTypeKeyword = "DateTime";
+    public const string PropertyTypeNameBooleanCSharpTypeKeyword = "bool";
+    public const string PropertyTypeNameEnumCSharpTypeKeyword = "enum";
+    public const string PropertyTypeNameGuidCSharpTypeKeyword = "Guid";
+
+    #endregion
+}

BlazorExpress.ChartJS.Demo.RCL/Components/Shared/Docs/DocxTRow.razor

@@ -0,0 +1,36 @@
+@namespace BlazorExpress.ChartJS.Demo.RCL
+@inherits ComponentBase
+@typeparam TItem
+
+@if (DocType is DocType.Parameters or DocType.Properties)
+{
+    <tr>
+        <td class="text-primary text-opacity-75">@PropertyName</td>
+        @if (string.IsNullOrWhiteSpace(PropertyType))
+        {
+            <td class="text-danger text-opacity-75">@typeof(TItem).GetPropertyTypeName(PropertyName!)</td>
+        }
+        else
+        {
+            <td class="text-danger text-opacity-75">@PropertyType</td>
+        }
+        <td>@DefaultValue</td>
+        <td class="text-center">
+            @if (Required)
+            {
+                <i class="bi bi-check-circle-fill text-danger text-opacity-75"></i>
+            }
+        </td>
+        <td>@Description</td>
+        <td>@AddedVersion</td>
+    </tr>
+}
+else if (DocType == DocType.Methods)
+{
+    <tr>
+        <td class="text-primary text-opacity-75">@MethodName</td>
+        <td class="text-danger text-opacity-75">@ReturnType</td>
+        <td>@Description</td>
+        <td>@AddedVersion</td>
+    </tr>
+}

BlazorExpress.ChartJS.Demo.RCL/Components/Shared/Docs/DocxTRow.razor.cs

@@ -0,0 +1,33 @@
+namespace BlazorExpress.ChartJS.Demo.RCL;
+
+public partial class DocxTRow<TItem> : ComponentBase
+{
+    [Parameter]
+    public string? PropertyName { get; set; }
+
+    [Parameter]
+    public string? PropertyType { get; set; }
+
+    [Parameter]
+    public string? DefaultValue { get; set; }
+
+    [Parameter]
+    public bool Required { get; set; }
+
+    [Parameter]
+    public string? Description { get; set; }
+
+    [Parameter]
+    public string? AddedVersion { get; set; }
+
+    [CascadingParameter(Name = "DocType")]
+    public DocType DocType { get; set; } = DocType.Parameters;
+
+    [Parameter]
+    public string? MethodName { get; set; }
+
+    [Parameter]
+    public string? ReturnType { get; set; }
+
+
+}

BlazorExpress.ChartJS.Demo.RCL/Components/Shared/Docs/DocxTable.razor

@@ -0,0 +1,61 @@
+@namespace BlazorExpress.ChartJS.Demo.RCL
+@inherits ComponentBase
+@typeparam TItem
+
+<CascadingValue Name="DocType" Value="DocType" IsFixed>
+    @if (DocType is DocType.Parameters or DocType.Properties)
+    {
+        <div class="table-responsive mb-3">
+            <table class="table table-bordered table-hover">
+                <thead>
+                    <tr class="table-light">
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th class="text-center">Required</th>
+                        <th>Description</th>
+                        <th class="text-nowrap">Added Version</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    @ChildContent
+                </tbody>
+            </table>
+        </div>
+    }
+    else if (DocType == DocType.Methods)
+    {
+        <div class="table-responsive mb-3">
+            <table class="table table-bordered table-hover">
+                <thead>
+                    <tr class="table-light">
+                        <th>Name</th>
+                        <th>Return type</th>
+                        <th>Description</th>
+                        <th class="text-nowrap">Added Version</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    @ChildContent
+                </tbody>
+            </table>
+        </div>
+    }
+    else if (DocType == DocType.Events)
+    {
+        <div class="table-responsive mb-3">
+            <table class="table table-bordered table-hover">
+                <thead>
+                    <tr class="table-light">
+                        <th>Name</th>
+                        <th>Description</th>
+                        <th class="text-nowrap">Added Version</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    @ChildContent
+                </tbody>
+            </table>
+        </div>
+    }
+</CascadingValue>

BlazorExpress.ChartJS.Demo.RCL/Components/Shared/Docs/DocxTable.razor.cs

@@ -0,0 +1,12 @@
+namespace BlazorExpress.ChartJS.Demo.RCL;
+
+public partial class DocxTable<TItem> : ComponentBase
+{
+    [Parameter]
+    public RenderFragment? ChildContent { get; set; }
+
+    [Parameter]
+    public DocType DocType { get; set; } = DocType.Parameters;
+}
+
+

BlazorExpress.ChartJS.Demo.RCL/Components/Shared/Enums/DocType.cs

@@ -0,0 +1,10 @@
+namespace BlazorExpress.ChartJS.Demo.RCL;
+
+public enum DocType
+{
+    Enum,
+    Events,
+    Methods,
+    Parameters,
+    Properties
+}