From 7541441eb470add27790bdb46f8bb9ad738423e2 Mon Sep 17 00:00:00 2001
From: graphieros <alec.lloyd.probert@gmail.com>
Date: Tue, 28 Apr 2026 06:16:55 +0200
Subject: [PATCH 1/2] chore: use smooth path utility from vue-data-ui

---
 app/components/OgImage/Package.takumi.vue   |  3 +-
 app/composables/useCharts.ts                | 40 ---------------------
 test/nuxt/components/OgImagePackage.spec.ts |  1 -
 3 files changed, 2 insertions(+), 42 deletions(-)

diff --git a/app/components/OgImage/Package.takumi.vue b/app/components/OgImage/Package.takumi.vue
index 34aa7245de..708e80ec8f 100644
--- a/app/components/OgImage/Package.takumi.vue
+++ b/app/components/OgImage/Package.takumi.vue
@@ -15,7 +15,8 @@ const KIND_ICONS: Record<string, string> = {
 <script setup lang="ts">
 import type { JsDelivrFileNode } from '#shared/types'
 import { joinURL } from 'ufo'
-import { smoothPath, useCharts } from '~/composables/useCharts'
+import { useCharts } from '~/composables/useCharts'
+import { createSmoothPath as smoothPath } from 'vue-data-ui/utils'
 
 const REPO_PROVIDER_ICONS: Record<string, string> = {
   github: 'i-simple-icons:github',
diff --git a/app/composables/useCharts.ts b/app/composables/useCharts.ts
index 0f78ec8153..c2b3fa039a 100644
--- a/app/composables/useCharts.ts
+++ b/app/composables/useCharts.ts
@@ -66,46 +66,6 @@ function mergeDailyPoints(points: DailyRawPoint[]): DailyRawPoint[] {
     .map(([day, value]) => ({ day, value }))
 }
 
-function roundToHundredths(value: number): number {
-  return Math.round(value * 100) / 100
-}
-
-/** Catmull-Rom monotone cubic spline — same algorithm as vue-data-ui's smoothPath for OG Images */
-export function smoothPath(pts: { x: number; y: number }[]): string {
-  if (pts.length < 2) return '0,0'
-  const n = pts.length - 1
-  const out = [`${roundToHundredths(pts[0]!.x)},${roundToHundredths(pts[0]!.y)}`]
-  const dx: number[] = []
-  const dy: number[] = []
-  const m: number[] = []
-  const t: number[] = []
-
-  for (let i = 0; i < n; i++) {
-    dx[i] = pts[i + 1]!.x - pts[i]!.x
-    dy[i] = pts[i + 1]!.y - pts[i]!.y
-    m[i] = dx[i] === 0 ? 0 : dy[i]! / dx[i]!
-  }
-
-  t[0] = m[0]!
-  t[n] = m[n - 1]!
-  for (let i = 1; i < n; i++) {
-    t[i] = m[i - 1]! * m[i]! <= 0 ? 0 : (2 * m[i - 1]! * m[i]!) / (m[i - 1]! + m[i]!)
-  }
-
-  for (let i = 0; i < n; i++) {
-    const x0 = pts[i]!.x,
-      y0 = pts[i]!.y
-    const x1 = pts[i + 1]!.x,
-      y1 = pts[i + 1]!.y
-    const seg = x1 - x0
-    out.push(
-      `C ${roundToHundredths(x0 + seg / 3)},${roundToHundredths(y0 + (t[i]! * seg) / 3)} ${roundToHundredths(x1 - seg / 3)},${roundToHundredths(y1 - (t[i + 1]! * seg) / 3)} ${roundToHundredths(x1)},${roundToHundredths(y1)}`,
-    )
-  }
-
-  return out.join(' ')
-}
-
 const npmDailyRangeCache = import.meta.client ? new Map<string, Promise<DailyRawPoint[]>>() : null
 const likesEvolutionCache = import.meta.client ? new Map<string, Promise<DailyRawPoint[]>>() : null
 const contributorsEvolutionCache = import.meta.client
diff --git a/test/nuxt/components/OgImagePackage.spec.ts b/test/nuxt/components/OgImagePackage.spec.ts
index 789c725b88..b19bc16ba1 100644
--- a/test/nuxt/components/OgImagePackage.spec.ts
+++ b/test/nuxt/components/OgImagePackage.spec.ts
@@ -26,7 +26,6 @@ vi.mock('~/composables/useCharts', () => ({
   useCharts: vi.fn().mockReturnValue({
     fetchPackageDownloadEvolution: mockFetchPackageDownloadEvolution,
   }),
-  smoothPath: vi.fn().mockReturnValue(''),
 }))
 
 import OgImagePackage from '~/components/OgImage/Package.takumi.vue'

From 0637f45a873aebae19382eecb21a1c0724d96805 Mon Sep 17 00:00:00 2001
From: graphieros <alec.lloyd.probert@gmail.com>
Date: Tue, 28 Apr 2026 08:39:21 +0200
Subject: [PATCH 2/2] fix: remove alias

---
 app/components/OgImage/Package.takumi.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/components/OgImage/Package.takumi.vue b/app/components/OgImage/Package.takumi.vue
index 708e80ec8f..d61afcb2e8 100644
--- a/app/components/OgImage/Package.takumi.vue
+++ b/app/components/OgImage/Package.takumi.vue
@@ -16,7 +16,7 @@ const KIND_ICONS: Record<string, string> = {
 import type { JsDelivrFileNode } from '#shared/types'
 import { joinURL } from 'ufo'
 import { useCharts } from '~/composables/useCharts'
-import { createSmoothPath as smoothPath } from 'vue-data-ui/utils'
+import { createSmoothPath } from 'vue-data-ui/utils'
 
 const REPO_PROVIDER_ICONS: Record<string, string> = {
   github: 'i-simple-icons:github',
@@ -240,7 +240,7 @@ const sparklineSrc = computed(() => {
     y: padY + (1 - (v - min) / range) * (height - padY * 2),
   }))
 
-  const pathData = smoothPath(points)
+  const pathData = createSmoothPath(points)
   const firstX = points[0]!.x
   const lastX = points.at(-1)!.x