<template>
  <div class="page-div">
    <back-button />
    <div class="header">
      <div class="header-content">
        <h1 class="title">{{ fundData?.etfCode }}</h1>
        <p class="subtitle">{{ fundData?.etfName || '指数详情' }}</p>
      </div>
    </div>
    <div class="info-card" v-if="chartList.length > 0">
      <div class="chart-container">
        <van-loading v-show="chartList[0].loading" type="spinner" color="#1989fa" class="loading" />
        <div :id="`${chartList[0].id}`" class="chartDiv"></div>
      </div>
    </div>
    <div class="info-card" v-if="!virtualCurrency && chartList.length > 0">
      <div class="chart-container">
        <van-loading v-show="chartList[1].loading" type="spinner" color="#1989fa" class="loading" />
        <div :id="`${chartList[1].id}`" class="chartDiv"></div>
      </div>
    </div>
    <div class="info-card" v-if="!virtualCurrency && chartList.length > 0">
      <div class="chart-container">
        <van-loading v-show="chartList[2].loading" type="spinner" color="#1989fa" class="loading" />
        <div :id="`${chartList[2].id}`" class="chartDiv"></div>
      </div>
    </div>
    <div class="info-card" v-if="virtualCurrency">
      <div class="tableDiv">
        <table border="1">
          <thead>
            <tr>
              <th class="td--column--1">时间</th>
              <th>股本(变化)</th>
              <th>{{ route.params.id === 'IBIT' ? '比特币数量' : '以太坊数量' }}(数量变化)</th>
              <th>股本/{{ route.params.id === 'IBIT' ? '比特币' : '以太坊' }}</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(coin, index) in coinList" :key="index">
              <td class="td--column--1">{{ coin.sysDate }}</td>
              <td>
                {{ coin.shares }}<br/>
                {{ coin.sharesChange }}<br/>
                <span :class="coin.sharesChangePer > 0 ? 'red-color' : coin.sharesChangePer < 0 ? 'green-color' : ''"
                  v-if="coin.sharesChangePer">({{ coin.sharesChangePer }}%)</span>
              </td>
              <td>
                {{ coin.coinNum }}<br/>
                {{ coin.coinNumChange }}<br/>
                <span :class="coin.coinNumChangePer > 0 ? 'red-color' : coin.coinNumChangePer < 0 ? 'green-color' : ''"
                  v-if="coin.coinNumChangePer">({{ coin.coinNumChangePer }}%)</span>
              </td>
              <td>{{ coin.per }}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <div class="info-card" v-if="!virtualCurrency">
      <h3 class="card-title">持仓列表</h3>
      <div> 最新日期：<span class="blue-color">{{ holdList.length > 0 ? holdList[0].sysDate : '暂无'}}</span>,
        本季开始日期：<span class="red-color">{{ holdList.length > 0 ? holdList[0].lastQuarterDate : '暂无'}}</span></div>
      <div class="tableDiv">
        <table border="1">
          <thead>
            <tr>
              <th class="td--column--1">名称</th>
              <th>上期权重</th>
              <th>当前权重</th>
              <th>相对变化</th>
              <th>市值</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(hold, index) in holdList" :key="index" @click="showStockChart(hold)">
              <td class="td--column--1">
                {{ hold.ticker }}
                <div class="van-ellipsis firstTd">{{ hold.tickerName }}</div>
              </td>
              <td class="blue-color">{{ hold.lastQuarterWeight }}%</td>
              <td>
                <div :class="hold.weight > hold.lastQuarterWeight ? 'red-color' : hold.weight < hold.lastQuarterWeight ? 'green-color' : ''">{{ hold.weight }}%</div>
              </td>
              <td>
                <div :style="{color: hold.weightChangePer > 0 ? 'red' : hold.weightChangePer < 0 ? 'green' : ''}">
                  {{ hold.weightChangePer > 0 ? '+' + hold.weightChangePer : hold.weightChangePer }}%
                </div>
              </td>
              <td>{{ hold.marketValue }}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <van-popup v-model:show="showStockChartPopup" position="bottom" :style="{ height: '50%' }">
      <div class="p-16">
        <div class="d-flex justify-content-between items-center mb-16">
          <div class="sub-title f-b">{{ stockCode }}【{{ stockName }}】权重趋势</div>
          <van-icon name="close" @click="closeStockChart" />
        </div>
        <div class="popup-card">
          <div class="chart-container">
            <van-loading v-show="chartList[3].loading" type="spinner" color="#1989fa" class="loading" />
            <div :id="`${chartList[3].id}`" class="chartDiv"></div>
          </div>
        </div>
      </div>
    </van-popup>
  </div>
