chore: use smooth path utility from vue-data-ui (#2647)

Author: graphieros

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 } from 'vue-data-ui/utils'
 
 const REPO_PROVIDER_ICONS: Record<string, string> = {
   github: 'i-simple-icons:github',
@@ -239,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
 

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

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'