Improve graph UX with smoother curves and visual polish#13
Improve graph UX with smoother curves and visual polish#13jbingham17 wants to merge 1 commit intomainfrom
Conversation
…ects - Increase chart height from 120px to 160px for better readability - Switch graph interpolation from linear to monotone for smoother curves - Add subtle CartesianGrid to CPU and Memory graphs - Enhance gradient opacity and stroke width for more vibrant fills - Add animated glow effect on graph values with reduced-motion support - Add inset shadow and subtle border to graph containers Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
📝 WalkthroughSummary by CodeRabbit
WalkthroughVisual enhancements applied to graph components and styling. Graph values display size increased with added glow animation, chart heights expanded from 120px to 160px, CartesianGrid added to both charts, gradient opacity values adjusted, Area interpolation changed to monotone curves, and stroke widths increased. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes Possibly related PRs
🚥 Pre-merge checks | ✅ 2✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches
🧪 Generate unit tests (beta)
Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/App.css`:
- Around line 254-266: Change all occurrences of the CSS keyword "currentColor"
to lowercase "currentcolor" to satisfy the Stylelint value-keyword-case rule:
update the .graph-value rule (text-shadow and any animation declarations) and
both frames in the `@keyframes` value-glow definition to use "currentcolor"
instead of "currentColor".
| text-shadow: 0 0 20px currentColor, 0 0 40px currentColor; | ||
| animation: value-glow 2s ease-in-out infinite alternate; | ||
| } | ||
|
|
||
| @media (prefers-reduced-motion: reduce) { | ||
| .graph-value { | ||
| animation: none; | ||
| } | ||
| } | ||
|
|
||
| @keyframes value-glow { | ||
| from { text-shadow: 0 0 20px currentColor, 0 0 40px currentColor; } | ||
| to { text-shadow: 0 0 10px currentColor, 0 0 25px currentColor; } |
There was a problem hiding this comment.
Use lowercase currentcolor to satisfy Stylelint rules.
Static analysis reports value-keyword-case violations. CSS keywords should use lowercase per your project's Stylelint configuration.
🔧 Proposed fix
.graph-value {
font-size: 32px;
font-weight: 700;
- text-shadow: 0 0 20px currentColor, 0 0 40px currentColor;
+ text-shadow: 0 0 20px currentcolor, 0 0 40px currentcolor;
animation: value-glow 2s ease-in-out infinite alternate;
}
`@media` (prefers-reduced-motion: reduce) {
.graph-value {
animation: none;
}
}
`@keyframes` value-glow {
- from { text-shadow: 0 0 20px currentColor, 0 0 40px currentColor; }
- to { text-shadow: 0 0 10px currentColor, 0 0 25px currentColor; }
+ from { text-shadow: 0 0 20px currentcolor, 0 0 40px currentcolor; }
+ to { text-shadow: 0 0 10px currentcolor, 0 0 25px currentcolor; }
}🧰 Tools
🪛 Stylelint (17.3.0)
[error] 254-254: Expected "currentColor" to be "currentcolor" (value-keyword-case)
(value-keyword-case)
[error] 254-254: Expected "currentColor" to be "currentcolor" (value-keyword-case)
(value-keyword-case)
[error] 265-265: Expected "currentColor" to be "currentcolor" (value-keyword-case)
(value-keyword-case)
[error] 265-265: Expected "currentColor" to be "currentcolor" (value-keyword-case)
(value-keyword-case)
[error] 266-266: Expected "currentColor" to be "currentcolor" (value-keyword-case)
(value-keyword-case)
[error] 266-266: Expected "currentColor" to be "currentcolor" (value-keyword-case)
(value-keyword-case)
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/App.css` around lines 254 - 266, Change all occurrences of the CSS
keyword "currentColor" to lowercase "currentcolor" to satisfy the Stylelint
value-keyword-case rule: update the .graph-value rule (text-shadow and any
animation declarations) and both frames in the `@keyframes` value-glow definition
to use "currentcolor" instead of "currentColor".
There was a problem hiding this comment.
why did you suggest this?
There was a problem hiding this comment.
@jbingham17 The suggestion was based on your project's Stylelint configuration, which enforces the value-keyword-case rule requiring CSS keywords to be lowercase.
Both currentColor and currentcolor work identically in CSS—the language is case-insensitive for keywords. However, the linter flagged 6 violations because your project's style guide prefers lowercase keywords for consistency.
This is purely a code style suggestion, not a functional issue. If your team prefers the camelCase currentColor for readability, you can either:
- Ignore this particular suggestion
- Adjust the Stylelint rule in your configuration to allow camelCase keywords
The choice is yours based on your team's style preferences!
|
@coderabbitai explain the change |
|
Tip For best results, initiate chat on the files or code changes.
📊 Graph Dimensions
📈 Smoother Curves
🎨 Visual EnhancementsGraph Styling:
Graph Container (App.css):
Animation:
These changes work together to create a more polished, modern interface with improved readability and visual appeal while maintaining accessibility standards. |
1 participant
Summary
Test plan
prefers-reduced-motion🤖 Generated with Claude Code