</template>
<script setup lang='ts'>
import BackButton from '@/components/back-button.vue'

import { ref, onMounted, computed, onUnmounted, nextTick } from 'vue'

import { useRoute } from 'vue-router'
const route = useRoute()
const virtualCurrency = computed(() => {
 return route.params.id === 'ETHA' || route.params.id === 'IBIT'
})
import { indexFundGetByEtfCode, indexFundHisQueryEtfShareHis, indexFundDetailDayCoinList, indexFundDetailDayList, indexFundDetailQuarterCircleByExchange, indexFundDetailQuarterHisByExchange, indexFundDetailQuarterGetChart } from '@/utils/api'
const fundData: any = ref(null)
import { addOrSubtractTime, formatNumberByUnit, formatNumber } from '@/utils'

import * as echarts from 'echarts'
import { getLineSeries, getBaseOption, getXAxis, getYAxis } from '@/utils/chart'
const init = async () => {
  try {
    const { data } = await indexFundGetByEtfCode({ etfCode: route.params.id + '' })
    fundData.value = data
    const { data: navList } = await indexFundHisQueryEtfShareHis({
      timeE: new Date().toISOString().split('T')[0],
      timeB: addOrSubtractTime(new Date(), -10, 'year'),
      etfCode: route.params.id + ''
    })
    setLineChart(navList.dataList)
    if (virtualCurrency.value) {
      getCoinList()
    } else {
      getChartData()
      getHoldList()
    }
  } catch (error) {
    console.error('初始化数据失败:', error)
  }
}

