...
This commit is contained in:
@@ -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>
|
||||
|
165
TaxPayerFull/Pages/UserPanel/SaleChart.razor
Normal file
165
TaxPayerFull/Pages/UserPanel/SaleChart.razor
Normal 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
|
||||
}
|
Reference in New Issue
Block a user