mirror of
https://github.com/radzenhq/radzen-blazor.git
synced 2026-07-08 18:16:08 +00:00
68 lines
3.0 KiB
Plaintext
68 lines
3.0 KiB
Plaintext
@using System.Globalization
|
|
|
|
<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" Gap="1rem">
|
|
<RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0.5rem">
|
|
<RadzenCheckBox @bind-Value="@showLine" Name="showLine" />
|
|
<RadzenLabel Text="Reference line" Component="showLine" class="rz-color-danger-dark" />
|
|
<RadzenNumeric @bind-Value="@target" Step="10000" Style="width: 130px;" />
|
|
</RadzenStack>
|
|
<RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0.5rem">
|
|
<RadzenCheckBox @bind-Value="@showBand" Name="showBand" />
|
|
<RadzenLabel Text="Reference band" Component="showBand" />
|
|
<RadzenNumeric @bind-Value="@from" Step="10000" Style="width: 130px;" />
|
|
<RadzenNumeric @bind-Value="@to" Step="10000" Style="width: 130px;" />
|
|
</RadzenStack>
|
|
</RadzenStack>
|
|
</RadzenCard>
|
|
|
|
<RadzenChart>
|
|
<RadzenLineSeries Smooth="true" Data="@revenue" CategoryProperty="Date" Title="Monthly revenue" ValueProperty="Revenue" StrokeWidth="2">
|
|
<RadzenMarkers MarkerType="MarkerType.Circle" />
|
|
<RadzenSeriesReferenceBand Visible="@showBand" From="@from" To="@to" Title="Acceptable range" />
|
|
<RadzenSeriesReferenceLine Visible="@showLine" Value="@target" Title="Target" Stroke="var(--rz-danger-dark)" StrokeWidth="2" LineType="LineType.Dashed" />
|
|
</RadzenLineSeries>
|
|
<RadzenCategoryAxis Padding="20" />
|
|
<RadzenValueAxis Formatter="@FormatAsUSD">
|
|
<RadzenGridLines Visible="true" />
|
|
<RadzenAxisTitle Text="Revenue (USD)" />
|
|
</RadzenValueAxis>
|
|
</RadzenChart>
|
|
</RadzenStack>
|
|
|
|
@code {
|
|
bool showLine = true;
|
|
bool showBand = true;
|
|
double target = 280000;
|
|
double from = 230000;
|
|
double to = 270000;
|
|
|
|
class DataItem
|
|
{
|
|
public string Date { get; set; }
|
|
public double Revenue { get; set; }
|
|
}
|
|
|
|
string FormatAsUSD(object value)
|
|
{
|
|
return ((double)value).ToString("C0", CultureInfo.CreateSpecificCulture("en-US"));
|
|
}
|
|
|
|
DataItem[] revenue = new[]
|
|
{
|
|
new DataItem { Date = "Jan", Revenue = 234000 },
|
|
new DataItem { Date = "Feb", Revenue = 269000 },
|
|
new DataItem { Date = "Mar", Revenue = 233000 },
|
|
new DataItem { Date = "Apr", Revenue = 244000 },
|
|
new DataItem { Date = "May", Revenue = 214000 },
|
|
new DataItem { Date = "Jun", Revenue = 253000 },
|
|
new DataItem { Date = "Jul", Revenue = 274000 },
|
|
new DataItem { Date = "Aug", Revenue = 284000 },
|
|
new DataItem { Date = "Sept", Revenue = 273000 },
|
|
new DataItem { Date = "Oct", Revenue = 282000 },
|
|
new DataItem { Date = "Nov", Revenue = 289000 },
|
|
new DataItem { Date = "Dec", Revenue = 294000 },
|
|
};
|
|
}
|