const setLineChart = (data: any) => {
  const sysDate: any = []
  const unit = ['万', '亿', '']
  let seriesList: any = []
  let yAxis: any = []
  let xAxis: any = []
  let grid: any = []
  seriesList.push(getLineSeries({ name: '股本' }))
  seriesList.push(getLineSeries({ name: '市值', yAxisIndex: 1 }))
  seriesList.push(getLineSeries({ name: 'NAV', yAxisIndex: 2 }))
  if (virtualCurrency.value) {
    seriesList.push(getLineSeries({ name: '股本回撤', xAxisIndex: 1, yAxisIndex: 3 }))
    seriesList.push(getLineSeries({ name: 'NAV回撤', xAxisIndex: 1, yAxisIndex: 3 }))
    grid = [{ bottom: '54%', left: '0', right: '0', top: '40px' }, { top: '62%', bottom: '20px', left: '0', right: '0' }]
    yAxis = [
      getYAxis({ axisLabel: '{value} 万', color: '#FF0000', showFlag: false }),
      getYAxis({ axisLabel: '{value} 亿', position: 'right', color: '#3E8EF7', showFlag: false }),
      getYAxis({ position: 'left', offset: 90, color: '#000000', showFlag: false }),
      getYAxis({ gridIndex: 1, axisLabel: '{value}%', showFlag: false })
    ]
    const drawdowns1: any = []
    const drawdowns2: any = []
    let maxDrawdown1 = 0
    let maxDrawdown2 = 0
    for (let j = 0; j < data.length; j++) {
      let drawdown1 = 0
      const sharesOutstanding = Number(data[j].sharesOutstanding)
      if (sharesOutstanding > maxDrawdown1) {
        maxDrawdown1 = sharesOutstanding
        drawdown1 = 0
      } else {
        drawdown1 = Math.round((sharesOutstanding - maxDrawdown1) / maxDrawdown1 * 10000) / 100
      }
      drawdowns1.push(drawdown1)
      let drawdown2 = 0
      const NAV = Number(data[j].NAV)
      if (NAV > maxDrawdown2) {
        maxDrawdown2 = NAV
        drawdown2 = 0
      } else {
        drawdown2 = Math.round((NAV - maxDrawdown2) / maxDrawdown2 * 10000) / 100
      }
      drawdowns2.push(drawdown2)
    }
    data.forEach((ele: any, index: number) => {
      sysDate.push(ele.sysDate)
      seriesList[0].data.push({ value: ele.sharesOutstanding, sysDate: ele.sysDate, drawdowns: drawdowns1[index] })
      seriesList[1].data.push({ value: ele.market, sysDate: ele.sysDate })
      seriesList[2].data.push({ value: ele.NAV, sysDate: ele.sysDate, drawdowns: drawdowns2[index] })
      seriesList[3].data.push({ value: drawdowns1[index], sysDate: ele.sysDate, nav: ele.sharesOutstanding })
      seriesList[4].data.push({ value: drawdowns2[index], sysDate: ele.sysDate, nav: ele.NAV })
    })
    xAxis = [getXAxis({ data: sysDate }), getXAxis({ data: sysDate, gridIndex: 1, showFlag: false })]
  } else{
    grid = [{ left: '40px', right: '40px', bottom: '20px', top: '20px' }]
    yAxis = [
      getYAxis({ axisLabel: '{value} 万', color: '#FF0000', showFlag: false }),
      getYAxis({ axisLabel: '{value} 亿', position: 'right', color: '#3E8EF7', showFlag: false }),
      getYAxis({ position: 'left', offset: 90, color: '#000000', showFlag: false })
    ]
    data.forEach((ele: any) => {
      sysDate.push(ele.sysDate)
      seriesList[0].data.push({ value: ele.sharesOutstanding })
      seriesList[1].data.push({ value: ele.market })
      seriesList[2].data.push({ value: ele.NAV })
    })
    xAxis = [getXAxis({ data: sysDate })]
  }
  
  if (!destroyedFlag.value) {
    let chart = echarts.init(document.getElementById(`${chartList.value[0].id}`))
    const option = getBaseOption({
      series: seriesList,
      yAxis: yAxis,
      xAxis: xAxis,
      tooltipFormatter: function (params: any) {
        const data = Array.isArray(params) ? params : [params]
        let backText = `日期：${data[0].name}<br/>`
        if (virtualCurrency.value) {
          if (data[0].seriesName.includes('回撤')) {
            data.forEach((ele, index) => {
              backText +=
                `<div style="color: ${ele.color}">${ele.seriesName.slice(0, -2)}:${ele.data.nav || 0}${ele.data.nav ? unit[index] : ''}</div>`
              backText +=
                `<div style="color: ${ele.color}">${ele.seriesName}:${ele.value || 0}</div>`
            })
          } else {
            data.forEach((ele, index) => {
              backText +=
                `<div style="color: ${ele.color}">${ele.seriesName}:${ele.value || '0'}${ele.value ? unit[index] : ''}</div>`
              if (ele.seriesName !== '市值') {
                backText +=
                `<div style="color: ${ele.color}">${ele.seriesName + '回撤'}:${ele.data.drawdowns || '0'}</div>`
              }
            })
          }
        } else {
          data.forEach((ele) => {
            backText += `<span style="color: ${ele.color}">${ele.seriesName}</span>:<span class="f-b">${formatNumberByUnit(ele.value)}</span><br/>`
          })
        }
        return backText
      },
      grid: grid,
      color: ['red', 'blue', 'black'],
      legend: {
        data: ['股本', '市值', 'NAV'],
        top: '0px',
        show: true
      }
    })
    chart.setOption(option)
    charts.value[0] = chart
    chartList.value[0].loading = false
  }
}

const coinList = ref<any[]>([])
const getCoinList = async () => {
  const { data } = await indexFundDetailDayCoinList({ etfCode: route.params.id + '' })
  data.map((ele: any, index: number) => {
    if (index < data.length - 1) {
      const sharesChange = ele.shares - data[index + 1].shares
      ele.sharesChangePer = Math.round(sharesChange / ele.shares * 10000) / 100
      ele.sharesChange = formatNumber(sharesChange)
      const coinNumChange = Math.round((ele.coinNum - data[index + 1].coinNum) * 100) / 100
      ele.coinNumChangePer = Math.round(coinNumChange / ele.coinNum * 10000) / 100
      ele.coinNumChange = formatNumber(coinNumChange)
    } else {
      ele.sharesChange = 0
      ele.sharesChangePer = 0
      ele.coinNumChange = 0
      ele.coinNumChangePer = 0
    }
    ele.per = Math.round(ele.shares / ele.coinNum * 100) / 100
    ele.shares = formatNumber(ele.shares)
    ele.coinNum = formatNumber(ele.coinNum)
  })
  coinList.value = data
}

