greeks-live-ui 0.0.21 → 0.0.23

package/es/packages/components/panel-option-open-interest/src/panel-option-open-interest.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"panel-option-open-interest.mjs","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":["params"],"mappings":"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"}
+{"version":3,"file":"panel-option-open-interest.mjs","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":["params"],"mappings":"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"}

package/es/packages/components/panel-option-trade-volume/index.mjs

@@ -1,6 +1,6 @@
 import '../../utils/index.mjs';
-import PanelOptionTradeVolume from './src/panel-option-trade-volume.mjs';
-export { panelOptionTradeVolumeEmits, panelOptionTradeVolumeProps } from './src/panel-option-trade-volume2.mjs';
+import PanelOptionTradeVolume from './src/panel-option-trade-volume2.mjs';
+export { panelOptionTradeVolumeEmits, panelOptionTradeVolumeProps } from './src/panel-option-trade-volume.mjs';
 import { withInstall } from '../../utils/vue/install.mjs';
 
 const GPanelOptionTradeVolume = withInstall(PanelOptionTradeVolume);

package/es/packages/components/panel-option-trade-volume/src/panel-option-trade-volume.mjs

@@ -1,510 +1,28 @@
-import { defineComponent, computed, reactive, watch, onMounted, resolveComponent, openBlock, createElementBlock, normalizeClass, unref, createVNode, isRef, withCtx, createElementVNode, createTextVNode, toDisplayString, createCommentVNode, Fragment, renderList } from 'vue';
-import '../../../hooks/index.mjs';
-import { showDateRange, timestampFormat, numberFormat } from '../../../utils/chartHelp.mjs';
-import { getOptionTradeVolume } from '../../../utils/dataLab.mjs';
-import { panelOptionTradeVolumeProps, panelOptionTradeVolumeEmits } from './panel-option-trade-volume2.mjs';
-import _export_sfc from '../../../../_virtual/plugin-vue_export-helper.mjs';
-import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
-import { useLocale } from '../../../hooks/use-locale/index.mjs';
-import { useDeviceType } from '../../../hooks/use-device-type/index.mjs';
-import { useTheme } from '../../../hooks/use-theme/index.mjs';
+import '../../../utils/index.mjs';
+import { buildProps } from '../../../utils/vue/props/runtime.mjs';
 
