Removes problematic Google Charts dependency and creates a cleaner,
more reliable performance trend visualization.
Changes:
- Remove all Google Charts JavaScript code (100+ lines)
- Replace chart with visual timeline showing each review chronologically
- Each timeline item displays:
* Date at top, reviewer name at bottom
* Colored circular badge with score number (green=5, blue=4, yellow=3, red<3)
* Horizontal progress bar showing score percentage with comments
- Add smooth animations: fade-in on load, scale on dot hover, slide on bar hover
- Color-coded by score for instant visual feedback
- Fully responsive with mobile layout
- No external dependencies - pure CSS solution
- Add empty state with graph icon if no performance data
The timeline provides better visual hierarchy and eliminates the blank
space issue caused by Google Charts loading failures.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Complete redesign of the performance page with modern Bootstrap 5:
Major improvements:
- Add header with graph icon and descriptive subtitle
- Create four stat cards showing key metrics at a glance:
* Average Score (blue with star icon)
* Highest Score (red with trophy icon)
* Latest Score (green with calendar icon)
* Total Reviews (purple with document icon)
- Stat cards lift and scale numbers on hover
- Modernize chart card with better spacing and min-height
- Enhance chart styling with smooth curves and better colors
- Transform table with modern header styling and icons
- Add reviewer avatars (circular icons) in table rows
- Color-code scores with badges (green=5, blue=4, yellow=3, red<3)
- Add empty state with inbox icon for no reviews
- Replace old Bootstrap 2 classes (row-fluid, span12, widget)
- Use Bootstrap 5 grid system and modern card components
- Add hover effects on table rows and stat cards
The page now provides an engaging, data-rich view of performance history
with clear visual hierarchy and modern design patterns.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Added comprehensive Turbolinks event handling and duplicate load
prevention for Google Charts on performance page.
Changes:
- Add turbolinks:load event listener for page navigations
- Prevent multiple google.load() calls with flag
- Check if visualization already loaded before loading again
- Add chart element existence check before drawing
- Call initializeChart() immediately for initial load
- Better error messages for debugging
This ensures charts render on both initial page load and Turbolinks
navigation, while preventing duplicate library loads.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Removed $(document).ready() wrapper inside google.load callback which
was preventing charts from rendering when page loaded via Turbolinks.
Changes:
- Remove document.ready wrapper (DOM already ready with Turbolinks)
- Add check for element existence before drawing chart
- Add guard to verify google.load exists before calling
- Create separate initializeChart function for cleaner callback
This ensures charts render properly on Turbolinks page loads where
the DOM is already ready when the script executes.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Fixed "Cannot read properties of undefined (reading 'arrayToDataTable')"
error caused by calling Google Charts API before it finished loading.
Changes:
- Move google.load() call below function definitions
- Use callback parameter to ensure charts load after library is ready
- Add guard check in drawChart2() to verify google.visualization exists
- Wrap chart drawing in $(document).ready() within the callback
This ensures the visualization library is fully loaded before attempting
to create charts, preventing race condition errors.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Ken Johnson