const colors = ['#5673cc', '#9fe080', '#fdd85e', '#ee6666', '#73c0de', '#3ba272', '#ff915a']
const getChartData = async () => {
  const { data } = await indexFundDetailQuarterCircleByExchange({ etfCode: route.params.id + '' })
  data.sort(function (a: any, b: any) {
    return b.marketValue - a.marketValue
  })
  const series: any = []
  let weight = 0
  let stockNum = 0
  data.forEach((ele: any, index: number) => {
    if (index < 6) {
      series.push({ value: ele.weight, name: ele.exchange, stockNum: ele.stockNum })
    } else {
      weight = Math.round((weight + ele.weight) * 100) / 100
      stockNum = Math.round(stockNum + ele.stockNum)
      if (index === data.length - 1) {
        series.push({ value: weight, name: '其他', stockNum: stockNum })
      }
    }
  })
  const color = colors.slice(0, series.length)
  const option = {
    color: color,
    tooltip: { trigger: 'item' },
    legend: { orient: 'vertical', left: 'left' },
    series: [{
      type: 'pie',
      radius: '50%',
      data: series,
      label: {
        formatter: function (data: any) {
          return `{b|${data.name}}：\n{hr|}\n权重{per|${data.value}%}股票數量{per|${data.data.stockNum}}`
        },
        backgroundColor: '#F6F8FC',
        borderColor: '#8C8D8E',
        borderWidth: 1,
        borderRadius: 4,
        rich: {
          a: { color: '#6E7079', lineHeight: 22, align: 'center' },
          hr: { borderColor: '#8C8D8E', width: '100%', borderWidth: 1, height: 0 },
          b: { color: '#4C5058', fontSize: 14, fontWeight: 'bold', lineHeight: 33 },
          per: { color: '#fff', backgroundColor: '#4C5058', padding: [3, 4], borderRadius: 4, lineHeight: 33 }
        }
      },
      emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } }
    }]
  }
  if (!destroyedFlag.value && document.getElementById(chartList.value[1].id)) {
    let chart = echarts.init(document.getElementById(`${chartList.value[1].id}`))
    chart.setOption(option)
    charts.value[1] = chart
    chartList.value[1].loading = false
    setMarketLineChart1(data, color)
    chart.on('legendselectchanged', (params: any) => {
      setMarketLineChart2(color, params.selected)
    })
  }
}

const minTime = ref('')
const maxTime = ref('')
const seriesList = ref<any[]>([])
const legendList = ref<any[]>([])
const setMarketLineChart1 = async (res: any, color: any) => {
  const series: any = []
  const legends: any = []
  let min = ''
  let max = ''
  for (let i = 0; i < res.length; i++) {
    if (i < 6) {
      legends.push(res[i].exchange)
      series.push(getLineSeries({ name: res[i].exchange }))
      const { data } = await indexFundDetailQuarterHisByExchange({ etfCode: route.params.id + '', exchange: res[i].exchange })
      data.forEach((ele: any) => {
        series[i].data.push([ele.sysDate, ele.weight, ele.marketValue, ele.stockNum])
      })
      if (data.length > 0) {
        if (i === 0) {
          min = data[0].sysDate
          max = data[data.length - 1].sysDate
        } else {
          if (new Date(data[0].sysDate).getTime() < new Date(min).getTime()) {
            min = data[0].sysDate
          }
          if (new Date(data[data.length - 1].sysDate).getTime() > new Date(max).getTime()) {
            max = data[data.length - 1].sysDate
          }
        }
      }
    } else {
      if (i === 6) {
        legends.push('其他')
        series.push(getLineSeries({ name: '其他' }))
      }
      const { data } = await indexFundDetailQuarterHisByExchange({ etfCode: route.params.id + '', exchange: res[i].exchange })
      if (data.length > 0) {
        if (new Date(data[0].sysDate).getTime() < new Date(min).getTime()) {
          min = data[0].sysDate
        }
        if (new Date(data[data.length - 1].sysDate).getTime() > new Date(max).getTime()) {
          max = data[data.length - 1].sysDate
        }
      }
      data.forEach((ele: any) => {
        const item = series[6].data.find((res: any) => {
          return res[0] === ele.sysDate
        })
        if (item) {
          item[1] += ele.weight
          item[2] += ele.marketValue
          item[3] += ele.stockNum
        } else {
          series[6].data.push([ele.sysDate, ele.weight, ele.marketValue, ele.stockNum])
        }
      })
    }
  }
  minTime.value = min
  maxTime.value = max
  seriesList.value = series
  legendList.value = legends
  nextTick(() => {
    setMarketLineChart(color, { data: legends, top: '30px', show: false })
  })
}

