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.

Sign up for GitHub

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

Jump to bottom

Chart options to control the chart's animation #302

Merged
merged 15 commits into from
Jul 29, 2023
Merged

Chart options to control the chart's animation #302

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
242501d
Chart options to control the chart's animation #171 - draft
gvreddy04 Jul 24, 2023
acee15c
Chart options to control the chart's animation #171
gvreddy04 Jul 25, 2023
6ed081d
Chart options to control the chart's animation #171
gvreddy04 Jul 26, 2023
e7647cd
Chart options to control the chart's animation #171
gvreddy04 Jul 26, 2023
5312202
Chart options to control the chart's animation #171
gvreddy04 Jul 27, 2023
10229a0
Chart options to control the chart's animation #171
gvreddy04 Jul 27, 2023
de31891
Chart options to control the chart's animation #171
gvreddy04 Jul 27, 2023
b67a36b
Charts demos update
gvreddy04 Jul 27, 2023
09f3cfe
BarChart demos updates
gvreddy04 Jul 27, 2023
cdf53a5
BarChart updates
gvreddy04 Jul 27, 2023
777848f
Landing Page updates
gvreddy04 Jul 28, 2023
3097059
Donut chart updates
gvreddy04 Jul 28, 2023
c5bc4de
Pie chart updates
gvreddy04 Jul 28, 2023
e6fb728
ColorBuilder updates
gvreddy04 Jul 28, 2023
bff2f97
Documentation updates
gvreddy04 Jul 29, 2023
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
24 changes: 21 additions & 3 deletions ...ootstrap.Demo.Hosted/Client/Pages/GettingStarted/server/GettingStartedDocumentation.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,18 +59,36 @@
<p>Either remove or keep the <b>site.css</b> file but make sure you clear it out of any content when the <a href="/sidebar">Sidebar</a> component with full layout is used.</p>
</div>

<SectionHeading Size="HeadingSize.H2" Text="Visual studio project templates" PageUrl="@pageUrl" HashTagName="visual-studio-project-templates" />
<div class="mb-3">
<p>Blazor Bootstrap Templates make it easy to create Blazor projects in a minute. Just install the templates with the NuGet package manager and you're good to go!</p>
<p class="text-bg-dark p-2 my-3 rounded-2">dotnet new install Blazor.Bootstrap.Templates::1.9.1</p>
<p>
Check the Visual Studio project templates GitHub repo <a href="https://github.com/vikramlearning/blazorbootstrap-project-templates">here</a>.
</p>
<p>
<div class="text-center">
<img src="https://user-images.githubusercontent.com/2337067/233800604-43986ae7-27dd-4f17-9af6-c2f1a6f07097.png" class="rounded" alt="Blazor Bootstrap - Visual Studio project templates">
</div>
</p>
</div>

<Callout Heading="TIP" Type="CalloutType.Tip">
Upgrade the <b>Blazor.Bootstrap</b> NuGet package to the latest available version.
</Callout>

@code {
private string pageUrl = "/getting-started/blazor-server";
private string title = "Getting started with Blazor Bootstrap - Blazor Server Project Setup";
private string description = "High-performance, lightweight, and responsive blazor bootstrap components in a single package from the developers for the developers.";
private string imageUrl = "https://i.imgur.com/SCbZVd4.jpg";

private string version;
[Inject] public IConfiguration Configuration { get; set; }
private string? version;
[Inject] public IConfiguration Configuration { get; set; } = default!;

protected override void OnInitialized()
{
version = $"{Configuration.GetValue<string>("version")}"; // example: v0.6.1
base.OnInitialized();
}
}
}
24 changes: 21 additions & 3 deletions ...rap.Demo.Hosted/Client/Pages/GettingStarted/webassembly/GettingStartedDocumentation.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,18 +57,36 @@
<p>Either remove or keep the <b>app.css</b> file but make sure you clear it out of any content when the <a href="/sidebar">Sidebar</a> component with full layout is used.</p>
</div>

