diff --git a/Dockerfile b/Dockerfile
index 16b8f16..3858437 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -24,10 +24,12 @@ RUN pip3 install -r /tmp/requirements.txt
COPY patches/01_add_api_urls.patch /opt/venv/lib/python3.12/site-packages/
COPY patches/03_add_active_needs_renewal_status.patch /opt/venv/lib/python3.12/site-packages/
+COPY patches/04_add_usage_chart.patch /opt/venv/lib/python3.12/site-packages/
RUN cd /opt/venv/lib/python3.12/site-packages && \
patch -p1 < 01_add_api_urls.patch && \
- patch -p1 < 03_add_active_needs_renewal_status.patch
+ patch -p1 < 03_add_active_needs_renewal_status.patch && \
+ patch -p1 < 04_add_usage_chart.patch
# Final Image
FROM python:3.12-slim-bullseye
@@ -45,6 +47,11 @@ COPY src/bin/run_coldfront.sh /opt/venv/bin
# Update NERC's email templates
COPY src/email/ /opt/venv/lib/python3.12/site-packages/coldfront/templates/email/
+# Add NERC usage chart static files
+COPY src/static/chartjs/ /opt/venv/lib/python3.12/site-packages/coldfront/static/chartjs/
+COPY src/static/css/ /opt/venv/lib/python3.12/site-packages/coldfront/static/css/
+COPY src/static/js/ /opt/venv/lib/python3.12/site-packages/coldfront/static/js/
+
ENV PATH="/opt/venv/bin:$PATH"
ENV DJANGO_SETTINGS_MODULE="local_settings"
diff --git a/docs/chartjs-integration.md b/docs/chartjs-integration.md
new file mode 100644
index 0000000..6f27971
--- /dev/null
+++ b/docs/chartjs-integration.md
@@ -0,0 +1,104 @@
+# Chart.js Integration in ColdFront-NERC
+
+This document explains how Chart.js was integrated into the ColdFront-NERC project for usage visualization.
+
+## Overview
+
+Chart.js is added as a NERC-specific dependency to visualize allocation usage statistics on the allocation detail page.
+
+## Files Modified
+
+### 1. Static Files
+- **Location**: `src/static/chartjs/chart.min.js`
+- **Purpose**: Contains the Chart.js library (v4.4.1)
+
+### 2. Template Override
+- **Location**: `src/templates/allocation/allocation_detail.html`
+- **Changes**:
+ - Added usage statistics card with canvas element (line ~175)
+ - Imported Chart.js script (line ~440)
+ - Added chart initialization code (line ~492)
+
+### 3. Dockerfile
+- **Changes**: Added line to copy NERC templates directory
+```dockerfile
+COPY src/templates/ /opt/venv/lib/python3.12/site-packages/coldfront/templates/
+COPY src/static/ /opt/venv/lib/python3.12/site-packages/coldfront/static/
+```
+
+### 4. Local Settings
+- **Location**: `src/local_settings.py`
+- **Changes**: Added NERC static files directory to Django's search path
+```python
+STATICFILES_DIRS.insert(0, os.path.join(os.path.dirname(__file__), 'static'))
+```
+
+## How It Works
+
+1. **Build Time**: During Docker build, the template and static files are copied into the container
+2. **Deployment**: Kubernetes `collectstatic` command gathers all static files
+3. **Runtime**: When users view an allocation detail page, they see a usage chart
+
+## Example Chart
+
+The current implementation shows a sample line chart with:
+- Monthly CPU hours usage
+- 6 months of data
+- Responsive design
+
+## Customizing the Chart
+
+To use real data instead of sample data, modify the chart initialization in `allocation_detail.html`:
+
+```javascript
+new Chart(ctx, {
+ type: 'line',
+ data: {
+ labels: {{ month_labels|safe }}, // Pass from Django view
+ datasets: [{
+ label: 'CPU Hours Used',
+ data: {{ usage_data|safe }}, // Pass from Django view
+ borderColor: 'rgb(75, 192, 192)',
+ backgroundColor: 'rgba(75, 192, 192, 0.2)',
+ }]
+ },
+ options: {
+ // ... chart options
+ }
+});
+```
+
+## Testing
+
+### Local Development
+1. Build the Docker image:
+```bash
+docker build -t coldfront-nerc:test .
+```
+
+2. Run the container:
+```bash
+docker run -p 8080:8080 coldfront-nerc:test
+```
+
+3. Navigate to any allocation detail page to see the chart
+
+### Kubernetes Deployment
+The chart will automatically be included when deploying to staging/production as part of the normal deployment process.
+
+## Chart Types
+
+Chart.js supports multiple chart types. Change the `type` parameter to use different visualizations:
+- `line` - Line chart (current)
+- `bar` - Bar chart
+- `pie` - Pie chart
+- `doughnut` - Doughnut chart
+- `radar` - Radar chart
+- `polarArea` - Polar area chart
+
+## Additional Resources
+
+- [Chart.js Documentation](https://www.chartjs.org/docs/latest/)
+- [Chart.js Examples](https://www.chartjs.org/docs/latest/samples/information.html)
+
+
diff --git a/issues/02_data_integration.md b/issues/02_data_integration.md
new file mode 100644
index 0000000..52517cf
--- /dev/null
+++ b/issues/02_data_integration.md
@@ -0,0 +1,24 @@
+---
+title: "Chart Refactor: Data Integration"
+labels: ["data", "backend-integration", "charting"]
+assignees: []
+---
+
+## Description
+Implement robust data handling for the chart, including interpolation of missing values and proper dataset mapping.
+
+## Tasks
+- [ ] Standardize the data structure passed from the backend to the frontend.
+- [ ] Implement `interpolateMissingData` logic in `chart_tooltip.js` or `allocation_detail.js` to handle `null` values.
+- [ ] Ensure datasets correctly map to:
+ - CPU (Teal)
+ - GPU H100 (Orange)
+ - GPU V100 (Purple)
+- [ ] Add logic to flag "missing" data points so they can be styled differently (e.g., grayscale).
+- [ ] Pass backend data (e.g., attribute lengths, notes lengths) via `data-` attributes instead of Django template tags in JS.
+
+## Acceptance Criteria
+- [ ] Missing data points are mathematically interpolated.
+- [ ] Data sets utilize the correct color schemes.
+- [ ] The chart handles completely empty or partial datasets gracefully.
+
diff --git a/issues/03_responsiveness_and_interactivity.md b/issues/03_responsiveness_and_interactivity.md
new file mode 100644
index 0000000..17688fd
--- /dev/null
+++ b/issues/03_responsiveness_and_interactivity.md
@@ -0,0 +1,23 @@
+---
+title: "Chart Refactor: Responsiveness & Interactivity"
+labels: ["ux", "responsiveness", "charting"]
+assignees: []
+---
+
+## Description
+Fine-tune the user experience, ensuring the chart behaves correctly on resize and provides useful interactive feedback.
+
+## Tasks
+- [ ] Fix the "shrinking chart" bug where the canvas doesn't expand after shrinking.
+- [ ] Verify `responsive: true` configuration in Chart.js.
+- [ ] Configure x-axis ticks to avoid overcrowding (e.g., `maxTicksLimit` or custom callback to show every 3rd day).
+- [ ] Implement hover effects:
+ - Gray out points that are interpolated.
+ - Show custom tooltips on hover.
+- [ ] Test behavior on mobile vs. desktop viewports.
+
+## Acceptance Criteria
+- [ ] Chart resizes dynamically (grows and shrinks) with the window.
+- [ ] Axis labels remain readable on smaller screens.
+- [ ] Interacting with the chart (hover/click) is smooth and lag-free.
+
diff --git a/issues/04_tooltip_logic.md b/issues/04_tooltip_logic.md
new file mode 100644
index 0000000..cecb058
--- /dev/null
+++ b/issues/04_tooltip_logic.md
@@ -0,0 +1,26 @@
+---
+title: "Chart Refactor: Tooltip & Error Handling"
+labels: ["ux", "enhancement", "charting"]
+assignees: []
+---
+
+## Description
+Implement advanced custom tooltips to display detailed information and warnings about data quality.
+
+## Tasks
+- [ ] Move tooltip logic to `src/static/js/chart_tooltip.js`.
+- [ ] Implement `externalTooltipHandler` to render custom HTML tooltips.
+- [ ] Standardize missing data checks:
+ - Use `isCurrentPointMissing` for row-level styling.
+ - Use `doesTooltipHaveMissingData` for the footer warning.
+- [ ] formatting for the error message:
+ ```javascript
+ errorMessage.innerHTML = 'Billing script was unavailable for this date.
Values shown are interpolated.';
+ ```
+- [ ] Ensure tooltips are positioned correctly relative to the cursor and chart boundaries.
+
+## Acceptance Criteria
+- [ ] Tooltips show exact values for valid data and "Data unavailable" for missing data.
+- [ ] A warning message appears at the bottom of the tooltip if any visible dataset is missing data for that timestamp.
+- [ ] Tooltips support multi-line error messages using `innerHTML`.
+
diff --git a/patches/04_add_usage_chart.patch b/patches/04_add_usage_chart.patch
new file mode 100644
index 0000000..45bb0c7
--- /dev/null
+++ b/patches/04_add_usage_chart.patch
@@ -0,0 +1,49 @@
+diff --git a/coldfront/core/allocation/templates/allocation/allocation_detail.html b/coldfront/core/allocation/templates/allocation/allocation_detail.html
+--- a/coldfront/core/allocation/templates/allocation/allocation_detail.html
++++ b/coldfront/core/allocation/templates/allocation/allocation_detail.html
+@@ -173,6 +173,24 @@
+
+
+
++
++
Showing the cumulative cost for the last month
++