boursecu_admin/src/pages/dashboard/index.vue

<template>
  <div class="p-5">
    <a-spin size="large" :spinning="loading">
      <div
          class="w-full bg-[#0A1B37] flex p-2 rounded-lg md:justify-evenly flex-col shadow-lg"
      >
        <div class="flex text-white gap-2 items-center">
          <div>مظنه روز:</div>
          <div class="font-bold">
            {{ usePrice(parseInt(dashboardInf?.price ?? '0'), true, '') }}
          </div>
          <div class="text-xs">ریال</div>
        </div>
        <div class="flex text-white gap-2 items-center">
          <div>آخرین تاریخ به روز رسانی:</div>
        </div>
        <div class="flex text-white gap-2 items-center">
          <div>هر مثقال طلا:</div>
          <div class="font-bold"></div>
          <div class="text-xs">ریال</div>
        </div>
      </div>
      <div class="flex flex-col items-center md:items-unset md:grid md:grid-cols-7 gap-4 mt-3">
        <BaseCard class="w-full md:w-none md:col-span-7">
          <div class="text-lg font-bold">مشتری</div>
          <div
              class="flex flex-col md:flex-row justify-around mt-5 justify-between items-dashboard h-full"
          >
            <DashboardItem
                class="md:w-1/3"
                color="blue"
                title="مشتری جدید"
                unit="نفر"
                :count="dashboardInf?.new_customer_single"
            />
            <div class="h-[60%] hidden md:block bg-gray-200 w-[1px]" />
            <DashboardItem
                class="md:w-1/3"
                color="green"
                title="کل مشتریان"
                unit="نفر"
                :count="dashboardInf?.all_customer_single"
            />
            <div class="h-[60%] hidden md:block bg-gray-200 w-[1px]" />
            <DashboardItem
                class="md:w-1/3"
                color="orange"
                title="مشتریان بایگانی شده"
                unit="نفر"
                :count="dashboardInf?.archive_customer_single"
            />
          </div>
        </BaseCard>
        <BaseCard class="md:hidden w-full">
          <div class="grid grid-cols-3 gap-1 text-xs">
            <div class="bg-blue-600 text-white rounded p-1">مجموع</div>
            <div class="bg-blue-600 text-white rounded p-1">ریال</div>
            <div class="bg-blue-600 text-white rounded p-1">گرم</div>
            <div class="bg-blue-600 text-white rounded p-1">کیف طلا</div>
            <div
                class="text-white rounded p-1"
                :class="
                sums?.goldToCash >= 0
                  ? sums?.goldToCash === 0
                    ? 'bg-amber-600'
                    : 'bg-green-600'
                  : 'bg-red-600'
              "
            >
              {{ usePrice(sums?.goldToCash ?? 0, true, '') }}
            </div>
            <div
                class="text-white rounded p-1"
                :class="
                sums?.gold >= 0
                  ? sums?.gold === 0
                    ? 'bg-amber-600'
                    : 'bg-green-600'
                  : 'bg-red-600'
              "
            >
              {{ usePrice(sums?.gold ?? 0, true, '') }}
            </div>
            <div class="bg-blue-600 text-white rounded p-1">کیف پول</div>
            <div
                class="text-white rounded p-1"
                :class="
                sums?.cash >= 0
                  ? sums?.cash === 0
                    ? 'bg-amber-600'
                    : 'bg-green-600'
                  : 'bg-red-600'
              "
            >
              {{ usePrice(sums?.cash ?? 0, true, '') }}
            </div>
            <div
                class="text-white rounded p-1"
                :class="
                sums?.cashToGold >= 0
                  ? sums?.cashToGold === 0
                    ? 'bg-amber-600'
                    : 'bg-green-600'
                  : 'bg-red-600'
              "
            >
              {{ usePrice(sums?.cashToGold ?? 0, true, '') }}
            </div>
          </div>
        </BaseCard>
        <BaseCard class="w-full h-full md:col-span-7">
          <ASpin :spinning="tarazLoading">
            <div class="grid md:grid-cols-3 gap-3 mt-2">
              <div>
                <div class="md:flex content-center gap-3">
                  <div class="w-full md:flex items-baseline gap-2 bg-gray-100 p-2 rounded-lg">
                    <p class="font-bold mr-2">تاریخ تراز</p>
                    <div class="w-full flex items-baseline flex-1 gap-3">
                      <p class="font-bold">از:</p>
                      <BaseDatePicker
                          v-model:value="startTaraz"
                          format="YYYY-MM-DD HH:mm:ss"
                          class="flex-1"
                      />
                    </div>
                    <div class="w-full flex items-baseline flex-1 gap-3">
                      <p class="font-bold">تا:</p>
                      <BaseDatePicker
                          v-model:value="endTaraz"
                          format="YYYY-MM-DD HH:mm:ss"
                          class="flex-1"
                      />
                    </div>
                    <BaseButton @click="getTaraz()">ثبت تاریخ</BaseButton>
                  </div>
                </div>

                <div class="flex font-bold p-2">
                  <span>جمع واریزی : </span>
                  <div class="mr-4">{{ usePrice(balance_?.income_money ?? 0) }}</div>
                </div>
              </div>
              <div
                  class="flex flex-col gap-3 bg-yellow-100 p-2 rounded-lg w-full cursor-pointer"
                  @click="openNewTabBalance"
              >
                <span class="text-center text-base font-700 bg-yellow text-white rounded-lg">
                  تراز طلایی
                </span>
                <div class="flex flex-col md:flex-row items-center justify-between md:gap-15">
                  <div class="w-full flex flex-col gap-3">
                    <div class="flex justify-between mx-5">
                      <span class="font-600">تراز اصلی:</span>
                      <span
                          class="text-base"
                          :class="
                          (balance_?.goldBalance ?? 0) > 0
                            ? 'text-green-600'
                            : (balance_?.goldBalance ?? 0) === 0
                            ? 'text-yellow-600'
                            : 'text-red'
                        "
                      >
                        {{ balance_?.goldBalance?.toFixed(3) }} گرم
                      </span>
                    </div>
                  </div>
                  <div></div>
                </div>
              </div>
              <div
                  class="flex flex-col gap-3 bg-blue-100 p-2 rounded-lg w-full cursor-pointer"
                  @click="openNewTabBalance"
              >
                <span class="text-center text-base font-700 bg-blue-6 rounded-lg text-white">
                  تراز ریالی
                </span>
                <div class="flex flex-col md:flex-row items-center justify-between md:gap-15">
                  <div class="w-full flex flex-col gap-3">
                    <div class="flex justify-between mx-5">
                      <span class="font-600">تراز اصلی:</span>
                      <span
                          class="text-base"
                          :class="
                          (balance_?.cashBalance ?? 0) > 0
                            ? 'text-green-600'
                            : (balance_?.cashBalance ?? 0) === 0
                            ? 'text-yellow-600'
                            : 'text-red'
                        "
                      >
                        {{ usePrice(balance_?.cashBalance ?? 0) }}</span
                      >
                    </div>
                  </div>
                  <div></div>
                </div>
              </div>
            </div>
          </ASpin>
        </BaseCard>
        <!--        <BaseCard class="w-full md:w-none md:col-span-2">
                  <div class="text-lg font-bold">تراز بدهی</div>
                  <div ref="main" class="w-full aspect-square"></div>
                </BaseCard>-->

        <!--        <BaseCard class="md:col-span-5">
                  <div id="chart">
                    <div class="font-bold text-lg mt-2 text-center md:text-right mb-2">مقایسه قیمت ها</div>
                    <apexchart
                      type="bar"
                      height="350"
                      :options="otherPricesOptions"
                      :series="otherPricesSeries"
                    />
                  </div>
                  <div>
                    <div class="md:grid grid-cols-4 gap-4 mt-4 justify-between text-center">
                      <div class="grid-cols-1 grid gap-2 bg-blue-100 rounded-lg shadow-lg">
                        <div class="flex items-center text-right p-2">
                          <img src="/src/assets/img/garosyLogo_.png" class="w-2rem h-2rem" />
                          <div class="mr-4">
                            <div>قیمت گروسی</div>
                            <div>
                              {{ usePrice(othersPrices?.price_last ? othersPrices?.price_last : 0) }}
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="grid-cols-1 grid gap-2 bg-red-100 rounded-lg shadow-lg">
                        <div class="flex items-center text-right p-2">
                          <img src="/src/assets/img/milliLogo.png" class="w-2rem h-2rem" />
                          <div class="mr-4">
                            <div>قیمت سایت میلی</div>
                            <div>{{ usePrice(othersPrices?.milli ? othersPrices?.milli : 0) }}</div>
                          </div>
                        </div>
                      </div>
                      <div class="grid-cols-1 grid gap-2 bg-green-100 rounded-lg shadow-lg">
                        <div class="flex items-center text-right p-2">
                          <img src="/src/assets/img/henzaLogo.png" class="w-2rem h-2rem" />
                          <div class="mr-4">
                            <div>قیمت سایت هنزا</div>
                            <div>{{ usePrice(othersPrices?.henzagold ? othersPrices?.henzagold : 0) }}</div>
                          </div>
                        </div>
                      </div>
                      <div class="grid-cols-1 grid gap-2 bg-orange-100 rounded-lg shadow-lg">
                        <div class="flex items-center text-right p-2">
                          <img src="/src/assets/img/talaLogo.png" class="w-2rem h-2rem" />
                          <div class="mr-4">
                            <div>قیمت سایت طلا</div>
                            <div>{{ usePrice(othersPrices?.tala_ir ? othersPrices?.tala_ir : 0) }}</div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </BaseCard>-->

        <!--        <div class="md:col-span-7 md:grid gap-4">-->
        <!--          <BaseCard>
                    <div class=" ">
                      <div class="flex flex-col md:flex-row justify-between items-center">
                        <div class="flex items-end">
                          <div class="text-2xl font-bold ml-2">{{ usePrice(123456789123, true, '') }}</div>
                          <div class="text-lg">تومان</div>
                        </div>
                        <div>
                          <div
                            class="flex bg-gray-50 px-1 py-1 dashboard-tabs-class border-size-[1px] border-gray-200 border-solid rounded-lg"
                          >
                            <div :class="type === 'week' ? 'selected_item' : ''" @click="setType('week')">
                              هفتگی
                            </div>
                            <div :class="type === 'month' ? 'selected_item' : ''" @click="setType('month')">
                              ماهانه
                            </div>
                            <div :class="type === 'year' ? 'selected_item' : ''" @click="setType('year')">
                              سالانه
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="mb-10">جمع فروش به مشتری</div>
                    <apexchart
                      type="area"
                      height="350"
                      ref="chart"
                      :options="sumOfSellCoworkerOption"
                      :series="sumOfSellCoworkerSeries"
                    ></apexchart>
                  </BaseCard>-->
        <BaseCard class="w-full md:grid md:col-span-7">
          <div class="font-bold text-lg mt-2 text-center md:text-right">
            حسابداری گلد در یک نگاه
          </div>
          <div class="md:flex mt-6">
            <div class="flex items-baseline flex-1 gap-3">
              <p>از:</p>
              <BaseDatePicker
                  v-model:value="startDate"
                  @on-change="getTaraz"
                  format="YYYY-MM-DD HH:mm:ss"
                  class="flex-1"
              />
            </div>
            <div class="flex items-baseline flex-1 gap-3">
              <p class="md:mr-6">تا:</p>
              <BaseDatePicker
                  v-model:value="endDate"
                  @on-change="getTaraz"
                  format="YYYY-MM-DD HH:mm:ss"
                  class="flex-1"
              />
            </div>
          </div>
          <div class="grid-cols-1 grid gap-2 bg-green-100 rounded-lg shadow-lg">
            <div class="p-4">
              <div class="font-bold text-lg">دریافتی</div>
              <div class="md:grid-cols-5 grid gap-2 mt-4">
                <div>
                  <div>کل سود دریافت شده</div>
                  <div class="font-bold">{{ usePrice(balance?.fullPriceSood ?? 0) }}</div>
                </div>
                <div>
                  <div>کل کارمزد</div>
                  <div class="font-bold">{{ usePrice(balance?.fullPriceKaermozd ?? 0) }}</div>
                </div>
                <div>
                  <div>تعداد سفارشات</div>
                  <div class="font-bold">{{ balance?.orderCount }}</div>
                </div>
                <div>
                  <div class="ml-2">قیمت نهایی محاسبه شده با روش اول</div>
                  <div class="font-bold">{{ usePrice(balance?.fullPriceM1 ?? 0) }}</div>
                </div>
                <div>
                  <div class="ml-2">قیمت نهایی محاسبه شده با روش دوم</div>
                  <div class="font-bold">{{ usePrice(balance?.fullPriceM2 ?? 0) }}</div>
                </div>
              </div>
            </div>
          </div>
          <div class="mt-4 bg-red-100 p-4 rounded-lg flex-col md:flex-row shadow-lg">
            <div class="font-bold text-lg">خروجی</div>
            <div class="md:grid-cols-2 grid mt-4">
              <div>
                <div>پاداش معرفی به گرم</div>
                <div class="font-bold">{{ balance?.Gifts }}</div>
              </div>
              <div>
                <div>پاداش معرفی به ریال</div>
                <div class="font-bold">{{ usePrice(balance?.GiftsPrise ?? 0) }}</div>
              </div>
            </div>
          </div>
          <div
              class="mt-4 bg-blue-100 p-4 rounded-lg md:justify-evenly flex-col md:flex-row shadow-lg"
          >
            <div>
              <div class="font-bold text-lg">قیمت کل</div>
              <div class="flex mt-4">
                <div class="ml-4">کل درآمد :</div>
                <div class="font-bold">{{ usePrice(balance?.sumAll ?? 0) }}</div>
              </div>
            </div>
          </div>
        </BaseCard>
        <BaseCard class="w-full md:w-none md:col-span-7">
          <div>
            <div class="font-bold text-lg mt-2 text-center md:text-right">نوسانات قیمت</div>
            <div id="chart">
              <div class="toolbar text-center md:text-right mt-2 mb-2">
                <button
                    id="DAILY"
                    @click="updateData('DAILY')"
                    :class="{ active: selection === 'DAILY' }"
                >
                  24 ساعت اخیر
                </button>

                <button
                    id="WEEKLY"
                    @click="updateData('WEEKLY')"
                    :class="{ active: selection === 'WEEKLY' }"
                >
                  هفته گذشته
                </button>

                <button
                    id="MONTHLY"
                    @click="updateData('MONTHLY')"
                    :class="{ active: selection === 'MONTHLY' }"
                >
                  ماه گذشته
                </button>
              </div>

              <div id="chart-timeline">
                <apexchart
                    type="area"
                    height="350"
                    ref="chart"
                    :options="priceChartOptions"
                    :series="priceChartSeries"
                ></apexchart>
              </div>
            </div>
          </div>
        </BaseCard>
      </div>
    </a-spin>
  </div>
