Port React widget stability fixes to Vue

[fadymondy]

Ports the React fixes from 84a03b8 to the Vue stack, and fixes one more bug of the same class in both stacks.

Fixes

• ChartWidget (Vue): bar datasets with an array backgroundColor get one colour per bar (Chart.js convention).
• ChartWidget (Vue + React): pie/doughnut charts fall back to the default palette when backgroundColor is an empty array (previously undefined fills).
• StatsOverviewWidget (Vue):
  • unknown chart colours fall back to primary (previously a render error)
  • single-value line charts draw a flat line (previously NaN points)
  • linked stat cards are Inertia <Link>s, so they are focusable and keyboard-activatable
• WidgetRenderer (Vue):
  • widgets that share an interval share one polling timer, so there are no duplicate timers
  • timers are re-created when the polling configuration or queryRoute changes, including after a reload changes the widget list
  • timers are cleared on unmount

Verification

• vendor/bin/pest: 74 passed
• npx tsc --noEmit -p tsconfig.laravilt.json: 0 errors
• No PHP changes.

🤖 Generated with Claude Code

Summary by CodeRabbit

• New Features

  • Bar charts now support individual colors for each bar when multiple colors are configured.
  • Stat cards with destinations now function as accessible links.
  • Widgets sharing the same refresh interval are updated together for more consistent polling.

• Bug Fixes

  • Pie and doughnut charts now display default colors when no colors are configured.
  • Single-value mini-charts render correctly without layout errors.
  • Stat card color styling now falls back to the primary color when needed.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Advanced

Run ID: e3c15c74-0dc3-4430-9161-208b16eb3bdb

📥 Commits

Reviewing files that changed from the base of the PR and between 632c6b3 and 7fad339.

📒 Files selected for processing (4)

• resources/js/components/ChartWidget.vue
• resources/js/components/StatsOverviewWidget.vue
• resources/js/components/WidgetRenderer.vue
• resources/react/components/ChartWidget.tsx

Included review availability: Your plan provides up to 1 included review per hour; 0 remain after this review.

---

📝 Walkthrough

Walkthrough

The Vue and React chart widgets now handle per-bar colors and empty color arrays. Stat cards use Inertia links, single-value line charts are guarded, and widget polling uses grouped timers.

Changes

Widget rendering updates

Layer / File(s)	Summary
Per-element chart colors resources/js/components/ChartWidget.vue, resources/react/components/ChartWidget.tsx	Bar charts now assign cycling colors to individual bars. Pie and doughnut charts use the default palette when the color array is empty.
Stat card links and chart safeguards resources/js/components/StatsOverviewWidget.vue	Cards with URLs render as Inertia Link elements. Single-value line charts duplicate their value before calculating positions. Missing color-map entries use the primary color.
Grouped widget polling resources/js/components/WidgetRenderer.vue	Polling now creates one timer for each unique interval and calls router.reload. Timers are cleared when polling settings change or the component unmounts.

Priority: ⬇️ Low

Estimated code review effort: 3 (Moderate) | ~25 minutes

Change: Bug fix

Merge Risk: ⚪ Minimal · up to 7fad3

Polling continues to reload the widget payload correctly when an enabled query route changes; no actionable merge risk remains.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 1 functions across 1 files. (3 skipped: 3 …	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately identifies the primary change: porting React widget stability fixes to Vue. It is concise and specific, although it does not mention the related React chart fix.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

Full details: Docstring Coverage

Explanation

Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 1 functions across 1 files. (3 skipped: 3 unsupported.)

• Fix all pre-merge checks with AI

✨ Finishing Touches 💡 1

📝 Generate docstrings 💡

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/stability

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}