This commit is contained in:
mmrbnjd
2024-06-22 08:17:01 +03:30
parent b733836224
commit e87393b6d2
2 changed files with 168 additions and 42 deletions

View File

@@ -213,50 +213,11 @@
</div>
<!-- Total Revenue -->
<div class="col-12 col-lg-8 order-2 order-md-3 order-lg-2 mb-4">
<div class="card">
<div class="card col-7">
<div class="row row-bordered g-0">
<div class="col-md-8">
<h5 class="card-header m-0 me-2 pb-3">کل درآمد</h5>
<div id="totalRevenueChart" class="px-2"></div>
</div>
<div class="col-md-4">
<div class="card-body">
<div class="text-center">
<div class="dropdown">
<button class="btn btn-sm btn-outline-primary dropdown-toggle" type="button" id="growthReportId" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
1400
</button>
<div class="dropdown-menu dropdown-menu-end" aria-labelledby="growthReportId">
<a class="dropdown-item" href="javascript:void(0);">1399</a>
<a class="dropdown-item" href="javascript:void(0);">1400</a>
<a class="dropdown-item" href="javascript:void(0);">1401</a>
</div>
</div>
</div>
</div>
<div id="growthChart"></div>
<div class="text-center fw-semibold pt-3 mb-2">62% رشد شرکت</div>
<div class="d-flex px-xxl-4 px-lg-2 p-4 gap-xxl-3 gap-lg-1 gap-3 justify-content-between">
<div class="d-flex">
<div class="me-2">
<span class="badge bg-label-primary p-2"><i class="bx bx-dollar text-primary"></i></span>
</div>
<div class="d-flex flex-column">
<small>1400</small>
<h6 class="mb-0">32.5<span style="font-size: 14px"> تومان</span></h6>
</div>
</div>
<div class="d-flex">
<div class="me-2">
<span class="badge bg-label-info p-2"><i class="bx bx-wallet text-info"></i></span>
</div>
<div class="d-flex flex-column">
<small>1399</small>
<h6 class="mb-0">41.2<span style="font-size: 14px"> تومان</span></h6>
</div>
</div>
</div>
<div class="col-md-4">
<SaleChart />
</div>
</div>
</div>

View File

@@ -0,0 +1,165 @@

@using Color = System.Drawing.Color
<LineChart @ref="lineChart" Width="500" Class="mb-4" />
@* <Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="Size.Small" @onclick="async () => await RandomizeAsync()"> Randomize </Button>
<Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="Size.Small" @onclick="async () => await AddDatasetAsync()"> Add Dataset </Button>
<Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="Size.Small" @onclick="async () => await AddDataAsync()"> Add Data </Button>
<Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="Size.Small" @onclick="async () => await ShowHorizontalLineChartAsync()"> Horizontal Line Chart </Button>
<Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="Size.Small" @onclick="async () => await ShowVerticalLineChartAsync()"> Vertical Line Chart </Button>
*@
@code {
private LineChart lineChart = default!;
private LineChartOptions lineChartOptions = default!;
private ChartData chartData = default!;
private int datasetsCount = 0;
private int labelsCount = 0;
private Random random = new();
protected override void OnInitialized()
{
chartData = new ChartData { Labels = GetDefaultDataLabels(31), Datasets = GetDefaultDataSets(1) };
lineChartOptions = new() { Responsive = true, Interaction = new Interaction { Mode = InteractionMode.Index } };
}
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
await lineChart.InitializeAsync(chartData, lineChartOptions);
}
await base.OnAfterRenderAsync(firstRender);
}
private async Task RandomizeAsync()
{
if (chartData is null || chartData.Datasets is null || !chartData.Datasets.Any()) return;
var newDatasets = new List<IChartDataset>();
foreach (var dataset in chartData.Datasets)
{
if (dataset is LineChartDataset lineChartDataset
&& lineChartDataset is not null
&& lineChartDataset.Data is not null)
{
var count = lineChartDataset.Data.Count;
var newData = new List<double>();
for (var i = 0; i < count; i++)
{
newData.Add(random.Next(200));
}
lineChartDataset.Data = newData;
newDatasets.Add(lineChartDataset);
}
}
chartData.Datasets = newDatasets;
await lineChart.UpdateAsync(chartData, lineChartOptions);
}
private async Task AddDatasetAsync()
{
if (chartData is null || chartData.Datasets is null) return;
var chartDataset = GetRandomLineChartDataset();
chartData = await lineChart.AddDatasetAsync(chartData, chartDataset, lineChartOptions);
}
private async Task AddDataAsync()
{
if (chartData is null || chartData.Datasets is null)
return;
var data = new List<IChartDatasetData>();
foreach (var dataset in chartData.Datasets)
{
if (dataset is LineChartDataset lineChartDataset)
data.Add(new LineChartDatasetData(lineChartDataset.Label, random.Next(200)));
}
chartData = await lineChart.AddDataAsync(chartData, GetNextDataLabel(), data);
}
private async Task ShowHorizontalLineChartAsync()
{
lineChartOptions.IndexAxis = "y";
await lineChart.UpdateAsync(chartData, lineChartOptions);
}
private async Task ShowVerticalLineChartAsync()
{
lineChartOptions.IndexAxis = "x";
await lineChart.UpdateAsync(chartData, lineChartOptions);
}
#region Data Preparation
private List<IChartDataset> GetDefaultDataSets(int numberOfDatasets)
{
var datasets = new List<IChartDataset>();
for (var index = 0; index < numberOfDatasets; index++)
{
datasets.Add(GetRandomLineChartDataset());
}
return datasets;
}
private LineChartDataset GetRandomLineChartDataset()
{
var c = ColorBuilder.CategoricalTwelveColors[datasetsCount].ToColor();
datasetsCount += 1;
return new LineChartDataset()
{
Label = $"فروش",
Data = GetRandomData(),
BackgroundColor = new List<string> { c.ToRgbString() },
BorderColor = new List<string> { c.ToRgbString() },
BorderWidth = new List<double> { 2 },
HoverBorderWidth = new List<double> { 4 },
PointBackgroundColor = new List<string> { c.ToRgbString() },
PointRadius = new List<int> { 0 }, // hide points
PointHoverRadius = new List<int> { 4 },
};
}
private List<double> GetRandomData()
{
var data = new List<double>();
for (var index = 0; index < labelsCount; index++)
{
data.Add(random.Next(200));
}
return data;
}
private List<string> GetDefaultDataLabels(int numberOfLabels)
{
var labels = new List<string>();
for (var index = 0; index < numberOfLabels; index++)
{
labels.Add(GetNextDataLabel());
}
return labels;
}
private string GetNextDataLabel()
{
labelsCount += 1;
return $"روز {labelsCount}";
}
#endregion Data Preparation
}