</template>

<script setup lang="ts">
import { openNewTabBalance} from '@/core/composable/appInfo'
import nothing from './assets/svgs/nothing.svg'
import { usePrice } from '../../core/utils/usePrice'
import DashboardItem from '@/pages/dashboard/components/dashboardItem.vue'
import * as echarts from 'echarts'
import { getAllPrices, getDashboard } from '@/api/dashboard'
import { getOthersPrices } from '@/api/othersPrices'
import type { Charts, Dashboard } from '@/model/dashboard'
import { getWalletTable } from '@/api/wallet'
import type { Accounting } from '@/model/accounting'
import { getAccountingTable } from '@/api/accounting'
import { ref } from 'vue'
import type { OthersPrices } from '@/model/othersPrices'
import { getNow, toJalaliNoTime } from '@core/utils/useDataTime'
import type { Balance } from '@/model/product'
import { getBalance } from "@/api/product";
const tarazLoading = ref<boolean>(false)
const main = ref(null)
const type = ref<string>('week')
const dashboardInf = ref<Dashboard>()
const othersPrices = ref<OthersPrices>()
const chartDataWeekInf = reactive<Charts>({})
const chartDataMonthInf = reactive<Charts>({})
const chartDataYearInf = reactive<Charts>({})
const loading = ref<boolean>(false)
const sums = ref()
const startDate = ref<string>('')
const endDate = ref<string>('')
const balance = ref<Accounting>()
const startTaraz = ref<string>('')
const endTaraz = ref<string>('')
const balance_ = ref<Balance>()

