devexpress-blazor-gauges

Name: devexpress-blazor-gauges
Author: DevExpress

35stars6forks

How to install devexpress-blazor-gauges?

devexpress/agent-skills/devexpress-blazor-gauges

$npx -y skills add DevExpress/agent-skills --skill devexpress-blazor-gauges

Installs into the current project.

Summary

--- name: devexpress-blazor-gauges description: Generate and configure DevExpress Blazor visualization components such as DxBarGauge, DxRangeSelector, DxSankey, DxSparkline, and DxMap. Use when building dashboards with gauges and range selection, Sankey flow diagrams, sparkline

Files · 1

View on GitHub

SKILL.md

1	# DevExpress Blazor Visualization Components
2
3	A collection of specialized visualization components for Blazor:
4
5	- `DxBarGauge` — Circular bar gauge displaying multiple values as arcs
6	- `DxRangeSelector` — Linear scale with draggable sliders for range selection; optionally displays a background chart
7	- `DxSankey` — Flow diagram showing value transfer between two entity sets
8	- `DxSparkline` — Compact trend line/bar embedded in other UI (e.g., inside a Grid column)
9	- `DxMap` — Geo map with markers and route display using Azure, Google, or GoogleStatic tiles
10
11	## When to Use This Skill
12
13	- Display multiple gauge values as concentric arc bars (`DxBarGauge`)
14	- Let users visually select a date/numeric range by dragging sliders (`DxRangeSelector`)
15	- Visualize flow between categories or entities (`DxSankey`)
16	- Embed a compact trend chart inside a Grid cell or card (`DxSparkline`)
17	- Show geo locations, routes, or markers on a map (`DxMap`)
18	- Export gauge/sparkline/sankey as PNG/PDF/JPEG/GIF
19
20	## Prerequisites & Installation
21
22	### NuGet Package
23
24	\| Package \| Purpose \|
25	\|---\|---\|
26	\| `DevExpress.Blazor` \| All components in this skill \|
27
28	```bash
29	# Install from NuGet.org:
30	dotnet add package DevExpress.Blazor
31	```
32
33	Register in `Program.cs`:
34	```csharp
35	builder.Services.AddDevExpressBlazor();
36	```
37
38	> v26.1 note: `DevExpress.Blazor` no longer includes `options.BootstrapVersion` or `DevExpress.Blazor.BootstrapVersion`. Do not generate either API.
39
40	Add to `_Imports.razor`:
41	```razor
42	@using DevExpress.Blazor
43	```
44
45	Apply a theme and add client scripts in `App.razor` inside `<head>`:
46	```razor
47	@using DevExpress.Blazor
48	@DxResourceManager.RegisterTheme(Themes.Fluent)
49	@DxResourceManager.RegisterScripts()
50	```
51
52	`DxMap` requires a GIS API key (Azure Maps, Google Maps, or GoogleStatic). Pass it via the `DxMapApiKeys` child component and set `Provider`.
53
54	## Before You Start — Ask the Developer
55
56	If the host agent has a structured question-asking tool available, use it to ask these questions one at a time with clear options — for example, Claude Code's `AskUserQuestion` tool or GitHub Copilot's `askQuestions` tool. If no such tool is available, ask the questions directly in the chat response before generating code.
57
58	Before generating code, ask:
59
60	1. Render mode: `InteractiveServer`, `InteractiveWebAssembly`, `InteractiveAuto`, or Static/SSR? (Range Selector dragging and Map/Sankey click events require interactivity)
61	2. Which component?: Bar Gauge, Range Selector, Sankey, Sparkline, or Map?
62	3. Data source: Collection type and field names (for Sankey: source, target, weight fields; for Sparkline: argument, value fields)
63	4. For Bar Gauge: How many values? What is the scale range (`StartValue`/`EndValue`)?
64	5. For Range Selector: Numeric or DateTime scale? Does the user need a background chart?
65	Does the selected range need to filter or drive other components?
66	(If yes → use `ValueChanged` event with `RangeSelectorValueChangedEventArgs`; never use `@bind-SelectedRangeStartValue`.)
67	6. For Map: Which GIS provider? Do you have an API key?
68
69	## Component Overview
70
71	### DxBarGauge — Quick Pattern
72
73	```razor
74	@rendermode InteractiveServer
75
76	<DxBarGauge Width="100%"
77	Height="400px"
78	StartValue="0"
79	EndValue="100"
80	Values="@Values">
81	<DxBarGaugeLabelSettings Indent="30" />
82	<DxBarGaugeLegendSettings Visible="true"
83	ItemCaptions="@Captions"
84	VerticalAlignment="VerticalEdge.Bottom"
85	HorizontalAlignment="HorizontalAlignment.Center" />
86	</DxBarGauge>
87
88	@code {
89	double[] Values = new double[] { 47.27, 65.32, 84.59 };
90	string[] Captions = new string[] { "Metacritic", "Rotten Tomatoes", "IMDb" };
91	}
92	```
93
94	### DxSankey — Quick Pattern
95
96	```razor
97	<DxSankey Data="@Data"
98	Width="100%"
99	Height="440px"
100	SourceFieldName="Source"
101	TargetFieldName="Target"
102	WeightFieldN

People who liked this also viewed

6 picks

Type

devexpress-blazor-gauges

35stars6forks

View on GitHub

How to install devexpress-blazor-gauges?

devexpress/agent-skills/devexpress-blazor-gauges

$npx -y skills add DevExpress/agent-skills --skill devexpress-blazor-gauges

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# DevExpress Blazor Visualization Components
2
3	A collection of specialized visualization components for Blazor:
4
5	- `DxBarGauge` — Circular bar gauge displaying multiple values as arcs
6	- `DxRangeSelector` — Linear scale with draggable sliders for range selection; optionally displays a background chart
7	- `DxSankey` — Flow diagram showing value transfer between two entity sets
8	- `DxSparkline` — Compact trend line/bar embedded in other UI (e.g., inside a Grid column)
9	- `DxMap` — Geo map with markers and route display using Azure, Google, or GoogleStatic tiles
10
11	## When to Use This Skill
12
13	- Display multiple gauge values as concentric arc bars (`DxBarGauge`)
14	- Let users visually select a date/numeric range by dragging sliders (`DxRangeSelector`)
15	- Visualize flow between categories or entities (`DxSankey`)
16	- Embed a compact trend chart inside a Grid cell or card (`DxSparkline`)
17	- Show geo locations, routes, or markers on a map (`DxMap`)
18	- Export gauge/sparkline/sankey as PNG/PDF/JPEG/GIF
19
20	## Prerequisites & Installation
21
22	### NuGet Package
23
24	\| Package \| Purpose \|
25	\|---\|---\|
26	\| `DevExpress.Blazor` \| All components in this skill \|
27
28	```bash
29	# Install from NuGet.org:
30	dotnet add package DevExpress.Blazor
31	```
32
33	Register in `Program.cs`:
34	```csharp
35	builder.Services.AddDevExpressBlazor();
36	```
37
38	> v26.1 note: `DevExpress.Blazor` no longer includes `options.BootstrapVersion` or `DevExpress.Blazor.BootstrapVersion`. Do not generate either API.
39
40	Add to `_Imports.razor`:
41	```razor
42	@using DevExpress.Blazor
43	```
44
45	Apply a theme and add client scripts in `App.razor` inside `<head>`:
46	```razor
47	@using DevExpress.Blazor
48	@DxResourceManager.RegisterTheme(Themes.Fluent)
49	@DxResourceManager.RegisterScripts()
50	```
51
52	`DxMap` requires a GIS API key (Azure Maps, Google Maps, or GoogleStatic). Pass it via the `DxMapApiKeys` child component and set `Provider`.
53
54	## Before You Start — Ask the Developer
55
56	If the host agent has a structured question-asking tool available, use it to ask these questions one at a time with clear options — for example, Claude Code's `AskUserQuestion` tool or GitHub Copilot's `askQuestions` tool. If no such tool is available, ask the questions directly in the chat response before generating code.
57
58	Before generating code, ask:
59
60	1. Render mode: `InteractiveServer`, `InteractiveWebAssembly`, `InteractiveAuto`, or Static/SSR? (Range Selector dragging and Map/Sankey click events require interactivity)
61	2. Which component?: Bar Gauge, Range Selector, Sankey, Sparkline, or Map?
62	3. Data source: Collection type and field names (for Sankey: source, target, weight fields; for Sparkline: argument, value fields)
63	4. For Bar Gauge: How many values? What is the scale range (`StartValue`/`EndValue`)?
64	5. For Range Selector: Numeric or DateTime scale? Does the user need a background chart?
65	Does the selected range need to filter or drive other components?
66	(If yes → use `ValueChanged` event with `RangeSelectorValueChangedEventArgs`; never use `@bind-SelectedRangeStartValue`.)
67	6. For Map: Which GIS provider? Do you have an API key?
68
69	## Component Overview
70
71	### DxBarGauge — Quick Pattern
72
73	```razor
74	@rendermode InteractiveServer
75
76	<DxBarGauge Width="100%"
77	Height="400px"
78	StartValue="0"
79	EndValue="100"
80	Values="@Values">
81	<DxBarGaugeLabelSettings Indent="30" />
82	<DxBarGaugeLegendSettings Visible="true"
83	ItemCaptions="@Captions"
84	VerticalAlignment="VerticalEdge.Bottom"
85	HorizontalAlignment="HorizontalAlignment.Center" />
86	</DxBarGauge>
87
88	@code {
89	double[] Values = new double[] { 47.27, 65.32, 84.59 };
90	string[] Captions = new string[] { "Metacritic", "Rotten Tomatoes", "IMDb" };
91	}
92	```
93
94	### DxSankey — Quick Pattern
95
96	```razor
97	<DxSankey Data="@Data"
98	Width="100%"
99	Height="440px"
100	SourceFieldName="Source"
101	TargetFieldName="Target"
102	WeightFieldN

People who liked this also viewed

6 picks

Type