greeks-live-ui 0.0.21 → 0.0.23

package/lib/packages/components/panel-option-flow/src/panel-option-flow2.js.map

@@ -1 +1 @@
-{"version":3,"file":"panel-option-flow2.js","sources":["../../../../../../../packages/components/panel-option-flow/src/panel-option-flow.vue"],"sourcesContent":["<template>\n  <div :class=\"[ns.b()]\">\n    <g-chart-panel\n      v-model:currency=\"currency\"\n      v-model:exchange=\"exchange\"\n      :loading=\"state.loadingFlag\"\n      @refresh=\"fetchData\"\n      :class=\"{ 'chart-panel-mobile': isMobile }\"\n    >\n      <template #title>\n        <g-tooltip placement=\"bottom\">\n          {{ t('message.optionFlow') }}\n          <g-icon type=\"info_question_circle\" />\n          <template #title>\n            <div v-html=\"t('message.optionFlowTips')\"></div>\n          </template>\n        </g-tooltip>\n      </template>\n      <template #tool>\n        <span class=\"period-range h5-hide\"\n          >{{ t('message.expirationAsOf')\n          }}{{ timestampFormat(new Date(), '{y}/{m}/{d}') }}</span\n        >\n        <g-toggle-button\n          v-model=\"state.dataType\"\n          :options=\"dataTypeList\"\n        ></g-toggle-button>\n        <g-select\n          v-model:value=\"state.chartType\"\n          :size=\"isPC ? 'small' : 'medium'\"\n          class=\"second-select\"\n        >\n          <g-select-option\n            v-for=\"item in chartTypeList\"\n            :value=\"item.value\"\n            :key=\"item.value\"\n          >\n            {{ item.label }}\n          </g-select-option>\n        </g-select>\n      </template>\n      <template #body>\n        <div class=\"echart\" ref=\"echart\">\n          <g-chart class=\"skew-chart\" :option=\"setOption()\"></g-chart>\n        </div>\n\n        <div v-if=\"state.coinTotal\" class=\"footer-total\">\n          {{ t('message.total') }}\n          <g-icon :type=\"currencyIcon\" />{{\n            thousandthFormat(state.coinTotal, 1)\n          }}\n          <template v-if=\"Number(state.usdTotal) !== 0\">\n            (<g-icon type=\"currency_letter_dollar\" />{{\n              thousandthFormat(state.usdTotal, 0)\n            }})\n          </template>\n        </div>\n      </template>\n    </g-chart-panel>\n  </div>\n</template>\n<script lang=\"ts\" setup>\nimport {\n  useNamespace,\n  useLocale,\n  useDeviceType,\n  useTheme,\n} from '@greeks-live-ui/hooks';\nimport { reactive, onMounted, computed, watch } from 'vue';\n\nimport {\n  timestampFormat,\n  formatLargeNumber,\n  thousandthFormat,\n} from '@greeks-live-ui/utils/chartHelp';\nimport {\n  getIndexPrice,\n  getOptionFlows,\n  IOptionFlowsRes,\n} from '@greeks-live-ui/utils/dataLab';\nimport {\n  panelOptionFlowEmits,\n  panelOptionFlowProps,\n} from './panel-option-flow';\n\ndefineOptions({\n  name: 'GPanelOptionFlow',\n});\nconst props = defineProps(panelOptionFlowProps);\nconst emit = defineEmits(panelOptionFlowEmits);\nconst ns = useNamespace('panel-option-flow');\nconst { t } = useLocale();\nconst { isMobile, isPC } = useDeviceType();\nconst { isDark } = useTheme();\n\nconst chartTypeList = [\n  { value: 'all', label: 'All' },\n  { value: 'taker', label: 'Block Taker' },\n];\nconst dataTypeList = [\n  { value: '1h', label: 'Past 1H' },\n  { value: '24h', label: 'Past 24H' },\n];\n\nconst state = reactive({\n  loadingFlag: false,\n\n  exchange: props.exchange || props.defaultExchange || 'Deribit',\n  currency: props.currency || props.defaultCurrency || 'BTC',\n\n  pageCount: 0,\n\n  chartType: 'all',\n  dataType: '24h',\n\n  usdTotal: 0,\n  coinTotal: 0,\n\n  chartData: {} as IOptionFlowsRes,\n  currencySummary: {} as Record<string, number>,\n});\n\nconst indexPrice = computed(() => {\n  return state.currencySummary[`${currency.value.toLowerCase()}Price`] || 1;\n});\nconst currencyIcon = computed(() => {\n  if (currency.value === 'BTC') return 'currency_letter_btc';\n  if (currency.value === 'ETH') return 'currency_letter_eth';\n  return '';\n});\n\nconst currency = computed({\n  get: () => props.currency || state.currency || 'BTC',\n  set: (newVal) => {\n    props.currency\n      ? emit('update:currency', newVal)\n      : (state.currency = newVal);\n  },\n});\n\nconst exchange = computed({\n  get: () => props.exchange || state.exchange || 'Deribit',\n  set: (newVal) => {\n    props.exchange\n      ? emit('update:exchange', newVal)\n      : (state.exchange = newVal);\n  },\n});\n\nwatch(currency, () => {\n  fetchData();\n  fetCurrencySummary();\n});\n\nwatch(exchange, () => {\n  fetchData();\n});\n\nwatch(\n  () => state.chartType,\n  (newVal) => {\n    fetchData();\n  }\n);\n\nwatch(\n  () => state.dataType,\n  (newVal) => {\n    fetchData();\n  }\n);\n\nconst fetchData = () => {\n  state.loadingFlag = true;\n  getOptionFlows({ currency: currency.value })\n    .then((res) => {\n      if (res && res.code === 200) {\n        state.chartData = res.data as IOptionFlowsRes;\n      }\n    })\n    .finally(() => {\n      state.loadingFlag = false;\n    });\n};\n\nconst fetCurrencySummary = () => {\n  getIndexPrice({ index_name: currency.value.toLowerCase() + '_usd' }).then(\n    (res) => {\n      state.currencySummary[`${currency.value.toLowerCase()}Price`] =\n        res?.result?.index_price || '';\n    }\n  );\n};\n\nonMounted(() => {\n  fetchData();\n  fetCurrencySummary();\n});\n\nconst getCurrencyImg = () => {\n  if (currency.value === 'BTC') {\n    return isDark.value\n      ? 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAWRJREFUWEftl20SgiAQhgEPVh3FnGo6RXWKxhrzKNnFoHEFBd0V0cyZJn45DB8Puy/vImcLN77w/iwIIM/SswGOkwN8Y30hhwoFULA450W83W80QKfvD/C1COT365oJ8WynZTKAFtYpZKF6LOcFU+plROpbAxXhJAB3x4sPZG6AEqcXwnsNqWjEycGZ2xe19lg7SF4AuOuP25MptbYnUovmWVr5gt2k3MS7Y4Hp4fMACCxbGuBrKSB0ME2ElAZKdVt3fwXfLZ34bgCUFZ9R9AD4pw4wpXkBGkQyDeMBtLKhHpRNCHNNKQtHIUYDkD5gFyjHcZo3xKxG1KcZDPrjEQCA6unWScWyANYzLjwFiL9jpwFBRtEJ8QOyKpIpgAJkWtdg4GHqGAE2xhpAiZYGwKqa33rwEaHFyHnrjd10gAuSVqwBnPqvOWxlm1rQ9EkJ/wplo+p/+zyDrqGZVD82/j8mvxSBN/FYJTCXemxPAAAAAElFTkSuQmCC'\n      : 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDkgMTIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTQuODk0IDIuMjI5Vi4zOWguNzg0VjIuMjNoLS43ODR6bS0xLjY0MiAwVi4zOWguNzg0VjIuMjNoLS43ODR6bTEuNjQyIDkuMzQ2VjkuNzM4aC43ODR2MS44MzdoLS43ODR6bS0xLjY0MiAwVjkuNzM4aC43ODR2MS44MzdoLS43ODR6bS0xLjEyNy0xLjJWMS42MjhoMi4wMDljLjY4NiAwIDEuMjU4LjA3IDEuNzE1LjIwOS40NjUuMTM4LjgxMy4zNjcgMS4wNDEuNjg2LjIzNy4zMTguMzU2Ljc0My4zNTYgMS4yNzQgMCAuMzQzLS4wNTguNjQ5LS4xNzIuOTE4LS4xMDYuMjYyLS4yNy40ODItLjQ5LjY2MmExLjgzIDEuODMgMCAwIDEtLjc5Ni4zNTV2LjA2MWMuMzI2LjA1OC42MTYuMTY0Ljg3LjMxOS4yNi4xNTUuNDY1LjM3Ni42MTIuNjYxLjE1NS4yODYuMjMzLjY1OC4yMzMgMS4xMTUgMCAuNTMxLS4xMTUuOTg0LS4zNDMgMS4zNi0uMjIuMzY3LS41NC42NS0uOTU2Ljg0NS0uNDE2LjE4OC0uOTE0LjI4Mi0xLjQ5NC4yODJIMi4xMjV6bTIuMjMtNS4wMjNjLjY3IDAgMS4xMjYtLjExOCAxLjM3MS0uMzU1LjI1NC0uMjQ1LjM4LS42MDQuMzgtMS4wNzggMC0uNDgyLS4xNTUtLjgyNS0uNDY1LTEuMDI5LS4zMDItLjIxMi0uNzg4LS4zMTgtMS40NTgtLjMxOGgtLjk1NXYyLjc4aDEuMTI2em0tMS4xMjguOTJ2My4xNzJoMS4yNzVjLjY3NyAwIDEuMTUxLS4xNTEgMS40Mi0uNDUzLjI3LS4zMDMuNDA1LS42OTkuNDA1LTEuMTg5IDAtLjMxLS4wNjEtLjU4LS4xODQtLjgwOC0uMTE0LS4yMjktLjMxLS40MDQtLjU4OC0uNTI3LS4yNzgtLjEzLS42NTctLjE5Ni0xLjE0LS4xOTZIMy4yMjh6IiBmaWxsPSIjMjEyNTI5Ii8+PC9zdmc+';\n  } else if (currency.value === 'ETH') {\n    return isDark.value\n      ? 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAY5JREFUWEfNl1FywjAMROVwsIajpEzL9BSQUzCUoTkK6cFIOjZ2mgTLXsn9aP6AsfWk3YkWQwVPdz0faRj65u2j115jtAftue7r80bjWDe7vfoe9UHXPdHBN9A2u739LH5KAMZFtWHYaqRQAay6f3AY0zev71vpCMQA0eKhqmIKcgBvPK5TqSFFAMnuf4lEhpQCLI3HjUEgBQwAdi82JAQgKi6UAgXARr+SBDFkFkDZPSwFAqDqfhpGxpBJgKLuA0HmDckC/ElxwJD/FyDAF03CmJ7u9za1JfkJXE51OOggjHmx4QPadrPC3eXkznAQaRM+Fs93CBvgNKZdEMBTazoNYOmr6mZ3fRZk3fVmc0DiGvIeiEYvN9qqqp00Xmf3nS+MRrUswDx8zvR/WrkReaC1jAEEKZ4d2NpY7mRS7AGX5CBX2wi+TMG5Y1D3IgBGihgIXFwM4CCuZ345KZIxLMH0ZuT9QCSIYtOuyokZ+53xg2j0RQARP6iKqzwQkwKJXtykxR6YX+SlIO0fU3vXD4Jr8yEhH6DjAAAAAElFTkSuQmCC'\n      : 'data:image/png;base64,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';\n  }\n  return '';\n};\n\nconst getEchartData = () => {\n  const optionFlowData =\n    state.dataType === '1h' ? state.chartData.past1h : state.chartData.past24h;\n  if (!optionFlowData || Object.keys(optionFlowData).length <= 0) return null;\n\n  let data = [];\n  if (state.chartType === 'all') {\n    if (optionFlowData.call_blocked !== 0) {\n      data.push({\n        value: optionFlowData.call_blocked,\n        name: 'Call Blocked',\n        itemStyle: { color: '#770813' },\n      });\n    }\n    if (optionFlowData.call_buys !== 0) {\n      data.push({\n        value: optionFlowData.call_buys,\n        name: 'Call Buys',\n        itemStyle: { color: '#CB272D' },\n      });\n    }\n    if (optionFlowData.call_sells !== 0) {\n      data.push({\n        value: optionFlowData.call_sells,\n        name: 'Call Sells',\n        itemStyle: { color: '#F76560' },\n      });\n    }\n    if (optionFlowData.put_blocked !== 0) {\n      data.push({\n        value: optionFlowData.put_blocked,\n        name: 'Put Blocked',\n        itemStyle: { color: '#072CA6' },\n      });\n    }\n    if (optionFlowData.put_buys !== 0) {\n      data.push({\n        value: optionFlowData.put_buys,\n        name: 'Put Buys',\n        itemStyle: { color: '#4080FF' },\n      });\n    }\n    if (optionFlowData.put_sells !== 0) {\n      data.push({\n        value: optionFlowData.put_sells,\n        name: 'Put Sells',\n        itemStyle: { color: '#94BFFF' },\n      });\n    }\n  } else {\n    if (optionFlowData.call_blocked_buys !== 0) {\n      data.push({\n        value: optionFlowData.call_blocked_buys,\n        name: 'Call Blocked Buys',\n        itemStyle: { color: '#3FA36D' },\n      });\n    }\n    if (optionFlowData.call_blocked_sells !== 0) {\n      data.push({\n        value: optionFlowData.call_blocked_sells,\n        name: 'Call Blocked Sells',\n        itemStyle: { color: '#38C77A' },\n      });\n    }\n    if (optionFlowData.put_blocked_buys !== 0) {\n      data.push({\n        value: optionFlowData.put_blocked_buys,\n        name: 'Put Blocked Buys',\n        itemStyle: { color: '#FF0015' },\n      });\n    }\n    if (optionFlowData.put_blocked_sells !== 0) {\n      data.push({\n        value: optionFlowData.put_blocked_sells,\n        name: 'Put Blocked Sells',\n        itemStyle: { color: '#FA7281' },\n      });\n    }\n  }\n\n  let total = 0;\n  data.forEach((item) => {\n    total += item.value;\n  });\n  state.coinTotal = total;\n  state.usdTotal = total * indexPrice.value;\n\n  return {\n    usdTotal: state.usdTotal,\n    coinTotal: total,\n    data,\n  };\n};\n\nconst getEchartOption = (params: ReturnType<typeof getEchartData>) => {\n  if (!params) return {};\n  const { coinTotal, data } = params;\n\n  const legendPosition = isMobile.value\n    ? {\n        orient: 'horizontal',\n        bottom: 0,\n      }\n    : {\n        type: 'scroll',\n        orient: 'vertical',\n        left: '38%',\n        top: 'center',\n      };\n\n  const option = {\n    legend: {\n      ...legendPosition,\n\n      textStyle: {\n        color: '#ffffff',\n        fontSize: 16,\n        rich: {\n          currencyImg: {\n            width: 8,\n            height: 12,\n            backgroundColor: {\n              image: getCurrencyImg(),\n            },\n          },\n          name: {\n            fontSize: 12,\n            lineHeight: 14,\n            fontWeight: 400,\n            color: isDark.value ? '#ADB5BD' : '#596169', // 浅色/Grey/10\n            width: isMobile.value ? 114 : 120,\n          },\n          data: {\n            fontSize: 12,\n            lineHeight: 14,\n            fontWeight: 500,\n            color: isDark.value ? '#CED4DA' : '#343A40', // 浅色/Grey/12\n            width: isMobile.value ? 110 : 200,\n          },\n          percent: {\n            fontSize: 12,\n            lineHeight: 14,\n            fontWeight: 500,\n            color: isDark.value ? '#CED4DA' : '#343A40', // 浅色/Grey/12\n            width: isMobile.value ? 85 : 'auto',\n          },\n        },\n      },\n      formatter(name: string) {\n        const legendItem = data.find((v) => v.name === name);\n        if (!legendItem) return '';\n        const value = thousandthFormat(legendItem.value, 1);\n        const usdValue = formatLargeNumber(\n          legendItem.value * indexPrice.value,\n          1\n        );\n        var percent = ((legendItem.value / coinTotal) * 100).toFixed(2);\n        return `{name|${name}}{currencyImg|}{data|${value}${\n          Number(usdValue) !== 0 ? `($${usdValue})` : ''\n        }}{percent|${percent}%}`;\n      },\n    },\n\n    series: [\n      {\n        type: 'pie',\n        radius: isMobile.value ? ['30%', '45%'] : ['40%', '60%'],\n        center: isMobile.value ? ['50%', '30%'] : ['20%', '50%'],\n        avoidLabelOverlap: true,\n        labelLine: {\n          show: false,\n        },\n        label: {\n          show: false,\n        },\n        itemStyle: {\n          borderRadius: 0,\n          borderColor: '#fff',\n          borderWidth: 2,\n        },\n\n        data,\n      },\n    ],\n  };\n  return option;\n};\n\nconst setOption = () => {\n  return getEchartOption(getEchartData());\n};\n</script>\n"],"names":["useNamespace","useLocale","useDeviceType","useTheme","reactive","computed","watch","getOptionFlows","getIndexPrice","onMounted","thousandthFormat","formatLargeNumber"],"mappings":"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"}
+{"version":3,"file":"panel-option-flow2.js","sources":["../../../../../../../packages/components/panel-option-flow/src/panel-option-flow.vue"],"sourcesContent":["<template>\n  <div :class=\"[ns.b()]\">\n    <g-chart-panel\n      v-model:currency=\"currency\"\n      v-model:exchange=\"exchange\"\n      :loading=\"state.loadingFlag\"\n      @refresh=\"fetchData\"\n      :class=\"{ 'chart-panel-mobile': isMobile }\"\n    >\n      <template #title>\n        <g-tooltip placement=\"bottom\">\n          {{ t('message.optionFlow') }}\n          <g-icon type=\"info_question_circle\" />\n          <template #title>\n            <div v-html=\"t('message.optionFlowTips')\"></div>\n          </template>\n        </g-tooltip>\n      </template>\n      <template #tool>\n        <span class=\"period-range h5-hide\"\n          >{{ t('message.expirationAsOf')\n          }}{{ timestampFormat(new Date(), '{y}/{m}/{d}') }}</span\n        >\n        <g-toggle-button\n          v-model=\"state.dataType\"\n          :options=\"dataTypeList\"\n        ></g-toggle-button>\n        <g-select\n          v-model:value=\"state.chartType\"\n          :size=\"isPC ? 'small' : 'medium'\"\n          class=\"second-select\"\n        >\n          <g-select-option\n            v-for=\"item in chartTypeList\"\n            :value=\"item.value\"\n            :key=\"item.value\"\n          >\n            {{ item.label }}\n          </g-select-option>\n        </g-select>\n      </template>\n      <template #body>\n        <div class=\"echart\" ref=\"echart\">\n          <g-chart class=\"skew-chart\" :option=\"chartOption\"></g-chart>\n        </div>\n\n        <div v-if=\"state.coinTotal\" class=\"footer-total\">\n          {{ t('message.total') }}\n          <g-icon :type=\"currencyIcon\" />{{\n            thousandthFormat(state.coinTotal, 1)\n          }}\n          <template v-if=\"Number(state.usdTotal) !== 0\">\n            (<g-icon type=\"currency_letter_dollar\" />{{\n              thousandthFormat(state.usdTotal, 0)\n            }})\n          </template>\n        </div>\n      </template>\n    </g-chart-panel>\n  </div>\n</template>\n<script lang=\"ts\" setup>\nimport {\n  useNamespace,\n  useLocale,\n  useDeviceType,\n  useTheme,\n} from '@greeks-live-ui/hooks';\nimport { reactive, onMounted, computed, watch } from 'vue';\n\nimport {\n  timestampFormat,\n  formatLargeNumber,\n  thousandthFormat,\n} from '@greeks-live-ui/utils/chartHelp';\nimport {\n  getIndexPrice,\n  getOptionFlows,\n  IOptionFlowsRes,\n} from '@greeks-live-ui/utils/dataLab';\nimport {\n  panelOptionFlowEmits,\n  panelOptionFlowProps,\n} from './panel-option-flow';\n\ndefineOptions({\n  name: 'GPanelOptionFlow',\n});\nconst props = defineProps(panelOptionFlowProps);\nconst emit = defineEmits(panelOptionFlowEmits);\nconst ns = useNamespace('panel-option-flow');\nconst { t } = useLocale();\nconst { isMobile, isPC } = useDeviceType();\nconst { isDark } = useTheme();\n\nconst chartTypeList = [\n  { value: 'all', label: 'All' },\n  { value: 'taker', label: 'Block Taker' },\n];\nconst dataTypeList = [\n  { value: '1h', label: 'Past 1H' },\n  { value: '24h', label: 'Past 24H' },\n];\n\nconst state = reactive({\n  loadingFlag: false,\n\n  exchange: props.exchange || props.defaultExchange || 'Deribit',\n  currency: props.currency || props.defaultCurrency || 'BTC',\n\n  pageCount: 0,\n\n  chartType: 'all',\n  dataType: '24h',\n\n  usdTotal: 0,\n  coinTotal: 0,\n\n  chartData: {} as IOptionFlowsRes,\n  currencySummary: {} as Record<string, number>,\n});\n\nconst indexPrice = computed(() => {\n  return state.currencySummary[`${currency.value.toLowerCase()}Price`] || 1;\n});\nconst currencyIcon = computed(() => {\n  if (currency.value === 'BTC') return 'currency_letter_btc';\n  if (currency.value === 'ETH') return 'currency_letter_eth';\n  return '';\n});\n\nconst currency = computed({\n  get: () => props.currency || state.currency || 'BTC',\n  set: (newVal) => {\n    props.currency\n      ? emit('update:currency', newVal)\n      : (state.currency = newVal);\n  },\n});\n\nconst exchange = computed({\n  get: () => props.exchange || state.exchange || 'Deribit',\n  set: (newVal) => {\n    props.exchange\n      ? emit('update:exchange', newVal)\n      : (state.exchange = newVal);\n  },\n});\n\nwatch(currency, () => {\n  fetchData();\n  fetCurrencySummary();\n});\n\nwatch(exchange, () => {\n  fetchData();\n});\n\nwatch(\n  () => state.chartType,\n  (newVal) => {\n    fetchData();\n  }\n);\n\nwatch(\n  () => state.dataType,\n  (newVal) => {\n    fetchData();\n  }\n);\n\nconst fetchData = () => {\n  state.loadingFlag = true;\n  getOptionFlows({ currency: currency.value })\n    .then((res) => {\n      if (res && res.code === 200) {\n        state.chartData = res.data as IOptionFlowsRes;\n      }\n    })\n    .finally(() => {\n      state.loadingFlag = false;\n    });\n};\n\nconst fetCurrencySummary = () => {\n  getIndexPrice({ index_name: currency.value.toLowerCase() + '_usd' }).then(\n    (res) => {\n      state.currencySummary[`${currency.value.toLowerCase()}Price`] =\n        res?.result?.index_price || '';\n    }\n  );\n};\n\nconst chartOption = computed(() => {\n  return getEchartOption(getEchartData());\n});\n\nonMounted(() => {\n  fetchData();\n  fetCurrencySummary();\n});\n\nconst getCurrencyImg = () => {\n  if (currency.value === 'BTC') {\n    return isDark.value\n      ? 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAWRJREFUWEftl20SgiAQhgEPVh3FnGo6RXWKxhrzKNnFoHEFBd0V0cyZJn45DB8Puy/vImcLN77w/iwIIM/SswGOkwN8Y30hhwoFULA450W83W80QKfvD/C1COT365oJ8WynZTKAFtYpZKF6LOcFU+plROpbAxXhJAB3x4sPZG6AEqcXwnsNqWjEycGZ2xe19lg7SF4AuOuP25MptbYnUovmWVr5gt2k3MS7Y4Hp4fMACCxbGuBrKSB0ME2ElAZKdVt3fwXfLZ34bgCUFZ9R9AD4pw4wpXkBGkQyDeMBtLKhHpRNCHNNKQtHIUYDkD5gFyjHcZo3xKxG1KcZDPrjEQCA6unWScWyANYzLjwFiL9jpwFBRtEJ8QOyKpIpgAJkWtdg4GHqGAE2xhpAiZYGwKqa33rwEaHFyHnrjd10gAuSVqwBnPqvOWxlm1rQ9EkJ/wplo+p/+zyDrqGZVD82/j8mvxSBN/FYJTCXemxPAAAAAElFTkSuQmCC'\n      : 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDkgMTIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTQuODk0IDIuMjI5Vi4zOWguNzg0VjIuMjNoLS43ODR6bS0xLjY0MiAwVi4zOWguNzg0VjIuMjNoLS43ODR6bTEuNjQyIDkuMzQ2VjkuNzM4aC43ODR2MS44MzdoLS43ODR6bS0xLjY0MiAwVjkuNzM4aC43ODR2MS44MzdoLS43ODR6bS0xLjEyNy0xLjJWMS42MjhoMi4wMDljLjY4NiAwIDEuMjU4LjA3IDEuNzE1LjIwOS40NjUuMTM4LjgxMy4zNjcgMS4wNDEuNjg2LjIzNy4zMTguMzU2Ljc0My4zNTYgMS4yNzQgMCAuMzQzLS4wNTguNjQ5LS4xNzIuOTE4LS4xMDYuMjYyLS4yNy40ODItLjQ5LjY2MmExLjgzIDEuODMgMCAwIDEtLjc5Ni4zNTV2LjA2MWMuMzI2LjA1OC42MTYuMTY0Ljg3LjMxOS4yNi4xNTUuNDY1LjM3Ni42MTIuNjYxLjE1NS4yODYuMjMzLjY1OC4yMzMgMS4xMTUgMCAuNTMxLS4xMTUuOTg0LS4zNDMgMS4zNi0uMjIuMzY3LS41NC42NS0uOTU2Ljg0NS0uNDE2LjE4OC0uOTE0LjI4Mi0xLjQ5NC4yODJIMi4xMjV6bTIuMjMtNS4wMjNjLjY3IDAgMS4xMjYtLjExOCAxLjM3MS0uMzU1LjI1NC0uMjQ1LjM4LS42MDQuMzgtMS4wNzggMC0uNDgyLS4xNTUtLjgyNS0uNDY1LTEuMDI5LS4zMDItLjIxMi0uNzg4LS4zMTgtMS40NTgtLjMxOGgtLjk1NXYyLjc4aDEuMTI2em0tMS4xMjguOTJ2My4xNzJoMS4yNzVjLjY3NyAwIDEuMTUxLS4xNTEgMS40Mi0uNDUzLjI3LS4zMDMuNDA1LS42OTkuNDA1LTEuMTg5IDAtLjMxLS4wNjEtLjU4LS4xODQtLjgwOC0uMTE0LS4yMjktLjMxLS40MDQtLjU4OC0uNTI3LS4yNzgtLjEzLS42NTctLjE5Ni0xLjE0LS4xOTZIMy4yMjh6IiBmaWxsPSIjMjEyNTI5Ii8+PC9zdmc+';\n  } else if (currency.value === 'ETH') {\n    return isDark.value\n      ? 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAY5JREFUWEfNl1FywjAMROVwsIajpEzL9BSQUzCUoTkK6cFIOjZ2mgTLXsn9aP6AsfWk3YkWQwVPdz0faRj65u2j115jtAftue7r80bjWDe7vfoe9UHXPdHBN9A2u739LH5KAMZFtWHYaqRQAay6f3AY0zev71vpCMQA0eKhqmIKcgBvPK5TqSFFAMnuf4lEhpQCLI3HjUEgBQwAdi82JAQgKi6UAgXARr+SBDFkFkDZPSwFAqDqfhpGxpBJgKLuA0HmDckC/ElxwJD/FyDAF03CmJ7u9za1JfkJXE51OOggjHmx4QPadrPC3eXkznAQaRM+Fs93CBvgNKZdEMBTazoNYOmr6mZ3fRZk3fVmc0DiGvIeiEYvN9qqqp00Xmf3nS+MRrUswDx8zvR/WrkReaC1jAEEKZ4d2NpY7mRS7AGX5CBX2wi+TMG5Y1D3IgBGihgIXFwM4CCuZ345KZIxLMH0ZuT9QCSIYtOuyokZ+53xg2j0RQARP6iKqzwQkwKJXtykxR6YX+SlIO0fU3vXD4Jr8yEhH6DjAAAAAElFTkSuQmCC'\n      : 'data:image/png;base64,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';\n  }\n  return '';\n};\n\nconst getEchartData = () => {\n  const optionFlowData =\n    state.dataType === '1h' ? state.chartData.past1h : state.chartData.past24h;\n  if (!optionFlowData || Object.keys(optionFlowData).length <= 0) return null;\n\n  let data = [];\n  if (state.chartType === 'all') {\n    if (optionFlowData.call_blocked !== 0) {\n      data.push({\n        value: optionFlowData.call_blocked,\n        name: 'Call Blocked',\n        itemStyle: { color: '#770813' },\n      });\n    }\n    if (optionFlowData.call_buys !== 0) {\n      data.push({\n        value: optionFlowData.call_buys,\n        name: 'Call Buys',\n        itemStyle: { color: '#CB272D' },\n      });\n    }\n    if (optionFlowData.call_sells !== 0) {\n      data.push({\n        value: optionFlowData.call_sells,\n        name: 'Call Sells',\n        itemStyle: { color: '#F76560' },\n      });\n    }\n    if (optionFlowData.put_blocked !== 0) {\n      data.push({\n        value: optionFlowData.put_blocked,\n        name: 'Put Blocked',\n        itemStyle: { color: '#072CA6' },\n      });\n    }\n    if (optionFlowData.put_buys !== 0) {\n      data.push({\n        value: optionFlowData.put_buys,\n        name: 'Put Buys',\n        itemStyle: { color: '#4080FF' },\n      });\n    }\n    if (optionFlowData.put_sells !== 0) {\n      data.push({\n        value: optionFlowData.put_sells,\n        name: 'Put Sells',\n        itemStyle: { color: '#94BFFF' },\n      });\n    }\n  } else {\n    if (optionFlowData.call_blocked_buys !== 0) {\n      data.push({\n        value: optionFlowData.call_blocked_buys,\n        name: 'Call Blocked Buys',\n        itemStyle: { color: '#3FA36D' },\n      });\n    }\n    if (optionFlowData.call_blocked_sells !== 0) {\n      data.push({\n        value: optionFlowData.call_blocked_sells,\n        name: 'Call Blocked Sells',\n        itemStyle: { color: '#38C77A' },\n      });\n    }\n    if (optionFlowData.put_blocked_buys !== 0) {\n      data.push({\n        value: optionFlowData.put_blocked_buys,\n        name: 'Put Blocked Buys',\n        itemStyle: { color: '#FF0015' },\n      });\n    }\n    if (optionFlowData.put_blocked_sells !== 0) {\n      data.push({\n        value: optionFlowData.put_blocked_sells,\n        name: 'Put Blocked Sells',\n        itemStyle: { color: '#FA7281' },\n      });\n    }\n  }\n\n  let total = 0;\n  data.forEach((item) => {\n    total += item.value;\n  });\n  state.coinTotal = total;\n  state.usdTotal = total * indexPrice.value;\n\n  return {\n    usdTotal: state.usdTotal,\n    coinTotal: total,\n    data,\n  };\n};\n\nconst getEchartOption = (params: ReturnType<typeof getEchartData>) => {\n  if (!params) return {};\n  const { coinTotal, data } = params;\n\n  const legendPosition = isMobile.value\n    ? {\n        orient: 'horizontal',\n        bottom: 0,\n      }\n    : {\n        type: 'scroll',\n        orient: 'vertical',\n        left: '38%',\n        top: 'center',\n      };\n\n  const option = {\n    legend: {\n      ...legendPosition,\n\n      textStyle: {\n        color: '#ffffff',\n        fontSize: 16,\n        rich: {\n          currencyImg: {\n            width: 8,\n            height: 12,\n            backgroundColor: {\n              image: getCurrencyImg(),\n            },\n          },\n          name: {\n            fontSize: 12,\n            lineHeight: 14,\n            fontWeight: 400,\n            color: isDark.value ? '#ADB5BD' : '#596169', // 浅色/Grey/10\n            width: isMobile.value ? 114 : 120,\n          },\n          data: {\n            fontSize: 12,\n            lineHeight: 14,\n            fontWeight: 500,\n            color: isDark.value ? '#CED4DA' : '#343A40', // 浅色/Grey/12\n            width: isMobile.value ? 110 : 200,\n          },\n          percent: {\n            fontSize: 12,\n            lineHeight: 14,\n            fontWeight: 500,\n            color: isDark.value ? '#CED4DA' : '#343A40', // 浅色/Grey/12\n            width: isMobile.value ? 85 : 'auto',\n          },\n        },\n      },\n      formatter(name: string) {\n        const legendItem = data.find((v) => v.name === name);\n        if (!legendItem) return '';\n        const value = thousandthFormat(legendItem.value, 1);\n        const usdValue = formatLargeNumber(\n          legendItem.value * indexPrice.value,\n          1\n        );\n        var percent = ((legendItem.value / coinTotal) * 100).toFixed(2);\n        return `{name|${name}}{currencyImg|}{data|${value}${\n          Number(usdValue) !== 0 ? `($${usdValue})` : ''\n        }}{percent|${percent}%}`;\n      },\n    },\n\n    series: [\n      {\n        type: 'pie',\n        radius: isMobile.value ? ['30%', '45%'] : ['40%', '60%'],\n        center: isMobile.value ? ['50%', '30%'] : ['20%', '50%'],\n        avoidLabelOverlap: true,\n        labelLine: {\n          show: false,\n        },\n        label: {\n          show: false,\n        },\n        itemStyle: {\n          borderRadius: 0,\n          borderColor: '#fff',\n          borderWidth: 2,\n        },\n\n        data,\n      },\n    ],\n  };\n  return option;\n};\n</script>\n"],"names":["useNamespace","useLocale","useDeviceType","useTheme","reactive","computed","watch","getOptionFlows","getIndexPrice","onMounted","thousandthFormat","formatLargeNumber"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0FA,IAAA,MAAA,EAAA,GAAAA,kBAAA,CAAA,mBAAA,CAAA,CAAA;AACA,IAAA,MAAA,EAAA,CAAA,EAAA,GAAAC,iBAAA,EAAA,CAAA;AACA,IAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,GAAAC,qBAAA,EAAA,CAAA;AACA,IAAA,MAAA,EAAA,MAAA,EAAA,GAAAC,gBAAA,EAAA,CAAA;AAEA,IAAA,MAAA,aAAA,GAAA;AAAA,MAAA,EAAA,KAAA,EAAA,KAAA,EAAA,KAAA,EAAA,KAAA,EAAA;AACA,MAAA,EAAA,KAAA,EAAA,OAAA,EAAA,KAAA,EAAA,aAAA,EAAA;AACA,KAAA,CAAA;AAEA,IAAA,MAAA,YAAA,GAAA;AAAA,MAAA,EAAA,KAAA,EAAA,IAAA,EAAA,KAAA,EAAA,SAAA,EAAA;AACA,MAAA,EAAA,KAAA,EAAA,KAAA,EAAA,KAAA,EAAA,UAAA,EAAA;AACA,KAAA,CAAA;AAGA,IAAA,MAAA,KAAA,GAAAC,YAAA,CAAA;AAAA,MAAA,WAAA,EAAA,KAAA;AACA,MAAA,QAAA,EAAA,KAAA,CAAA,QAAA,IAAA,KAAA,CAAA,eAAA,IAAA,SAAA;AAEA,MAAA,QAAA,EAAA,KAAA,CAAA,QAAA,IAAA,KAAA,CAAA,eAAA,IAAA,KAAA;AACA,MAAA,SAAA,EAAA,CAAA;AAEA,MAAA,SAAA,EAAA,KAAA;AAEA,MAAA,QAAA,EAAA,KAAA;AACA,MAAA,QAAA,EAAA,CAAA;AAEA,MAAA,SAAA,EAAA,CAAA;AACA,MAAA,SAAA,EAAA,EAAA;AAEA,MAAA,eAAA,EAAA,EAAA;AACA,KAAA,CAAA,CAAA;AAGA,IAAA,MAAA,UAAA,GAAAC,YAAA,CAAA,MAAA;AACA,MAAA,OAAA,KAAA,CAAA,eAAA,CAAA,CAAA,EAAA,QAAA,CAAA,KAAA,CAAA,WAAA,EAAA,CAAA,KAAA,CAAA,CAAA,IAAA,CAAA,CAAA;AAAA,KAAA,CAAA,CAAA;AAEA,IAAA,MAAA,YAAA,GAAAA,YAAA,CAAA,MAAA;AACA,MAAA,IAAA,QAAA,CAAA,KAAA,KAAA,KAAA;AAAA,QAAA,OAAA,qBAAA,CAAA;AACA,MAAA,IAAA,QAAA,CAAA,KAAA,KAAA,KAAA;AAAA,QAAA,OAAA,qBAAA,CAAA;AACA,MAAA,OAAA,EAAA,CAAA;AAAA,KAAA,CAAA,CAAA;AAGA,IAAA,MAAA,QAAA,GAAAA,YAAA,CAAA;AAAA,MAAA,GAAA,EAAA,MAAA,KAAA,CAAA,QAAA,IAAA,KAAA,CAAA,QAAA,IAAA,KAAA;AACA,MAAA,GAAA,EAAA,CAAA,MAAA,KAAA;AAEA,QAAA,KAAA,CAAA,QAAA,GAAA,IAAA,CAAA,iBAAA,EAAA,MAAA,CAAA,GAAA,KAAA,CAAA,QAAA,GAAA,MAAA,CAAA;AAEA,OAAA;AACA,KAAA,CAAA,CAAA;AAGA,IAAA,MAAA,QAAA,GAAAA,YAAA,CAAA;AAAA,MAAA,GAAA,EAAA,MAAA,KAAA,CAAA,QAAA,IAAA,KAAA,CAAA,QAAA,IAAA,SAAA;AACA,MAAA,GAAA,EAAA,CAAA,MAAA,KAAA;AAEA,QAAA,KAAA,CAAA,QAAA,GAAA,IAAA,CAAA,iBAAA,EAAA,MAAA,CAAA,GAAA,KAAA,CAAA,QAAA,GAAA,MAAA,CAAA;AAEA,OAAA;AACA,KAAA,CAAA,CAAA;AAGA,IAAAC,SAAA,CAAA,QAAA,EAAA,MAAA;AACA,MAAA,SAAA,EAAA,CAAA;AACA,MAAA,kBAAA,EAAA,CAAA;AAAA,KAAA,CAAA,CAAA;AAGA,IAAAA,SAAA,CAAA,QAAA,EAAA,MAAA;AACA,MAAA,SAAA,EAAA,CAAA;AAAA,KAAA,CAAA,CAAA;AAGA,IAAAA,SAAA;AAAA,MAAA,MAAA,KAAA,CAAA,SAAA;AACA,MAAA,CAAA,MAAA,KAAA;AAEA,QAAA,SAAA,EAAA,CAAA;AAAA,OAAA;AACA,KAAA,CAAA;AAGA,IAAAA,SAAA;AAAA,MAAA,MAAA,KAAA,CAAA,QAAA;AACA,MAAA,CAAA,MAAA,KAAA;AAEA,QAAA,SAAA,EAAA,CAAA;AAAA,OAAA;AACA,KAAA,CAAA;AAGA,IAAA,MAAA,SAAA,GAAA,MAAA;AACA,MAAA,KAAA,CAAA,WAAA,GAAA,IAAA,CAAA;AACA,MAAAC,sBAAA,CAAA,EAAA,QAAA,EAAA,QAAA,CAAA,KAAA,EAAA,CAAA,CAAA,IAAA,CAAA,CAAA,GAAA,KAAA;AAEA,QAAA,IAAA,GAAA,IAAA,GAAA,CAAA,IAAA,KAAA,GAAA,EAAA;AACA,UAAA,KAAA,CAAA,SAAA,GAAA,GAAA,CAAA,IAAA,CAAA;AAAA,SAAA;AACA,OAAA,CAAA,CAAA,OAAA,CAAA,MAAA;AAGA,QAAA,KAAA,CAAA,WAAA,GAAA,KAAA,CAAA;AAAA,OAAA,CAAA,CAAA;AACA,KAAA,CAAA;AAGA,IAAA,MAAA,kBAAA,GAAA,MAAA;AACA,MAAAC,qBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,CAAA,KAAA,CAAA,WAAA,EAAA,GAAA,MAAA,EAAA,CAAA,CAAA,IAAA;AAAA,QAAA,CAAA,GAAA,KAAA;;AAEA,UAAA,KAAA,CAAA,eAAA,CAAA,CAAA,EAAA,QAAA,CAAA,KAAA,CAAA,WAAA,EAAA,CAAA,KAAA,CAAA,CAAA,GAAA,CAAA,CAAA,EAAA,GAAA,GAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,GAAA,CAAA,MAAA,KAAA,IAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,WAAA,KAAA,EAAA,CAAA;AACA,SAAA;AACA,OAAA,CAAA;AACA,KAAA,CAAA;AAGA,IAAA,MAAA,WAAA,GAAAH,YAAA,CAAA,MAAA;AACA,MAAA,OAAA,eAAA,CAAA,aAAA,EAAA,CAAA,CAAA;AAAA,KAAA,CAAA,CAAA;AAGA,IAAAI,aAAA,CAAA,MAAA;AACA,MAAA,SAAA,EAAA,CAAA;AACA,MAAA,kBAAA,EAAA,CAAA;AAAA,KAAA,CAAA,CAAA;AAGA,IAAA,MAAA,cAAA,GAAA,MAAA;AACA,MAAA,IAAA,QAAA,CAAA,KAAA,KAAA,KAAA,EAAA;AACA,QAAA,OAAA,MAAA,CAAA,KAAA,GAAA,glBAAA,GAAA,otCAAA,CAAA;AAEA,OAAA,MAAA,IAAA,QAAA,CAAA,KAAA,KAAA,KAAA,EAAA;AAEA,QAAA,OAAA,MAAA,CAAA,KAAA,GAAA,woBAAA,GAAA,ggKAAA,CAAA;AAEA,OAAA;AAEA,MAAA,OAAA,EAAA,CAAA;AAAA,KAAA,CAAA;AAGA,IAAA,MAAA,aAAA,GAAA,MAAA;AACA,MAAA,MAAA,cAAA,GAAA,KAAA,CAAA,QAAA,KAAA,IAAA,GAAA,KAAA,CAAA,SAAA,CAAA,MAAA,GAAA,KAAA,CAAA,SAAA,CAAA,OAAA,CAAA;AAEA,MAAA,IAAA,CAAA,cAAA,IAAA,MAAA,CAAA,IAAA,CAAA,cAAA,CAAA,CAAA,MAAA,IAAA,CAAA;AAAA,QAAA,OAAA,IAAA,CAAA;AAEA,MAAA,IAAA,IAAA,GAAA,EAAA,CAAA;AACA,MAAA,IAAA,KAAA,CAAA,SAAA,KAAA,KAAA,EAAA;AACA,QAAA,IAAA,cAAA,CAAA,YAAA,KAAA,CAAA,EAAA;AACA,UAAA,IAAA,CAAA,IAAA,CAAA;AAAA,YAAA,KAAA,EAAA,cAAA,CAAA,YAAA;AACA,YAAA,IAAA,EAAA,cAAA;AACA,YAAA,SAAA,EAAA,EAAA,KAAA,EAAA,SAAA,EAAA;AACA,WAAA,CAAA,CAAA;AACA,SAAA;AAEA,QAAA,IAAA,cAAA,CAAA,SAAA,KAAA,CAAA,EAAA;AACA,UAAA,IAAA,CAAA,IAAA,CAAA;AAAA,YAAA,KAAA,EAAA,cAAA,CAAA,SAAA;AACA,YAAA,IAAA,EAAA,WAAA;AACA,YAAA,SAAA,EAAA,EAAA,KAAA,EAAA,SAAA,EAAA;AACA,WAAA,CAAA,CAAA;AACA,SAAA;AAEA,QAAA,IAAA,cAAA,CAAA,UAAA,KAAA,CAAA,EAAA;AACA,UAAA,IAAA,CAAA,IAAA,CAAA;AAAA,YAAA,KAAA,EAAA,cAAA,CAAA,UAAA;AACA,YAAA,IAAA,EAAA,YAAA;AACA,YAAA,SAAA,EAAA,EAAA,KAAA,EAAA,SAAA,EAAA;AACA,WAAA,CAAA,CAAA;AACA,SAAA;AAEA,QAAA,IAAA,cAAA,CAAA,WAAA,KAAA,CAAA,EAAA;AACA,UAAA,IAAA,CAAA,IAAA,CAAA;AAAA,YAAA,KAAA,EAAA,cAAA,CAAA,WAAA;AACA,YAAA,IAAA,EAAA,aAAA;AACA,YAAA,SAAA,EAAA,EAAA,KAAA,EAAA,SAAA,EAAA;AACA,WAAA,CAAA,CAAA;AACA,SAAA;AAEA,QAAA,IAAA,cAAA,CAAA,QAAA,KAAA,CAAA,EAAA;AACA,UAAA,IAAA,CAAA,IAAA,CAAA;AAAA,YAAA,KAAA,EAAA,cAAA,CAAA,QAAA;AACA,YAAA,IAAA,EAAA,UAAA;AACA,YAAA,SAAA,EAAA,EAAA,KAAA,EAAA,SAAA,EAAA;AACA,WAAA,CAAA,CAAA;AACA,SAAA;AAEA,QAAA,IAAA,cAAA,CAAA,SAAA,KAAA,CAAA,EAAA;AACA,UAAA,IAAA,CAAA,IAAA,CAAA;AAAA,YAAA,KAAA,EAAA,cAAA,CAAA,SAAA;AACA,YAAA,IAAA,EAAA,WAAA;AACA,YAAA,SAAA,EAAA,EAAA,KAAA,EAAA,SAAA,EAAA;AACA,WAAA,CAAA,CAAA;AACA,SAAA;AACA,OAAA,MAAA;AAEA,QAAA,IAAA,cAAA,CAAA,iBAAA,KAAA,CAAA,EAAA;AACA,UAAA,IAAA,CAAA,IAAA,CAAA;AAAA,YAAA,KAAA,EAAA,cAAA,CAAA,iBAAA;AACA,YAAA,IAAA,EAAA,mBAAA;AACA,YAAA,SAAA,EAAA,EAAA,KAAA,EAAA,SAAA,EAAA;AACA,WAAA,CAAA,CAAA;AACA,SAAA;AAEA,QAAA,IAAA,cAAA,CAAA,kBAAA,KAAA,CAAA,EAAA;AACA,UAAA,IAAA,CAAA,IAAA,CAAA;AAAA,YAAA,KAAA,EAAA,cAAA,CAAA,kBAAA;AACA,YAAA,IAAA,EAAA,oBAAA;AACA,YAAA,SAAA,EAAA,EAAA,KAAA,EAAA,SAAA,EAAA;AACA,WAAA,CAAA,CAAA;AACA,SAAA;AAEA,QAAA,IAAA,cAAA,CAAA,gBAAA,KAAA,CAAA,EAAA;AACA,UAAA,IAAA,CAAA,IAAA,CAAA;AAAA,YAAA,KAAA,EAAA,cAAA,CAAA,gBAAA;AACA,YAAA,IAAA,EAAA,kBAAA;AACA,YAAA,SAAA,EAAA,EAAA,KAAA,EAAA,SAAA,EAAA;AACA,WAAA,CAAA,CAAA;AACA,SAAA;AAEA,QAAA,IAAA,cAAA,CAAA,iBAAA,KAAA,CAAA,EAAA;AACA,UAAA,IAAA,CAAA,IAAA,CAAA;AAAA,YAAA,KAAA,EAAA,cAAA,CAAA,iBAAA;AACA,YAAA,IAAA,EAAA,mBAAA;AACA,YAAA,SAAA,EAAA,EAAA,KAAA,EAAA,SAAA,EAAA;AACA,WAAA,CAAA,CAAA;AACA,SAAA;AACA,OAAA;AAGA,MAAA,IAAA,KAAA,GAAA,CAAA,CAAA;AACA,MAAA,IAAA,CAAA,OAAA,CAAA,CAAA,IAAA,KAAA;AACA,QAAA,KAAA,IAAA,IAAA,CAAA,KAAA,CAAA;AAAA,OAAA,CAAA,CAAA;AAEA,MAAA,KAAA,CAAA,SAAA,GAAA,KAAA,CAAA;AACA,MAAA,KAAA,CAAA,QAAA,GAAA,KAAA,GAAA,UAAA,CAAA,KAAA,CAAA;AAEA,MAAA,OAAA;AAAA,QAAA,QAAA,EAAA,KAAA,CAAA,QAAA;AACA,QAAA,SAAA,EAAA,KAAA;AACA,QAAA,IAAA;AACA,OAAA,CAAA;AACA,KAAA,CAAA;AAGA,IAAA,MAAA,eAAA,GAAA,CAAA,MAAA,KAAA;AACA,MAAA,IAAA,CAAA,MAAA;AAAA,QAAA,OAAA,EAAA,CAAA;AACA,MAAA,MAAA,EAAA,SAAA,EAAA,IAAA,EAAA,GAAA,MAAA,CAAA;AAEA,MAAA,MAAA,cAAA,GAAA,QAAA,CAAA,KAAA,GAAA;AACA,QAAA,MAAA,EAAA,YAAA;AACA,QAAA,MAAA,EAAA,CAAA;AACA,OAAA,GAAA;AAEA,QAAA,IAAA,EAAA,QAAA;AACA,QAAA,MAAA,EAAA,UAAA;AACA,QAAA,IAAA,EAAA,KAAA;AACA,QAAA,GAAA,EAAA,QAAA;AACA,OAAA,CAAA;AAGA,MAAA,MAAA,MAAA,GAAA;AAAA,QAAA,MAAA,EAAA;AACA,UAAA,GAAA,cAAA;AACA,UAAA,SAAA,EAAA;AAEA,YAAA,KAAA,EAAA,SAAA;AACA,YAAA,QAAA,EAAA,EAAA;AACA,YAAA,IAAA,EAAA;AACA,cAAA,WAAA,EAAA;AACA,gBAAA,KAAA,EAAA,CAAA;AACA,gBAAA,MAAA,EAAA,EAAA;AACA,gBAAA,eAAA,EAAA;AACA,kBAAA,KAAA,EAAA,cAAA,EAAA;AACA,iBAAA;AACA,eAAA;AACA,cAAA,IAAA,EAAA;AACA,gBAAA,QAAA,EAAA,EAAA;AACA,gBAAA,UAAA,EAAA,EAAA;AACA,gBAAA,UAAA,EAAA,GAAA;AACA,gBAAA,KAAA,EAAA,MAAA,CAAA,KAAA,GAAA,SAAA,GAAA,SAAA;AACA,gBAAA,KAAA,EAAA,QAAA,CAAA,KAAA,GAAA,GAAA,GAAA,GAAA;AACA,eAAA;AACA,cAAA,IAAA,EAAA;AACA,gBAAA,QAAA,EAAA,EAAA;AACA,gBAAA,UAAA,EAAA,EAAA;AACA,gBAAA,UAAA,EAAA,GAAA;AACA,gBAAA,KAAA,EAAA,MAAA,CAAA,KAAA,GAAA,SAAA,GAAA,SAAA;AACA,gBAAA,KAAA,EAAA,QAAA,CAAA,KAAA,GAAA,GAAA,GAAA,GAAA;AACA,eAAA;AACA,cAAA,OAAA,EAAA;AACA,gBAAA,QAAA,EAAA,EAAA;AACA,gBAAA,UAAA,EAAA,EAAA;AACA,gBAAA,UAAA,EAAA,GAAA;AACA,gBAAA,KAAA,EAAA,MAAA,CAAA,KAAA,GAAA,SAAA,GAAA,SAAA;AACA,gBAAA,KAAA,EAAA,QAAA,CAAA,KAAA,GAAA,EAAA,GAAA,MAAA;AACA,eAAA;AACA,aAAA;AACA,WAAA;AACA,UAAA,SAAA,CAAA,IAAA,EAAA;AAEA,YAAA,MAAA,UAAA,GAAA,IAAA,CAAA,IAAA,CAAA,CAAA,CAAA,KAAA,CAAA,CAAA,IAAA,KAAA,IAAA,CAAA,CAAA;AACA,YAAA,IAAA,CAAA,UAAA;AAAA,cAAA,OAAA,EAAA,CAAA;AACA,YAAA,MAAA,KAAA,GAAAC,0BAAA,CAAA,UAAA,CAAA,KAAA,EAAA,CAAA,CAAA,CAAA;AACA,YAAA,MAAA,QAAA,GAAAC,2BAAA;AAAA,cAAA,UAAA,CAAA,KAAA,GAAA,UAAA,CAAA,KAAA;AACA,cAAA,CAAA;AACA,aAAA,CAAA;AAEA,YAAA,IAAA,OAAA,GAAA,CAAA,UAAA,CAAA,KAAA,GAAA,SAAA,GAAA,GAAA,EAAA,OAAA,CAAA,CAAA,CAAA,CAAA;AACA,YAAA,OAAA,CAAA,MAAA,EAAA,IAAA,CAAA,qBAAA,EAAA,KAAA,CAAA,EAAA,MAAA,CAAA,QAAA,CAAA,KAAA,CAAA,GAAA,CAAA,EAAA,EAAA,QAAA,CAAA,CAAA,CAAA,GAAA,EAAA,CAAA,UAAA,EAAA,OAAA,CAAA,EAAA,CAAA,CAAA;AAEA,WAAA;AACA,SAAA;AACA,QAAA,MAAA,EAAA;AAEA,UAAA;AACA,YAAA,IAAA,EAAA,KAAA;AACA,YAAA,MAAA,EAAA,QAAA,CAAA,KAAA,GAAA,CAAA,KAAA,EAAA,KAAA,CAAA,GAAA,CAAA,KAAA,EAAA,KAAA,CAAA;AACA,YAAA,MAAA,EAAA,QAAA,CAAA,KAAA,GAAA,CAAA,KAAA,EAAA,KAAA,CAAA,GAAA,CAAA,KAAA,EAAA,KAAA,CAAA;AACA,YAAA,iBAAA,EAAA,IAAA;AACA,YAAA,SAAA,EAAA;AACA,cAAA,IAAA,EAAA,KAAA;AACA,aAAA;AACA,YAAA,KAAA,EAAA;AACA,cAAA,IAAA,EAAA,KAAA;AACA,aAAA;AACA,YAAA,SAAA,EAAA;AACA,cAAA,YAAA,EAAA,CAAA;AACA,cAAA,WAAA,EAAA,MAAA;AACA,cAAA,WAAA,EAAA,CAAA;AACA,aAAA;AACA,YAAA,IAAA;AAEA,WAAA;AACA,SAAA;AACA,OAAA,CAAA;AAEA,MAAA,OAAA,MAAA,CAAA;AAAA,KAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/lib/packages/components/panel-option-open-interest/src/panel-option-open-interest.js

@@ -161,7 +161,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
             if (params2[0]) {
               seriesName0 = params2[0].seriesName.split(" ")[0];
               html += `
-            <div style="display: flex;justify-content: space-between;align-items: center;"><div style="margin-right: 40px;">${params2[0].marker} ${seriesName0}</div><div>${chartHelp.numberFormat(
+            <div style="display: flex;justify-content: space-between;align-items: center;"><div style="margin-right: 40px;">${params2[0].marker} ${seriesName0}</div><div>${chartHelp.thousandthFormat(
                 params2[0].data,
                 2
               )}</div></div>
@@ -170,7 +170,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
             if (params2[1]) {
               seriesName1 = params2[1].seriesName.split(" ")[0];
               html += `
-            <div style="display: flex;justify-content: space-between;align-items: center;"><div style="margin-right: 40px;">${params2[1].marker} ${seriesName1}</div><div>${chartHelp.numberFormat(
+            <div style="display: flex;justify-content: space-between;align-items: center;"><div style="margin-right: 40px;">${params2[1].marker} ${seriesName1}</div><div>${chartHelp.thousandthFormat(
                 params2[1].data,
                 2
               )}</div></div>
@@ -252,7 +252,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
         },
         series: [
           {
-            name: `Calls (${chartHelp.moneyFormat(chartHelp.numberFormat(openInterestCallTotal, 2))})`,
+            name: `Calls (${chartHelp.thousandthFormat(openInterestCallTotal)})`,
             type: "bar",
             stack: "optionGlobalOpenInterestbyStrike",
             color: "#F76560",
@@ -265,7 +265,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
             }
           },
           {
-            name: `Puts (${chartHelp.moneyFormat(chartHelp.numberFormat(openInterestPutTotal, 2))})`,
+            name: `Puts (${chartHelp.thousandthFormat(openInterestPutTotal)})`,
             type: "bar",
             stack: "optionGlobalOpenInterestbyStrike",
             color: "#94BFFF",
@@ -291,9 +291,9 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       }
       return option;
     };
-    const setOption = () => {
+    const chartOption = vue.computed(() => {
       return getEchartOption(getEchartData());
-    };
+    });
     return (_ctx, _cache) => {
       const _component_g_icon = vue.resolveComponent("g-icon");
       const _component_g_tooltip = vue.resolveComponent("g-tooltip");
@@ -351,7 +351,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                 [
                   vue.createVNode(_component_g_chart, {
                     class: "skew-chart",
-                    option: setOption()
+                    option: vue.unref(chartOption)
                   }, null, 8, ["option"])
                 ],
                 512

package/lib/packages/components/panel-option-open-interest/src/panel-option-open-interest.js.map

@@ -1 +1 @@
-{"version":3,"file":"panel-option-open-interest.js","sources":["../../../../../../../packages/components/panel-option-open-interest/src/panel-option-open-interest.vue"],"sourcesContent":["<template>\n  <div :class=\"[ns.b()]\">\n    <g-chart-panel\n      v-model:currency=\"currency\"\n      v-model:exchange=\"exchange\"\n      :loading=\"state.loadingFlag\"\n      @refresh=\"fetchData\"\n    >\n      <template #title>\n        <g-tooltip placement=\"bottom\">\n          {{ t('message.optionsOpenInterest') }}\n          <g-icon type=\"info_question_circle\" />\n          <template #title>\n            <div v-html=\"t('message.optionsOpenInterestTips')\"></div>\n          </template>\n        </g-tooltip>\n      </template>\n      <template #tool>\n        <span class=\"period-range h5-hide\"\n          >{{ t('message.expirationAsOf')\n          }}{{ timestampFormat(new Date(), '{y}/{m}/{d}') }}</span\n        >\n        <g-toggle-button\n          v-model=\"state.dataType\"\n          :options=\"dataTypeList\"\n        ></g-toggle-button>\n      </template>\n      <template #body>\n        <div class=\"echart\" ref=\"echart\">\n          <g-chart class=\"skew-chart\" :option=\"setOption()\"></g-chart>\n        </div>\n\n        <div class=\"footer-pcr\">\n          <g-tooltip placement=\"right\">\n            PCR:&nbsp;{{ numberFormat(state.pcr) }}\n            <g-icon type=\"info_question_circle\" />\n            <template #title>\n              <div v-html=\"t('message.cprTips')\"></div>\n            </template>\n          </g-tooltip>\n        </div>\n      </template>\n    </g-chart-panel>\n  </div>\n</template>\n<script lang=\"ts\" setup>\nimport { useNamespace, useDeviceType, useTheme } from '@greeks-live-ui/hooks';\nimport { reactive, onMounted, computed, watch } from 'vue';\nimport { useLocale } from '@greeks-live-ui/hooks';\n\nimport {\n  numberFormat,\n  timestampFormat,\n  moneyFormat,\n} from '@greeks-live-ui/utils/chartHelp';\nimport {\n  getOpenInterestStatistics,\n  IByStrikeItem,\n  IOpenInterestStatisticsRes,\n} from '@greeks-live-ui/utils/dataLab';\nimport {\n  panelOptionOpenInterestEmits,\n  panelOptionOpenInterestProps,\n} from './panel-option-open-interest';\n\ndefineOptions({\n  name: 'GPanelOptionOpenInterest',\n});\nconst props = defineProps(panelOptionOpenInterestProps);\nconst emit = defineEmits(panelOptionOpenInterestEmits);\n\nconst ns = useNamespace('panel-option-open-interest');\nconst { t } = useLocale();\nconst { isMobile } = useDeviceType();\nconst { isDark } = useTheme();\n\nconst dataTypeList = [\n  { value: 'expire', label: 'Expire' },\n  { value: 'strike', label: 'Strike' },\n];\n\nconst state = reactive({\n  loadingFlag: false,\n\n  exchange: props.exchange || props.defaultExchange || 'Deribit',\n  currency: props.currency || props.defaultCurrency || 'BTC',\n\n  dataType: 'expire',\n  pcr: 0,\n\n  usdTotal: '',\n  coinTotal: '',\n\n  chartData: {} as IOpenInterestStatisticsRes,\n});\n\nconst currency = computed({\n  get: () => props.currency || state.currency || 'BTC',\n  set: (newVal) => {\n    props.currency\n      ? emit('update:currency', newVal)\n      : (state.currency = newVal);\n  },\n});\n\nconst exchange = computed({\n  get: () => props.exchange || state.exchange || 'Deribit',\n  set: (newVal) => {\n    props.exchange\n      ? emit('update:exchange', newVal)\n      : (state.exchange = newVal);\n  },\n});\n\nwatch(currency, () => {\n  fetchData();\n});\n\nwatch(exchange, () => {\n  fetchData();\n});\n\nconst fetchData = () => {\n  state.loadingFlag = true;\n  getOpenInterestStatistics({ currency: currency.value })\n    .then((res) => {\n      if (res && res.code === 200) {\n        state.chartData = res.data as IOpenInterestStatisticsRes;\n      }\n    })\n    .finally(() => {\n      state.loadingFlag = false;\n    });\n};\n\nonMounted(() => {\n  fetchData();\n});\n\nconst getEchartData = () => {\n  let date: string[] = [];\n  let openInterestCall: number[] = [];\n  let openInterestCallTotal = 0;\n  let openInterestPut: number[] = [];\n  let openInterestPutTotal = 0;\n  let openInterestVolume: number[] = [];\n  let totalVolume = 0;\n  let openInterestRate: number[] = [];\n\n  if (state.dataType === 'strike') {\n    const data = state.chartData.by_strike || [];\n    data.forEach((item: IByStrikeItem) => {\n      date.push(`$${numberFormat(item.strike, 0)}`);\n\n      let callVolume = item.open_interest_call;\n      let putVolume = item.open_interest_put;\n      openInterestCall.push(callVolume);\n      openInterestCallTotal += callVolume;\n      openInterestPut.push(putVolume);\n      openInterestPutTotal += putVolume;\n    });\n  } else {\n    const data = state.chartData.by_expiry || [];\n    data.forEach((item) => {\n      date.push(timestampFormat(item.end_ts, '{m}/{d}') as string);\n\n      let callVolume = item.open_interest_call;\n      let putVolume = item.open_interest_put;\n      openInterestCall.push(callVolume);\n      openInterestCallTotal += callVolume;\n      openInterestPut.push(putVolume);\n      openInterestPutTotal += putVolume;\n\n      let sumVolume = callVolume + putVolume;\n      openInterestVolume.push(sumVolume);\n      totalVolume += sumVolume;\n    });\n\n    openInterestRate = openInterestVolume.map((item) => {\n      return (item / totalVolume) * 100;\n    });\n  }\n\n  state.pcr = openInterestPutTotal / openInterestCallTotal;\n\n  return {\n    date,\n    openInterestCallTotal,\n    openInterestCall,\n    openInterestPutTotal,\n    openInterestPut,\n    openInterestRate,\n  };\n};\n\nconst getEchartOption = (params: ReturnType<typeof getEchartData>) => {\n  if (!params) return {};\n  const {\n    date,\n    openInterestCallTotal,\n    openInterestCall,\n    openInterestPutTotal,\n    openInterestPut,\n    openInterestRate,\n  } = params;\n\n  const option = {\n    tooltip: {\n      trigger: 'axis',\n      axisPointer: {\n        // 坐标轴指示器，坐标轴触发有效\n        type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'\n        backgroundColor: isDark.value ? '#E9ECEF' : '#292F3D', // 浅色/Grey/14\n        textStyle: {\n          color: isDark.value ? '#000000' : '#FFFFFF', // 浅色/Grey/White\n          fontSize: 12,\n          lineHeight: 16,\n          fontWeight: 400,\n        },\n      },\n      formatter: function (\n        params: Array<{\n          axisValueLabel: string;\n          axisValue: string;\n          seriesName: string;\n          color: string;\n          value: number;\n          marker: string;\n          data: number;\n        }>\n      ) {\n        let seriesName0 = '';\n        let seriesName1 = '';\n        let html = `\n            <div style=\"display: flex;justify-content: space-between;align-items: center;\"><div>${params[0].axisValue}</div></div>\n        `;\n        if (params[0]) {\n          seriesName0 = params[0].seriesName.split(' ')[0];\n          html += `\n            <div style=\"display: flex;justify-content: space-between;align-items: center;\"><div style=\"margin-right: 40px;\">${\n              params[0].marker\n            } ${seriesName0}</div><div>${numberFormat(\n            params[0].data,\n            2\n          )}</div></div>\n          `;\n        }\n        if (params[1]) {\n          seriesName1 = params[1].seriesName.split(' ')[0];\n          html += `\n            <div style=\"display: flex;justify-content: space-between;align-items: center;\"><div style=\"margin-right: 40px;\">${\n              params[1].marker\n            } ${seriesName1}</div><div>${numberFormat(\n            params[1].data,\n            2\n          )}</div></div>\n          `;\n        }\n\n        if (params[0]?.data && params[1]?.data) {\n          html += `\n            <div style=\"display: flex;justify-content: space-between;align-items: center;\"><div style=\"margin-right: 40px;margin-left: 18px;\">PCR</div><div>${numberFormat(\n              params[1].data / params[0].data,\n              2\n            )}</div></div>\n          `;\n        }\n        return html;\n      },\n    },\n    legend: {\n      top: '3%',\n      textStyle: {\n        color: isDark.value ? '#ADB5BD' : '#596169', // 浅色/Grey/10 // 设置图例文字颜色\n      },\n    },\n    xAxis: {\n      type: 'category',\n      data: date,\n      axisLabel: {\n        // 坐标轴刻度标签\n        color: isDark.value ? '#CED4DA' : '#343A40', // 浅色/Grey/12\n        fontWeight: 400,\n        fontSize: 10,\n        rotate: state.dataType === 'strike' ? 90 : 0, // 倾斜度 -90 至 90 默认为0\n      },\n      axisTick: {\n        show: false, // 隐藏刻度线\n      },\n      axisLine: {\n        show: false, // 隐藏坐标轴轴线\n        lineStyle: {\n          color: isDark.value ? '#CED4DA' : '#343A40', // 线的颜色 浅色/Grey/12\n        },\n      },\n    },\n    yAxis: [\n      {\n        type: 'value',\n        name: `Open Interest(${currency.value})`,\n        nameLocation: 'end',\n        nameGap: -85,\n        nameRotate: 90,\n        nameTextStyle: {\n          color: isDark.value ? '#8B959F' : '#8B959F', // 浅色/Grey/8\n          fontWeight: 400,\n          fontSize: 10,\n        },\n        axisLabel: {\n          // 坐标轴刻度标签\n          show: true,\n          color: isDark.value ? '#CED4DA' : '#343A40', // 浅色/Grey/12\n          fontWeight: 400,\n          fontSize: 10,\n        },\n        axisLine: {\n          lineStyle: {\n            color: isDark.value ? '#CED4DA' : '#343A40', // 线的颜色 浅色/Grey/12\n          },\n        },\n        splitLine: {\n          lineStyle: {\n            color: isDark.value ? '#2B2F32' : '#F1F1F1', // 网格线颜色 浅色/Grey/3 '#F1F1F1'\n            width: 1, // 网格线宽度\n            type: 'dashed', // 网格线类型: 'solid', 'dashed', 'dotted'\n          },\n        },\n      },\n    ],\n    grid: {\n      left: 10,\n      right: 10,\n      bottom: 10,\n      containLabel: true,\n    },\n\n    series: [\n      {\n        name: `Calls (${moneyFormat(numberFormat(openInterestCallTotal, 2))})`,\n        type: 'bar',\n        // barWidth: '16px',\n        stack: 'optionGlobalOpenInterestbyStrike',\n        color: '#F76560',\n        emphasis: {\n          focus: 'series',\n        },\n        data: openInterestCall,\n        itemStyle: {\n          borderRadius: 0,\n        },\n      },\n      {\n        name: `Puts (${moneyFormat(numberFormat(openInterestPutTotal, 2))})`,\n        type: 'bar',\n        // barWidth: '16px',\n        stack: 'optionGlobalOpenInterestbyStrike',\n        color: '#94BFFF',\n        emphasis: {\n          focus: 'series',\n        },\n        data: openInterestPut,\n        itemStyle: {\n          borderRadius: 0,\n        },\n        label: {\n          show: state.dataType === 'strike' ? false : true,\n          position: 'top',\n          formatter: (params: { dataIndex: number }) => {\n            return numberFormat(openInterestRate[params.dataIndex], 2) + '%';\n          },\n        },\n      },\n    ],\n  };\n  if (isMobile.value) {\n    // 移动端显示圆点，防止showTip不触发\n    option.series = option.series.map((v) => ({ ...v, symbol: 'circle' }));\n  }\n  return option;\n};\n\nconst setOption = () => {\n  return getEchartOption(getEchartData());\n};\n</script>\n"],"names":["useNamespace","useLocale","useDeviceType","useTheme","reactive","computed","watch","getOpenInterestStatistics","onMounted","numberFormat","timestampFormat","params","moneyFormat"],"mappings":"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"}
+{"version":3,"file":"panel-option-open-interest.js","sources":["../../../../../../../packages/components/panel-option-open-interest/src/panel-option-open-interest.vue"],"sourcesContent":["<template>\n  <div :class=\"[ns.b()]\">\n    <g-chart-panel\n      v-model:currency=\"currency\"\n      v-model:exchange=\"exchange\"\n      :loading=\"state.loadingFlag\"\n      @refresh=\"fetchData\"\n    >\n      <template #title>\n        <g-tooltip placement=\"bottom\">\n          {{ t('message.optionsOpenInterest') }}\n          <g-icon type=\"info_question_circle\" />\n          <template #title>\n            <div v-html=\"t('message.optionsOpenInterestTips')\"></div>\n          </template>\n        </g-tooltip>\n      </template>\n      <template #tool>\n        <span class=\"period-range h5-hide\"\n          >{{ t('message.expirationAsOf')\n          }}{{ timestampFormat(new Date(), '{y}/{m}/{d}') }}</span\n        >\n        <g-toggle-button\n          v-model=\"state.dataType\"\n          :options=\"dataTypeList\"\n        ></g-toggle-button>\n      </template>\n      <template #body>\n        <div class=\"echart\" ref=\"echart\">\n          <g-chart class=\"skew-chart\" :option=\"chartOption\"></g-chart>\n        </div>\n\n        <div class=\"footer-pcr\">\n          <g-tooltip placement=\"right\">\n            PCR:&nbsp;{{ numberFormat(state.pcr) }}\n            <g-icon type=\"info_question_circle\" />\n            <template #title>\n              <div v-html=\"t('message.cprTips')\"></div>\n            </template>\n          </g-tooltip>\n        </div>\n      </template>\n    </g-chart-panel>\n  </div>\n</template>\n<script lang=\"ts\" setup>\nimport { useNamespace, useDeviceType, useTheme } from '@greeks-live-ui/hooks';\nimport { reactive, onMounted, computed, watch } from 'vue';\nimport { useLocale } from '@greeks-live-ui/hooks';\n\nimport {\n  numberFormat,\n  timestampFormat,\n  thousandthFormat,\n} from '@greeks-live-ui/utils/chartHelp';\nimport {\n  getOpenInterestStatistics,\n  IByStrikeItem,\n  IOpenInterestStatisticsRes,\n} from '@greeks-live-ui/utils/dataLab';\nimport {\n  panelOptionOpenInterestEmits,\n  panelOptionOpenInterestProps,\n} from './panel-option-open-interest';\n\ndefineOptions({\n  name: 'GPanelOptionOpenInterest',\n});\nconst props = defineProps(panelOptionOpenInterestProps);\nconst emit = defineEmits(panelOptionOpenInterestEmits);\n\nconst ns = useNamespace('panel-option-open-interest');\nconst { t } = useLocale();\nconst { isMobile } = useDeviceType();\nconst { isDark } = useTheme();\n\nconst dataTypeList = [\n  { value: 'expire', label: 'Expire' },\n  { value: 'strike', label: 'Strike' },\n];\n\nconst state = reactive({\n  loadingFlag: false,\n\n  exchange: props.exchange || props.defaultExchange || 'Deribit',\n  currency: props.currency || props.defaultCurrency || 'BTC',\n\n  dataType: 'expire',\n  pcr: 0,\n\n  usdTotal: '',\n  coinTotal: '',\n\n  chartData: {} as IOpenInterestStatisticsRes,\n});\n\nconst currency = computed({\n  get: () => props.currency || state.currency || 'BTC',\n  set: (newVal) => {\n    props.currency\n      ? emit('update:currency', newVal)\n      : (state.currency = newVal);\n  },\n});\n\nconst exchange = computed({\n  get: () => props.exchange || state.exchange || 'Deribit',\n  set: (newVal) => {\n    props.exchange\n      ? emit('update:exchange', newVal)\n      : (state.exchange = newVal);\n  },\n});\n\nwatch(currency, () => {\n  fetchData();\n});\n\nwatch(exchange, () => {\n  fetchData();\n});\n\nconst fetchData = () => {\n  state.loadingFlag = true;\n  getOpenInterestStatistics({ currency: currency.value })\n    .then((res) => {\n      if (res && res.code === 200) {\n        state.chartData = res.data as IOpenInterestStatisticsRes;\n      }\n    })\n    .finally(() => {\n      state.loadingFlag = false;\n    });\n};\n\nonMounted(() => {\n  fetchData();\n});\n\nconst getEchartData = () => {\n  let date: string[] = [];\n  let openInterestCall: number[] = [];\n  let openInterestCallTotal = 0;\n  let openInterestPut: number[] = [];\n  let openInterestPutTotal = 0;\n  let openInterestVolume: number[] = [];\n  let totalVolume = 0;\n  let openInterestRate: number[] = [];\n\n  if (state.dataType === 'strike') {\n    const data = state.chartData.by_strike || [];\n    data.forEach((item: IByStrikeItem) => {\n      date.push(`$${numberFormat(item.strike, 0)}`);\n\n      let callVolume = item.open_interest_call;\n      let putVolume = item.open_interest_put;\n      openInterestCall.push(callVolume);\n      openInterestCallTotal += callVolume;\n      openInterestPut.push(putVolume);\n      openInterestPutTotal += putVolume;\n    });\n  } else {\n    const data = state.chartData.by_expiry || [];\n    data.forEach((item) => {\n      date.push(timestampFormat(item.end_ts, '{m}/{d}') as string);\n\n      let callVolume = item.open_interest_call;\n      let putVolume = item.open_interest_put;\n      openInterestCall.push(callVolume);\n      openInterestCallTotal += callVolume;\n      openInterestPut.push(putVolume);\n      openInterestPutTotal += putVolume;\n\n      let sumVolume = callVolume + putVolume;\n      openInterestVolume.push(sumVolume);\n      totalVolume += sumVolume;\n    });\n\n    openInterestRate = openInterestVolume.map((item) => {\n      return (item / totalVolume) * 100;\n    });\n  }\n\n  state.pcr = openInterestPutTotal / openInterestCallTotal;\n\n  return {\n    date,\n    openInterestCallTotal,\n    openInterestCall,\n    openInterestPutTotal,\n    openInterestPut,\n    openInterestRate,\n  };\n};\n\nconst getEchartOption = (params: ReturnType<typeof getEchartData>) => {\n  if (!params) return {};\n  const {\n    date,\n    openInterestCallTotal,\n    openInterestCall,\n    openInterestPutTotal,\n    openInterestPut,\n    openInterestRate,\n  } = params;\n\n  const option = {\n    tooltip: {\n      trigger: 'axis',\n      axisPointer: {\n        // 坐标轴指示器，坐标轴触发有效\n        type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'\n        backgroundColor: isDark.value ? '#E9ECEF' : '#292F3D', // 浅色/Grey/14\n        textStyle: {\n          color: isDark.value ? '#000000' : '#FFFFFF', // 浅色/Grey/White\n          fontSize: 12,\n          lineHeight: 16,\n          fontWeight: 400,\n        },\n      },\n      formatter: function (\n        params: Array<{\n          axisValueLabel: string;\n          axisValue: string;\n          seriesName: string;\n          color: string;\n          value: number;\n          marker: string;\n          data: number;\n        }>\n      ) {\n        let seriesName0 = '';\n        let seriesName1 = '';\n        let html = `\n            <div style=\"display: flex;justify-content: space-between;align-items: center;\"><div>${params[0].axisValue}</div></div>\n        `;\n        if (params[0]) {\n          seriesName0 = params[0].seriesName.split(' ')[0];\n          html += `\n            <div style=\"display: flex;justify-content: space-between;align-items: center;\"><div style=\"margin-right: 40px;\">${\n              params[0].marker\n            } ${seriesName0}</div><div>${thousandthFormat(\n            params[0].data,\n            2\n          )}</div></div>\n          `;\n        }\n        if (params[1]) {\n          seriesName1 = params[1].seriesName.split(' ')[0];\n          html += `\n            <div style=\"display: flex;justify-content: space-between;align-items: center;\"><div style=\"margin-right: 40px;\">${\n              params[1].marker\n            } ${seriesName1}</div><div>${thousandthFormat(\n            params[1].data,\n            2\n          )}</div></div>\n          `;\n        }\n\n        if (params[0]?.data && params[1]?.data) {\n          html += `\n            <div style=\"display: flex;justify-content: space-between;align-items: center;\"><div style=\"margin-right: 40px;margin-left: 18px;\">PCR</div><div>${numberFormat(\n              params[1].data / params[0].data,\n              2\n            )}</div></div>\n          `;\n        }\n        return html;\n      },\n    },\n    legend: {\n      top: '3%',\n      textStyle: {\n        color: isDark.value ? '#ADB5BD' : '#596169', // 浅色/Grey/10 // 设置图例文字颜色\n      },\n    },\n    xAxis: {\n      type: 'category',\n      data: date,\n      axisLabel: {\n        // 坐标轴刻度标签\n        color: isDark.value ? '#CED4DA' : '#343A40', // 浅色/Grey/12\n        fontWeight: 400,\n        fontSize: 10,\n        rotate: state.dataType === 'strike' ? 90 : 0, // 倾斜度 -90 至 90 默认为0\n      },\n      axisTick: {\n        show: false, // 隐藏刻度线\n      },\n      axisLine: {\n        show: false, // 隐藏坐标轴轴线\n        lineStyle: {\n          color: isDark.value ? '#CED4DA' : '#343A40', // 线的颜色 浅色/Grey/12\n        },\n      },\n    },\n    yAxis: [\n      {\n        type: 'value',\n        name: `Open Interest(${currency.value})`,\n        nameLocation: 'end',\n        nameGap: -85,\n        nameRotate: 90,\n        nameTextStyle: {\n          color: isDark.value ? '#8B959F' : '#8B959F', // 浅色/Grey/8\n          fontWeight: 400,\n          fontSize: 10,\n        },\n        axisLabel: {\n          // 坐标轴刻度标签\n          show: true,\n          color: isDark.value ? '#CED4DA' : '#343A40', // 浅色/Grey/12\n          fontWeight: 400,\n          fontSize: 10,\n        },\n        axisLine: {\n          lineStyle: {\n            color: isDark.value ? '#CED4DA' : '#343A40', // 线的颜色 浅色/Grey/12\n          },\n        },\n        splitLine: {\n          lineStyle: {\n            color: isDark.value ? '#2B2F32' : '#F1F1F1', // 网格线颜色 浅色/Grey/3 '#F1F1F1'\n            width: 1, // 网格线宽度\n            type: 'dashed', // 网格线类型: 'solid', 'dashed', 'dotted'\n          },\n        },\n      },\n    ],\n    grid: {\n      left: 10,\n      right: 10,\n      bottom: 10,\n      containLabel: true,\n    },\n\n    series: [\n      {\n        name: `Calls (${thousandthFormat(openInterestCallTotal)})`,\n        type: 'bar',\n        // barWidth: '16px',\n        stack: 'optionGlobalOpenInterestbyStrike',\n        color: '#F76560',\n        emphasis: {\n          focus: 'series',\n        },\n        data: openInterestCall,\n        itemStyle: {\n          borderRadius: 0,\n        },\n      },\n      {\n        name: `Puts (${thousandthFormat(openInterestPutTotal)})`,\n        type: 'bar',\n        // barWidth: '16px',\n        stack: 'optionGlobalOpenInterestbyStrike',\n        color: '#94BFFF',\n        emphasis: {\n          focus: 'series',\n        },\n        data: openInterestPut,\n        itemStyle: {\n          borderRadius: 0,\n        },\n        label: {\n          show: state.dataType === 'strike' ? false : true,\n          position: 'top',\n          formatter: (params: { dataIndex: number }) => {\n            return numberFormat(openInterestRate[params.dataIndex], 2) + '%';\n          },\n        },\n      },\n    ],\n  };\n  if (isMobile.value) {\n    // 移动端显示圆点，防止showTip不触发\n    option.series = option.series.map((v) => ({ ...v, symbol: 'circle' }));\n  }\n  return option;\n};\n\nconst chartOption = computed(() => {\n  return getEchartOption(getEchartData());\n});\n</script>\n"],"names":["useNamespace","useLocale","useDeviceType","useTheme","reactive","computed","watch","getOpenInterestStatistics","onMounted","numberFormat","timestampFormat","params","thousandthFormat"],"mappings":"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"}

package/lib/packages/components/panel-option-trade-volume/src/panel-option-trade-volume.js

@@ -393,9 +393,9 @@ const _sfc_main = vue.defineComponent({
       }
       return option;
     };
-    const setOption = () => {
+    const chartOption = vue.computed(() => {
       return getEchartOption(getEchartData());
-    };
+    });
     return (_ctx, _cache) => {
       const _component_g_icon = vue.resolveComponent("g-icon");
       const _component_g_tooltip = vue.resolveComponent("g-tooltip");
@@ -494,7 +494,7 @@ const _sfc_main = vue.defineComponent({
                 [
                   vue.createVNode(_component_g_chart, {
                     class: "skew-chart",
-                    option: setOption()
+                    option: vue.unref(chartOption)
                   }, null, 8, ["option"])
                 ],
                 512

package/lib/packages/components/panel-option-trade-volume/src/panel-option-trade-volume.js.map

@@ -1 +1 @@
-{"version":3,"file":"panel-option-trade-volume.js","sources":["../../../../../../../packages/components/panel-option-trade-volume/src/panel-option-trade-volume.vue"],"sourcesContent":["<template>\n  <div :class=\"[ns.b()]\">\n    <g-chart-panel\n      v-model:currency=\"currency\"\n      v-model:exchange=\"exchange\"\n      :operations=\"[state.chartType]\"\n      :loading=\"state.loadingFlag\"\n      @refresh=\"fetchData\"\n      @operation=\"handleOperation\"\n    >\n      <template #title>\n        <g-tooltip placement=\"bottom\">\n          {{ t('message.optionTradeVolume') }}\n          <g-icon type=\"info_question_circle\" />\n          <template #title>\n            <div v-html=\"t('message.optionTradeVolumeTips')\"></div>\n          </template>\n        </g-tooltip>\n      </template>\n      <template #tool>\n        <!-- <g-select\n          v-model:value=\"state.period\"\n          @change=\"handleChangePeriod\"\n          :size=\"isPC ? 'small' : 'medium'\"\n          class=\"period-select\"\n        >\n          <g-select-option\n            v-for=\"periodItem in periodList\"\n            :value=\"periodItem.value\"\n            >{{ periodItem.label }}</g-select-option\n          >\n        </g-select> -->\n        <!-- <span class=\"period-range h5-hide\">{{ state.periodDateRange }}</span> -->\n        <div class=\"second-select\">\n          <span class=\"h5-hide\">\n            {{ t('message.timeGranularity') }}\n          </span>\n          <g-select\n            v-model:value=\"state.resolution\"\n            @change=\"changeResolution\"\n            :size=\"isPC ? 'small' : 'medium'\"\n          >\n            <g-select-option v-for=\"item in resolutionList\" :value=\"item.value\">\n              {{ item.label }}\n            </g-select-option>\n          </g-select>\n        </div>\n      </template>\n      <template #body>\n        <div class=\"echart\" ref=\"echart\">\n          <g-chart class=\"skew-chart\" :option=\"setOption()\"></g-chart>\n        </div>\n      </template>\n    </g-chart-panel>\n  </div>\n</template>\n<script lang=\"ts\" setup>\nimport {\n  useNamespace,\n  useLocale,\n  useDeviceType,\n  useTheme,\n} from '@greeks-live-ui/hooks';\nimport { reactive, onMounted, computed, watch } from 'vue';\n\n// import type { OperationType } from '../../chart-panel/src/chart-panel.vue';\n\nexport type OperationType =\n  | 'line'\n  | 'bar'\n  | 'calc'\n  | 'search'\n  | 'toggle'\n  | 'refresh'\n  | 'fullscreen'\n  | 'setting'\n  | 'share';\n\nimport {\n  numberFormat,\n  showDateRange,\n  timestampFormat,\n} from '@greeks-live-ui/utils/chartHelp';\nimport {\n  getOptionTradeVolume,\n  IOptionTradeVolumeRes,\n} from '@greeks-live-ui/utils/dataLab';\nimport {\n  panelOptionTradeVolumeEmits,\n  panelOptionTradeVolumeProps,\n} from './panel-option-trade-volume';\n\ndefineOptions({\n  name: 'GPanelOptionTradeVolume',\n});\nconst props = defineProps(panelOptionTradeVolumeProps);\nconst emit = defineEmits(panelOptionTradeVolumeEmits);\nconst ns = useNamespace('panel-option-trade-volume');\nconst { t } = useLocale();\nconst { isMobile, isPC } = useDeviceType();\nconst { isDark } = useTheme();\n\nlet legendList = [\n  {\n    value: '1D',\n    label: '1 D',\n    days: 1,\n    color: '#7630F7',\n  },\n  {\n    value: '7D',\n    label: '1 W',\n    days: 7,\n    color: '#23C343',\n  },\n  {\n    value: '1M',\n    label: '1 M',\n    days: 30,\n    color: '#FFD600',\n  },\n  {\n    value: '2M',\n    label: '2 M',\n    days: 60,\n    color: '#FF8D1F',\n  },\n  {\n    value: '3M',\n    label: '3 M',\n    days: 90,\n    color: '#FF3B30',\n  },\n  {\n    value: '6M',\n    label: '6 M',\n    days: 180,\n    color: '#007AFF',\n  },\n  {\n    value: '1Y',\n    label: '1 Y',\n    days: 365,\n    color: '#00C7BE',\n  },\n];\nconst periodList = computed(() => {\n  let list = [...legendList];\n  if (isMobile.value) {\n    list = list.slice(1);\n  }\n  return list;\n});\n\nconst resolutionList = [\n  {\n    label: '1min',\n    value: '1',\n  },\n  {\n    label: '5min',\n    value: '5',\n  },\n  {\n    label: '15min',\n    value: '15',\n  },\n  {\n    label: '30min',\n    value: '30',\n  },\n  {\n    label: '1H',\n    value: '60',\n  },\n  {\n    label: '1D',\n    value: '1D',\n  },\n];\n\nconst state = reactive({\n  loadingFlag: false,\n\n  exchange: props.exchange || props.defaultExchange || 'Deribit',\n  currency: props.currency || props.defaultCurrency || 'BTC',\n\n  period: '3M',\n  periodDateRange: '',\n  chartType: 'line' as OperationType,\n\n  resolution: '60',\n  start_timestamp: 0,\n  end_timestamp: 0,\n\n  chartData: {} as IOptionTradeVolumeRes,\n});\n\nconst currency = computed({\n  get: () => props.currency || state.currency || 'BTC',\n  set: (newVal) => {\n    props.currency\n      ? emit('update:currency', newVal)\n      : (state.currency = newVal);\n  },\n});\n\nconst exchange = computed({\n  get: () => props.exchange || state.exchange || 'Deribit',\n  set: (newVal) => {\n    props.exchange\n      ? emit('update:exchange', newVal)\n      : (state.exchange = newVal);\n  },\n});\n\nwatch(currency, () => {\n  fetchData();\n});\n\nwatch(exchange, () => {\n  fetchData();\n});\nconst fetchData = () => {\n  state.loadingFlag = true;\n  const params = {\n    currency: currency.value,\n    resolution: state.resolution,\n    start_timestamp: state.start_timestamp,\n    end_timestamp: state.end_timestamp,\n  };\n  getOptionTradeVolume(params)\n    .then((res) => {\n      if (res && res.code === 200) {\n        state.chartData = res.data as IOptionTradeVolumeRes;\n      }\n    })\n    .finally(() => {\n      state.loadingFlag = false;\n    });\n};\n\nonMounted(() => {\n  showPeriodDateRange();\n  changeResolution();\n});\n\nconst showPeriodDateRange = () => {\n  const selectedPeriod = periodList.value.find((v) => v.value === state.period);\n  if (!selectedPeriod) return;\n  state.periodDateRange = showDateRange(selectedPeriod.days);\n};\nconst handleChangePeriod = (value: string) => {\n  showPeriodDateRange();\n  fetchData();\n};\n\nconst changeResolution = () => {\n  let curTimestamp = new Date().getTime();\n  state.start_timestamp = curTimestamp - 500 * 24 * 3600000; // 500天\n  state.end_timestamp = curTimestamp;\n  fetchData();\n};\n\nconst handleOperation = (operation: OperationType) => {\n  if (operation === 'line') {\n    state.chartType = 'bar';\n  }\n  if (operation === 'bar') {\n    state.chartType = 'line';\n  }\n};\n\nconst getEchartData = () => {\n  const ticksList = state.chartData?.ticks || [];\n  const volumeBuyList = state.chartData?.volume_buy || [];\n  const volumeSellList = state.chartData?.volume_sell || [];\n\n  let buy_volume = [];\n  let sell_volume = [];\n\n  for (let i = 0; i < ticksList.length; i++) {\n    let item = ticksList[i];\n    buy_volume.push([item, volumeBuyList[i]]);\n    sell_volume.push([item, volumeSellList[i]]);\n  }\n\n  return {\n    buy_volume,\n    sell_volume,\n  };\n};\n\nconst getEchartOption = (params: ReturnType<typeof getEchartData>) => {\n  if (!params) return {};\n  const { buy_volume, sell_volume } = params;\n\n  const option: any = {\n    tooltip: {\n      trigger: 'axis',\n      axisPointer: {\n        // 坐标轴指示器，坐标轴触发有效\n        type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'\n      },\n      formatter: (\n        params: Array<{\n          axisValueLabel: string;\n          axisValue: string;\n          seriesName: string;\n          color: string;\n          value: number;\n          marker: string;\n          data: number[];\n        }>\n      ) => {\n        try {\n          let html = `\n            <div style=\"display: flex;justify-content: space-between;align-items: center;\">\n              <div>${timestampFormat(\n                params[0].axisValue,\n                '{y}/{m}/{d} {h}:{i}:{s}'\n              )}</div>\n            </div>\n            `;\n          if (params[0]) {\n            html += `<div style=\"display: flex;justify-content: space-between;align-items: center;\">\n                <div style=\"margin-right: 40px;\">${params[0].marker}&nbsp;${\n              params[0].seriesName\n            }</div>\n                <div>&nbsp;${numberFormat(params[0].data[1], 2)}</div>\n              </div>`;\n            if (params[1]) {\n              html += `<div style=\"display: flex;justify-content: space-between;align-items: center;\">\n                <div style=\"margin-right: 40px;\">${params[1].marker}&nbsp;${\n                params[1].seriesName\n              }</div>\n                <div>&nbsp;${numberFormat(params[1].data[1], 2)}</div>\n              </div>`;\n              html += `<div style=\"display: flex;justify-content: space-between;align-items: center;\">\n                <div style=\"margin-right: 40px;margin-left: 18px;\">Total</div>\n                <div>&nbsp;${numberFormat(\n                  parseFloat(String(params[0].data[1])) +\n                    parseFloat(String(params[1].data[1])),\n                  2\n                )}</div>\n              </div>`;\n            }\n          }\n          return html;\n        } catch (e) {\n          return '';\n        }\n      },\n      backgroundColor: isDark.value ? '#E9ECEF' : '#292F3D', // 浅色/Grey/14\n      textStyle: {\n        color: isDark.value ? '#000000' : '#FFFFFF', // 浅色/Grey/White\n        fontSize: 12,\n        lineHeight: 16,\n        fontWeight: 400,\n      },\n    },\n    legend: {\n      top: '3%',\n    },\n    xAxis: {\n      type: 'time',\n      boundaryGap: true,\n      // data: date,\n      axisLabel: {\n        // 坐标轴刻度标签\n        show: true,\n        color: isDark.value ? '#CED4DA' : '#343A40', // 浅色/Grey/12\n        fontWeight: 400,\n        fontSize: 10,\n        // rotate: state.dataType === 'strike' ? 90 : 0, // 倾斜度 -90 至 90 默认为0\n      },\n      axisTick: {\n        show: false, // 隐藏刻度线\n        lineStyle: {\n          color: isDark.value ? '#CED4DA' : '#343A40', // 线的颜色 浅色/Grey/12\n        },\n      },\n      axisLine: {\n        show: false, // 隐藏坐标轴轴线\n        lineStyle: {\n          color: isDark.value ? '#CED4DA' : '#343A40', // 线的颜色 浅色/Grey/12\n        },\n      },\n      splitLine: {\n        show: !isMobile.value && !isDark.value, // 显示 X 轴网格线\n        lineStyle: {\n          color: '#F1F1F1', // 网格线颜色\n          width: 1, // 网格线宽度\n          type: 'dotted', // 网格线类型: 'solid', 'dashed', 'dotted'\n        },\n      },\n    },\n    yAxis: {\n      type: 'value',\n      scale: true,\n      nameLocation: 'end',\n      nameGap: '20',\n      splitNumber: 6,\n      axisLabel: {\n        // 坐标轴刻度标签\n        show: true,\n        color: isDark.value ? '#CED4DA' : '#343A40', // 浅色/Grey/12\n        fontWeight: 400,\n        fontSize: 10,\n      },\n      axisLine: {\n        lineStyle: {\n          color: isDark.value ? '#CED4DA' : '#343A40', // 线的颜色 浅色/Grey/12\n        },\n      },\n      splitLine: {\n        lineStyle: {\n          color: isDark.value ? '#2B2F32' : '#F1F1F1', // 网格线颜色 浅色/Grey/3 '#F1F1F1'\n          width: 1, // 网格线宽度\n          type: 'solid', // 网格线类型: 'solid', 'dashed', 'dotted'\n        },\n      },\n    },\n    grid: {\n      top: 20,\n      left: 'left',\n      right: 27,\n      bottom: 70,\n      containLabel: true,\n    },\n    dataZoom: [\n      {\n        type: 'inside', //详细配置可见echarts官网\n        start: 80,\n        end: 100,\n        handleIcon:\n          'path://M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',\n      },\n      {\n        show: true,\n        type: 'slider',\n        // labelFormatter: (value) => {\n        //   console.log(value,'zzz')\n        //   return filters.timestampFormat2(value)\n        // },\n        rangeMode: 'percent',\n        bottom: '20px',\n        start: 80,\n        end: 100,\n        handleIcon:\n          'path://M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',\n      },\n    ],\n\n    series: [\n      {\n        name: 'Buy',\n        type: 'bar',\n        stack: 'total',\n        color: '#F76560',\n        data: buy_volume,\n        itemStyle: {\n          borderRadius: 0,\n        },\n      },\n      {\n        name: 'Sell',\n        type: 'bar',\n        stack: 'total',\n        color: '#4CD263',\n        data: sell_volume,\n        itemStyle: {\n          borderRadius: 0,\n        },\n      },\n    ],\n  };\n\n  if (state.chartType === 'line') {\n    option.series = [\n      {\n        name: 'Buy',\n        type: 'line',\n        color: '#F76560',\n        data: buy_volume,\n        symbol: 'none',\n      },\n      {\n        type: 'line',\n        name: 'Sell',\n        color: '#4CD263',\n        data: sell_volume,\n        symbol: 'none',\n      },\n    ];\n    option.legend = {\n      top: '3%',\n      icon: 'rect', // 使用矩形作为图标，使其看起来像短横线\n      itemWidth: 14, // 控制短横线的长度\n      itemHeight: 2, // 控制短横线的粗细 (高度)\n      itemGap: 16, // 控制图例项之间的间距 (可选)\n      textStyle: {\n        // 控制图例文本样式 (可选)\n        color: '#596169', // 文本颜色\n        fontSize: 12, // 文本字体大小\n      },\n      lineStyle: {\n        inactiveColor: isDark.value ? '#2B2F32' : '#DEE2E6', // 浅色/Grey/3 图例关闭时的线条描边颜色\n      },\n      inactiveColor: isDark.value ? '#495057' : '#BDC4CB', // 浅色/Grey/5 图例关闭时的颜色\n    };\n  }\n\n  return option;\n};\n\nconst setOption = () => {\n  return getEchartOption(getEchartData());\n};\n</script>\n"],"names":["useNamespace","useLocale","useDeviceType","useTheme","computed","reactive","watch","getOptionTradeVolume","onMounted","showDateRange","timestampFormat","params","numberFormat"],"mappings":"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"}
+{"version":3,"file":"panel-option-trade-volume.js","sources":["../../../../../../../packages/components/panel-option-trade-volume/src/panel-option-trade-volume.vue"],"sourcesContent":["<template>\n  <div :class=\"[ns.b()]\">\n    <g-chart-panel\n      v-model:currency=\"currency\"\n      v-model:exchange=\"exchange\"\n      :operations=\"[state.chartType]\"\n      :loading=\"state.loadingFlag\"\n      @refresh=\"fetchData\"\n      @operation=\"handleOperation\"\n    >\n      <template #title>\n        <g-tooltip placement=\"bottom\">\n          {{ t('message.optionTradeVolume') }}\n          <g-icon type=\"info_question_circle\" />\n          <template #title>\n            <div v-html=\"t('message.optionTradeVolumeTips')\"></div>\n          </template>\n        </g-tooltip>\n      </template>\n      <template #tool>\n        <!-- <g-select\n          v-model:value=\"state.period\"\n          @change=\"handleChangePeriod\"\n          :size=\"isPC ? 'small' : 'medium'\"\n          class=\"period-select\"\n        >\n          <g-select-option\n            v-for=\"periodItem in periodList\"\n            :value=\"periodItem.value\"\n            >{{ periodItem.label }}</g-select-option\n          >\n        </g-select> -->\n        <!-- <span class=\"period-range h5-hide\">{{ state.periodDateRange }}</span> -->\n        <div class=\"second-select\">\n          <span class=\"h5-hide\">\n            {{ t('message.timeGranularity') }}\n          </span>\n          <g-select\n            v-model:value=\"state.resolution\"\n            @change=\"changeResolution\"\n            :size=\"isPC ? 'small' : 'medium'\"\n          >\n            <g-select-option v-for=\"item in resolutionList\" :value=\"item.value\">\n              {{ item.label }}\n            </g-select-option>\n          </g-select>\n        </div>\n      </template>\n      <template #body>\n        <div class=\"echart\" ref=\"echart\">\n          <g-chart class=\"skew-chart\" :option=\"chartOption\"></g-chart>\n        </div>\n      </template>\n    </g-chart-panel>\n  </div>\n</template>\n<script lang=\"ts\" setup>\nimport {\n  useNamespace,\n  useLocale,\n  useDeviceType,\n  useTheme,\n} from '@greeks-live-ui/hooks';\nimport { reactive, onMounted, computed, watch } from 'vue';\n\n// import type { OperationType } from '../../chart-panel/src/chart-panel.vue';\n\nexport type OperationType =\n  | 'line'\n  | 'bar'\n  | 'calc'\n  | 'search'\n  | 'toggle'\n  | 'refresh'\n  | 'fullscreen'\n  | 'setting'\n  | 'share';\n\nimport {\n  numberFormat,\n  showDateRange,\n  timestampFormat,\n} from '@greeks-live-ui/utils/chartHelp';\nimport {\n  getOptionTradeVolume,\n  IOptionTradeVolumeRes,\n} from '@greeks-live-ui/utils/dataLab';\nimport {\n  panelOptionTradeVolumeEmits,\n  panelOptionTradeVolumeProps,\n} from './panel-option-trade-volume';\n\ndefineOptions({\n  name: 'GPanelOptionTradeVolume',\n});\nconst props = defineProps(panelOptionTradeVolumeProps);\nconst emit = defineEmits(panelOptionTradeVolumeEmits);\nconst ns = useNamespace('panel-option-trade-volume');\nconst { t } = useLocale();\nconst { isMobile, isPC } = useDeviceType();\nconst { isDark } = useTheme();\n\nlet legendList = [\n  {\n    value: '1D',\n    label: '1 D',\n    days: 1,\n    color: '#7630F7',\n  },\n  {\n    value: '7D',\n    label: '1 W',\n    days: 7,\n    color: '#23C343',\n  },\n  {\n    value: '1M',\n    label: '1 M',\n    days: 30,\n    color: '#FFD600',\n  },\n  {\n    value: '2M',\n    label: '2 M',\n    days: 60,\n    color: '#FF8D1F',\n  },\n  {\n    value: '3M',\n    label: '3 M',\n    days: 90,\n    color: '#FF3B30',\n  },\n  {\n    value: '6M',\n    label: '6 M',\n    days: 180,\n    color: '#007AFF',\n  },\n  {\n    value: '1Y',\n    label: '1 Y',\n    days: 365,\n    color: '#00C7BE',\n  },\n];\nconst periodList = computed(() => {\n  let list = [...legendList];\n  if (isMobile.value) {\n    list = list.slice(1);\n  }\n  return list;\n});\n\nconst resolutionList = [\n  {\n    label: '1min',\n    value: '1',\n  },\n  {\n    label: '5min',\n    value: '5',\n  },\n  {\n    label: '15min',\n    value: '15',\n  },\n  {\n    label: '30min',\n    value: '30',\n  },\n  {\n    label: '1H',\n    value: '60',\n  },\n  {\n    label: '1D',\n    value: '1D',\n  },\n];\n\nconst state = reactive({\n  loadingFlag: false,\n\n  exchange: props.exchange || props.defaultExchange || 'Deribit',\n  currency: props.currency || props.defaultCurrency || 'BTC',\n\n  period: '3M',\n  periodDateRange: '',\n  chartType: 'line' as OperationType,\n\n  resolution: '60',\n  start_timestamp: 0,\n  end_timestamp: 0,\n\n  chartData: {} as IOptionTradeVolumeRes,\n});\n\nconst currency = computed({\n  get: () => props.currency || state.currency || 'BTC',\n  set: (newVal) => {\n    props.currency\n      ? emit('update:currency', newVal)\n      : (state.currency = newVal);\n  },\n});\n\nconst exchange = computed({\n  get: () => props.exchange || state.exchange || 'Deribit',\n  set: (newVal) => {\n    props.exchange\n      ? emit('update:exchange', newVal)\n      : (state.exchange = newVal);\n  },\n});\n\nwatch(currency, () => {\n  fetchData();\n});\n\nwatch(exchange, () => {\n  fetchData();\n});\nconst fetchData = () => {\n  state.loadingFlag = true;\n  const params = {\n    currency: currency.value,\n    resolution: state.resolution,\n    start_timestamp: state.start_timestamp,\n    end_timestamp: state.end_timestamp,\n  };\n  getOptionTradeVolume(params)\n    .then((res) => {\n      if (res && res.code === 200) {\n        state.chartData = res.data as IOptionTradeVolumeRes;\n      }\n    })\n    .finally(() => {\n      state.loadingFlag = false;\n    });\n};\n\nonMounted(() => {\n  showPeriodDateRange();\n  changeResolution();\n});\n\nconst showPeriodDateRange = () => {\n  const selectedPeriod = periodList.value.find((v) => v.value === state.period);\n  if (!selectedPeriod) return;\n  state.periodDateRange = showDateRange(selectedPeriod.days);\n};\nconst handleChangePeriod = (value: string) => {\n  showPeriodDateRange();\n  fetchData();\n};\n\nconst changeResolution = () => {\n  let curTimestamp = new Date().getTime();\n  state.start_timestamp = curTimestamp - 500 * 24 * 3600000; // 500天\n  state.end_timestamp = curTimestamp;\n  fetchData();\n};\n\nconst handleOperation = (operation: OperationType) => {\n  if (operation === 'line') {\n    state.chartType = 'bar';\n  }\n  if (operation === 'bar') {\n    state.chartType = 'line';\n  }\n};\n\nconst getEchartData = () => {\n  const ticksList = state.chartData?.ticks || [];\n  const volumeBuyList = state.chartData?.volume_buy || [];\n  const volumeSellList = state.chartData?.volume_sell || [];\n\n  let buy_volume = [];\n  let sell_volume = [];\n\n  for (let i = 0; i < ticksList.length; i++) {\n    let item = ticksList[i];\n    buy_volume.push([item, volumeBuyList[i]]);\n    sell_volume.push([item, volumeSellList[i]]);\n  }\n\n  return {\n    buy_volume,\n    sell_volume,\n  };\n};\n\nconst getEchartOption = (params: ReturnType<typeof getEchartData>) => {\n  if (!params) return {};\n  const { buy_volume, sell_volume } = params;\n\n  const option: any = {\n    tooltip: {\n      trigger: 'axis',\n      axisPointer: {\n        // 坐标轴指示器，坐标轴触发有效\n        type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'\n      },\n      formatter: (\n        params: Array<{\n          axisValueLabel: string;\n          axisValue: string;\n          seriesName: string;\n          color: string;\n          value: number;\n          marker: string;\n          data: number[];\n        }>\n      ) => {\n        try {\n          let html = `\n            <div style=\"display: flex;justify-content: space-between;align-items: center;\">\n              <div>${timestampFormat(\n                params[0].axisValue,\n                '{y}/{m}/{d} {h}:{i}:{s}'\n              )}</div>\n            </div>\n            `;\n          if (params[0]) {\n            html += `<div style=\"display: flex;justify-content: space-between;align-items: center;\">\n                <div style=\"margin-right: 40px;\">${params[0].marker}&nbsp;${\n              params[0].seriesName\n            }</div>\n                <div>&nbsp;${numberFormat(params[0].data[1], 2)}</div>\n              </div>`;\n            if (params[1]) {\n              html += `<div style=\"display: flex;justify-content: space-between;align-items: center;\">\n                <div style=\"margin-right: 40px;\">${params[1].marker}&nbsp;${\n                params[1].seriesName\n              }</div>\n                <div>&nbsp;${numberFormat(params[1].data[1], 2)}</div>\n              </div>`;\n              html += `<div style=\"display: flex;justify-content: space-between;align-items: center;\">\n                <div style=\"margin-right: 40px;margin-left: 18px;\">Total</div>\n                <div>&nbsp;${numberFormat(\n                  parseFloat(String(params[0].data[1])) +\n                    parseFloat(String(params[1].data[1])),\n                  2\n                )}</div>\n              </div>`;\n            }\n          }\n          return html;\n        } catch (e) {\n          return '';\n        }\n      },\n      backgroundColor: isDark.value ? '#E9ECEF' : '#292F3D', // 浅色/Grey/14\n      textStyle: {\n        color: isDark.value ? '#000000' : '#FFFFFF', // 浅色/Grey/White\n        fontSize: 12,\n        lineHeight: 16,\n        fontWeight: 400,\n      },\n    },\n    legend: {\n      top: '3%',\n    },\n    xAxis: {\n      type: 'time',\n      boundaryGap: true,\n      // data: date,\n      axisLabel: {\n        // 坐标轴刻度标签\n        show: true,\n        color: isDark.value ? '#CED4DA' : '#343A40', // 浅色/Grey/12\n        fontWeight: 400,\n        fontSize: 10,\n        // rotate: state.dataType === 'strike' ? 90 : 0, // 倾斜度 -90 至 90 默认为0\n      },\n      axisTick: {\n        show: false, // 隐藏刻度线\n        lineStyle: {\n          color: isDark.value ? '#CED4DA' : '#343A40', // 线的颜色 浅色/Grey/12\n        },\n      },\n      axisLine: {\n        show: false, // 隐藏坐标轴轴线\n        lineStyle: {\n          color: isDark.value ? '#CED4DA' : '#343A40', // 线的颜色 浅色/Grey/12\n        },\n      },\n      splitLine: {\n        show: !isMobile.value && !isDark.value, // 显示 X 轴网格线\n        lineStyle: {\n          color: '#F1F1F1', // 网格线颜色\n          width: 1, // 网格线宽度\n          type: 'dotted', // 网格线类型: 'solid', 'dashed', 'dotted'\n        },\n      },\n    },\n    yAxis: {\n      type: 'value',\n      scale: true,\n      nameLocation: 'end',\n      nameGap: '20',\n      splitNumber: 6,\n      axisLabel: {\n        // 坐标轴刻度标签\n        show: true,\n        color: isDark.value ? '#CED4DA' : '#343A40', // 浅色/Grey/12\n        fontWeight: 400,\n        fontSize: 10,\n      },\n      axisLine: {\n        lineStyle: {\n          color: isDark.value ? '#CED4DA' : '#343A40', // 线的颜色 浅色/Grey/12\n        },\n      },\n      splitLine: {\n        lineStyle: {\n          color: isDark.value ? '#2B2F32' : '#F1F1F1', // 网格线颜色 浅色/Grey/3 '#F1F1F1'\n          width: 1, // 网格线宽度\n          type: 'solid', // 网格线类型: 'solid', 'dashed', 'dotted'\n        },\n      },\n    },\n    grid: {\n      top: 20,\n      left: 'left',\n      right: 27,\n      bottom: 70,\n      containLabel: true,\n    },\n    dataZoom: [\n      {\n        type: 'inside', //详细配置可见echarts官网\n        start: 80,\n        end: 100,\n        handleIcon:\n          'path://M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',\n      },\n      {\n        show: true,\n        type: 'slider',\n        // labelFormatter: (value) => {\n        //   console.log(value,'zzz')\n        //   return filters.timestampFormat2(value)\n        // },\n        rangeMode: 'percent',\n        bottom: '20px',\n        start: 80,\n        end: 100,\n        handleIcon:\n          'path://M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',\n      },\n    ],\n\n    series: [\n      {\n        name: 'Buy',\n        type: 'bar',\n        stack: 'total',\n        color: '#F76560',\n        data: buy_volume,\n        itemStyle: {\n          borderRadius: 0,\n        },\n      },\n      {\n        name: 'Sell',\n        type: 'bar',\n        stack: 'total',\n        color: '#4CD263',\n        data: sell_volume,\n        itemStyle: {\n          borderRadius: 0,\n        },\n      },\n    ],\n  };\n\n  if (state.chartType === 'line') {\n    option.series = [\n      {\n        name: 'Buy',\n        type: 'line',\n        color: '#F76560',\n        data: buy_volume,\n        symbol: 'none',\n      },\n      {\n        type: 'line',\n        name: 'Sell',\n        color: '#4CD263',\n        data: sell_volume,\n        symbol: 'none',\n      },\n    ];\n    option.legend = {\n      top: '3%',\n      icon: 'rect', // 使用矩形作为图标，使其看起来像短横线\n      itemWidth: 14, // 控制短横线的长度\n      itemHeight: 2, // 控制短横线的粗细 (高度)\n      itemGap: 16, // 控制图例项之间的间距 (可选)\n      textStyle: {\n        // 控制图例文本样式 (可选)\n        color: '#596169', // 文本颜色\n        fontSize: 12, // 文本字体大小\n      },\n      lineStyle: {\n        inactiveColor: isDark.value ? '#2B2F32' : '#DEE2E6', // 浅色/Grey/3 图例关闭时的线条描边颜色\n      },\n      inactiveColor: isDark.value ? '#495057' : '#BDC4CB', // 浅色/Grey/5 图例关闭时的颜色\n    };\n  }\n\n  return option;\n};\n\nconst chartOption = computed(() => {\n  return getEchartOption(getEchartData());\n});\n</script>\n"],"names":["useNamespace","useLocale","useDeviceType","useTheme","computed","reactive","watch","getOptionTradeVolume","onMounted","showDateRange","timestampFormat","params","numberFormat"],"mappings":"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"}

package/lib/packages/components/panel-rv/index.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 require('../../utils/index.js');
-var panelRv$1 = require('./src/panel-rv.js');
-var panelRv = require('./src/panel-rv2.js');
+var panelRv$1 = require('./src/panel-rv2.js');
+var panelRv = require('./src/panel-rv.js');
 var install = require('../../utils/vue/install.js');
 
 const GPanelRv = install.withInstall(panelRv$1["default"]);