fix: render IRM kink chart without smoothing

[Seranged]

Summary

• Preserve the visible slope change in kinked IRM charts by rendering sampled APY points with straight line segments.
• Avoid Chart.js curve smoothing inventing a rounded bend around the kink point.

Changes

• Set both borrow and supply APY line datasets to zero tension in the vault overview IRM chart.
• Keep the existing kink sample injection and annotation behavior unchanged.

Test plan

• Ran npx eslint components/entities/vault/overview/VaultOverviewBlockIRM.vue.
• Ran npm run typecheck.
• Smoke-tested /lend/0xD8b27CF359b7D15710a5BE299AF6e7Bf904984C2?network=1 locally and verified the IRM chart renders with one canvas and no chart error.
• Captured high-DPI before/after crops around the 90% kink to verify the rounded smoothed bend becomes a hard kink.

Summary by CodeRabbit

• Bug Fixes
  • Updated the IRM overview chart so the Borrow APY and Supply APY lines now render as straight segments instead of curved lines.
  • This makes the visualization clearer and more consistent without changing any underlying data or interactions.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Repository: euler-xyz/coderabbit/.coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 9f2b1943-5fe8-43a6-8a3f-7f871cb943d6

📥 Commits

Reviewing files that changed from the base of the PR and between 12b33c6 and 091016c.

📒 Files selected for processing (1)

• components/entities/vault/overview/VaultOverviewBlockIRM.vue

---

📝 Walkthrough

Walkthrough

Changes tension from 0.4 to 0 on both the "Borrow APY" and "Supply APY" Chart.js dataset definitions in VaultOverviewBlockIRM.vue, switching the IRM chart lines from smoothed curves to straight segments.

IRM Chart Line Style

Layer / File(s)	Summary
Chart line tension update components/entities/vault/overview/VaultOverviewBlockIRM.vue	tension set to 0 on both APY series datasets, replacing smoothed curves with straight line segments.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~2 minutes

Poem

A rabbit hops along a line so straight,
No curves to wobble, no bends to debate.
The APY chart now sharp as a pin,
Tension set zero — let the angles win! 📐🐇

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately captures the main change: removing smoothing so the IRM kink chart renders with straight line segments.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
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.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feature/lite-237-visual-drop-in-interest-rate-around-kink

---

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

[railway-app]

🚅 Deployed to the euler-lite-pr-651 environment in euler-lite

Service	Status	Web	Updated (UTC)
dev-build	✅ Success (View Logs)	Web	Jun 27, 2026 at 1:49 pm

[LeonardEulerXYZ]

Leonard review — PR #651

Verdict: Comment — no blocking findings found for the current head 091016c69ae25f556959c59b8938e9820a3b997f.

Scope reviewed:

• components/entities/vault/overview/VaultOverviewBlockIRM.vue
• Change: both IRM Chart.js datasets now use tension: 0, so Borrow APY and Supply APY render as straight segments instead of smoothed curves.

Risk assessment:

• Behavior changed is presentation-only: the sampled IRM data, kink sample injection, annotation placement, APY readouts, RPC reads, and visibility gate are unchanged.
• The change is applied symmetrically to Borrow APY and Supply APY, so the chart no longer visually invents curvature around the kink for either series.
• I did not find sibling IRM chart surfaces using the same Chart.js smoothing behavior. VaultOverviewBlockCyclicalIRM.vue is a separate visualization and out of scope for this specific kink-chart smoothing fix.

Validation performed:

• npx eslint components/entities/vault/overview/VaultOverviewBlockIRM.vue — pass
• npm run typecheck — pass
• npm run build — pass; only existing Nuxt/Vite/Rollup-style build warnings observed
• Browser visual smoke on the PR preview route /lend/0xD8b27CF359b7D15710a5BE299AF6e7Bf904984C2?network=1
  • Desktop viewport: IRM section renders with a visible kink chart and expected labels/readouts.
  • Mobile viewport: opened Vault information, scrolled to the IRM section, and verified the chart/readouts render there too.
  • Smoke coverage: browser visual smoke + mobile smoke. Wallet/signing coverage not applicable and not run.

Visual evidence:

Desktop — IRM chart renders with straight kink behavior and visible current/kink labels.

Mobile — Vault information modal scrolled to the IRM section; chart and parameter readouts are visible.

Scalability / maintainability hygiene:

• This is the narrowest reasonable fix for the stated visual defect: the smoothing setting lives at the dataset level and there are exactly two affected datasets in this component.
• No reusable business/display logic was introduced, so there is no new one-off helper to extract.
• A focused component-level regression test for “IRM datasets use zero tension” would make the visual invariant explicit, but for this two-line chart option fix I do not consider the absence of such a test blocking.

Bot/reviewer feedback:

• CodeRabbit reported no actionable comments for this head. I verified the changed surface directly rather than treating that as authority.