Chnaged the pie chart colors for each cards

This commit is contained in:
ashutosh.nehete 2025-10-06 18:42:16 +05:30
parent d989076680
commit 225f6bf8d4
2 changed files with 118 additions and 84 deletions

View File

@ -57,6 +57,8 @@
}
.card {
display: flex;
flex-direction: column;
flex: 1;
min-width: 200px;
border: 1px solid #ddd;
@ -67,7 +69,7 @@
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
/* <-- added shadow */
transition: transform 0.2s ease, box-shadow 0.2s ease;
border-top: 1px solid #e63946;
border-top: 1px solid #49bf3c;
}
@ -82,13 +84,24 @@
justify-content: center;
border-radius: 6px;
text-decoration: none;
color: #49bf3c;
/* arrow color */
background: #f5f5f5;
/* badge background */
box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
}
.card-link-success {
color: #49bf3c;
}
.card-link-warning {
color: #ffc107;
}
.card-link-primary {
color: #007bff;
}
.card-link:hover {
background: #ececec;
}
@ -207,7 +220,7 @@
.legend {
margin-top: 10px;
display: flex;
justify-content: center;
justify-content: flex-start;
flex-wrap: wrap;
gap: 8px;
font-size: 12px;
@ -228,7 +241,7 @@
}
.legend-red {
background: #49bf3c;
background: #e63946;
}
.legend-blue {
@ -243,6 +256,10 @@
background: #ccc;
}
.legend-yellow {
background: #ffc107;
}
.donut {
@ -251,11 +268,11 @@
--danger: #e63946;
--primary: #007bff;
--warning: #ffc107;
--success: #198754;
--success: #28a745;
/* Fill color */
--track: #e9ecef;
/* Background track */
--size: 120px;
--size: 200px;
/* Default size */
--thickness: 20px;
/* Default thickness */
@ -288,6 +305,13 @@
.donut span {
position: absolute;
font-size: calc(var(--size) / 6);
width:80%;
box-sizing:border-box;
display:flex;
gap: 4px;
flex-wrap: wrap;
justify-content:center;
align-items:center;
}
/* Variants */
@ -298,7 +322,7 @@
.donut.medium {
--size: 120px;
--thickness: 25px;
--thickness: 15px;
}
.donut.large {
@ -310,25 +334,21 @@
.donut-success {
background: conic-gradient(var(--success) calc(var(--percentage) * 1%),
var(--track) 0);
color: var(--success)
}
.donut-warning {
background: conic-gradient(var(--warning) calc(var(--percentage) * 1%),
var(--track) 0);
color: var(--warning)
}
.donut-danger {
background: conic-gradient(var(--danger) calc(var(--percentage) * 1%),
var(--track) 0);
color: var(--danger)
}
.donut-primary {
background: conic-gradient(var(--primary) calc(var(--percentage) * 1%),
var(--track) 0);
color: var(--primary)
}
.values {
@ -353,7 +373,7 @@
<div class="header">
<h1>Daily Progress Report</h1>
<div class="project-info">
<strong>Project:</strong>{{projectName}}<br>
<strong>Project:</strong> {{projectName}}<br>
<strong>Date:</strong> {{date}}
</div>
</div>
@ -366,7 +386,7 @@
<!-- Status Cards -->
<div class="status-cards">
<div class="card">
<a class="card-link" href={{webUrl}} aria-label="Open original website" title="Open website" target="_blank"
<a class="card-link card-link-warning" href={{webUrl}} aria-label="Open original website" title="Open website" target="_blank"
rel="noopener">
<span class="arrow">&#8599;</span>
</a>
@ -376,9 +396,9 @@
<!-- Left Column -->
<div style="width:50%; box-sizing:border-box;display:flex; justify-content:center; align-items:center;">
<!-- Medium -->
<div class="donut thin donut-primary" style="--percentage: {{attendancePercentage}};">
<span class="values">
<p style="color:#007bff;">{{todaysAttendances}}</p> / <p style="color:#ccc;">{{totalEmployees}}</p>
<div class="donut thin donut-warning" style="--percentage: {{attendancePercentage}};">
<span>
<p style="color:#ffc107;">{{todaysAttendances}}</p><p>/</p><p style="color:#ccc;">{{totalEmployees}}</p>
</span>
</div>
</div>
@ -387,7 +407,7 @@
<div class="legend" style="width:50%; padding:15px; box-sizing:border-box;">
<div class="legend-item"
style="margin-bottom:10px;text-align: left; display:left; justify-content:left; align-items:left!important;; ">
<span class="legend-color legend-blue"></span> Today's Attendance
<span class="legend-color legend-yellow"></span> Today's Attendance
</div>
<div class="legend-item"
style="margin-bottom:10px; text-align: left; display:left; justify-content:left; align-items:left!important;;">
@ -400,7 +420,7 @@
</div>
<div class="card">
<a class="card-link" href={{webUrl}} aria-label="Open original website" title="Open website" target="_blank"
<a class="card-link card-link-primary" href={{webUrl}} aria-label="Open original website" title="Open website" target="_blank"
rel="noopener">
<span class="arrow">&#8599;</span>
</a>
@ -411,8 +431,8 @@
<div style="width:50%; box-sizing:border-box;display:flex; justify-content:center; align-items:center;">
<!-- Medium -->
<div class="donut thin donut-primary" style="--percentage: {{taskPercentage}};">
<span {% if totalPlannedTask <= 100 %} class="values" {% endif %}>
<p style="color:#007bff;">{{totalCompletedTask}}</p> / <p style="color:#ccc;">{{totalPlannedTask}}</p>
<span >
<p style="color:#007bff;">{{totalCompletedTask}}</p><p>/</p><p style="color:#ccc;">{{totalPlannedTask}}</p>
</span>
</div>
@ -430,23 +450,13 @@
</div>
</div>
</div>
<div>
<p style="font-size: xx-small;">*Today's total work</p>
<div style="text-align: end!important;">
<p style="font-size: xx-small;">*Today's Total Work</p>
</div>
</div>
<!-- <div class="card">
<h4 class="card-title">DAILY TASKS COMPLETED</h4>
<p class="value tasks">20 / 30</p>
<p>Team member present</p>
<div class="legend">
<div class="legend-item"><span class="legend-color legend-blue"></span> Completed</div>
<div class="legend-item"><span class="legend-color legend-green"></span> In Progress</div>
<div class="legend-item"><span class="legend-color legend-gray"></span> Pending</div>
</div>
</div> -->
<div class="card">
<a class="card-link" href={{webUrl}} aria-label="Open original website" title="Open website" target="_blank"
<a class="card-link card-link-success" href={{webUrl}} aria-label="Open original website" title="Open website" target="_blank"
rel="noopener">
<span class="arrow">&#8599;</span>
</a>
@ -456,9 +466,9 @@
<!-- Left Column -->
<div style="width:50%; box-sizing:border-box;display:flex; justify-content:center; align-items:center;">
<!-- Medium -->
<div class="donut thin donut-primary" style="--percentage: {{completionStatus}};">
<span {% if totalPlannedWork <= 100 %} class="values" {% endif %}>
<p style="color:#007bff;">{{totalCompletedWork}}</p> / <p style="color:#ccc;">{{totalPlannedWork}}</p>
<div class="donut thin donut-success" style="--percentage: {{completionStatus}};">
<span>
<p style="color:#28a745;">{{totalCompletedWork}}</p> <p>/</p> <p style="color:#ccc;">{{totalPlannedWork}}</p>
</span>
</div>
@ -468,7 +478,7 @@
<div class="legend" style="width:50%; padding:15px; box-sizing:border-box;">
<div class="legend-item"
style="margin-bottom:10px;text-align: left; display:left; justify-content:left; align-items:left!important;; ">
<span class="legend-color legend-blue"></span> Completed Work
<span class="legend-color legend-green"></span> Completed Work
</div>
<div class="legend-item"
style="margin-bottom:10px; text-align: left; display:left; justify-content:left; align-items:left!important;;">
@ -476,9 +486,29 @@
</div>
</div>
</div>
<div style="text-align: end!important;">
<p style="font-size: xx-small;">*Project's Total Work</p>
</div>
</div>
<div class="card">
<a class="card-link" href={{webUrl}} aria-label="Open original website" title="Open website" target="_blank"
rel="noopener">
<span class="arrow">&#8599;</span>
</a>
<div>
<p style="font-size: xx-small;">*Project's total work</p>
<h4 class="card-title">Pending Attendance</h4>
</div>
<table style="width: 100%;">
<tr>
<td style="text-align: left;">Regularization Pending</td>
<td style="text-align: right;">{{regularizationPending}}</td>
</tr>
<tr>
<td style="text-align: left;">Checkout Pending</td>
<td style="text-align: right;">{{checkoutPending}}</td>
</tr>
</table>
</div>
<div class="card">
@ -486,45 +516,31 @@
rel="noopener">
<span class="arrow">&#8599;</span>
</a>
<h4 class="card-title">Regularization Pending</h4>
<p class="value tasks">{{regularizationPending}}</p>
<h4 class="card-title">Checkout Pending</h4>
<p class="value tasks">{{checkoutPending}}</p>
</div>
<div class="card">
<a class="card-link" href={{webUrl}} aria-label="Open original website" title="Open website" target="_blank"
rel="noopener">
<span class="arrow">&#8599;</span>
</a>
<h4 class="card-title">Activity Report Pending</h4>
<div style="display:flex; flex-wrap:wrap;">
<!-- Left Column -->
<div style="width:50%; box-sizing:border-box;display:flex; justify-content:center; align-items:center;">
<!-- Medium -->
<span class="values">
<p style="color:#007bff;">{{reportPending}}</p> / <p style="color:#ccc;">{{todaysAssignTasks}}</p>
</span>
</div>
<!-- Right Column -->
<div class="legend" style="width:50%; padding:15px; box-sizing:border-box;">
<div class="legend-item"
style="margin-bottom:10px;text-align: left; display:left; justify-content:left; align-items:left!important;; ">
<span class="legend-color legend-blue"></span> Total Pending Tasks
</div>
<div class="legend-item"
style="margin-bottom:10px; text-align: left; display:left; justify-content:left; align-items:left!important;;">
<span class="legend-color legend-gray"></span> Today's Assigned Tasks
</div>
</div>
<div>
<h4 class="card-title">Activity Report Pending</h4>
</div>
<table style="width: 100%;">
<tr>
<td style="text-align: left;">Total Pending Tasks</td>
<td style="text-align: right;">{{reportPending}}</td>
</tr>
<tr>
<td style="text-align: left;">Today's Assigned Tasks</td>
<td style="text-align: right;">{{todaysAssignTasks}}</td>
</tr>
<tr>
<td style="text-align: left;">Today's Completed Tasks</td>
<td style="text-align: right;">{{todaysCompletedTasks}}</td>
</tr>
</table>
</div>
{% if teamOnSite and teamOnSite|length > 0 %}
<div class="card">
<a class="card-link" href={{webUrl}} aria-label="Open original website" title="Open website" target="_blank"
rel="noopener">
<span class="arrow">&#8599;</span>
</a>
<!-- Row 1: Header -->
<div>
<h4 class="card-title">Team Strength on Site</h4>
@ -582,9 +598,9 @@
<div style="width: 50%; text-align: right;">
<!-- <a href="#">Instagram</a> | -->
<a href="#"><img src="https://cdn.marcoaiot.com/icons/brands/google.png" style="height: 15px;" /></a> |
<a href="https://www.linkedin.com/company/marco-aiot">Linkedin</a> |
<a href="#"><img src="https://cdn.marcoaiot.com/icons/brands/twitter.png" style="height: 15px;" /></a> |
<a href="https://x.com/marcoaiot"><img src="https://cdn.marcoaiot.com/icons/brands/twitter.png" style="height: 15px;" /></a> |
<a href="#"><img src="https://cdn.marcoaiot.com/icons/brands/facebook.png" style="height: 15px;" /></a> |
<a href="#"><img src="https://cdn.marcoaiot.com/icons/brands/instagram.png" style="height: 15px;" /></a>
@ -594,8 +610,8 @@
</div>
</div>
<div style="text-align: center;width: 100%;background-color: #fff;margin:10px;font-size: small;color: #6c757d ;">
You have received this email because it contains important information about your Marco PMS Account account.
<div style="text-align: center;width: 100%;background-color: #fff;margin:10px;margin-bottom: 30px!important;font-size: small;color: #6c757d ;">
You have received this email because it contains important information about your {{websiteName}} Account account.
</div>
</div>
</body>

View File

@ -62,6 +62,14 @@ def get_percentage(part, whole, decimals: int = 2):
return 0.0
return round((part / whole) * 100.0, decimals)
def value_minization(minimize_value):
if minimize_value >= 1000:
minimized_value = round((minimize_value/1000),2)
result = f"{minimized_value}K"
else:
result = f"{minimize_value}"
return result
if __name__ == "__main__":
template_name = "dpr.html"
project_ids = [p.strip() for p in PROJECT_IDS.split(",") if p.strip()]
@ -69,23 +77,31 @@ if __name__ == "__main__":
for project_id in project_ids:
data = fetch_Project_report(project_id)
if data["attendancePercentage"]:
if "attendancePercentage" in data:
attendance_percentage = data["attendancePercentage"]
print("from API")
else:
attendance_percentage = get_percentage(data["todaysAttendances"], data["totalEmployees"], 2)
if data["taskPercentage"]:
if "taskPercentage" in data:
task_percentage = data["taskPercentage"]
print("from API")
else:
task_percentage = get_percentage(data["totalCompletedTask"], data["totalPlannedTask"], 2)
if "todaysCompletedTasks" in data:
todays_completed_tasks = data["todaysCompletedTasks"]
else:
todays_completed_tasks = 0
web_url = f"{WEB_BASE_URL}/auth/login"
dt = datetime.datetime.strptime(data["date"], "%Y-%m-%dT%H:%M:%SZ")
api_formatted_date = dt.strftime("%d-%b-%Y")
total_planned_work = value_minization(data["totalPlannedWork"])
total_completed_work = value_minization(data["totalCompletedWork"])
total_planned_task = value_minization(data["totalPlannedTask"])
total_completed_task = value_minization(data["totalCompletedTask"])
context = {
"webUrl":web_url,
"date": api_formatted_date,
@ -97,13 +113,15 @@ if __name__ == "__main__":
"taskPercentage":task_percentage,
"regularizationPending": data["regularizationPending"],
"checkoutPending": data["checkoutPending"],
"totalPlannedWork": round(data["totalPlannedWork"],2),
"totalCompletedWork": round(data["totalCompletedWork"],2),
"totalPlannedTask": round(data["totalPlannedTask"],2),
"totalCompletedTask": round(data["totalCompletedTask"],2),
"totalPlannedWork": total_planned_work,
"totalCompletedWork": total_completed_work,
"totalPlannedTask": total_planned_task,
"totalCompletedTask": total_completed_task,
"completionStatus": round(data["completionStatus"],2),
"reportPending": data["reportPending"],
"todaysAssignTasks": data["todaysAssignTasks"],
"todaysCompletedTasks": todays_completed_tasks,
"websiteName":"OnFieldWork.com",
"teamOnSite": data["teamOnSite"],
"performedTasks": data["performedTasks"],
"performedAttendance": data["performedAttendance"]