<SectionHeading Size="HeadingSize.H2" Text="Visual studio project templates" PageUrl="@pageUrl" HashTagName="visual-studio-project-templates" />
<div class="mb-3">
<p>Blazor Bootstrap Templates make it easy to create Blazor projects in a minute. Just install the templates with the NuGet package manager and you're good to go!</p>
<p class="text-bg-dark p-2 my-3 rounded-2">dotnet new install Blazor.Bootstrap.Templates::1.9.1</p>
<p>
Check the Visual Studio project templates GitHub repo <a href="https://github.com/vikramlearning/blazorbootstrap-project-templates">here</a>.
</p>
<p>
<div class="text-center">
<img src="https://user-images.githubusercontent.com/2337067/233800604-43986ae7-27dd-4f17-9af6-c2f1a6f07097.png" class="rounded" alt="Blazor Bootstrap - Visual Studio project templates">
</div>
</p>
</div>

<Callout Heading="TIP" Type="CalloutType.Tip">
Upgrade the <b>Blazor.Bootstrap</b> NuGet package to the latest available version.
</Callout>

@code {
private string pageUrl = "/getting-started/blazor-webassembly";
private string title = "Getting started with Blazor Bootstrap - Blazor WebAssembly Project Setup";
private string description = "High-performance, lightweight, and responsive blazor bootstrap components in a single package from the developers for the developers.";
private string imageUrl = "https://i.imgur.com/SCbZVd4.jpg";

private string version;
[Inject] public IConfiguration Configuration { get; set; }
private string? version;
[Inject] public IConfiguration Configuration { get; set; } = default!;

protected override void OnInitialized()
{
version = $"{Configuration.GetValue<string>("version")}"; // example: v0.6.1
base.OnInitialized();
}
}
}
72 changes: 70 additions & 2 deletions BlazorBootstrap.Demo.Hosted/Client/Pages/Index.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,9 +28,9 @@
</div>
</div>

<div class="container bd-gutter masthead-followup">
<div class="container bd-gutter masthead-followup mb-5">
<div class="col-lg-7 mb-4 mx-auto text-md-center">
<h2 class="mb-3 fw-semibold lh-sm">Blazor Bootstrap UI & Data Visualization Components</h2>
<h2 class="mb-3 fw-semibold lh-sm">All Components</h2>
</div>

<div class="row g-3 mt-5">
Expand Down Expand Up @@ -172,6 +172,74 @@
</div>
</div>

<div class="container bd-gutter masthead-followup mb-5">
<div class="col-lg-7 mb-4 mx-auto text-md-center">
<h2 class="mb-3 fw-semibold lh-sm">Form Components</h2>
</div>

<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="/autocomplete">
<h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.InputCursorText" class="me-2" /> Auto Complete</h4>
</a>
</div>
<div class="col-sm-4 mb-2">
<a class="d-block pe-lg-4 text-decoration-none lh-sm" href="/form/currency-input">
<h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.CurrencyDollar" class="me-2" /> Currency Input</h4>
</a>
</div>
<div class="col-sm-4 mb-2">
<a class="d-block pe-lg-4 text-decoration-none lh-sm" href="/form/date-input">
<h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.CalendarDate" class="me-2" /> Date Input</h4>
</a>
</div>
<div class="col-sm-4 mb-2">
<a class="d-block pe-lg-4 text-decoration-none lh-sm" href="/form/number-input">
<h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.InputCursor" class="me-2" /> Number Input</h4>
</a>
</div>
<div class="col-sm-4 mb-2">
<a class="d-block pe-lg-4 text-decoration-none lh-sm" href="/form/switch">
<h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.ToggleOn" class="me-2" /> Switch <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="/form/time-input">
<h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.ClockFill" class="me-2" /> Time Input <Badge Color="BadgeColor.Success">Updated</Badge></h4>
</a>
</div>
</div>
</div>

<div class="container bd-gutter masthead-followup">
<div class="col-lg-7 mb-4 mx-auto text-md-center">
<h2 class="mb-3 fw-semibold lh-sm">Data Visualization Components</h2>
</div>

<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>
</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>
</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>
</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>
</a>
</div>
</div>
</div>

<div class="container">
<Callout Class="mt-5" Type="CalloutType.Tip" Heading="DO YOU KNOW?">
This demo website is built using the <strong><a href="https://www.nuget.org/packages/Blazor.Bootstrap">Blazor Bootstrap</a></strong> library and published on the Azure Static Web App.
Expand Down
24 changes: 21 additions & 3 deletions BlazorBootstrap.Demo.Server/Pages/GettingStarted/server/GettingStartedDocumentation.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,18 +59,36 @@
<p>Either remove or keep the <b>site.css</b> file but make sure you clear it out of any content when the <a href="/sidebar">Sidebar</a> component with full layout is used.</p>
</div>