onMounted(() => {
  startDate.value = ''
  endDate.value = ''
  startTaraz.value = getNow('YYYY-MM-DD HH:mm:ss')
  endTaraz.value = getNow('YYYY-MM-DD HH:mm:ss')
  getDate()
  getTaraz()
})

async function getDate() {
  try {
    loading.value = true
    balance.value = await getAccountingTable(startDate.value, endDate.value)
  } catch (e) {
    console.log(e)
  } finally {
    loading.value = false
  }
}



async function getTaraz() {
  try {
    loading.value = true
    balance.value = await getAccountingTable(startDate.value, endDate.value)
    balance_.value = await getBalance(startTaraz.value, endTaraz.value)
  } catch (e) {
    console.log(e)
  } finally {
    loading.value = false
  }
}

//chart other prices
function setType(val: string) {
  type.value = val
}

//chart 1
onMounted(async () => {
  try {
    loading.value = true
    dashboardInf.value = await getDashboard()
    const data = await getWalletTable()
    sums.value = data?.sums
    // chartDataWeekInf.buySellChart =
  } catch (e) {
    console.log(e)
  } finally {
    loading.value = false
  }
  if (main.value !== null) {
    //circle
    const echart = echarts.init(main.value, null, {
      renderer: 'canvas'
    })
    echart.setOption({
      tooltip: {
        formatter: '{a} <br/>{b} : {c}%'
      },
      textStyle: {
        fontFamily: 'iran-sans'
      },
      series: [
        {
          name: 'تراز',
          type: 'gauge',
          detail: {
            formatter: '{value}',
            offsetCenter: [0, '60%'],
            fontSize: 40,
            color: '#EF4444',
            valueAnimation: true
          },
          min: -50,
          max: 50,
          data: [
            {
              value: 10.25,
              name: 'گرم'
            }
          ],
          axisLine: {
            roundCap: true,
            lineStyle: {
              color: [[1, '#2563EB']],
              width: 10
            }
          },
          axisLabel: {
            fontSize: 16
          },
          title: {
            color: '#000000',
            offsetCenter: [0, '75%']
          }
        }
      ]
    })
  }
})

