fix chart

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

@@ -39,7 +39,7 @@
           width="100%"
           :height="chartHeight"
           :options="chartOptions"
-          :series="props.priceChartSeries"
+          :series="displayChartSeries"
         />
       </div>
     </div>
@@ -51,6 +51,8 @@ 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 { useSettingsStore } from '@/store/settingsStore'
 import { useElementSize } from '@vueuse/core'
 
 import type { ChartMetalType } from '../composables/usePriceChart'
@@ -90,6 +92,7 @@ const emit = defineEmits<{
 }>()
 
 const config = useConfigStore()
+const settingsStore = useSettingsStore()
 const chartContainerRef = ref<HTMLElement | null>(null)
 const chartMounted = ref(false)
 const selectedValue = ref(props.chartSelection)
@@ -97,6 +100,37 @@ const selectedValue = ref(props.chartSelection)
 const { width: chartWidth } = useElementSize(chartContainerRef)
 
 const seriesLength = computed(() => props.priceChartSeries?.[0]?.data?.length ?? 0)
+const amplifyKatodChart = computed(() =>
+  shouldAmplifyKatodMesChart({
+    isBoursecu: props.layout === 'boursecu',
+    metalTypeSetting: settingsStore.metalTypeSettingValue,
+  })
+)
+const displayChartSeries = computed(() => {
+  const baseSeries = props.priceChartSeries?.[0]
+  if (!baseSeries?.data?.length || !amplifyKatodChart.value) {
+    return props.priceChartSeries
+  }
+
+  return [
+    {
+      ...baseSeries,
+      data: amplifyChartDeviation(baseSeries.data as [number, number][]),
+    },
+  ]
+})
+const chartYBounds = computed(() => {
+  if (!amplifyKatodChart.value) {
+    return {}
+  }
+
+  const prices =
+    displayChartSeries.value?.[0]?.data
+      ?.map((point: [number, number]) => Number(point?.[1]))
+      .filter((value: number) => Number.isFinite(value)) ?? []
+
+  return computeTightChartYBounds(prices)
+})
 const canRenderChart = computed(
   () => chartMounted.value && chartWidth.value > 0 && seriesLength.value > 0
 )
@@ -115,6 +149,7 @@ onMounted(async () => {
 
 const chartOptions = computed(() => {
   const fontFamily = getProjectFontFamily()
+  const yBounds = chartYBounds.value
 
   return {
     chart: {
@@ -122,14 +157,17 @@ const chartOptions = computed(() => {
       type: 'area',
       height: 200,
       toolbar: { show: false },
-      zoom: { autoScaleYaxis: true },
+      zoom: { autoScaleYaxis: !amplifyKatodChart.value },
       redrawOnParentResize: true,
     },
     grid: {
       padding: { top: 0, right: 0, bottom: 0, left: 0 },
       yaxis: { lines: { show: false } },
     },
-    stroke: { width: 2 },
+    stroke: {
+      width: amplifyKatodChart.value ? 2.5 : 2,
+      curve: amplifyKatodChart.value ? 'smooth' : 'straight',
+    },
     dataLabels: {
       enabled: false,
       style: {
@@ -139,6 +177,8 @@ const chartOptions = computed(() => {
     yaxis: {
       tickAmount: 8,
       show: false,
+      min: yBounds.min,
+      max: yBounds.max,
       labels: {
         formatter: (val: number) => usePrice(val, true, 'ه.ریال'),
         style: { fontSize: '13px', fontFamily },
@@ -161,7 +201,32 @@ const chartOptions = computed(() => {
           })}`
         },
       },
-      formatter: (val: number) => usePrice(val, true, 'ه.ریال'),
+      ...(amplifyKatodChart.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]
+              if (timestamp == null || realPrice == null) {
+                return ''
+              }
+
+              const date = new Date(timestamp)
+              const timeLabel = `${date.toLocaleDateString('fa-IR')} - ${date.toLocaleTimeString('fa-IR', {
+                hour: '2-digit',
+                minute: '2-digit',
+              })}`
+
+              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>
+                </div>`
+            },
+          }
+        : {
+            formatter: (val: number) => usePrice(val, true, 'ه.ریال'),
+          }),
       style: { fontFamily },
     },
     colors: [config.config.color],