Skip to content

Commit 94ce4ec

Browse files
authored
Bar chart Api documentation (#8)
* Bar chart Api documentation
1 parent b665c96 commit 94ce4ec

11 files changed

Lines changed: 344 additions & 7 deletions

File tree

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

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,68 @@
1818
</BlazorBootstrap.Callout>
1919
<Demo Type="typeof(BarChart_Demo_01_Examples)" Tabs="true" />
2020

21+
<SectionHeading Size="HeadingSize.H2" Text="Parameters" PageUrl="@pageUrl" HashTagName="parameters" />
22+
<DocxTable TItem="BarChart" DocType="DocType.Parameters">
23+
<DocxTRow TItem="BarChart" PropertyName="@nameof(BarChart.Height)" DefaultValue="null" Required="false" Description="Gets or sets chart container height." AddedVersion="1.0.0" />
24+
<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" />
25+
<DocxTRow TItem="BarChart" PropertyName="@nameof(BarChart.Width)" DefaultValue="null" Required="false" Description="Gets or sets chart container width." AddedVersion="1.0.0" />
26+
<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" />
27+
</DocxTable>
28+
29+
<SectionHeading Size="HeadingSize.H2" Text="Methods" PageUrl="@pageUrl" HashTagName="methods" />
30+
<DocxTable TItem="BarChart" DocType="DocType.Methods">
31+
<DocxTRow TItem="BarChart" MethodName="AddDataAsync(ChartData chartData, string dataLabel, IChartDatasetData data)" ReturnType="Task<ChartData>" Description="Adds data to chart." AddedVersion="1.0.0" />
32+
<DocxTRow TItem="BarChart" MethodName="AddDataAsync(ChartData chartData, string dataLabel, IReadOnlyCollection<IChartDatasetData> data)" ReturnType="Task<ChartData>" Description="Adds dataset to chart." AddedVersion="1.0.0" />
33+
<DocxTRow TItem="BarChart" MethodName="AddDatasetAsync(ChartData chartData, IChartDataset chartDataset, IChartOptions chartOptions)" ReturnType="Task<ChartData>" Description="Adds dataset to chart." AddedVersion="1.10.0" />
34+
<DocxTRow TItem="BarChart" MethodName="InitializeAsync(ChartData chartData, IChartOptions chartOptions, string[]? plugins = null)" ReturnType="Task" Description="Initialize the chat." AddedVersion="1.0.0" />
35+
<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" />
36+
<DocxTRow TItem="BarChart" MethodName="UpdateAsync(ChartData chartData, IChartOptions chartOptions)" ReturnType="Task" Description="Update the chart." AddedVersion="1.0.0" />
37+
</DocxTable>
38+
39+
<SectionHeading Size="HeadingSize.H2" Text="ChartData Members" PageUrl="@pageUrl" HashTagName="chartdata-Members" />
40+
<DocxTable TItem="ChartData" DocType="DocType.Properties">
41+
<DocxTRow TItem="ChartData" PropertyName="@nameof(ChartData.Datasets)" PropertyType="List<IChartDataset>" DefaultValue="null" Required="true" Description="Gets or sets the Datasets." AddedVersion="1.0.0" />
42+
<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" />
43+
</DocxTable>
44+
45+
<SectionHeading Size="HeadingSize.H2" Text="BarChartDataset Members" PageUrl="@pageUrl" HashTagName="barchart-dataset-members" />
46+
<DocxTable TItem="BarChartDataset" DocType="DocType.Properties">
47+
<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" />
48+
<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" />
49+
<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" />
50+
<DocxTRow TItem="BarChartDataset" PropertyName="@nameof(BarChartDataset.BorderRadius)" DefaultValue="0" Required="false" Description="Gets or sets the border radius." AddedVersion="1.0.0" />
51+
<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" />
52+
<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" />
53+
<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" />
54+
<DocxTRow TItem="BarChartDataset" PropertyName="@nameof(BarChartDataset.Datalabels)" PropertyType="BarChartDatasetDataLabels" DefaultValue="" Required="false" Description="Get or sets the data labels" AddedVersion="1.0.0" />
55+
<DocxTRow TItem="BarChartDataset" PropertyName="@nameof(BarChartDataset.Data)" PropertyType="List<double>" DefaultValue="null" Required="false" Description="Get or sets the Data." AddedVersion="1.0.0" />
56+
<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" />
57+
<DocxTRow TItem="BarChartDataset" PropertyName="@nameof(BarChartDataset.HoverBackgroundColor)" PropertyType="List<string>" DefaultValue="null" Required="true" Description="Get or sets the HoverBackgroundColor." AddedVersion="1.0.0" />
58+
<DocxTRow TItem="BarChartDataset" PropertyName="@nameof(BarChartDataset.HoverBorderColor)" PropertyType="List<string>" DefaultValue="null" Required="true" Description="Get or sets the HoverBorderColor." AddedVersion="1.0.0" />
59+
<DocxTRow TItem="BarChartDataset" PropertyName="@nameof(BarChartDataset.HoverBorderWidth)" PropertyType="List<string>" DefaultValue="null" Required="true" Description="Get or sets the HoverBorderWidth." AddedVersion="1.0.0" />
60+
<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" />
61+
<DocxTRow TItem="BarChartDataset" PropertyName="@nameof(BarChartDataset.Type)" DefaultValue="null" Required="false" Description="Get or sets the chart type." AddedVersion="1.0.0" />
62+
<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" />
63+
<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" />
64+
</DocxTable>
65+
66+
<SectionHeading Size="HeadingSize.H2" Text="BarChartDatasetDataLabels Members" PageUrl="@pageUrl" HashTagName="barchart-dataset-data-labels-members" />
67+
<DocxTable TItem="BarChartDatasetDataLabels" DocType="DocType.Properties">
68+
<DocxTRow TItem="BarChartDatasetDataLabels" PropertyName="@nameof(BarChartDatasetDataLabels.Align)" DefaultValue="center" Required="false" Description="Gets or sets the align." AddedVersion="1.0.0" />
69+
<DocxTRow TItem="BarChartDatasetDataLabels" PropertyName="@nameof(BarChartDatasetDataLabels.Anchor)" DefaultValue="center" Required="false" Description="Gets or sets the anchor." AddedVersion="1.0.0" />
70+
</DocxTable>
71+
72+
<SectionHeading Size="HeadingSize.H2" Text="BarChartOptions Members" PageUrl="@pageUrl" HashTagName="barchart-options-members" />
73+
<DocxTable TItem="BarChartOptions" DocType="DocType.Properties">
74+
<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" />
75+
<DocxTRow TItem="BarChartOptions" PropertyName="@nameof(BarChartOptions.Interaction)" PropertyType="Interaction" DefaultValue="" Required="false" Description="Gets or sets the Interaction." AddedVersion="1.0.0" />
76+
<DocxTRow TItem="BarChartOptions" PropertyName="@nameof(BarChartOptions.Layout)" PropertyType="ChartLayout" DefaultValue="" Required="false" Description="Gets or sets the ChartLayout." AddedVersion="1.0.0" />
77+
<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" />
78+
<DocxTRow TItem="BarChartOptions" PropertyName="@nameof(BarChartOptions.Plugins)" PropertyType="BarChartPlugins" DefaultValue="" Required="false" Description=" Gets or sets the Plugins." AddedVersion="1.0.0" />
79+
<DocxTRow TItem="BarChartOptions" PropertyName="@nameof(BarChartOptions.Responsive)" DefaultValue="false" Required="false" Description="Gets or sets the Responsive." AddedVersion="1.0.0" />
80+
<DocxTRow TItem="BarChartOptions" PropertyName="@nameof(BarChartOptions.Scales)" PropertyType="Scales" DefaultValue="" Required="false" Description="Gets or sets the Scales." AddedVersion="1.0.0" />
81+
</DocxTable>
82+
2183
@code {
2284
private const string pageUrl = "/charts/bar-chart";
2385
private const string title = "Blazor Bar Chart";

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
<BarChart @ref="barChart" 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>
7-
<button class="btn btn-primary btn-sm" @onclick="async () => await ShowHorizontalBarChartAsync()">Horizontal Bar Chart</button>
4+
<button class="btn btn-primary btn-sm mb-1" @onclick="async () => await RandomizeAsync()"> Randomize </button>
5+
<button class="btn btn-primary btn-sm mb-1" @onclick="async () => await AddDatasetAsync()"> Add Dataset </button>
6+
<button class="btn btn-primary btn-sm mb-1" @onclick="async () => await AddDataAsync()">Add Data</button>
7+
<button class="btn btn-primary btn-sm mb-1" @onclick="async () => await ShowHorizontalBarChartAsync()">Horizontal Bar Chart</button>
88
<button class="btn btn-primary btn-sm" @onclick="async () => await ShowVerticalBarChartAsync()">Vertical Bar Chart</button>
99
</div>
1010

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
namespace BlazorExpress.ChartJS.Demo.RCL;
2+
3+
internal static class StringConstants
4+
{
5+
#region Fields and Constants
6+
7+
public const string Nullable = "Nullable";
8+
public const string PropertyTypeNameInt16 = "Int16";
9+
public const string PropertyTypeNameInt32 = "Int32";
10+
public const string PropertyTypeNameInt64 = "Int64";
11+
public const string PropertyTypeNameChar = "Char";
12+
public const string PropertyTypeNameString = "String";
13+
public const string PropertyTypeNameSingle = "Single"; // float
14+
public const string PropertyTypeNameDecimal = "Decimal";
15+
public const string PropertyTypeNameDouble = "Double";
16+
public const string PropertyTypeNameDateOnly = "DateOnly";
17+
public const string PropertyTypeNameDateTime = "DateTime";
18+
public const string PropertyTypeNameBoolean = "Boolean";
19+
public const string PropertyTypeNameEnum = "Enum";
20+
public const string PropertyTypeNameGuid = "Guid";
21+
22+
public const string PropertyTypeNameInt16CSharpTypeKeyword = "short";
23+
public const string PropertyTypeNameInt32CSharpTypeKeyword = "int";
24+
public const string PropertyTypeNameInt64CSharpTypeKeyword = "long";
25+
public const string PropertyTypeNameCharCSharpTypeKeyword = "char";
26+
public const string PropertyTypeNameStringCSharpTypeKeyword = "string";
27+
public const string PropertyTypeNameSingleCSharpTypeKeyword = "float";
28+
public const string PropertyTypeNameDecimalCSharpTypeKeyword = "decimal";
29+
public const string PropertyTypeNameDoubleCSharpTypeKeyword = "double";
30+
public const string PropertyTypeNameDateOnlyCSharpTypeKeyword = "DateOnly";
31+
public const string PropertyTypeNameDateTimeCSharpTypeKeyword = "DateTime";
32+
public const string PropertyTypeNameBooleanCSharpTypeKeyword = "bool";
33+
public const string PropertyTypeNameEnumCSharpTypeKeyword = "enum";
34+
public const string PropertyTypeNameGuidCSharpTypeKeyword = "Guid";
35+
36+
#endregion
37+
}
Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
@namespace BlazorExpress.ChartJS.Demo.RCL
2+
@inherits ComponentBase
3+
@typeparam TItem
4+
5+
@if (DocType is DocType.Parameters or DocType.Properties)
6+
{
7+
<tr>
8+
<td class="text-primary text-opacity-75">@PropertyName</td>
9+
@if (string.IsNullOrWhiteSpace(PropertyType))
10+
{
11+
<td class="text-danger text-opacity-75">@typeof(TItem).GetPropertyTypeName(PropertyName!)</td>
12+
}
13+
else
14+
{
15+
<td class="text-danger text-opacity-75">@PropertyType</td>
16+
}
17+
<td>@DefaultValue</td>
18+
<td class="text-center">
19+
@if (Required)
20+
{
21+
<i class="bi bi-check-circle-fill text-danger text-opacity-75"></i>
22+
}
23+
</td>
24+
<td>@Description</td>
25+
<td>@AddedVersion</td>
26+
</tr>
27+
}
28+
else if (DocType == DocType.Methods)
29+
{
30+
<tr>
31+
<td class="text-primary text-opacity-75">@MethodName</td>
32+
<td class="text-danger text-opacity-75">@ReturnType</td>
33+
<td>@Description</td>
34+
<td>@AddedVersion</td>
35+
</tr>
36+
}
Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
namespace BlazorExpress.ChartJS.Demo.RCL;
2+
3+
public partial class DocxTRow<TItem> : ComponentBase
4+
{
5+
[Parameter]
6+
public string? PropertyName { get; set; }
7+
8+
[Parameter]
9+
public string? PropertyType { get; set; }
10+
11+
[Parameter]
12+
public string? DefaultValue { get; set; }
13+
14+
[Parameter]
15+
public bool Required { get; set; }
16+
17+
[Parameter]
18+
public string? Description { get; set; }
19+
20+
[Parameter]
21+
public string? AddedVersion { get; set; }
22+
23+
[CascadingParameter(Name = "DocType")]
24+
public DocType DocType { get; set; } = DocType.Parameters;
25+
26+
[Parameter]
27+
public string? MethodName { get; set; }
28+
29+
[Parameter]
30+
public string? ReturnType { get; set; }
31+
32+
33+
}
Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
@namespace BlazorExpress.ChartJS.Demo.RCL
2+
@inherits ComponentBase
3+
@typeparam TItem
4+
5+
<CascadingValue Name="DocType" Value="DocType" IsFixed>
6+
@if (DocType is DocType.Parameters or DocType.Properties)
7+
{
8+
<div class="table-responsive mb-3">
9+
<table class="table table-bordered table-hover">
10+
<thead>
11+
<tr class="table-light">
12+
<th>Name</th>
13+
<th>Type</th>
14+
<th>Default</th>
15+
<th class="text-center">Required</th>
16+
<th>Description</th>
17+
<th class="text-nowrap">Added Version</th>
18+
</tr>
19+
</thead>
20+
<tbody>
21+
@ChildContent
22+
</tbody>
23+
</table>
24+
</div>
25+
}
26+
else if (DocType == DocType.Methods)
27+
{
28+
<div class="table-responsive mb-3">
29+
<table class="table table-bordered table-hover">
30+
<thead>
31+
<tr class="table-light">
32+
<th>Name</th>
33+
<th>Return type</th>
34+
<th>Description</th>
35+
<th class="text-nowrap">Added Version</th>
36+
</tr>
37+
</thead>
38+
<tbody>
39+
@ChildContent
40+
</tbody>
41+
</table>
42+
</div>
43+
}
44+
else if (DocType == DocType.Events)
45+
{
46+
<div class="table-responsive mb-3">
47+
<table class="table table-bordered table-hover">
48+
<thead>
49+
<tr class="table-light">
50+
<th>Name</th>
51+
<th>Description</th>
52+
<th class="text-nowrap">Added Version</th>
53+
</tr>
54+
</thead>
55+
<tbody>
56+
@ChildContent
57+
</tbody>
58+
</table>
59+
</div>
60+
}
61+
</CascadingValue>
Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
namespace BlazorExpress.ChartJS.Demo.RCL;
2+
3+
public partial class DocxTable<TItem> : ComponentBase
4+
{
5+
[Parameter]
6+
public RenderFragment? ChildContent { get; set; }
7+
8+
[Parameter]
9+
public DocType DocType { get; set; } = DocType.Parameters;
10+
}
11+
12+

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

Whitespace-only changes.
Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
namespace BlazorExpress.ChartJS.Demo.RCL;
2+
3+
public enum DocType
4+
{
5+
Enum,
6+
Events,
7+
Methods,
8+
Parameters,
9+
Properties
10+
}

0 commit comments

Comments
 (0)