...
This commit is contained in:
mmrbnjd
@@ -213,50 +213,11 @@
|
|||||||
</div>
|
</div>
|
||||||
<!-- Total Revenue -->
|
<!-- Total Revenue -->
|
||||||
<div class="col-12 col-lg-8 order-2 order-md-3 order-lg-2 mb-4">
|
<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="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="col-md-4">
|
||||||
<div class="card-body">
|
<SaleChart />
|
||||||
<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>
|
</div>
|
||||||
</div>
|
</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