pjpatil12/Comparison_Project
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

changes of ui mobile view of dashboard

Browse Source
This commit is contained in:
pjpatil12
2026-01-13 15:22:53 +05:30
parent a73d8e5ed1
commit d46c7c0936
2 changed files with 68 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
app/routes/dashboard.py
View File

@@ -8,7 +8,7 @@ import base64
dashboard_bp = Blueprint("dashboard", __name__, url_prefix="/dashboard") dashboard_bp = Blueprint("dashboard", __name__, url_prefix="/dashboard")
# charts
def plot_to_base64(): def plot_to_base64():
img = io.BytesIO() img = io.BytesIO()
plt.savefig(img, format="png", bbox_inches="tight") plt.savefig(img, format="png", bbox_inches="tight")
@@ -16,7 +16,7 @@ def plot_to_base64():
img.seek(0) img.seek(0)
return base64.b64encode(img.getvalue()).decode() return base64.b64encode(img.getvalue()).decode()
# bar chart
def bar_chart(): def bar_chart():
categories = ["Trench", "Manhole", "Pipe Laying", "Restoration"] categories = ["Trench", "Manhole", "Pipe Laying", "Restoration"]
values = [120, 80, 150, 60] values = [120, 80, 150, 60]
@@ -29,7 +29,7 @@ def bar_chart():
return plot_to_base64() return plot_to_base64()
# Pie chart
def pie_chart(): def pie_chart():
labels = ["Completed", "In Progress", "Pending"] labels = ["Completed", "In Progress", "Pending"]
sizes = [65, 20, 15] sizes = [65, 20, 15]
@@ -40,7 +40,7 @@ def pie_chart():
return plot_to_base64() return plot_to_base64()
# Histogram chart
def histogram_chart(): def histogram_chart():
daily_work = [5, 10, 15, 20, 20, 25, 30, 35, 40, 45, 50] daily_work = [5, 10, 15, 20, 20, 25, 30, 35, 40, 45, 50]
@@ -52,7 +52,7 @@ def histogram_chart():
return plot_to_base64() return plot_to_base64()
# Dashboaed page
@dashboard_bp.route("/") @dashboard_bp.route("/")
def dashboard(): def dashboard():
if not session.get("user_id"): if not session.get("user_id"):

118
app/templates/dashboard.html
View File

@@ -1,76 +1,84 @@
{% extends "base.html" %} {% extends "base.html" %}
{% block content %} {% block content %}
<h2 class="mb-4">Dashboard</h2>
<!-- Summary Cards --> <div class="container-fluid px-2 px-md-4">
<div class="row mb-4">
<div class="col-md-4"> <h4 class="mb-3 text-center text-md-start">Dashboard</h4>
<div class="card text-white bg-primary shadow">
<div class="card-body"> <!-- Summary Cards -->
<h5>Total Work</h5> <div class="row g-3 mb-4">
<h3>410</h3>
<div class="col-12 col-md-4">
<div class="card text-white bg-primary shadow h-100">
<div class="card-body text-center text-md-start">
<h6>Total Work</h6>
<h3 class="fw-bold">410</h3>
</div>
</div> </div>
</div> </div>
<div class="col-12 col-md-4">
<div class="card text-white bg-success shadow h-100">
<div class="card-body text-center text-md-start">
<h6>Completed</h6>
<h3 class="fw-bold">265</h3>
</div>
</div>
</div>
<div class="col-12 col-md-4">
<div class="card text-dark bg-warning shadow h-100">
<div class="card-body text-center text-md-start">
<h6>Pending</h6>
<h3 class="fw-bold">145</h3>
</div>
</div>
</div>
</div> </div>
<div class="col-md-4"> <!-- Charts -->
<div class="card text-white bg-success shadow"> <div class="row g-3">
<div class="card-body">
<h5>Completed</h5> <!-- Bar Chart -->
<h3>265</h3> <div class="col-12 col-md-6">
<div class="card shadow-sm h-100">
<div class="card-header bg-dark text-white text-center text-md-start">
Work Category Bar Chart
</div>
<div class="card-body text-center">
<img src="data:image/png;base64,{{ bar_chart }}" class="img-fluid" style="max-height:300px;">
</div>
</div> </div>
</div> </div>
</div>
<div class="col-md-4"> <!-- Pie Chart -->
<div class="card text-white bg-warning shadow"> <div class="col-12 col-md-6">
<div class="card-body"> <div class="card shadow-sm h-100">
<h5>Pending</h5> <div class="card-header bg-dark text-white text-center text-md-start">
<h3>145</h3> Project Status Pie Chart
</div>
<div class="card-body text-center">
<img src="data:image/png;base64,{{ pie_chart }}" class="img-fluid" style="max-height:300px;">
</div>
</div> </div>
</div> </div>
</div>
</div>
<!-- Charts --> <!-- Histogram -->
<div class="row g-4"> <div class="col-12">
<div class="card shadow-sm">
<!-- Bar Chart --> <div class="card-header bg-dark text-white text-center text-md-start">
<div class="col-md-6"> Daily Work Histogram
<div class="card shadow-sm"> </div>
<div class="card-header bg-dark text-white"> <div class="card-body text-center">
Work Category Bar Chart <img src="data:image/png;base64,{{ histogram }}" class="img-fluid" style="max-height:350px;">
</div> </div>
<div class="card-body text-center">
<img src="data:image/png;base64,{{ bar_chart }}" class="img-fluid">
</div> </div>
</div> </div>
</div>
<!-- Pie Chart -->
<div class="col-md-6">
<div class="card shadow-sm">
<div class="card-header bg-dark text-white">
Project Status Pie Chart
</div>
<div class="card-body text-center">
<img src="data:image/png;base64,{{ pie_chart }}" class="img-fluid">
</div>
</div>
</div>
<!-- Histogram -->
<div class="col-md-12">
<div class="card shadow-sm">
<div class="card-header bg-dark text-white">
Daily Work Histogram
</div>
<div class="card-body text-center">
<img src="data:image/png;base64,{{ histogram }}" class="img-fluid">
</div>
</div>
</div> </div>
</div> </div>
{% endblock %} {% endblock %}