//chart 4
const sumOfSellCoworkerSeries = [
  {
    name: 'series1',
    data: [31, 40, 28, 51, 42, 109, 100]
  }
]

const sumOfSellCoworkerOption = {
  chart: {
    height: 350,
    type: 'area'
  },
  colors: ['#2563EB'],
  dataLabels: {
    enabled: false
  },
  stroke: {
    curve: 'smooth'
  },
  xaxis: {
    type: 'datetime',
    categories: [
      '2018-09-19T00:00:00.000Z',
      '2018-09-19T01:30:00.000Z',
      '2018-09-19T02:30:00.000Z',
      '2018-09-19T03:30:00.000Z',
      '2018-09-19T04:30:00.000Z',
      '2018-09-19T05:30:00.000Z',
      '2018-09-19T06:30:00.000Z'
    ]
  },
  tooltip: {
    x: {
      format: 'dd/MM/yy HH:mm'
    }
  },
  fill: {
    type: 'gradient',
    colors: ['#765DFF'],
    gradient: {
      shadeIntensity: 1,
      opacityFrom: 0.7,
      opacityTo: 0.9,
      stops: [0, 100]
    }
  }
}
// const priceChartSeries = ref([{name: 'قیمت', data: []}])
// const priceChartOptions = ref({
//   chart: {
//     type: 'line',
//     height: 350,
//     zoom: {enabled: true}
//   },
//   dataLabels: {enabled: false},
//   stroke: {curve: 'smooth'},
//   title: {text: 'نمودار قیمت بر اساس تاریخ', align: 'left'},
//   xaxis: {
//     categories: [],
//     title: {text: 'تاریخ'}
//   },
//   yaxis: {
//     title: {text: 'قیمت'},
//     min: 0
//   }
// })

