113 lines
4.0 KiB
HTML
113 lines
4.0 KiB
HTML
{% extends 'base.html' %}
|
|
{% load static %}
|
|
|
|
{% block title %}Dashboard - PixelMinds{% endblock %}
|
|
|
|
{% block head %}
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns"></script>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<section class="section bg-light">
|
|
<div class="container">
|
|
<div class="row mb-4 align-items-center">
|
|
<div class="col-md-8">
|
|
<h1 class="section-title mb-0">Your Dashboard</h1>
|
|
<p class="lead">An overview of your mood entries.</p>
|
|
</div>
|
|
<div class="col-md-4 text-md-end">
|
|
<a href="{% url 'core:create_mood_entry' %}" class="btn btn-primary">+ New Mood Entry</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card shadow-sm mb-4">
|
|
<div class="card-body">
|
|
<h5 class="card-title fw-bold mb-3">Filter by Date</h5>
|
|
<form method="get" class="row g-3 align-items-center">
|
|
<div class="col-md-5">
|
|
<label for="{{ form.start_date.id_for_label }}" class="form-label">Start Date</label>
|
|
{{ form.start_date }}
|
|
</div>
|
|
<div class="col-md-5">
|
|
<label for="{{ form.end_date.id_for_label }}" class="form-label">End Date</label>
|
|
{{ form.end_date }}
|
|
</div>
|
|
<div class="col-md-2 d-flex align-items-end">
|
|
<button type="submit" class="btn btn-secondary w-100">Filter</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card p-4 shadow-sm">
|
|
<div class="card-body">
|
|
<h5 class="card-title fw-bold mb-3">Mood Over Time</h5>
|
|
{% if chart_data != '[]' %}
|
|
<canvas id="moodChart"></canvas>
|
|
{% else %}
|
|
<div class="text-center p-5">
|
|
<p class="lead">No mood entries found for the selected period.</p>
|
|
<p class="text-muted">Try adjusting the filter or <a href="{% url 'core:create_mood_entry' %}">add a new entry</a>.</p>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", function() {
|
|
const chartData = JSON.parse('{{ chart_data|safe }}');
|
|
if (chartData.length > 0) {
|
|
const ctx = document.getElementById('moodChart').getContext('2d');
|
|
const dates = chartData.map(d => new Date(d.date_time));
|
|
const scores = chartData.map(d => d.mood_score);
|
|
|
|
const moodChart = new Chart(ctx, {
|
|
type: 'line',
|
|
data: {
|
|
labels: dates,
|
|
datasets: [{
|
|
label: 'Mood Score',
|
|
data: scores,
|
|
borderColor: '#4f46e5', // primary-color
|
|
backgroundColor: 'rgba(79, 70, 229, 0.1)',
|
|
borderWidth: 2,
|
|
fill: true,
|
|
tension: 0.4
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
scales: {
|
|
x: {
|
|
type: 'time',
|
|
time: {
|
|
unit: 'day',
|
|
tooltipFormat: 'MMM dd, yyyy',
|
|
},
|
|
grid: {
|
|
display: false
|
|
}
|
|
},
|
|
y: {
|
|
beginAtZero: true,
|
|
max: 10,
|
|
grid: {
|
|
color: '#e5e7eb'
|
|
}
|
|
}
|
|
},
|
|
plugins: {
|
|
legend: {
|
|
display: false
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
{% endblock %} |