<SectionHeading Size="HeadingSize.H2" Text="Visual studio project templates" PageUrl="@pageUrl" HashTagName="visual-studio-project-templates" />
<div class="mb-3">
<p>Blazor Bootstrap Templates make it easy to create Blazor projects in a minute. Just install the templates with the NuGet package manager and you're good to go!</p>
<p class="text-bg-dark p-2 my-3 rounded-2">dotnet new install Blazor.Bootstrap.Templates::1.9.1</p>
<p>
Check the Visual Studio project templates GitHub repo <a href="https://github.com/vikramlearning/blazorbootstrap-project-templates">here</a>.
</p>
<p>
<div class="text-center">
<img src="https://user-images.githubusercontent.com/2337067/233800604-43986ae7-27dd-4f17-9af6-c2f1a6f07097.png" class="rounded" alt="Blazor Bootstrap - Visual Studio project templates">
</div>
</p>
</div>

<Callout Heading="TIP" Type="CalloutType.Tip">
Upgrade the <b>Blazor.Bootstrap</b> NuGet package to the latest available version.
</Callout>

@code {
private string pageUrl = "/getting-started/blazor-server";
private string title = "Getting started with Blazor Bootstrap - Blazor Server Project Setup";
private string description = "High-performance, lightweight, and responsive blazor bootstrap components in a single package from the developers for the developers.";
private string imageUrl = "https://i.imgur.com/SCbZVd4.jpg";

private string version;
[Inject] public IConfiguration Configuration { get; set; }
private string? version;
[Inject] public IConfiguration Configuration { get; set; } = default!;

protected override void OnInitialized()
{
version = $"{Configuration.GetValue<string>("version")}"; // example: v0.6.1
base.OnInitialized();
}
}
}
24 changes: 21 additions & 3 deletions ...rBootstrap.Demo.Server/Pages/GettingStarted/webassembly/GettingStartedDocumentation.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,18 +57,36 @@
<p>Either remove or keep the <b>app.css</b> file but make sure you clear it out of any content when the <a href="/sidebar">Sidebar</a> component with full layout is used.</p>
</div>

<SectionHeading Size="HeadingSize.H2" Text="Visual studio project templates" PageUrl="@pageUrl" HashTagName="visual-studio-project-templates" />
<div class="mb-3">
<p>Blazor Bootstrap Templates make it easy to create Blazor projects in a minute. Just install the templates with the NuGet package manager and you're good to go!</p>
<p class="text-bg-dark p-2 my-3 rounded-2">dotnet new install Blazor.Bootstrap.Templates::1.9.1</p>
<p>
Check the Visual Studio project templates GitHub repo <a href="https://github.com/vikramlearning/blazorbootstrap-project-templates">here</a>.
</p>
<p>
<div class="text-center">
<img src="https://user-images.githubusercontent.com/2337067/233800604-43986ae7-27dd-4f17-9af6-c2f1a6f07097.png" class="rounded" alt="Blazor Bootstrap - Visual Studio project templates">
</div>
</p>
</div>

<Callout Heading="TIP" Type="CalloutType.Tip">
Upgrade the <b>Blazor.Bootstrap</b> NuGet package to the latest available version.
</Callout>

@code {
private string pageUrl = "/getting-started/blazor-webassembly";
private string title = "Getting started with Blazor Bootstrap - Blazor WebAssembly Project Setup";
private string description = "High-performance, lightweight, and responsive blazor bootstrap components in a single package from the developers for the developers.";
private string imageUrl = "https://i.imgur.com/SCbZVd4.jpg";

private string version;
[Inject] public IConfiguration Configuration { get; set; }
private string? version;
[Inject] public IConfiguration Configuration { get; set; } = default!;

protected override void OnInitialized()
{
version = $"{Configuration.GetValue<string>("version")}"; // example: v0.6.1
base.OnInitialized();
}
}
}
72 changes: 70 additions & 2 deletions BlazorBootstrap.Demo.Server/Pages/Index.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,9 +28,9 @@
</div>
</div>