const otherPricesSeries = ref([])
const otherPricesOptions = ref({
  chart: {
    height: 350,
    type: 'bar',
    fontFamily: "'IranSans', sans-serif"
  },
  plotOptions: {
    bar: {
      borderRadius: 10,
      dataLabels: {
        position: 'top'
      }
    }
  },
  dataLabels: {
    enabled: true,
    formatter: (val) => `${usePrice(val)} `,
    style: {
      fontFamily: "'IranSans', sans-serif",
      fontWeight: 'bold'
    }
  },
  yaxis: {
    title: {
      text: 'قیمت',
      style: {
        fontFamily: "'IranSans', sans-serif",
        fontWeight: 'bold'
      }
    },
    labels: {
      formatter: (val) => `${usePrice(val)} `,

      style: {
        fontFamily: "'IranSans', sans-serif",
        fontWeight: 'bold'
      }
    }
  },
  xaxis: {
    categories: ['henzagold.com', 'milli.gold', 'tala.ir', 'gold.ir'],
    labels: {
      style: {
        fontFamily: "'IranSans', sans-serif",
        fontWeight: 'bold'
      }
    }
  },
  tooltip: {
    y: {
      formatter: (val) => `${usePrice(val)} `,
      style: {
        fontFamily: "'IranSans', sans-serif",
        fontWeight: 'bold'
      }
    }
  }
})

