Skip to content

Commit 285e7bb

Browse files
mu439mu439
authored
Merge pull request #30 from BlazorExpress/features/create-table-for-chartjs-version-support
Features/create table for chartjs version support
2 parents 83b67a7 + 1a19195 commit 285e7bb

13 files changed

Lines changed: 360 additions & 71 deletions

File tree

‎BlazorExpress.ChartJS.Demo.RCL/Pages/Demos/LineChart/LineChart_Demo_01_A_Examples.razor‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
<LineChart @ref="lineChart" 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 ShowHorizontalLineChartAsync()"> Horizontal Line Chart </button>
8-
<button class="btn btn-primary btn-sm" @onclick="async () => await ShowVerticalLineChartAsync()"> Vertical Line Chart </button>
4+
<Button Color="ButtonColor.Primary" Size="ButtonSize.Small" @onclick="RandomizeAsync"> Randomize </Button>
5+
<Button Color="ButtonColor.Link" Size="ButtonSize.Small" @onclick="AddDatasetAsync"> Add Dataset </Button>
6+
<Button Color="ButtonColor.Info" Size="ButtonSize.Small" @onclick="AddDataAsync"> Add Data </Button>
7+
<Button Color="ButtonColor.Success" Size="ButtonSize.Small" @onclick="ShowHorizontalLineChartAsync"> Horizontal Line Chart </Button>
8+
<Button Color="ButtonColor.Warning" Size="ButtonSize.Small" @onclick="ShowVerticalLineChartAsync"> Vertical Line Chart </Button>
99
</div>
1010

