Chart Fixed #3998
Chart Fixed #3998
Conversation
WalkthroughThe changes update the page statistics functionality to use the current URL path instead of the current template to retrieve page view data. Modifications are made in both the template file and the custom template tags. The chart displaying page views has been changed from a sparkline to a bar chart with enhanced error handling and a total views counter. The vote submission functionality was also updated to work with the current URL path. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Browser
participant Template as PageStats Template
participant DjangoTag as Custom Template Tag
participant Server as Database/Backend
User->>Browser: Request page load
Browser->>Template: Render page_stats.html
Template->>DjangoTag: get_current_url_path(context)
DjangoTag-->>Template: Return current URL path
Template->>DjangoTag: get_page_views(url_path, days=30)
DjangoTag->>Server: Query page view data (daily views)
Server-->>DjangoTag: Return JSON data
DjangoTag-->>Template: Return JSON page view data
Template->>Browser: Render bar chart with total views counter and error handling
sequenceDiagram
participant User
participant Browser
participant Template as PageStats Template
participant Server as Vote API
User->>Browser: Click vote button
Browser->>Template: Call submitVote (using current URL path)
Template->>Server: Send vote submission (includes URL path)
Server-->>Template: Acknowledge vote submission or error
Template->>Browser: Update vote count/display error message
Possibly related PRs
Tip ⚡🧪 Multi-step agentic review comment chat (experimental)
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
|
@igennova @coderabbitai I think you can use the request.path directly in the template and not require the extra template tag |
|
Tip For best results, initiate chat on the files or code changes. 🧩 Analysis chain@DonnieBLT You're absolutely right! Looking at the code, the @register.simple_tag(takes_context=True)
def get_current_url_path(context):
"""
Returns the current template name from the context.
"""
if 'request' in context:
return context['request'].path
return NoneSince the Django request context processor ( {% get_current_url_path as current_url_path %}
{% get_page_views current_url_path 30 as page_views %}This could be simplified to: {% get_page_views request.path 30 as page_views %}This would eliminate the need for the extra template tag while maintaining the same functionality. 🐰 thoughtfully takes notes 🏁 Script executed: Length of output: 1038 🏁 Script executed: Length of output: 1030 🏁 Script executed: Length of output: 1332
def get_current_url_path(context):
"""
Returns the current URL path from the request
"""
request = context.get("request")
if request:
return request.path
return None
"context_processors": [
"django.template.context_processors.debug",
"django.template.context_processors.request",
# other processors...
],This means the template could be simplified by:
This would eliminate unnecessary code while maintaining the same functionality. 🐰 thoughtfully takes notes --- Details✏️ Learnings added
|
There was a problem hiding this comment.
Actionable comments posted: 3
🔭 Outside diff range comments (1)
website/templates/includes/page_stats.html (1)
287-312: 🛠️ Refactor suggestion
⚠️ Potential issueDuplicate Code in
getCookieFunction
Within thegetCookiefunction, the logic to parse cookies is duplicated (lines 289–299 and 300–311). Please remove the second block (lines 300–311) to avoid unnecessary redundancy and potential confusion.Proposed Diff:
@@ function getCookie(name) { - let cookieValue = null; - if (document.cookie && document.cookie !== '') { - const cookies = document.cookie.split(';'); - for (let i = 0; i < cookies.length; i++) { - const cookie = cookies[i].trim(); - if (cookie.substring(0, name.length + 1) === (name + '=')) { - cookieValue = decodeURIComponent(cookie.substring(name.length + 1)); - break; - } - } - } - return cookieValue; - let cookieValue = null; - if (document.cookie && document.cookie !== '') { - const cookies = document.cookie.split(';'); - for (let i = 0; i < cookies.length; i++) { - const cookie = cookies[i].trim(); - if (cookie.substring(0, name.length + 1) === (name + '=')) { - cookieValue = decodeURIComponent(cookie.substring(name.length + 1)); - break; - } - } - } - return cookieValue; + let cookieValue = null; + if (document.cookie && document.cookie !== '') { + const cookies = document.cookie.split(';'); + for (let i = 0; i < cookies.length; i++) { + const cookie = cookies[i].trim(); + if (cookie.substring(0, name.length + 1) === (name + '=')) { + cookieValue = decodeURIComponent(cookie.substring(name.length + 1)); + break; + } + } + } + return cookieValue;
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
website/templates/includes/page_stats.html(9 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (2)
- GitHub Check: Run Tests
- GitHub Check: docker-test
🔇 Additional comments (9)
website/templates/includes/page_stats.html (9)
2-6: Inconsistent Template Variable Usage
The page views now correctly usecurrent_url_path(lines 3–4), but the vote counts (upvotes/downvotes on lines 5–6) still rely oncurrent_template. This inconsistency may lead to mismatches between displayed statistics and vote submission data. Please verify if vote counts should also be based oncurrent_url_pathfor consistency.
20-24: Enhanced Chart Display Configuration Approved
The adjustments—updating the title to "Page Views (Last 30 Days)" and increasing the canvas height to 120 pixels—improve clarity and visibility of the statistics.
70-87: Robust JSON Parsing and Error Handling
The refactored block for parsing the JSON page views data (lines 70–87) is well-structured. The use of a try–catch and the check for empty data ensures that even malformed input won’t break the chart initialization.
95-136: Chronological Sorting and Date Processing
The logic for sorting dates (line 96) and formatting them (lines 106–135) is comprehensive with appropriate validation and error handling for invalid dates. This ensures that only correctly formatted dates are used in the chart.
148-150: Accurate Total Views Calculation
Calculating the total views by reducing thepageViewsDataarray and updating the DOM (lines 148–150) is implemented correctly.
153-239: Well-Configured Chart.js Initialization
The bar chart configuration—including labels, dataset options (e.g.,barPercentage,categoryPercentage), and tooltip formatting (lines 178–198)—is thorough and enhances data readability. Consider minor documentation for the new options for future maintainability.
257-268: Toggle Container Event Listener Verified
The click event listener attached to the handle element (lines 257–268) for toggling the container’s visibility is implemented correctly and follows best practices.
272-283: Effective Touch Support Implementation
The additional touch event handler (lines 272–283) enhances mobile usability by ensuring the container toggles correctly on touch events.
317-349: Robust Vote Submission Handler
The vote submission function (lines 317–349) handles form data creation, CSRF token usage, and response validation effectively. The error handling in the fetch call is also appropriate.
| const pageStatsContainer = document.getElementById('pageStatsContainer'); | ||
| // Set up vote functionality | ||
| const pageStatsContainer = document.getElementById('pageStatsContainer'); | ||
| const upvoteBtn = document.getElementById('upvoteBtn'); | ||
| const downvoteBtn = document.getElementById('downvoteBtn'); | ||
| const upvoteCount = document.getElementById('upvoteCount'); | ||
| const downvoteCount = document.getElementById('downvoteCount'); | ||
| const currentTemplate = '{{ current_template }}'; | ||
| const currentUrlPath = '{{ current_url_path }}'; |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Duplicate DOM Element Declaration
The pageStatsContainer element is queried twice (lines 247 and 249). This duplication can lead to confusion and potential future issues. Please remove the redundant declaration.
| }); | ||
| }); |
There was a problem hiding this comment.
Extraneous Closing Bracket
An extra closing bracket (});) appears at line 367 that could cause a JavaScript syntax error. Please remove the redundant closing bracket to ensure the script runs correctly.
| // Event listeners for vote buttons | ||
| // Event listeners for vote buttons | ||
| upvoteBtn.addEventListener('click', function(e) { | ||
| e.stopPropagation(); | ||
| submitVote('upvote'); | ||
| e.stopPropagation(); | ||
| submitVote('upvote'); | ||
| }); | ||
|
|
||
| downvoteBtn.addEventListener('click', function(e) { | ||
| e.stopPropagation(); | ||
| submitVote('downvote'); | ||
| e.stopPropagation(); | ||
| submitVote('downvote'); | ||
| }); |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Duplicate Vote Submission Calls
Both the upvote (lines 353–358) and downvote (lines 360–364) event listeners call e.stopPropagation() and submitVote() twice, which will result in duplicate vote submissions. Please remove the redundant calls so that each button click only triggers a single vote submission.
Proposed Diff for Upvote Button:
-upvoteBtn.addEventListener('click', function(e) {
- e.stopPropagation();
- submitVote('upvote');
- e.stopPropagation();
- submitVote('upvote');
-});
+upvoteBtn.addEventListener('click', function(e) {
+ e.stopPropagation();
+ submitVote('upvote');
+});Proposed Diff for Downvote Button:
-downvoteBtn.addEventListener('click', function(e) {
- e.stopPropagation();
- submitVote('downvote');
- e.stopPropagation();
- submitVote('downvote');
-});
+downvoteBtn.addEventListener('click', function(e) {
+ e.stopPropagation();
+ submitVote('downvote');
+});📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| // Event listeners for vote buttons | |
| // Event listeners for vote buttons | |
| upvoteBtn.addEventListener('click', function(e) { | |
| e.stopPropagation(); | |
| submitVote('upvote'); | |
| e.stopPropagation(); | |
| submitVote('upvote'); | |
| }); | |
| downvoteBtn.addEventListener('click', function(e) { | |
| e.stopPropagation(); | |
| submitVote('downvote'); | |
| e.stopPropagation(); | |
| submitVote('downvote'); | |
| }); | |
| // Event listeners for vote buttons | |
| // Event listeners for vote buttons | |
| upvoteBtn.addEventListener('click', function(e) { | |
| e.stopPropagation(); | |
| submitVote('upvote'); | |
| }); | |
| downvoteBtn.addEventListener('click', function(e) { | |
| e.stopPropagation(); | |
| submitVote('downvote'); | |
| }); |
Chart is Showing proper stats now
Summary by CodeRabbit
New Features
Bug Fixes