/
MasaHeatMapChart.razor
124 lines (108 loc) · 3.73 KB
/
MasaHeatMapChart.razor
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
@inject IHttpService _httpService
@inject IDataCacheService _dataCacheService
<div class="rounded shadow-sm bg-opacity p-4">
<div style="display: flex; justify-content: flex-end; ">
<div style="width:250px;">
<MMenu @bind-Value="_menu1"
CloseOnContentClick="false"
Transition="scale-transition"
OffsetY
MaxWidth="290"
MinWidth="@("auto")">
<ActivatorContent>
<MTextField Value="DateRangeText" Label="时间范围" PrependIcon="@IconType.Left.ToIconString()" OnPrependClick="OnPrependClick" AppendOuterIcon="@IconType.Right.ToIconString()" OnAppendOuterClick="OnAppendOuterClick" @attributes="context.Attrs"/>
</ActivatorContent>
<ChildContent>
<MDatePicker Value="_dates" TValue="List<DateOnly>" Range ValueChanged="ValueChanged" NoTitle Locale="zh-CN"/>
</ChildContent>
</MMenu>
</div>
</div>
<div class="d-flex align-center justify-center">
@if (isReady)
{
<MECharts Option="Model" InitOptions="@(opt => opt.Locale = "zh")" Width="@("100%")" Height="@(_dataCacheService.IsApp?(ShowScrollBar?"900px":"850px"):(ShowScrollBar?"250px":"200px"))" @ref="echarts">
</MECharts>
}
</div>
</div>
@code {
[Parameter]
public UserHeatMapType Type { get; set; }
[Parameter]
public string Id { get; set; }
[Parameter]
public bool ShowScrollBar { get; set; }
private MECharts echarts;
private bool _menu1;
int _days = 30;
bool isReady;
EChartsHeatMapOptionModel Model { get; set; } = new EChartsHeatMapOptionModel();
private List<DateOnly> _dates = new List<DateOnly>
{
new DateOnly(DateTime.Now.Year,1,1),
new DateOnly(DateTime.Now.Year,12,31),
};
public string DateRangeText => string.Join(" ~ ", _dates.Select(date => date.ToString("yyyy-MM-dd")));
[CascadingParameter]
public ErrorHandler ErrorHandler { get; set; }
protected override async Task OnAfterRenderAsync(bool firstRender)
{
await base.OnAfterRenderAsync(firstRender);
if (firstRender)
{
await Refresh();
}
}
public async Task ValueChanged(List<DateOnly> dates)
{
_dates = dates;
if (dates.Count==1)
{
return;
}
_menu1 = false;
StateHasChanged();
await Refresh();
}
public async Task OnPrependClick()
{
var dates = new List<DateOnly>();
foreach (var item in _dates)
{
dates.Add(item.AddYears(-1));
}
_dates = dates;
StateHasChanged();
await Refresh();
}
public async Task OnAppendOuterClick()
{
var dates = new List<DateOnly>();
foreach (var item in _dates)
{
dates.Add(item.AddYears(1));
}
_dates = dates;
StateHasChanged();
await Refresh();
}
public async Task Refresh()
{
try
{
if(_dates.Count!=2)
{
return;
}
Model = await _dataCacheService.HeatMapDataCatche.GetCache($"{ToolHelper.WebApiPath}api/space/GetUserHeatMap?Id={Id}&Type={Type}&AfterTime={_dates[0].ToUnixTimeMilliseconds()}&BeforeTime={_dates[1].ToUnixTimeMilliseconds()}");
Model.SetTheme(_dataCacheService.IsApp, _dataCacheService.ThemeSetting.IsDark, ShowScrollBar);
isReady = true;
StateHasChanged();
}
catch (Exception ex)
{
ErrorHandler.ProcessError(ex, $"获取{Type.GetDisplayName()}图表数据失败");
}
}
}