mirror of
https://github.com/radzenhq/radzen-blazor.git
synced 2026-07-08 18:16:08 +00:00
50 lines
2.3 KiB
Plaintext
50 lines
2.3 KiB
Plaintext
<RadzenStack class="rz-p-0 rz-p-md-6 rz-p-lg-12">
|
|
<RadzenCard Variant="Variant.Outlined">
|
|
<RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Wrap="FlexWrap.Wrap">
|
|
<RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0.5rem">
|
|
<RadzenCheckBox @bind-Value="inverted" Name="inverted" />
|
|
<RadzenLabel Text="Inverted" Component="inverted" />
|
|
</RadzenStack>
|
|
<RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0.5rem">
|
|
<RadzenLabel Text="Fill" Component="fillMode" />
|
|
<RadzenSelectBar @bind-Value="@fillMode" TValue="FillMode" Size="ButtonSize.Small" Name="fillMode">
|
|
<Items>
|
|
<RadzenSelectBarItem Value="FillMode.Gradient" Text="Gradient" />
|
|
<RadzenSelectBarItem Value="FillMode.Solid" Text="Solid" />
|
|
<RadzenSelectBarItem Value="FillMode.None" Text="None" />
|
|
</Items>
|
|
</RadzenSelectBar>
|
|
</RadzenStack>
|
|
</RadzenStack>
|
|
</RadzenCard>
|
|
|
|
<RadzenChart Animate="true" Style="width: 100%; height: 500px;">
|
|
<RadzenPyramidSeries Data="@levels" CategoryProperty="Level" ValueProperty="Count"
|
|
Inverted="@inverted" FillMode="@fillMode"
|
|
StrokeWidth="1" Strokes="@(new[] { "var(--rz-base-background-color)", "var(--rz-base-background-color)", "var(--rz-base-background-color)", "var(--rz-base-background-color)", "var(--rz-base-background-color)" })">
|
|
<RadzenSeriesDataLabels Visible="true" />
|
|
</RadzenPyramidSeries>
|
|
<RadzenLegend Position="LegendPosition.Right" />
|
|
</RadzenChart>
|
|
</RadzenStack>
|
|
|
|
@code {
|
|
bool inverted;
|
|
FillMode fillMode = FillMode.Gradient;
|
|
|
|
class PyramidData
|
|
{
|
|
public string Level { get; set; } = "";
|
|
public double Count { get; set; }
|
|
}
|
|
|
|
PyramidData[] levels = new[]
|
|
{
|
|
new PyramidData { Level = "Physiological", Count = 1000 },
|
|
new PyramidData { Level = "Safety", Count = 600 },
|
|
new PyramidData { Level = "Love & Belonging", Count = 350 },
|
|
new PyramidData { Level = "Esteem", Count = 150 },
|
|
new PyramidData { Level = "Self-actualization", Count = 50 },
|
|
};
|
|
}
|