1111
@code {

‎BlazorExpress.ChartJS.Demo.RCL/Pages/Demos/LineChart/LineChart_Demo_03_Tick_Configuration.razor‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
<LineChart @ref="lineChart" Width="600" />
22

33
<div class="mt-5">
4-
<button class="btn btn-primary btn-sm" @onclick="async () => await ChangeTicksAlignmentToStart()"> Alignment: start </button>
5-
<button class="btn btn-primary btn-sm" @onclick="async () => await ChangeTicksAlignmentToCenter()"> Alignment: center (default) </button>
6-
<button class="btn btn-primary btn-sm" @onclick="async () => await ChangeTicksAlignmentToEnd()"> Alignment: end </button>
4+
<Button Color="ButtonColor.Primary" Size="ButtonSize.Small" @onclick="ChangeTicksAlignmentToStart"> Alignment: start </Button>
5+
<Button Color="ButtonColor.Link" Size="ButtonSize.Small" @onclick="ChangeTicksAlignmentToCenter"> Alignment: center (default) </Button>
6+
<Button Color="ButtonColor.Info" Size="ButtonSize.Small" @onclick="ChangeTicksAlignmentToEnd"> Alignment: end </Button>
77
</div>
88

99
@code {
@@ -22,7 +22,7 @@
2222
lineChartOptions = new() { Responsive = true, Interaction = new Interaction { Mode = InteractionMode.Index } };
2323

2424
// set ticks color
25-
lineChartOptions.Scales.X!.Ticks = new ChartAxesTicks { Color = "red" };
25+
lineChartOptions.Scales.X!.Ticks = new ChartAxesTicks { Color = ColorUtility.CategoricalTwelveColors[0] };
2626
lineChartOptions.Scales.Y!.Ticks = new ChartAxesTicks { Color = ColorUtility.CategoricalTwelveColors[4] };
2727
}
2828

‎BlazorExpress.ChartJS.Demo.RCL/Pages/Demos/PieChart/PieChart_Demo_01_Examples.razor‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
<PieChart @ref="pieChart" 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>
4+
<Button Color="ButtonColor.Primary" Size="ButtonSize.Small" @onclick="RandomizeAsync"> Randomize </Button>
5+
<Button Color="ButtonColor.Link" Size="ButtonSize.Small" @onclick="AddDatasetAsync"> Add Dataset </Button>
6+
<Button Color="ButtonColor.Info" Size="ButtonSize.Small" @onclick="AddDataAsync">Add Data</Button>
77
</div>
88

99
@code {

‎BlazorExpress.ChartJS.Demo.RCL/Pages/Demos/PieChart/PieChart_Demo_02_Datalabels.razor‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<PieChart @ref="pieChart" 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 AddDataAsync()">Add Data</button>
4+
<Button Color="ButtonColor.Primary" Size="ButtonSize.Small" @onclick="RandomizeAsync"> Randomize </Button>
5+
<Button Color="ButtonColor.Info" Size="ButtonSize.Small" @onclick="AddDataAsync">Add Data</Button>
66
</div>
77

88
@code {

‎BlazorExpress.ChartJS.Demo.RCL/Pages/Demos/PieChart/PieChart_Demo_03_Change_Legend_Position.razor‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
<PieChart @ref="pieChart" Width="600" />
22

33
<div class="mt-5">
4-
<button class="btn btn-primary btn-sm" @onclick="PositionTopAsync"> Position: top </button>
5-
<button class="btn btn-primary btn-sm" @onclick="PositionRightAsync"> Position: right </button>
6-
<button class="btn btn-primary btn-sm" @onclick="PositionBottomAsync"> Position: bottom </button>
7-
<button class="btn btn-primary btn-sm" @onclick="PositionLeftAsync"> Position: left </button>
4+
<Button Color="ButtonColor.Primary" Size="ButtonSize.Small" @onclick="PositionTopAsync"> Position: top </Button>
5+
<Button Color="ButtonColor.Link" Size="ButtonSize.Small" @onclick="PositionRightAsync"> Position: right </Button>
6+
<Button Color="ButtonColor.Info" Size="ButtonSize.Small" @onclick="PositionBottomAsync"> Position: bottom </Button>
7+
<Button Color="ButtonColor.Warning" Size="ButtonSize.Small" @onclick="PositionLeftAsync"> Position: left </Button>
88
</div>
99

1010
@code {

‎BlazorExpress.ChartJS.Demo.RCL/Pages/Docs/GettingStarted/GettingStartedDocumentation.razor‎

Lines changed: 50 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,55 @@
1010
</SubTitleTemplate>
1111
</PageHero>
1212

13+
<section class="be-release-spotlight">
14+
<p class="be-release-kicker">Compatibility Matrix</p>
15+
<h2 class="be-release-title">Supported Tech Stack by Release</h2>
16+
<p class="be-release-copy">
17+
Pick the top row for new projects. Older rows are retained for teams upgrading from previous releases.
18+
</p>
19+
</section>
20+
21+
<div class="table-container">
22+
<table class="table is-bordered is-striped is-fullwidth">
23+
<thead>
24+
<tr>
25+
<th>BlazorExpress.ChartJS</th>
26+
<th>.NET</th>
27+
<th>Chart.js</th>
28+
<th>chartjs-plugin-datalabels</th>
29+
</tr>
30+
</thead>
31+
<tbody>
32+
<tr>
33+
<td>1.2.2</td>
34+
<td>8, 9, 10</td>
35+
<td>4.4.1</td>
36+
<td>2.2.0</td>
37+
</tr>
38+
<tr>
39+
<td>1.1.0+</td>
40+
<td>8</td>
41+
<td>4.4.1</td>
42+
<td>2.2.0</td>
43+
</tr>
44+
<tr>
45+
<td>1.0.0</td>
46+
<td>8</td>
47+
<td>4.0.1</td>
48+
<td>2.2.0</td>
49+
</tr>
50+
</tbody>
51+
</table>
52+
</div>
53+
54+
<section class="be-release-spotlight be-release-spotlight--compact">
55+
<p class="be-release-kicker">Guides</p>
56+
<h3 class="be-release-title">Project Setup Documentation</h3>
57+
<p class="be-release-copy">
58+
Choose the setup guide that matches your hosting model and runtime.
59+
</p>
60+
</section>
61+
1362
<div class="table-container">
1463
<table class="table">
1564
<thead>
@@ -54,7 +103,7 @@
54103
private const string pageUrl2 = DemoRouteConstants.Docs_Prefix;
55104
private const string pageTitle = "Getting started with BlazorExpress.ChartJS";
56105
private const string pageDescription = "Explore practical Blazor ChartJS demos with step-by-step examples. Learn how to create interactive charts in your Blazor projects.";
57-
private const string metaTitle = "Blazor ChartJS Demo – Getting Started with Interactive Chart Examples";
106+
private const string metaTitle = "Blazor ChartJS Demo � Getting Started with Interactive Chart Examples";
58107
private const string metaDescription = "Explore practical Blazor ChartJS demos with step-by-step examples. Learn how to create interactive charts in your Blazor projects.";
59108
private const string imageUrl = "https://i.imgur.com/IX3bajc.png"; // TODO: update with the actual image URL for the Bar Chart demo
60109
}

‎BlazorExpress.ChartJS.Demo.RCL/Pages/Home/Index.razor‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,42 @@
3939
<DoYouKnow />
4040

4141
<StarOnGitHub />
42+
43+
<div class="mt-6">
44+
<h3 class="title is-4">Supported Tech Stack</h3>
45+
<div class="table-container">
46+
<table class="table is-bordered is-striped is-fullwidth">
47+
<thead>
48+
<tr>
49+
<th>BlazorExpress.ChartJS</th>
50+
<th>.NET</th>
51+
<th>Chart.js</th>
52+
<th>chartjs-plugin-datalabels</th>
53+
</tr>
54+
</thead>
55+
<tbody>
56+
<tr>
57+
<td>1.2.2</td>
58+
<td>8, 9, 10</td>
59+
<td>4.4.1</td>
60+
<td>2.2.0</td>
61+
</tr>
62+
<tr>
63+
<td>1.1.0+</td>
64+
<td>8</td>
65+
<td>4.4.1</td>
66+
<td>2.2.0</td>
67+
</tr>
68+
<tr>
69+
<td>1.0.0</td>
70+
<td>8</td>
71+
<td>4.0.1</td>
72+
<td>2.2.0</td>
73+
</tr>
74+
</tbody>
75+
</table>
76+
</div>
77+
</div>
4278
</div>
4379

4480
@code {

‎BlazorExpress.ChartJS.Demo.RCL/wwwroot/css/blazorexpress.chartjs.demo.rcl.css‎

Lines changed: 188 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,10 @@
88
--be-bulma-accent-rgb: 255, 228, 132;
99
--be-bulma-violet-rgb: 112.520718, 44.062154, 249.437846;
1010
--be-bulma-pink-rgb: 214, 51, 132;
11+
--be-premium-ink: #0f172a;
12+
--be-premium-mint: #0ea5a4;
13+
--be-premium-gold: #f59e0b;
14+
--be-premium-canvas: #f7fafc;
1115
}
1216

1317
[data-theme=light] {
@@ -121,3 +125,187 @@ h1:focus-visible {
121125
margin-top: .75rem;
122126
color: var(--bs-body-color) !important
123127
}
128+
129+
.be-loader-shell {
130+
min-height: 100vh;
131+
display: grid;
132+
place-items: center;
133+
padding: 1.5rem;
134+
background: radial-gradient(circle at 10% 15%, rgba(14, 165, 164, 0.16), transparent 36%), radial-gradient(circle at 85% 12%, rgba(245, 158, 11, 0.2), transparent 30%), linear-gradient(160deg, #f8fafc 0%, #e7eef8 55%, #f8fafc 100%);
135+
}
136+
137+
.be-loader-card {
138+
width: min(420px, 92vw);
139+
border: 1px solid rgba(15, 23, 42, 0.09);
140+
border-radius: 1.1rem;
141+
background: rgba(255, 255, 255, 0.75);
142+
box-shadow: 0 24px 60px rgba(15, 23, 42, 0.14);
143+
backdrop-filter: blur(10px);
144+
text-align: center;
145+
padding: 2rem 1.5rem;
146+
}
147+
148+
.be-loader-ring {
149+
width: 62px;
150+
height: 62px;
151+
margin: 0 auto 1rem auto;
152+
border: 3px solid rgba(15, 23, 42, 0.12);
153+
border-top-color: var(--be-premium-mint);
154+
border-right-color: var(--be-premium-gold);
155+
border-radius: 50%;
156+
animation: be-loader-spin 1s linear infinite;
157+
}
158+
159+
.be-loader-orbit {
160+
display: none;
161+
}
162+
163+
.be-loader-logo {
164+
filter: drop-shadow(0 10px 14px rgba(15, 23, 42, 0.22));
165+
margin-bottom: 0.8rem;
166+
}
167+
168+
.be-loader-title {
169+
font-family: "Sora", "Segoe UI", sans-serif;
170+
font-size: 1.15rem;
171+
font-weight: 700;
172+
letter-spacing: 0.01em;
173+
color: var(--be-premium-ink);
174+
}
175+
176+
.be-loader-subtitle {
177+
font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
178+
margin-top: 0.35rem;
179+
color: #344054;
180+
font-size: 0.96rem;
181+
display: inline-flex;
182+
align-items: center;
183+
gap: 0.5rem;
184+
}
185+
186+
.be-loader-inline-spinner {
187+
width: 0.9rem;
188+
height: 0.9rem;
189+
border-radius: 50%;
190+
border: 2px solid rgba(15, 23, 42, 0.2);
191+
border-top-color: var(--be-premium-mint);
192+
border-right-color: var(--be-premium-gold);
193+
animation: be-loader-spin 0.9s linear infinite;
194+
}
195+
196+
.be-loader-shell--option-b {
197+
background: radial-gradient(circle at 14% 18%, rgba(14, 165, 164, 0.2), transparent 34%), radial-gradient(circle at 86% 14%, rgba(245, 158, 11, 0.25), transparent 35%), linear-gradient(150deg, #f4f8ff 0%, #e6eefb 50%, #f8fbff 100%);
198+
}
199+
200+
.be-loader-card--option-b {
201+
position: relative;
202+
border-color: rgba(15, 23, 42, 0.11);
203+
box-shadow: 0 26px 70px rgba(2, 6, 23, 0.17);
204+
overflow: hidden;
205+
}
206+
207+
.be-loader-card--option-b::before {
208+
content: "";
209+
position: absolute;
210+
inset: 0;
211+
background: linear-gradient(120deg, rgba(14, 165, 164, 0.08), rgba(245, 158, 11, 0.08));
212+
pointer-events: none;
213+
}
214+
215+
.be-loader-card--option-b .be-loader-ring {
216+
display: none;
217+
}
218+
219+
.be-loader-card--option-b .be-loader-orbit {
220+
width: 122px;
221+
height: 122px;
222+
margin: 0 auto 0.95rem auto;
223+
display: grid;
224+
place-items: center;
225+
position: relative;
226+
border-radius: 50%;
227+
border: 1px solid rgba(15, 23, 42, 0.12);
228+
animation: be-loader-orbit 7s linear infinite;
229+
}
230+
231+
.be-loader-card--option-b .be-loader-logo {
232+
margin-bottom: 0;
233+
}
234+
235+
.be-loader-dot {
236+
position: absolute;
237+
width: 11px;
238+
height: 11px;
239+
border-radius: 50%;
240+
box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.65);
241+
}
242+
243+
.be-loader-dot--a {
244+
top: 6px;
245+
left: 50%;
246+
transform: translateX(-50%);
247+
background: #0ea5a4;
248+
}
249+
250+
.be-loader-dot--b {
251+
bottom: 14px;
252+
left: 14px;
253+
background: #f59e0b;
254+
}
255+
256+
.be-loader-dot--c {
257+
bottom: 14px;
258+
right: 14px;
259+
background: #2563eb;
260+
}
261+
262+
.be-release-spotlight {
263+
margin: 0.25rem 0 1rem 0;
264+
padding: 1.1rem 1rem;
265+
border: 1px solid rgba(15, 23, 42, 0.08);
266+
border-radius: 0.9rem;
267+
background: linear-gradient(125deg, rgba(255, 255, 255, 0.95), rgba(246, 252, 255, 0.95));
268+
}
269+
270+
.be-release-spotlight--compact {
271+
margin-top: 1.4rem;
272+
}
273+
274+
.be-release-kicker {
275+
margin: 0;
276+
font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
277+
font-size: 0.78rem;
278+
letter-spacing: 0.08em;
279+
text-transform: uppercase;
280+
color: #0f766e;
281+
font-weight: 600;
282+
}
283+
284+
.be-release-title {
285+
margin: 0.3rem 0 0.4rem 0;
286+
font-family: "Sora", "Segoe UI", sans-serif;
287+
color: #111827;
288+
font-size: clamp(1.05rem, 1.6vw, 1.28rem);
289+
}
290+
291+
.be-release-copy {
292+
margin: 0;
293+
color: #334155;
294+
line-height: 1.5;
295+
}
296+
297+
@keyframes be-loader-spin {
298+
to {
299+
transform: rotate(360deg);
300+
}
301+
}
302+
303+
@keyframes be-loader-orbit {
304+
from {
305+
transform: rotate(0deg);
306+
}
307+
308+
to {
309+
transform: rotate(360deg);
310+
}
311+
}

‎BlazorExpress.ChartJS.Demo.WebAssembly/App.razor‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
AdditionalAssemblies="new []{ typeof(BlazorExpress.ChartJS.Demo.RCL.App).Assembly }">
33
<Found Context="routeData">
44
<RouteView RouteData="@routeData" DefaultLayout="@typeof(BlazorExpress.ChartJS.Demo.RCL.MainLayout)" />
5-
<FocusOnNavigate RouteData="@routeData" Selector="h1" />
5+
@* <FocusOnNavigate RouteData="@routeData" Selector="h1" /> *@
66
</Found>
77
<NotFound>
88
<PageTitle>Not found</PageTitle>

0 commit comments

Comments
 (0)