Files
lubelog/Views/Vehicle/_ReminderMakeUpReport.cshtml
2024-02-05 18:08:54 -07:00

63 lines
2.4 KiB
Plaintext

@using CarCareTracker.Helper
@inject IConfigHelper config
@inject ITranslationHelper translator
@{
var userConfig = config.GetUserConfig(User);
var userLanguage = userConfig.UserLanguage;
}
@model ReminderMakeUpForVehicle
@if (Model.UrgentCount + Model.VeryUrgentCount + Model.NotUrgentCount + Model.PastDueCount > 0)
{
<canvas id="donut-chart"></canvas>
<script>
renderChart();
function renderChart() {
var useDarkMode = getGlobalConfig().useDarkMode;
new Chart($("#donut-chart"), {
type: 'doughnut',
data: {
labels: [
decodeHTMLEntities('@translator.Translate(userLanguage, "Not Urgent")'),
decodeHTMLEntities('@translator.Translate(userLanguage, "Urgent")'),
decodeHTMLEntities('@translator.Translate(userLanguage, "Very Urgent")'),
decodeHTMLEntities('@translator.Translate(userLanguage, "Past Due")')
],
datasets: [
{
label: decodeHTMLEntities('@translator.Translate(userLanguage, "Reminders by Category")'),
backgroundColor: ["#488f31", "#ffa600", "#de425b", "#cccccc"],
data: [
@Model.NotUrgentCount,
@Model.UrgentCount,
@Model.VeryUrgentCount,
@Model.PastDueCount
]
}
]
},
options: {
plugins: {
legend: {
position: "bottom",
labels: {
color: useDarkMode ? "#fff" : "#000"
}
},
title: {
display: true,
text: decodeHTMLEntities('@translator.Translate(userLanguage, "Reminders by Urgency")'),
color: useDarkMode ? "#fff" : "#000"
},
}
}
});
}
</script>
}
else
{
<div class="text-center">
<h4>@translator.Translate(userLanguage,"No data found, create reminders to see visualizations here.")</h4>
</div>
}