feat(quotes): show world copper, dollar, ton, and kilo on home

Add assets chart hover so the portfolio line shows the value under the pointer.

Co-authored-by: Cursor <cursoragent@cursor.com>

src/views/base/assets/composables/useAssetsPortfolioChart.ts

@@ -4,6 +4,7 @@ import {
   type LandingHistoryRange,
 } from '@/api/zaarboxPriceHistory'
 import { buildSeriesChartPaths } from '@/utils/chartAreaPaths'
+import { usePrice } from '@/utils/usePrice'
 const CHART_RANGE_OPTIONS = [
   { value: 'DAILY' as const, shortLabel: '۲۴ ساعت', label: 'ارزش دارایی — ۲۴ ساعت گذشته' },
   { value: 'WEEKLY' as const, shortLabel: 'هفته', label: 'ارزش دارایی — هفته گذشته' },
@@ -32,6 +33,7 @@ export function useAssetsPortfolioChart(
   }
 
   function setChartRange(range: LandingHistoryRange) {
+    chartHover.value = null
     chartRange.value = range
     void loadChartHistory(range)
   }
@@ -61,6 +63,53 @@ export function useAssetsPortfolioChart(
 
   const portfolioChart = computed(() => buildSeriesChartPaths(portfolioSeries.value))
 
+  const chartHover = ref<{
+    xPercent: number
+    yPercent: number
+    valueLabel: string
+    timeLabel: string
+  } | null>(null)
+
+  function formatChartTimeLabel(timeMs: number) {
+    try {
+      return new Intl.DateTimeFormat('fa-IR', {
+        timeZone: 'Asia/Tehran',
+        month: 'short',
+        day: 'numeric',
+        hour: '2-digit',
+        minute: '2-digit',
+      }).format(new Date(timeMs))
+    } catch {
+      return ''
+    }
+  }
+
+  function onChartPointerMove(event: PointerEvent) {
+    const chart = portfolioChart.value
+    if (!chart.hasData || chart.samples.length < 2) {
+      chartHover.value = null
+      return
+    }
+    const target = event.currentTarget as HTMLElement | null
+    if (!target) return
+    const rect = target.getBoundingClientRect()
+    if (rect.width <= 0 || rect.height <= 0) return
+    const ratio = Math.min(1, Math.max(0, (event.clientX - rect.left) / rect.width))
+    const index = Math.round(ratio * (chart.samples.length - 1))
+    const sample = chart.samples[index]
+    if (!sample) return
+    chartHover.value = {
+      xPercent: (sample.x / chart.width) * 100,
+      yPercent: (sample.y / chart.height) * 100,
+      valueLabel: usePrice(sample.value),
+      timeLabel: formatChartTimeLabel(sample.timeMs),
+    }
+  }
+
+  function onChartPointerLeave() {
+    chartHover.value = null
+  }
+
   watch(
     () => cashRial.value + metalRial.value,
     (total) => {
@@ -81,6 +130,9 @@ export function useAssetsPortfolioChart(
     chartDrawn,
     chartLoading,
     portfolioChart,
+    chartHover,
+    onChartPointerMove,
+    onChartPointerLeave,
     setChartRange,
     initAssetsPortfolioChart,
   }