const setMarketLineChart2 = (color: any, selected: any) => {
  if (charts.value[2]) {
    charts.value[2].dispose()
  }
  nextTick(() => {
    setMarketLineChart(color, 
    {
      data: legendList.value,
      top: '30px',
      show: false,
      selected
    })
  })
}

const setMarketLineChart = (color: any, legend: any) => {
  const option = getBaseOption({
    color: color,
    yAxis: [getYAxis({ })],
    xAxis: [getXAxis({
      type: 'time',
      min: minTime.value,
      max: maxTime.value,
      axisLabel: function (value: any) {
        var date = new Date(value)
        var texts = `${date.getFullYear()}\n${(date.getMonth() + 1)}-${date.getDate()}`
        return texts
      }
    })],
    series: JSON.parse(JSON.stringify(seriesList.value)),
    tooltipFormatter: function (params: any) {
      const data = Array.isArray(params) ? params : [params]
      let res = data[0].data[0] + '</br>'
      data.forEach((ele: any) => {
        res += `${ele.seriesName}:</br>权重：${Math.round(ele.data[1] * 100) / 100}%</br>股票：${ele.data[3]}支</br>市值：${Math.round(ele.data[2] * 100) / 100}</br>`
      })
      return res
    },
    grid: [{
      left: '60px',
      right: '40px'
    }],
    legend: legend
  })
  if (!destroyedFlag.value && document.getElementById(chartList.value[2].id)) {
    let chart = echarts.init(document.getElementById(`${chartList.value[2].id}`))
    chart.setOption(option)
    charts.value[2] = chart
    chartList.value[2].loading = false
  }
}

const curPage = ref(1)
const holdList = ref<any[]>([])
const totalPages = ref(1)
const hasMore = ref(true)
const isLoading = ref(false)
const getHoldList = async () => {
  if (!hasMore.value || isLoading.value) return
  isLoading.value = true
  try {
    const { data } = await indexFundDetailDayList({ etfCode: route.params.id + '', curPage: curPage.value, limit: 50 })
    totalPages.value = data.totalPage || 1
    hasMore.value = curPage.value < totalPages.value
    data.list.forEach((ele: any) => {
      ele.shares = formatNumberByUnit(ele.shares)
      ele.marketValue = formatNumberByUnit(ele.marketValue)
    })
    holdList.value = [...holdList.value, ...data.list]
  } catch (error) {
    console.error('加载失败:', error)
  } finally {
    isLoading.value = false
  }
}

const loadNextPage = () => {
  if (hasMore.value) {
    curPage.value++
    getHoldList()
  }
}

const handleScroll = () => {
  if (!virtualCurrency.value) {
    const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
    const scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight
    const clientHeight = document.documentElement.clientHeight || window.innerHeight
    
    if (scrollTop + clientHeight >= scrollHeight - 100 && hasMore.value && !isLoading.value) {
      loadNextPage()
    }
  }
}

onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll)
})