onMounted(async () => {
  try {
    loading.value = true
    othersPrices.value = await getOthersPrices()

    const prices = [
      othersPrices.value?.henzagold ?? 0,
      othersPrices.value?.milli ?? 0,
      othersPrices.value?.tala_ir ?? 0,
      othersPrices.value?.price_last ?? 0
    ]

    otherPricesSeries.value = [
      {
        name: 'Prices',
        data: prices
      }
    ]
    const minPrice = Math.min(...prices)
    const maxPrice = Math.max(...prices)
    const offset = (maxPrice - minPrice) * 0.05

    otherPricesOptions.value = {
      ...otherPricesOptions.value,
      yaxis: {
        ...otherPricesOptions.value.yaxis,
        min: minPrice - offset,
        max: maxPrice + offset
      }
    }
  } catch (e) {
    console.error('Error fetching prices:', e)
  } finally {
    loading.value = false
  }
})
const selection = ref('DAILY')
const chartRef = ref<ApexCharts | null>(null)
const priceChartSeries = ref<{ data: [number, number][] }[]>([{ data: [] }])

const toPersianNumber = (num) => {
  return num.toString().replace(/\d/g, (d) => '۰۱۲۳۴۵۶۷۸۹'[d])
}

const priceChartOptions = ref({
  chart: {
    id: 'نوسانات قیمت',
    type: 'area',
    height: 350,
    zoom: {
      autoScaleYaxis: true
    },
    events: {
      mounted(chart) {
        chartRef.value = chart
      }
    }
  },
  dataLabels: {
    enabled: false,
    formatter: (val) => toPersianNumber(usePrice(val)),
    style: {
      fontSize: '13px',
      fontFamily: "'IranSans', sans-serif",
      fontWeight: 'bold'
    }
  },
  yaxis: {
    title: {
      style: {
        fontSize: '13px',
        fontFamily: "'IranSans', sans-serif",
        fontWeight: 'bold'
      }
    },
    labels: {
      formatter: (val) => toPersianNumber(usePrice(val)),
      style: {
        fontSize: '13px',
        fontFamily: "'IranSans', sans-serif",
        fontWeight: 'bold'
      }
    }
  },
  xaxis: {
    type: 'datetime',
    labels: {
      rotate: -45,
      style: {
        fontSize: '13px',
        fontFamily: "'IranSans', sans-serif",
        fontWeight: 'bold'
      },
      formatter: (val) => {
        return toPersianNumber(toJalaliNoTime(new Date(val).toString()))
      }
    }
  },
  tooltip: {
    x: {
      formatter: (val) => {
        return toPersianNumber(toJalaliNoTime(new Date(val).toString()))
      }
    },
    formatter: (val) => toPersianNumber(`${usePrice(val)} `),
    style: {
      fontFamily: "'IranSans', sans-serif",
      fontWeight: 'bold'
    }
  },
  fill: {
    type: 'gradient',
    gradient: {
      shadeIntensity: 1,
      opacityFrom: 0.7,
      opacityTo: 0.9,
      stops: [0, 100]
    }
  }
})

const fetchPrices = async () => {
  try {
    const response = await getAllPrices()
    const data = response.data.prices

    const selectedData = data[selection.value] || []
    priceChartSeries.value[0].data = selectedData.map((item) => [item.timestamp, item.value])

    chartRef.value?.updateOptions({ series: priceChartSeries.value })
  } catch (error) {
    console.error('خطا در دریافت داده‌ها', error)
  }
}

const updateData = (timeline) => {
  selection.value = timeline
  fetchPrices()
}

onMounted(() => {
  fetchPrices()
})
</script>

<style lang="less">
/*.items-dashboard > div:not(:last-child) {
  border-left: 1px solid black;
}*/
.single-border {
  border-right: 1px solid black !important;
}

@keyframes swingParent {
  from {
    transform: translateX(0);
    left: 0;
  }
  to {
    left: 100%;
    transform: translateX(-100%);
  }
}

.animate.right {
  right: 0;
}

.animate.right.move {
  right: 100%;
  transform: translate(100%, 0);
}

.dashboard-tabs-class div {
@apply text-gray-400 w-25 text-center py-2 cursor-pointer;
}

.selected_item {
@apply ! bg- [ #0A1B37 ] ! text-white rounded-lg;
}

//chart
</style>