mirror of
https://github.com/radzenhq/radzen-blazor.git
synced 2026-07-08 18:16:08 +00:00
54 lines
2.2 KiB
Plaintext
54 lines
2.2 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" 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>
|
|
</RadzenCard>
|
|
|
|
<RadzenRow>
|
|
<RadzenColumn Size="12">
|
|
<RadzenChart Animate="true">
|
|
<RadzenWaterfallSeries Data="@cashFlow" CategoryProperty="Label" ValueProperty="Amount"
|
|
SummaryProperty="IsTotal" Title="Cash Flow" FillMode="@fillMode"
|
|
PositiveFill="#26A69A" NegativeFill="#EF5350" SummaryFill="#42A5F5" />
|
|
<RadzenColumnOptions Radius="3" />
|
|
<RadzenCategoryAxis />
|
|
<RadzenValueAxis>
|
|
<RadzenGridLines Visible="true" />
|
|
<RadzenAxisTitle Text="Amount ($)" />
|
|
</RadzenValueAxis>
|
|
</RadzenChart>
|
|
</RadzenColumn>
|
|
</RadzenRow>
|
|
</RadzenStack>
|
|
|
|
@code {
|
|
FillMode fillMode = FillMode.Gradient;
|
|
|
|
class DataItem
|
|
{
|
|
public string Label { get; set; }
|
|
public double Amount { get; set; }
|
|
public bool IsTotal { get; set; }
|
|
}
|
|
|
|
DataItem[] cashFlow = new DataItem[]
|
|
{
|
|
new DataItem { Label = "Revenue", Amount = 420 },
|
|
new DataItem { Label = "Services", Amount = 210 },
|
|
new DataItem { Label = "COGS", Amount = -170 },
|
|
new DataItem { Label = "Gross Profit", Amount = 0, IsTotal = true },
|
|
new DataItem { Label = "Salaries", Amount = -200 },
|
|
new DataItem { Label = "Marketing", Amount = -80 },
|
|
new DataItem { Label = "R&D", Amount = -50 },
|
|
new DataItem { Label = "Net Income", Amount = 0, IsTotal = true },
|
|
};
|
|
}
|