added sse and description for withdraw

src/views/base/home/components/PriceChart.vue

@@ -51,11 +51,18 @@ import { computed, nextTick, onMounted, ref, watch } from 'vue'
 import { useConfigStore } from '@/store/configStore'
 import { usePrice } from '@/utils/usePrice'
 import { getProjectFontFamily } from '@/utils/config'
-import { computeTightChartYBounds, amplifyChartDeviation, shouldAmplifyKatodMesChart } from '@/utils/chartPriceAxis'
+import {
+  computeKatodMesVisualYBounds,
+  prepareKatodMesChartPoints,
+  shouldAmplifyKatodMesChart,
+  shouldUseKatodVisualChartTransform,
+} from '@/utils/chartPriceAxis'
 import { useSettingsStore } from '@/store/settingsStore'
 import { useElementSize } from '@vueuse/core'
+import { price } from '@/utils/price'
 
 import type { ChartMetalType } from '../composables/usePriceChart'
+import { resolveMetalDayRangePrices, usePriceChart } from '../composables/usePriceChart'
 
 const props = withDefaults(
   defineProps<{
@@ -93,6 +100,7 @@ const emit = defineEmits<{
 
 const config = useConfigStore()
 const settingsStore = useSettingsStore()
+const { maftolChartRatio } = usePriceChart()
 const chartContainerRef = ref<HTMLElement | null>(null)
 const chartMounted = ref(false)
 const selectedValue = ref(props.chartSelection)
@@ -106,21 +114,43 @@ const amplifyKatodChart = computed(() =>
     metalTypeSetting: settingsStore.metalTypeSettingValue,
   })
 )
+const katodUsesVisualTransform = computed(
+  () => amplifyKatodChart.value && shouldUseKatodVisualChartTransform(props.chartSelection)
+)
+const katodDayRange = computed(() => {
+  if (!amplifyKatodChart.value) {
+    return undefined
+  }
+
+  return resolveMetalDayRangePrices({
+    price: price.value,
+    metal: props.selectedMetal,
+    isBoursecuLayout: true,
+    maftolRatio: maftolChartRatio.value,
+  })
+})
 const displayChartSeries = computed(() => {
   const baseSeries = props.priceChartSeries?.[0]
   if (!baseSeries?.data?.length || !amplifyKatodChart.value) {
     return props.priceChartSeries
   }
 
+  const originalData = baseSeries.data as [number, number][]
+  const { data: displayData, tooltipPrices, dayMeta, pointMeta } = prepareKatodMesChartPoints(originalData, {
+    timeline: props.chartSelection,
+    dayRange: katodDayRange.value,
+  })
+
   return [
     {
       ...baseSeries,
-      data: amplifyChartDeviation(baseSeries.data as [number, number][]),
+      data: displayData,
+      meta: { tooltipPrices, dayMeta, pointMeta },
     },
   ]
 })
 const chartYBounds = computed(() => {
-  if (!amplifyKatodChart.value) {
+  if (!katodUsesVisualTransform.value) {
     return {}
   }
 
@@ -129,7 +159,7 @@ const chartYBounds = computed(() => {
       ?.map((point: [number, number]) => Number(point?.[1]))
       .filter((value: number) => Number.isFinite(value)) ?? []
 
-  return computeTightChartYBounds(prices)
+  return computeKatodMesVisualYBounds(prices)
 })
 const canRenderChart = computed(
   () => chartMounted.value && chartWidth.value > 0 && seriesLength.value > 0
@@ -157,7 +187,7 @@ const chartOptions = computed(() => {
       type: 'area',
       height: 200,
       toolbar: { show: false },
-      zoom: { autoScaleYaxis: !amplifyKatodChart.value },
+      zoom: { autoScaleYaxis: !katodUsesVisualTransform.value },
       redrawOnParentResize: true,
     },
     grid: {
@@ -165,8 +195,8 @@ const chartOptions = computed(() => {
       yaxis: { lines: { show: false } },
     },
     stroke: {
-      width: amplifyKatodChart.value ? 2.5 : 2,
-      curve: amplifyKatodChart.value ? 'smooth' : 'straight',
+      width: katodUsesVisualTransform.value ? 2.5 : 2,
+      curve: 'straight',
     },
     dataLabels: {
       enabled: false,
@@ -201,11 +231,20 @@ const chartOptions = computed(() => {
           })}`
         },
       },
-      ...(amplifyKatodChart.value
+      ...(katodUsesVisualTransform.value
         ? {
             custom: ({ dataPointIndex, w }: { dataPointIndex: number; w: { globals: { seriesX: number[][] } } }) => {
               const timestamp = w.globals.seriesX[0]?.[dataPointIndex]
-              const realPrice = props.priceChartSeries?.[0]?.data?.[dataPointIndex]?.[1]
+              const seriesMeta = displayChartSeries.value?.[0]?.meta as
+                | {
+                    tooltipPrices?: number[]
+                    dayMeta?: { high: number; low: number; avg: number }[]
+                    pointMeta?: { kind: 'high' | 'low' | 'avg'; dayHigh: number; dayLow: number }[]
+                  }
+                | undefined
+              const pointMeta = seriesMeta?.pointMeta?.[dataPointIndex]
+              const dayMeta = seriesMeta?.dayMeta?.[dataPointIndex]
+              const realPrice = seriesMeta?.tooltipPrices?.[dataPointIndex] ?? dayMeta?.avg
               if (timestamp == null || realPrice == null) {
                 return ''
               }
@@ -216,12 +255,31 @@ const chartOptions = computed(() => {
                 minute: '2-digit',
               })}`
 
+              const priceLine = usePrice(realPrice, true, 'ه.ریال')
+              let valueLabel = priceLine
+              if (pointMeta?.kind === 'high') {
+                valueLabel = `بالاترین روز: ${priceLine}`
+              } else if (pointMeta?.kind === 'low') {
+                valueLabel = `پایین‌ترین روز: ${priceLine}`
+              } else if (dayMeta) {
+                valueLabel = `میانگین روز: ${priceLine}`
+              }
+
+              const rangeHigh = pointMeta?.dayHigh ?? dayMeta?.high
+              const rangeLow = pointMeta?.dayLow ?? dayMeta?.low
+              const rangeLine =
+                rangeHigh != null && rangeLow != null
+                  ? `<div style="font-family:${fontFamily};font-size:12px;opacity:0.85;margin-top:4px">
+                    بازه روز: ${usePrice(rangeHigh, true, 'ه.ریال')} — ${usePrice(rangeLow, true, 'ه.ریال')}
+                  </div>`
+                  : ''
+
               return `<div class="apexcharts-tooltip-title" style="font-family:${fontFamily}">${timeLabel}</div>
                 <div class="apexcharts-tooltip-series-group apexcharts-active" style="order:1;display:flex">
                   <span class="apexcharts-tooltip-text" style="font-family:${fontFamily}">
-                    <span class="apexcharts-tooltip-text-y-value">${usePrice(realPrice, true, 'ه.ریال')}</span>
+                    <span class="apexcharts-tooltip-text-y-value">${valueLabel}</span>
                   </span>
-                </div>`
+                </div>${rangeLine}`
             },
           }
         : {