| | | 1 | | @using Syki.Front.Components.Summaries |
| | | 2 | | |
| | | 3 | | @namespace Syki.Front.Pages.Student |
| | | 4 | | |
| | | 5 | | <MudContainer Class="my-4 px-0"> |
| | | 6 | | <MudGrid Spacing="2"> |
| | | 7 | | <MudItem xs="12" sm="6" md="4" lg="4"> |
| | | 8 | | <SummaryTextCard |
| | | 9 | | Loading="@_loading" |
| | | 10 | | Icon="@Icons.Material.Filled.CheckCircleOutline" |
| | | 11 | | Color="Color.Success" |
| | | 12 | | Text="@(_frequency.Presences == 1 ? "Presença" : "Presenças")" |
| | | 13 | | Value="@_frequency.Presences.ToThousandSeparated()" |
| | | 14 | | /> |
| | | 15 | | </MudItem> |
| | | 16 | | <MudItem xs="12" sm="6" md="4" lg="4"> |
| | | 17 | | <SummaryTextCard |
| | | 18 | | Loading="@_loading" |
| | | 19 | | Icon="@Icons.Material.Filled.Cancel" |
| | | 20 | | Color="Color.Error" |
| | | 21 | | Text="@(_frequency.Absences == 1 ? "Falta" : "Faltas")" |
| | | 22 | | Value="@_frequency.Absences.ToThousandSeparated()"/> |
| | | 23 | | </MudItem> |
| | | 24 | | <MudItem xs="12" sm="6" md="4" lg="4"> |
| | | 25 | | <SummaryTextCard Loading="@_loading" Icon="@Icons.Material.Filled.BookmarkAdded" Color="Color.Info" Text="Au |
| | | 26 | | </MudItem> |
| | | 27 | | </MudGrid> |
| | | 28 | | </MudContainer> |
| | | 29 | | |
| | | 30 | | <MudContainer Class="my-4 px-0"> |
| | | 31 | | <MudPaper Class="px-4 pt-4"> |
| | 0 | 32 | | <ApexCharts.ApexChart @ref="@_chart" TItem="GetStudentClassLessonFrequencyOut" Options="@_options" Height="350"> |
| | 0 | 33 | | <ApexPointTooltip> |
| | 0 | 34 | | <MudPaper Class="pa-4"> |
| | 0 | 35 | | <MudStack Row="true" Class="mb-2" AlignItems="AlignItems.Center" Justify="Justify.SpaceBetween"> |
| | 0 | 36 | | <MudText><b>@context.DataPoint.X.ToString().Split(" - ").First()</b></MudText> |
| | 0 | 37 | | <MudIcon |
| | | 38 | | Icon="@GetTooltipIcon(context.DataPoint.Items.FirstOrDefault()?.Frequency)" |
| | | 39 | | Color="@GetTooltipIconColor(context.DataPoint.Items.FirstOrDefault()?.Frequency)" |
| | | 40 | | Class="mb-1" Size="Size.Medium" /> |
| | | 41 | | </MudStack> |
| | 0 | 42 | | <MudText>@context.DataPoint.X.ToString().Split(" - ").Last()</MudText> |
| | | 43 | | </MudPaper> |
| | | 44 | | </ApexPointTooltip> |
| | | 45 | | <ChildContent> |
| | | 46 | | <ApexCharts.ApexPointSeries |
| | | 47 | | Name="Presente" |
| | | 48 | | TItem="GetStudentClassLessonFrequencyOut" |
| | | 49 | | Items="@_frequency.Lessons" |
| | | 50 | | SeriesType="ApexCharts.SeriesType.Heatmap" |
| | 0 | 51 | | XValue="@(a => a.GetLesson())" |
| | 0 | 52 | | YValue="@(e => e.Frequency)"/> |
| | | 53 | | </ChildContent> |
| | | 54 | | </ApexCharts.ApexChart> |
| | | 55 | | </MudPaper> |
| | | 56 | | </MudContainer> |
| | | 57 | | |
| | | 58 | | @inject NavigationManager Nav |
| | | 59 | | @inject GetStudentClassFrequencyClient GetStudentClassFrequencyClient |
| | | 60 | | |
| | | 61 | | @code |
| | | 62 | | { |
| | | 63 | | [Parameter] |
| | 0 | 64 | | public Guid ClassId { get; set; } |
| | | 65 | | |
| | | 66 | | private bool _loading; |
| | 0 | 67 | | private GetStudentClassFrequencyOut _frequency = new(); |
| | | 68 | | |
| | | 69 | | protected override async Task OnParametersSetAsync() |
| | | 70 | | { |
| | 0 | 71 | | _loading = true; |
| | 0 | 72 | | _frequency = await GetStudentClassFrequencyClient.Get(ClassId); |
| | 0 | 73 | | await RenderChart(); |
| | 0 | 74 | | _loading = false; |
| | 0 | 75 | | } |
| | | 76 | | |
| | | 77 | | private ApexCharts.ApexChart<GetStudentClassLessonFrequencyOut> _chart; |
| | 0 | 78 | | private ApexCharts.ApexChartOptions<GetStudentClassLessonFrequencyOut> _options = new() |
| | 0 | 79 | | { |
| | 0 | 80 | | Colors = ["#87C0ED", "#21E7A4", "#F44336"], |
| | 0 | 81 | | Tooltip = new ApexCharts.Tooltip { Enabled = true }, |
| | 0 | 82 | | Chart = new ApexCharts.Chart { Toolbar = new ApexCharts.Toolbar { Show = false } }, |
| | 0 | 83 | | Xaxis = new ApexCharts.XAxis |
| | 0 | 84 | | { |
| | 0 | 85 | | Tooltip = new ApexCharts.XAxisTooltip { Enabled = false }, |
| | 0 | 86 | | Labels = new ApexCharts.XAxisLabels |
| | 0 | 87 | | { |
| | 0 | 88 | | Formatter = @"function (value) { |
| | 0 | 89 | | if (value === undefined) {return '';} |
| | 0 | 90 | | return value.split(' - ')[0]; |
| | 0 | 91 | | }" |
| | 0 | 92 | | } |
| | 0 | 93 | | }, |
| | 0 | 94 | | Yaxis = [ new ApexCharts.YAxis { Labels = new ApexCharts.YAxisLabels { Show = false }, Tooltip = new ApexCharts. |
| | 0 | 95 | | PlotOptions = new ApexCharts.PlotOptions |
| | 0 | 96 | | { |
| | 0 | 97 | | Heatmap = new ApexCharts.PlotOptionsHeatmap |
| | 0 | 98 | | { |
| | 0 | 99 | | EnableShades = true, |
| | 0 | 100 | | ColorScale = new ApexCharts.PlotOptionsHeatmapColorScale |
| | 0 | 101 | | { |
| | 0 | 102 | | Ranges = |
| | 0 | 103 | | [ |
| | 0 | 104 | | new() { Color = "#F44336", From = 0, To = 0 }, |
| | 0 | 105 | | new() { Color = "#87C0ED", From = 0.50, To = 0.50 }, |
| | 0 | 106 | | new() { Color = "#21E7A4", From = 1, To = 1 }, |
| | 0 | 107 | | ] |
| | 0 | 108 | | } |
| | 0 | 109 | | } |
| | 0 | 110 | | } |
| | 0 | 111 | | }; |
| | | 112 | | |
| | | 113 | | private async Task RenderChart() |
| | | 114 | | { |
| | 0 | 115 | | StateHasChanged(); |
| | 0 | 116 | | await _chart.RenderAsync(); |
| | 0 | 117 | | } |
| | | 118 | | |
| | | 119 | | private string GetTooltipIcon(decimal? frequency) |
| | | 120 | | { |
| | 0 | 121 | | if (frequency is null or 0.50M) return Icons.Material.Filled.BookmarkAdded; |
| | | 122 | | |
| | 0 | 123 | | if (frequency == 0) return Icons.Material.Filled.Cancel; |
| | | 124 | | |
| | 0 | 125 | | return Icons.Material.Filled.CheckCircleOutline; |
| | | 126 | | } |
| | | 127 | | |
| | | 128 | | private Color GetTooltipIconColor(decimal? frequency) |
| | | 129 | | { |
| | 0 | 130 | | if (frequency is null or 0.50M) return Color.Info; |
| | | 131 | | |
| | 0 | 132 | | if (frequency == 0) return Color.Error; |
| | | 133 | | |
| | 0 | 134 | | return Color.Success; |
| | | 135 | | } |
| | | 136 | | } |