const showStockChartPopup = ref(false)
const stockCode = ref('')
const stockName = ref('')
const showStockChart = async (item: any) => {
  showStockChartPopup.value = true
  stockCode.value = item.stockCode
  stockName.value = item.tickerName
  const { data } = await indexFundDetailQuarterGetChart({ stockCode: item.stockCode, etfCode: route.params.id + '', exchange: item.exchange })
  const sysDate: any = []
  const seriesList = [getLineSeries({ name: '权重' }), getLineSeries({ name: '股本', yAxisIndex: 1, lineType: 'dashed' })]
  let gt = 0
  const lte = data.length
  data.forEach((ele: any, index: number) => {
    sysDate.push(ele.sysDate)
    seriesList[0].data.push({ value: ele.weight })
    seriesList[1].data.push({ value: ele.shares })
    if (index > 0 && ele.dataType === 'D' && data[index - 1].dataType === 'Q') {
      gt = index
    }
  })
  nextTick(() => {
    if (!destroyedFlag.value) {
      let chart = echarts.init(document.getElementById(`${chartList.value[3].id}`))
      const option = getBaseOption({
        series: seriesList,
        yAxis: [getYAxis({ axisLabel: '{value} %' }), getYAxis({ position: 'right' })],
        xAxis: [getXAxis({ data: sysDate })],
        tooltipFormatter: function (params: any) {
          const data = Array.isArray(params) ? params : [params]
          let backText = `${data[0].name}:`
          data.forEach((ele) => {
            backText += `<span class="f-b">${ele.value}${ele.seriesName === '权重' ? '%' : ''}</span><br/>`
          })
          return backText
        },
        grid: [{ top: '20px', left: '50px', right: '50px', bottom: '20px' }],
        legend: {
          data: [{
            name: '权重',
            itemStyle: {
              color: '#ff0000'
            },
            icon: 'path://M802.59 532.76H221.4c-11.47 0-20.76-9.3-20.76-20.76s9.29-20.76 20.76-20.76h581.19c11.47 0 20.76 9.3 20.76 20.76s-9.29 20.76-20.76 20.76z'
          }, {
            name: '股本',
            itemStyle: {
              color: '#ff0000'
            },
            icon: 'path://M234.666667 490.666667h-153.6a25.6 25.6 0 1 0 0 51.2h153.6a25.6 25.6 0 1 0 0-51.2zM473.6 490.666667h-153.6a25.6 25.6 0 1 0 0 51.2h153.6a25.6 25.6 0 1 0 0-51.2zM934.4 490.666667h-136.533333a25.6 25.6 0 1 0 0 51.2h136.533333a25.6 25.6 0 1 0 0-51.2zM712.533333 490.666667h-153.6a25.6 25.6 0 1 0 0 51.2h153.6a25.6 25.6 0 1 0 0-51.2z'
          }],
          top: '30px'
        },
        gt: gt,
        lte: lte
      })
      chart.setOption(option)
      charts.value[3] = chart
      chartList.value[3].loading = false
    }
  })
}

const closeStockChart = () =>{
  if (charts.value[3]) {
    charts.value[3].dispose()
    charts.value[3] = null
  }
  showStockChartPopup.value = false
}

import { chartMixins } from '@/mixins/chart-mixins'
const { charts, destroyedFlag } = chartMixins()

let chartList = ref<any[]>([])
onMounted (() =>{
  charts.value = virtualCurrency.value ? [null] : [null, null, null, null]
  chartList.value = virtualCurrency.value ?
    [{ id: 'fund_chart', loading: true }] :
    [{ id: 'fund_chart', loading: true }, { id: 'fund_pie_chart', loading: true }, { id: 'fund_line_chart', loading: true }, { id: 'stock_chart', loading: true }]
  init()
  window.addEventListener('scroll', handleScroll)
})
</script>

<style lang='scss' scoped>
.page-div {
  padding-top: 105px;
  height: auto;

  .header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;

    @media screen and (min-width: 992px) {
      left: calc(50vw - 496px);
      right: calc(50vw - 496px);
    }
  }

  .chart-container {
    height: 26vh;

    @media screen and (min-width: 768px) {
      height: calc(50vh - 226px);
    }
  }
  .tableDiv {
    th {
      width: 150px;
    }

    .firstTd {
      min-width: 80px;
      max-width: 120px;
      width: auto; 

      @media screen and (min-width: 768px) {
        min-width: 150px;
        max-width: 400px;
      }
    }
  }
}

.popup-card {
  .chart-container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 30vh;
    @media screen and (min-width: 768px) {
      height: 40vh;
    }

    .loading {
      position: absolute;
      z-index: 2;
    }

    .chartDiv {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