-const _hoisted_1 = ["innerHTML"];
-const _hoisted_2 = { class: "second-select" };
-const _hoisted_3 = { class: "h5-hide" };
-const _hoisted_4 = {
-  class: "echart",
-  ref: "echart"
+const panelOptionTradeVolumeEmits = {
+  "update:currency": (currency) => true,
+  "update:exchange": (exchange) => true
 };
-const __default__ = {
-  name: "GPanelOptionTradeVolume"
-};
-const _sfc_main = defineComponent({
-  ...__default__,
-  props: panelOptionTradeVolumeProps,
-  emits: panelOptionTradeVolumeEmits,
-  setup(__props, { emit }) {
-    const props = __props;
-    const ns = useNamespace("panel-option-trade-volume");
-    const { t } = useLocale();
-    const { isMobile, isPC } = useDeviceType();
-    const { isDark } = useTheme();
-    let legendList = [
-      {
-        value: "1D",
-        label: "1 D",
-        days: 1,
-        color: "#7630F7"
-      },
-      {
-        value: "7D",
-        label: "1 W",
-        days: 7,
-        color: "#23C343"
-      },
-      {
-        value: "1M",
-        label: "1 M",
-        days: 30,
-        color: "#FFD600"
-      },
-      {
-        value: "2M",
-        label: "2 M",
-        days: 60,
-        color: "#FF8D1F"
-      },
-      {
-        value: "3M",
-        label: "3 M",
-        days: 90,
-        color: "#FF3B30"
-      },
-      {
-        value: "6M",
-        label: "6 M",
-        days: 180,
-        color: "#007AFF"
-      },
-      {
-        value: "1Y",
-        label: "1 Y",
-        days: 365,
-        color: "#00C7BE"
-      }
-    ];
-    const periodList = computed(() => {
-      let list = [...legendList];
-      if (isMobile.value) {
-        list = list.slice(1);
-      }
-      return list;
-    });
-    const resolutionList = [
-      {
-        label: "1min",
-        value: "1"
-      },
-      {
-        label: "5min",
-        value: "5"
-      },
-      {
-        label: "15min",
-        value: "15"
-      },
-      {
-        label: "30min",
-        value: "30"
-      },
-      {
-        label: "1H",
-        value: "60"
-      },
-      {
-        label: "1D",
-        value: "1D"
-      }
-    ];
-    const state = reactive({
-      loadingFlag: false,
-      exchange: props.exchange || props.defaultExchange || "Deribit",
-      currency: props.currency || props.defaultCurrency || "BTC",
-      period: "3M",
-      periodDateRange: "",
-      chartType: "line",
-      resolution: "60",
-      start_timestamp: 0,
-      end_timestamp: 0,
-      chartData: {}
-    });
-    const currency = computed({
-      get: () => props.currency || state.currency || "BTC",
-      set: (newVal) => {
-        props.currency ? emit("update:currency", newVal) : state.currency = newVal;
-      }
-    });
-    const exchange = computed({
-      get: () => props.exchange || state.exchange || "Deribit",
-      set: (newVal) => {
-        props.exchange ? emit("update:exchange", newVal) : state.exchange = newVal;
-      }
-    });
-    watch(currency, () => {
-      fetchData();
-    });
-    watch(exchange, () => {
-      fetchData();
-    });
-    const fetchData = () => {
-      state.loadingFlag = true;
-      const params = {
-        currency: currency.value,
-        resolution: state.resolution,
-        start_timestamp: state.start_timestamp,
-        end_timestamp: state.end_timestamp
-      };
-      getOptionTradeVolume(params).then((res) => {
-        if (res && res.code === 200) {
-          state.chartData = res.data;
-        }
-      }).finally(() => {
-        state.loadingFlag = false;
-      });
-    };
-    onMounted(() => {
-      showPeriodDateRange();
-      changeResolution();
-    });
-    const showPeriodDateRange = () => {
-      const selectedPeriod = periodList.value.find((v) => v.value === state.period);
-      if (!selectedPeriod)
-        return;
-      state.periodDateRange = showDateRange(selectedPeriod.days);
-    };
-    const handleChangePeriod = (value) => {
-      showPeriodDateRange();
-      fetchData();
-    };
-    const changeResolution = () => {
-      let curTimestamp = (/* @__PURE__ */ new Date()).getTime();
-      state.start_timestamp = curTimestamp - 500 * 24 * 36e5;
-      state.end_timestamp = curTimestamp;
-      fetchData();
-    };
-    const handleOperation = (operation) => {
-      if (operation === "line") {
-        state.chartType = "bar";
-      }
-      if (operation === "bar") {
-        state.chartType = "line";
-      }
-    };
-    const getEchartData = () => {
-      var _a, _b, _c;
-      const ticksList = ((_a = state.chartData) == null ? void 0 : _a.ticks) || [];
-      const volumeBuyList = ((_b = state.chartData) == null ? void 0 : _b.volume_buy) || [];
-      const volumeSellList = ((_c = state.chartData) == null ? void 0 : _c.volume_sell) || [];
-      let buy_volume = [];
-      let sell_volume = [];
-      for (let i = 0; i < ticksList.length; i++) {
-        let item = ticksList[i];
-        buy_volume.push([item, volumeBuyList[i]]);
-        sell_volume.push([item, volumeSellList[i]]);
-      }
-      return {
-        buy_volume,
-        sell_volume
-      };
-    };
-    const getEchartOption = (params) => {
-      if (!params)
-        return {};
-      const { buy_volume, sell_volume } = params;
-      const option = {
-        tooltip: {
-          trigger: "axis",
-          axisPointer: {
-            type: "shadow"
-          },
-          formatter: (params2) => {
-            try {
-              let html = `
-            <div style="display: flex;justify-content: space-between;align-items: center;">
-              <div>${timestampFormat(
-                params2[0].axisValue,
-                "{y}/{m}/{d} {h}:{i}:{s}"
-              )}</div>
-            </div>
-            `;
-              if (params2[0]) {
-                html += `<div style="display: flex;justify-content: space-between;align-items: center;">
-                <div style="margin-right: 40px;">${params2[0].marker}&nbsp;${params2[0].seriesName}</div>
-                <div>&nbsp;${numberFormat(params2[0].data[1], 2)}</div>
-              </div>`;
-                if (params2[1]) {
-                  html += `<div style="display: flex;justify-content: space-between;align-items: center;">
-                <div style="margin-right: 40px;">${params2[1].marker}&nbsp;${params2[1].seriesName}</div>
-                <div>&nbsp;${numberFormat(params2[1].data[1], 2)}</div>
-              </div>`;
-                  html += `<div style="display: flex;justify-content: space-between;align-items: center;">
-                <div style="margin-right: 40px;margin-left: 18px;">Total</div>
-                <div>&nbsp;${numberFormat(
-                    parseFloat(String(params2[0].data[1])) + parseFloat(String(params2[1].data[1])),
-                    2
-                  )}</div>
-              </div>`;
-                }
-              }
-              return html;
-            } catch (e) {
-              return "";
-            }
-          },
-          backgroundColor: isDark.value ? "#E9ECEF" : "#292F3D",
-          textStyle: {
-            color: isDark.value ? "#000000" : "#FFFFFF",
-            fontSize: 12,
-            lineHeight: 16,
-            fontWeight: 400
-          }
-        },
-        legend: {
-          top: "3%"
-        },
-        xAxis: {
-          type: "time",
-          boundaryGap: true,
-          axisLabel: {
-            show: true,
-            color: isDark.value ? "#CED4DA" : "#343A40",
-            fontWeight: 400,
-            fontSize: 10
-          },
-          axisTick: {
-            show: false,
-            lineStyle: {
-              color: isDark.value ? "#CED4DA" : "#343A40"
-            }
-          },
-          axisLine: {
-            show: false,
-            lineStyle: {
-              color: isDark.value ? "#CED4DA" : "#343A40"
-            }
-          },
-          splitLine: {
-            show: !isMobile.value && !isDark.value,
-            lineStyle: {
-              color: "#F1F1F1",
-              width: 1,
-              type: "dotted"
-            }
-          }
-        },
-        yAxis: {
-          type: "value",
-          scale: true,
-          nameLocation: "end",
-          nameGap: "20",
-          splitNumber: 6,
-          axisLabel: {
-            show: true,
-            color: isDark.value ? "#CED4DA" : "#343A40",
-            fontWeight: 400,
-            fontSize: 10
-          },
-          axisLine: {
-            lineStyle: {
-              color: isDark.value ? "#CED4DA" : "#343A40"
-            }
-          },
-          splitLine: {
-            lineStyle: {
-              color: isDark.value ? "#2B2F32" : "#F1F1F1",
-              width: 1,
-              type: "solid"
-            }
-          }
-        },
-        grid: {
-          top: 20,
-          left: "left",
-          right: 27,
-          bottom: 70,
-          containLabel: true
-        },
-        dataZoom: [
-          {
-            type: "inside",
-            start: 80,
-            end: 100,
-            handleIcon: "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"
-          },
-          {
-            show: true,
-            type: "slider",
-            rangeMode: "percent",
-            bottom: "20px",
-            start: 80,
-            end: 100,
-            handleIcon: "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"
-          }
-        ],
-        series: [
-          {
-            name: "Buy",
-            type: "bar",
-            stack: "total",
-            color: "#F76560",
-            data: buy_volume,
-            itemStyle: {
-              borderRadius: 0
-            }
-          },
-          {
-            name: "Sell",
-            type: "bar",
-            stack: "total",
-            color: "#4CD263",
-            data: sell_volume,
-            itemStyle: {
-              borderRadius: 0
-            }
-          }
-        ]
-      };
-      if (state.chartType === "line") {
-        option.series = [
-          {
-            name: "Buy",
-            type: "line",
-            color: "#F76560",
-            data: buy_volume,
-            symbol: "none"
-          },
-          {
-            type: "line",
-            name: "Sell",
-            color: "#4CD263",
-            data: sell_volume,
-            symbol: "none"
-          }
-        ];
-        option.legend = {
-          top: "3%",
-          icon: "rect",
-          itemWidth: 14,
-          itemHeight: 2,
-          itemGap: 16,
-          textStyle: {
-            color: "#596169",
-            fontSize: 12
-          },
-          lineStyle: {
-            inactiveColor: isDark.value ? "#2B2F32" : "#DEE2E6"
-          },
-          inactiveColor: isDark.value ? "#495057" : "#BDC4CB"
-        };
-      }
-      return option;
-    };
-    const setOption = () => {
-      return getEchartOption(getEchartData());
-    };
-    return (_ctx, _cache) => {
-      const _component_g_icon = resolveComponent("g-icon");
-      const _component_g_tooltip = resolveComponent("g-tooltip");
-      const _component_g_select_option = resolveComponent("g-select-option");
-      const _component_g_select = resolveComponent("g-select");
-      const _component_g_chart = resolveComponent("g-chart");
-      const _component_g_chart_panel = resolveComponent("g-chart-panel");
-      return openBlock(), createElementBlock(
-        "div",
-        {
-          class: normalizeClass([unref(ns).b()])
-        },
-        [
-          createVNode(_component_g_chart_panel, {
-            currency: unref(currency),
-            "onUpdate:currency": _cache[1] || (_cache[1] = ($event) => isRef(currency) ? currency.value = $event : null),
-            exchange: unref(exchange),
-            "onUpdate:exchange": _cache[2] || (_cache[2] = ($event) => isRef(exchange) ? exchange.value = $event : null),
-            operations: [state.chartType],
-            loading: state.loadingFlag,
-            onRefresh: fetchData,
-            onOperation: handleOperation
-          }, {
-            title: withCtx(() => [
-              createVNode(_component_g_tooltip, { placement: "bottom" }, {
-                title: withCtx(() => [
-                  createElementVNode("div", {
-                    innerHTML: unref(t)("message.optionTradeVolumeTips")
-                  }, null, 8, _hoisted_1)
-                ]),
-                default: withCtx(() => [
-                  createTextVNode(
-                    toDisplayString(unref(t)("message.optionTradeVolume")) + " ",
-                    1
-                  ),
-                  createVNode(_component_g_icon, { type: "info_question_circle" })
-                ]),
-                _: 1
-              })
-            ]),
-            tool: withCtx(() => [
-              createCommentVNode(` <g-select
-          v-model:value="state.period"
-          @change="handleChangePeriod"
-          :size="isPC ? 'small' : 'medium'"
-          class="period-select"
-        >
-          <g-select-option
-            v-for="periodItem in periodList"
-            :value="periodItem.value"
-            >{{ periodItem.label }}</g-select-option
-          >
-        </g-select> `),
-              createCommentVNode(' <span class="period-range h5-hide">{{ state.periodDateRange }}</span> '),
-              createElementVNode("div", _hoisted_2, [
-                createElementVNode(
-                  "span",
-                  _hoisted_3,
-                  toDisplayString(unref(t)("message.timeGranularity")),
-                  1
-                ),
-                createVNode(_component_g_select, {
-                  value: state.resolution,
-                  "onUpdate:value": _cache[0] || (_cache[0] = ($event) => state.resolution = $event),
-                  onChange: changeResolution,
-                  size: unref(isPC) ? "small" : "medium"
-                }, {
-                  default: withCtx(() => [
-                    (openBlock(), createElementBlock(
-                      Fragment,
-                      null,
-                      renderList(resolutionList, (item) => {
-                        return createVNode(_component_g_select_option, {
-                          value: item.value
-                        }, {
-                          default: withCtx(() => [
-                            createTextVNode(
-                              toDisplayString(item.label),
-                              1
-                            )
-                          ]),
-                          _: 2
-                        }, 1032, ["value"]);
-                      }),
-                      64
-                    ))
-                  ]),
-                  _: 1
-                }, 8, ["value", "size"])
-              ])
-            ]),
-            body: withCtx(() => [
-              createElementVNode(
-                "div",
-                _hoisted_4,
-                [
-                  createVNode(_component_g_chart, {
-                    class: "skew-chart",
-                    option: setOption()
-                  }, null, 8, ["option"])
-                ],
-                512
-              )
-            ]),
-            _: 1
-          }, 8, ["currency", "exchange", "operations", "loading"])
-        ],
-        2
-      );
-    };
+const panelOptionTradeVolumeProps = buildProps({
+  defaultCurrency: {
+    type: String,
+    required: false
+  },
+  defaultExchange: {
+    type: String,
+    required: false
+  },
+  currency: {
+    type: String,
+    required: false
+  },
+  exchange: {
+    type: String,
+    required: false
   }
 });
-var PanelOptionTradeVolume = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "/Users/luobowen/Desktop/greeks/greeks-live-ui/packages/components/panel-option-trade-volume/src/panel-option-trade-volume.vue"]]);
 
-export { PanelOptionTradeVolume as default };
+export { panelOptionTradeVolumeEmits, panelOptionTradeVolumeProps };
 //# sourceMappingURL=panel-option-trade-volume.mjs.map