BlazorExpress.ChartJS/BlazorExpress.ChartJS.Demo.RCL/Pages/Docs/GettingStarted/GettingStartedDocumentation.razor at 1a191955818beccb2d313584dda24d0ea6b989d0 · BlazorExpress/BlazorExpress.ChartJS · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
@attribute [Route(pageUrl)]
@attribute [Route(pageUrl2)]
@layout DocsMainLayout

<PageMetaTags PageUrl="@pageUrl" Title="@metaTitle" Description="@metaDescription" ImageUrl="@imageUrl" />

<PageHero Title="@pageTitle">
    <SubTitleTemplate>
        @((MarkupString)pageDescription)
    </SubTitleTemplate>
</PageHero>

<section class="be-release-spotlight">
    <p class="be-release-kicker">Compatibility Matrix</p>
    <h2 class="be-release-title">Supported Tech Stack by Release</h2>
    <p class="be-release-copy">
        Pick the top row for new projects. Older rows are retained for teams upgrading from previous releases.
    </p>
</section>

<div class="table-container">
    <table class="table is-bordered is-striped is-fullwidth">
        <thead>
            <tr>
                <th>BlazorExpress.ChartJS</th>
                <th>.NET</th>
                <th>Chart.js</th>
                <th>chartjs-plugin-datalabels</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1.2.2</td>
                <td>8, 9, 10</td>
                <td>4.4.1</td>
                <td>2.2.0</td>
            </tr>
            <tr>
                <td>1.1.0+</td>
                <td>8</td>
                <td>4.4.1</td>
                <td>2.2.0</td>
            </tr>
            <tr>
                <td>1.0.0</td>
                <td>8</td>
                <td>4.0.1</td>
                <td>2.2.0</td>
            </tr>
        </tbody>
    </table>
</div>

<section class="be-release-spotlight be-release-spotlight--compact">
    <p class="be-release-kicker">Guides</p>
    <h3 class="be-release-title">Project Setup Documentation</h3>
    <p class="be-release-copy">
        Choose the setup guide that matches your hosting model and runtime.
    </p>
</section>

<div class="table-container">
    <table class="table">
        <thead>
            <tr>
                <th>#</th>
                <th>.NET Version</th>
                <th>Project Type</th>
                <th>Documentation Link</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>.NET 8</td>
                <td>Blazor WebAssembly (.NET 8)</td>
                <td><DocsLink Text="Project Setup Guide" Href="@DemoRouteConstants.Docs_Getting_Started_Blazor_WebAssembly_NET8" /></td>
            </tr>
            <tr>
                <td>2</td>
                <td>.NET 8</td>
                <td>Blazor WebApp (.NET 8) - Interactive render mode Server - Global location</td>
                <td><DocsLink Text="Project Setup Guide" Href="@DemoRouteConstants.Docs_Getting_Started_Blazor_WebApp_NET_8_Interactive_Render_Mode_Server_Global_Location" /></td>
            </tr>
            <tr>
                <td>3</td>
                <td>.NET 8</td>
                <td>Blazor WebApp (.NET 8) - Interactive render mode Auto - Global location</td>
                <td>TODO: Pending</td>
            </tr>
            <tr>
                <td>4</td>
                <td>.NET 8</td>
                <td>MAUI Blazor Hybrid App (.NET 8)</td>
                <td>TODO: Pending</td>
            </tr>
        </tbody>
    </table>
</div>

@code {
    private const string pageUrl = DemoRouteConstants.Docs_Getting_Started_Introduction;
    private const string pageUrl2 = DemoRouteConstants.Docs_Prefix;
    private const string pageTitle = "Getting started with BlazorExpress.ChartJS";
    private const string pageDescription = "Explore practical Blazor ChartJS demos with step-by-step examples. Learn how to create interactive charts in your Blazor projects.";
    private const string metaTitle = "Blazor ChartJS Demo � Getting Started with Interactive Chart Examples";
    private const string metaDescription = "Explore practical Blazor ChartJS demos with step-by-step examples. Learn how to create interactive charts in your Blazor projects.";
    private const string imageUrl = "https://i.imgur.com/IX3bajc.png"; // TODO: update with the actual image URL for the Bar Chart demo
}