<div class="container bd-gutter masthead-followup">
<div class="container bd-gutter masthead-followup mb-5">
<div class="col-lg-7 mb-4 mx-auto text-md-center">
<h2 class="mb-3 fw-semibold lh-sm">Blazor Bootstrap UI & Data Visualization Components</h2>
<h2 class="mb-3 fw-semibold lh-sm">All Components</h2>
</div>

<div class="row g-3 mt-5">
Expand Down Expand Up @@ -172,6 +172,74 @@
</div>
</div>

<div class="container bd-gutter masthead-followup mb-5">
<div class="col-lg-7 mb-4 mx-auto text-md-center">
<h2 class="mb-3 fw-semibold lh-sm">Form Components</h2>
</div>

<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="/autocomplete">
<h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.InputCursorText" class="me-2" /> Auto Complete</h4>
</a>
</div>
<div class="col-sm-4 mb-2">
<a class="d-block pe-lg-4 text-decoration-none lh-sm" href="/form/currency-input">
<h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.CurrencyDollar" class="me-2" /> Currency Input</h4>
</a>
</div>
<div class="col-sm-4 mb-2">
<a class="d-block pe-lg-4 text-decoration-none lh-sm" href="/form/date-input">
<h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.CalendarDate" class="me-2" /> Date Input</h4>
</a>
</div>
<div class="col-sm-4 mb-2">
<a class="d-block pe-lg-4 text-decoration-none lh-sm" href="/form/number-input">
<h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.InputCursor" class="me-2" /> Number Input</h4>
</a>
</div>
<div class="col-sm-4 mb-2">
<a class="d-block pe-lg-4 text-decoration-none lh-sm" href="/form/switch">
<h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.ToggleOn" class="me-2" /> Switch <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="/form/time-input">
<h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.ClockFill" class="me-2" /> Time Input <Badge Color="BadgeColor.Success">Updated</Badge></h4>
</a>
</div>
</div>
</div>

<div class="container bd-gutter masthead-followup">
<div class="col-lg-7 mb-4 mx-auto text-md-center">
<h2 class="mb-3 fw-semibold lh-sm">Data Visualization Components</h2>
</div>

<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>
</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>
</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>
</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>
</a>
</div>
</div>
</div>

<div class="container">
<Callout Class="mt-5" Type="CalloutType.Tip" Heading="DO YOU KNOW?">
This demo website is built using the <strong><a href="https://www.nuget.org/packages/Blazor.Bootstrap">Blazor Bootstrap</a></strong> library and published on the Azure Static Web App.
Expand Down
27 changes: 27 additions & 0 deletions BlazorBootstrap.Demo/Pages/Charts/BarCharts/ChartsDocumentation.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
@page "/charts/bar-chart"

<PageTitle>@title</PageTitle>

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

<h1>Blazor Bar Chart</h1>
<div class="lead mb-3">
A Blazor Bootstrap bar chart component is used to represent data values as vertical bars. It is sometimes used to show trend data and to compare multiple data sets side by side.
</div>

<SectionHeading Size="HeadingSize.H4" Text="Example with static colors" PageUrl="@pageUrl" HashTagName="example-with-static-colors" />
<div class="mb-3">In the below example, a categorical 12-color palette is used. Use <code>ColorBuilder.CategoricalTwelveColors</code> to get the 12 colors.</div>
<Callout Heading="NOTE" Type="CalloutType.Danger">
In the below example, a maximum of 12 datasets are allowed.
</Callout>
<Demo Type="typeof(Charts_Demo_01_Static_Colors)" Tabs="true" />

<SectionHeading Size="HeadingSize.H4" Text="Example with dynamic colors" PageUrl="@pageUrl" HashTagName="example-with-dynamic-colors" />
<Demo Type="typeof(Charts_Demo_02_Dynamic_Colors)" Tabs="true" />

@code {
private string pageUrl = "/charts/bar-chart";
private string title = "Blazor Bar Chart";
private string description = "A Blazor Bootstrap bar chart component is used to represent data values as vertical bars. It is sometimes used to show trend data and to compare multiple data sets side by side.";
private string imageUrl = "https://i.imgur.com/FGgEMp6.jpg";
}
Loading
Loading