greeks-live-ui 0.1.21 → 0.1.22

package/lib/packages/components/panel-volatility-term-structure/src/panel-volatility-term-structure2.js.map

@@ -1 +1 @@
-{"version":3,"file":"panel-volatility-term-structure2.js","sources":["../../../../../../../packages/components/panel-volatility-term-structure/src/panel-volatility-term-structure.ts"],"sourcesContent":["import { buildProps } from '@greeks-live-ui/utils'\nimport type PanelVolatilityTermStructure from './panel-volatility-term-structure.vue'\nimport type { ExtractPropTypes } from 'vue'\n\nexport const panelVolatilityTermStructureEmits = {\n  'update:currency': (currency: string) => true,\n  'update:exchange': (exchange: string) => true,\n}\nexport type PanelVolatilityTermStructureEmits = typeof panelVolatilityTermStructureEmits\nexport const panelVolatilityTermStructureProps = buildProps({\n  defaultCurrency: {\n    type: String,\n    required: false,\n  },\n  defaultExchange: {\n    type: String,\n    required: false,\n  },\n  currency: {\n    type: String,\n    required: false,\n  },\n  exchange: {\n    type: String,\n    required: false,\n  },\n})\nexport type PanelVolatilityTermStructureProps = ExtractPropTypes<typeof panelVolatilityTermStructureProps>\nexport type PanelVolatilityTermStructureInstance = InstanceType<typeof PanelVolatilityTermStructure>\n"],"names":["buildProps"],"mappings":";;;;;;;AAIO,MAAM,iCAAoC,GAAA;AAAA,EAC/C,iBAAA,EAAmB,CAAC,QAAqB,KAAA,IAAA;AAAA,EACzC,iBAAA,EAAmB,CAAC,QAAqB,KAAA,IAAA;AAC3C,EAAA;AAEO,MAAM,oCAAoCA,kBAAW,CAAA;AAAA,EAC1D,eAAiB,EAAA;AAAA,IACf,IAAM,EAAA,MAAA;AAAA,IACN,QAAU,EAAA,KAAA;AAAA,GACZ;AAAA,EACA,eAAiB,EAAA;AAAA,IACf,IAAM,EAAA,MAAA;AAAA,IACN,QAAU,EAAA,KAAA;AAAA,GACZ;AAAA,EACA,QAAU,EAAA;AAAA,IACR,IAAM,EAAA,MAAA;AAAA,IACN,QAAU,EAAA,KAAA;AAAA,GACZ;AAAA,EACA,QAAU,EAAA;AAAA,IACR,IAAM,EAAA,MAAA;AAAA,IACN,QAAU,EAAA,KAAA;AAAA,GACZ;AACF,CAAC;;;;;"}
+{"version":3,"file":"panel-volatility-term-structure2.js","sources":["../../../../../../../packages/components/panel-volatility-term-structure/src/panel-volatility-term-structure.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      :operations=\"operations\"\n      :showExchangeSelector=\"state.showChartCard\"\n      :currencyList=\"currencyList\"\n      @operation=\"handleToggleChartMatrix\"\n      @refresh=\"fetchData\"\n    >\n      <template #title>\n        {{ t('message.atmVolatilityTermStructure') }}\n        <g-tooltip placement=\"bottom\">\n          <g-icon name=\"info_question_circle\" />\n          <template #title>\n            <div class=\"greeks-panel-tip\" v-html=\"t('message.atmVolatilityTermStructureTips')\"></div>\n          </template>\n        </g-tooltip>\n      </template>\n\n      <template #tool>\n        <template v-if=\"state.showChartCard\">\n          <!-- <span class=\"filter-box h5-hide\">\n          <g-icon name=\"chart_filter\" :size=\"15\" />\n          </span> -->\n          <div class=\"period-controls\">\n            <span class=\"selector-label h5-hide\">{{ t('message.time') }}</span>\n            <span class=\"period-range h5-hide\">{{ state.endDateDisplay }}</span>\n            <g-page-turner\n              :prevDisabled=\"state.loadingFlag\"\n              :nextDisabled=\"state.loadingFlag || state.pageCount <= 0\"\n              @change=\"handlePageChange\"\n            />\n            <g-date-time-picker\n              v-model=\"state.selectedDateTime\"\n              @change=\"handleDateTimeChange\"\n            />\n          </div>\n        </template>\n      </template>\n      <template #body>\n        <div v-if=\"state.showChartCard\" class=\"echart\" ref=\"echart\">\n          <g-chart\n            class=\"skew-chart\"\n            :option=\"chartOption\"\n            @legendselectchanged=\"handleLegendSelectChanged\"\n          ></g-chart>\n        </div>\n        <div v-else class=\"fiv-matrix-table\">\n          <a-table\n            :columns=\"columns\"\n            :dataSource=\"dataSource\"\n            size=\"small\"\n            :pagination=\"false\"\n            :scroll=\"{ x: 600 }\"\n            class=\"no-zebra-table\"\n            :sticky=\"{ offsetHeader: 0 }\"\n          >\n            <template #bodyCell=\"{ column, record }\">\n              <template v-if=\"column.dataIndex !== 'rowLabel'\">\n                <div\n                  class=\"cell-content\"\n                  :style=\"{\n                    backgroundColor:\n                      record[column.dataIndex]?.color || 'transparent',\n                  }\"\n                >\n                  <template v-if=\"record[column.dataIndex]\">\n                    {{ record[column.dataIndex]?.value }}\n                    <span>({{ record[column.dataIndex]?.diffText }})</span>\n                  </template>\n                  <template v-else> - </template>\n                </div>\n              </template>\n            </template>\n          </a-table>\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, watch, computed } from 'vue';\nimport dayjs from 'dayjs';\n\nimport { numberFormat, showEndDateTime } from '@greeks-live-ui/utils/chartHelp';\nimport {\n  getAtmData,\n  IAtmDataRes,\n  getForwardIVMatrix,\n  IForwardIVMatrixCell,\n  IForwardIVMatrixExpiryItem,\n} from '@greeks-live-ui/utils/dataLab';\nimport {\n  panelVolatilityTermStructureEmits,\n  panelVolatilityTermStructureProps,\n} from './panel-volatility-term-structure';\n\ndefineOptions({\n  name: 'GPanelVolatilityTermStructure',\n});\nconst props = defineProps(panelVolatilityTermStructureProps);\nconst emit = defineEmits(panelVolatilityTermStructureEmits);\nconst ns = useNamespace('panel-volatility-term-structure');\nconst { t } = useLocale();\nconst { isMobile, isPC } = useDeviceType();\nconst { isDark } = useTheme();\n\nconst state = reactive({\n  loadingFlag: false,\n  toolTipTitle: '',\n  showChartCard: true,\n\n  exchange: props.exchange || props.defaultExchange || 'Deribit',\n  currency: props.currency || props.defaultCurrency || 'BTC',\n\n  period: '3M',\n  pageCount: 0,\n  // periodDateRange: '',\n  selectedDateTime: dayjs(),\n  endDateDisplay: '',\n\n  skewData: [] as IAtmDataRes[],\n  forwardIVMatrixData: [] as (IForwardIVMatrixCell | null)[][],\n  forwardIVExpiries: [] as IForwardIVMatrixExpiryItem[], // 存储到期日信息\n  legendSelected: {} as Record<string, boolean>, // 保存用户的图例选中状态\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\nconst currencyList = computed(() => {\n  return state.showChartCard\n    ? undefined\n    : [\n        { value: 'BTC', label: 'BTC', icon: 'currency_btc' },\n        { value: 'ETH', label: 'ETH', icon: 'currency_eth' },\n      ];\n});\n\nwatch(currency, () => {\n  // 重置图例选中状态，因为不同币种支持的期限可能不同\n  state.legendSelected = {};\n  if (\n    !state.showChartCard &&\n    currency.value !== 'BTC' &&\n    currency.value !== 'ETH'\n  ) {\n    state.showChartCard = true;\n  }\n  fetchData();\n});\n\nwatch(exchange, () => {\n  // 重置图例选中状态，因为不同交易所支持的期限不同\n  state.legendSelected = {};\n  if (exchange.value.toLowerCase() !== 'deribit') {\n    state.showChartCard = true;\n  }\n  fetchData();\n});\n\nconst fetchData = () => {\n  state.loadingFlag = true;\n\n  if (state.showChartCard) {\n    getAtmData({\n      currency: currency.value,\n      // page_num: state.pageCount,\n      end_timestamp: state.selectedDateTime.valueOf(),\n      exchange: exchange.value,\n    })\n      .then((res) => {\n        if (res && res.code === 200) {\n          state.skewData = res.data || [];\n        }\n      })\n      .finally(() => {\n        state.loadingFlag = false;\n      });\n  } else {\n    getForwardIVMatrix({\n      currency: currency.value,\n      exchange: exchange.value,\n    })\n      .then((matrixRes) => {\n        if (matrixRes && matrixRes.code === 200) {\n          const data = matrixRes.data || { expiries: [], matrix: [] };\n          state.forwardIVMatrixData = data.matrix;\n          state.forwardIVExpiries = data.expiries.map((item) => ({\n            label: item.label,\n            day: item.day,\n          }));\n        } else {\n          state.forwardIVMatrixData = [];\n          state.forwardIVExpiries = [];\n        }\n      })\n      .finally(() => {\n        state.loadingFlag = false;\n      });\n  }\n};\n\nfunction parseExpiryLabel(label: string, remainDays: number) {\n  // Label is already in clean format: \"12DEC25\", just append days\n  return `${label}(${remainDays})`;\n}\n\nonMounted(() => {\n  fetchData();\n  getDateTimeRange();\n});\n\nconst operations = computed(() => {\n  if (\n    ['BTC', 'ETH'].includes(currency.value) &&\n    exchange.value.toLowerCase() === 'deribit'\n  ) {\n    if (state.showChartCard) {\n      return ['toggle'];\n    } else {\n      return ['line'];\n    }\n  }\n  return [];\n});\n\nconst handleToggleChartMatrix = () => {\n  state.showChartCard = !state.showChartCard;\n  fetchData();\n};\nconst handleLegendSelectChanged = (params: any) => {\n  // 保存用户的图例选中状态\n  state.legendSelected = params.selected;\n};\n\nconst columns = computed(() => {\n  // 第一列是行头\n  const cols: any[] = [\n    {\n      title: 'Day',\n      dataIndex: 'rowLabel',\n      key: 'rowLabel',\n      align: 'left',\n      fixed: 'left',\n      width: 100,\n    },\n  ];\n  // 其余为上三角，首列省略\n  state.forwardIVExpiries.slice(1).forEach((exp, i) => {\n    cols.push({\n      title: parseExpiryLabel(exp.label, exp.day),\n      dataIndex: `col${i + 1}`,\n      key: `col${i + 1}`,\n      align: 'center',\n      width: 100,\n    });\n  });\n  return cols;\n});\n\nconst dataSource = computed(() => {\n  // 行头和列头都要省略第一个\n  return state.forwardIVExpiries.map((exp, rowIdx) => {\n    const row: any = {\n      rowLabel: parseExpiryLabel(exp.label, exp.day),\n    };\n    for (let colIdx = 0; colIdx < state.forwardIVExpiries.length; colIdx++) {\n      if (colIdx <= rowIdx) {\n        row[`col${colIdx}`] = null;\n      } else {\n        const cell = state.forwardIVMatrixData?.[rowIdx]?.[colIdx];\n        if (cell) {\n          row[`col${colIdx}`] = {\n            value: numberFormat(cell.Value, 2),\n            diff: cell.Diff,\n            diffText: `${cell.Diff >= 0 ? '+' : ''}${numberFormat(\n              cell.Diff,\n              2\n            )}`,\n            color: getColorByDiff(cell.Diff),\n          };\n        } else {\n          row[`col${colIdx}`] = null;\n        }\n      }\n    }\n    return row;\n  });\n});\n\n// 根据差值计算颜色\nconst getColorByDiff = (diff: number) => {\n  if (diff > 0) {\n    // 正值为绿色\n    const intensity = Math.min(diff / 10, 1); // 控制绿色强度\n    return `rgba(123, 225, 136, ${intensity})`;\n  } else if (diff < 0) {\n    // 负值为红色\n    const intensity = Math.min(Math.abs(diff) / 10, 1); // 控制红色强度\n    return `rgba(251, 172, 163, ${intensity})`;\n  }\n  return 'transparent';\n};\n\nconst getDateTimeRange = () => {\n  // 只显示截止时间，pageCount为0时是当天，1为前一天\n  const endTime = state.selectedDateTime || dayjs();\n  state.endDateDisplay = showEndDateTime(endTime);\n};\nconst handlePageChange = (direction: 'prev' | 'next') => {\n  if (direction === 'prev') {\n    state.pageCount++;\n    state.selectedDateTime = dayjs(state.selectedDateTime).subtract(1, 'day');\n  } else {\n    if (state.pageCount <= 0) {\n      return;\n    }\n    state.pageCount--;\n    state.selectedDateTime = dayjs(state.selectedDateTime).add(1, 'day');\n  }\n  getDateTimeRange();\n  fetchData();\n};\n\nconst handleDateTimeChange = (value: any) => {\n  state.selectedDateTime = value;\n  // 根据用户选择的时间自动计算 pageCount\n  const now = dayjs();\n  const selectedTime = dayjs(value);\n  const diffInDays = now.diff(selectedTime, 'day');\n\n  // 如果选择的时间在当前时间前24h内，pageCount为0\n  // 否则，pageCount为相差的天数\n  state.pageCount = Math.max(0, diffInDays);\n  getDateTimeRange();\n  fetchData();\n};\n\nconst getEchartData = () => {\n  const data = [...state.skewData];\n\n  let atmIvData: number[] = [];\n  let fwdIvData: number[] = [];\n  let date: string[] = [];\n\n  data.forEach((item) => {\n    let list = item.list;\n    let atmIndex = item.atm_index;\n\n    atmIvData.push(numberFormat(list[atmIndex].iv, 2));\n    fwdIvData.push(numberFormat(list[atmIndex].fwd_iv, 2));\n    date.push(item.underlying_index.split('-')[1]);\n  });\n\n  return {\n    date,\n\n    atmIvData,\n    fwdIvData,\n  };\n};\n\nconst getEchartOption = (params: {\n  date: string[];\n  atmIvData: number[];\n  fwdIvData: number[];\n}) => {\n  const {\n    date,\n\n    atmIvData,\n    fwdIvData,\n  } = params;\n\n  const option = {\n    color: ['#7630F7', '#23C343'],\n\n    tooltip: {\n      // trigger: isMobile.value ? 'none' : 'axis',\n      trigger: 'axis',\n      axisPointer: {\n        type: 'cross',\n        label: {\n          show: isMobile.value ? true : false, // 标签显示\n          backgroundColor: '#DEE2E6',\n          color: '#343A40',\n          padding: [4, 6, 4, 6],\n          margin: 9,\n        },\n        crossStyle: {\n          // 十字准星X轴指示器样式\n          color: '#8B959F',\n        },\n        lineStyle: {\n          // 十字准星Y轴指示器样式\n          color: '#8B959F',\n        },\n      },\n\n      backgroundColor: isDark.value ? '#E9ECEF' : '#292F3D', // 浅色/Grey/14\n      padding: [6, 8, 5, 6],\n      textStyle: {\n        color: isDark.value ? '#000000' : '#FFFFFF', // 浅色/Grey/White\n        fontSize: 12,\n        lineHeight: 16,\n        fontWeight: 400,\n      },\n\n      formatter: (\n        params: Array<{\n          axisValueLabel: string;\n          seriesName: string;\n          color: string;\n          value: number;\n        }>\n      ) => {\n        let content = '';\n        state.toolTipTitle = params[0].axisValueLabel;\n        content += `<div class=\"chart-tooltip-box\"><div style=\"margin-bottom:4px;\">${state.toolTipTitle}</div> `;\n\n        params.forEach(\n          (param: {\n            axisValueLabel: string;\n            seriesName: string;\n            color: string;\n            value: number;\n          }) => {\n            content += `\n            <div class=\"chart-tooltip\">\n              <div>\n                <span class=\"chart-tooltip-line\" style=\"background-color:${\n                  param.color\n                };\"></span>\n                <span>${param.seriesName}</span>\n              </div>\n              <span class=\"chart-tooltip-value\">${param.value.toFixed(2)}</span>\n            </div>\n          `;\n          }\n        );\n        return content + '</div>';\n      },\n    },\n    axisPointer: {\n      type: 'line', // 显示指示线\n      label: {\n        show: true, // 显示指示线上的标签\n        backgroundColor: '#DEE2E6', // 标签背景颜色\n        color: '#343A40',\n        fontSize: 10,\n        padding: [4, 6, 4, 8],\n      },\n      // lineStyle: {\n      //   type: 'dashed', // 虚线\n      //   color: 'red'   // 线的颜色\n      // }\n    },\n    legend: {\n      // ...returnLegendStyle('line'),\n      show: true,\n\n      // left: 0,\n      icon: 'rect', // 使用矩形作为图标，使其看起来像短横线\n      itemWidth: 14, // 控制短横线的长度\n      itemHeight: 2, // 控制短横线的粗细 (高度)\n      itemGap: 16, // 控制图例项之间的间距 (可选)\n      textStyle: {\n        // 控制图例文本样式 (可选)\n        color: isDark.value ? '#ADB5BD' : '#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      data: [\n        {\n          name: 'ATM IV',\n        },\n        {\n          name: 'FWD IV',\n          icon: 'path://M234.666667 490.666667h-153.6a25.6 25.6 0 1 0 0 51.2h153.6a25.6 25.6 0 1 0 0-51.2zM473.6 490.666667h-153.6a25.6 25.6 0 1 0 0 51.2h153.6a25.6 25.6 0 1 0 0-51.2zM934.4 490.666667h-136.533333a25.6 25.6 0 1 0 0 51.2h136.533333a25.6 25.6 0 1 0 0-51.2zM712.533333 490.666667h-153.6a25.6 25.6 0 1 0 0 51.2h153.6a25.6 25.6 0 1 0 0-51.2z', // 虚线图例\n        },\n      ],\n      selected: Object.keys(state.legendSelected).length > 0\n        ? state.legendSelected\n        : undefined,\n    },\n    xAxis: {\n      type: 'category',\n      data: date,\n      // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],\n      axisTick: {\n        show: false, // 隐藏刻度线\n      },\n      axisLabel: {\n        // 坐标轴刻度标签\n        color: isDark.value ? '#CED4DA' : '#343A40', // 浅色/Grey/12\n        fontWeight: 400,\n        fontSize: 10,\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: 'solid', // 网格线类型: 'solid', 'dashed', 'dotted'\n        },\n      },\n    },\n    yAxis: {\n      type: 'value',\n      scale: true,\n      axisLabel: {\n        // 坐标轴刻度标签\n        show: true,\n        color: isDark.value ? '#CED4DA' : '#343A40', // 浅色/Grey/12\n        fontWeight: 400,\n        fontSize: 10,\n      },\n      name: 'IV(%)',\n      nameLocation: 'end',\n      nameGap: 10,\n      nameRotate: 0,\n      nameTextStyle: {\n        color: isDark.value ? '#8B959F' : '#8B959F', // 浅色/Grey/8\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: 30,\n      bottom: 20,\n      left: 35,\n      right: 22,\n    },\n    series: [\n      {\n        name: 'ATM IV',\n        data: atmIvData,\n        type: 'line',\n        smooth: true,\n        showSymbol: true,\n      },\n      {\n        name: 'FWD IV',\n        data: fwdIvData,\n        type: 'line',\n        smooth: true,\n        showSymbol: true,\n        itemStyle: {\n          normal: {\n            lineStyle: {\n              type: 'dashed', //'dotted'虚线 'solid'实线\n            },\n          },\n        },\n      },\n    ],\n  };\n  return option;\n};\n\nconst chartOption = computed(() => {\n  return getEchartOption(getEchartData());\n});\n</script>\n"],"names":["useNamespace","useLocale","useDeviceType","useTheme","reactive","dayjs","computed","watch","getAtmData","getForwardIVMatrix","onMounted","numberFormat","showEndDateTime","params"],"mappings":"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"}

package/lib/packages/components/panel-vrp/src/panel-vrp.js

@@ -95,154 +95,6 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
         props.exchange ? emit("update:exchange", newVal) : state.exchange = newVal;
       }
     });
-    const selectedPeriodDays = vue.computed(() => {
-      var _a, _b;
-      return (_b = (_a = periodList.find((item) => item.value === state.period)) == null ? void 0 : _a.days) != null ? _b : 0;
-    });
-    const filterChartDataByPeriod = (chartData, days) => {
-      if (!days) {
-        return chartData;
-      }
-      const cutoff = Date.now() - days * 24 * 60 * 60 * 1e3;
-      return chartData.filter((item) => item.datetime >= cutoff);
-    };
-    const filteredChartData = vue.computed(
-      () => filterChartDataByPeriod(state.chartData, selectedPeriodDays.value)
-    );
-    const getVolTenorResolution = (volTenor) => {
-      switch (volTenor) {
-        case "1D":
-          return 1;
-        case "3D":
-          return 3;
-        case "7D":
-          return 7;
-        case "15D":
-          return 15;
-        case "1M":
-          return 30;
-        case "3M":
-          return 90;
-        default:
-          return 15;
-      }
-    };
-    const buildVrpSeries = (chartData, volTenor) => {
-      const resolution = getVolTenorResolution(volTenor);
-      const vrpData = [];
-      chartData.forEach((item) => {
-        item.data.forEach((dataItem) => {
-          if (dataItem.day === resolution) {
-            vrpData.push([item.datetime, dataItem.iv - dataItem.rv]);
-          }
-        });
-      });
-      return vrpData;
-    };
-    const formatVrpPercent = (value, fractionDigits = 1) => {
-      if (value == null || !Number.isFinite(value)) {
-        return "-";
-      }
-      const fixed = Number(value).toFixed(fractionDigits);
-      if (Number(fixed) === 0) {
-        return "0.0%";
-      }
-      return `${fixed}%`;
-    };
-    const computeVrpStats = (values) => {
-      if (!values.length) {
-        return null;
-      }
-      let sum = 0;
-      let max = values[0];
-      let min = values[0];
-      values.forEach((value) => {
-        sum += value;
-        if (value > max)
-          max = value;
-        if (value < min)
-          min = value;
-      });
-      return {
-        mean: sum / values.length,
-        max,
-        min
-      };
-    };
-    const getZeroMarkLine = () => ({
-      name: "0",
-      yAxis: 0,
-      symbol: ["none", "arrow"],
-      symbolSize: [0, 8],
-      silent: true,
-      lineStyle: {
-        color: "#909399"
-      },
-      label: {
-        show: true,
-        position: "end",
-        color: isDark.value ? "#CED4DA" : "#343A40",
-        borderWidth: 0,
-        padding: 0,
-        shadowBlur: 0,
-        fontSize: 12
-      }
-    });
-    const getMeanMarkLine = (mean) => {
-      const meanLabel = mean.toFixed(1);
-      return {
-        name: "mean",
-        yAxis: mean,
-        symbol: ["none", "arrow"],
-        symbolSize: [0, 8],
-        silent: true,
-        lineStyle: {
-          color: "#ADB5BD",
-          type: "dashed"
-        },
-        label: {
-          show: true,
-          position: "end",
-          formatter: meanLabel,
-          color: isDark.value ? "#CED4DA" : "#343A40",
-          borderWidth: 0,
-          padding: 0,
-          shadowBlur: 0,
-          fontSize: 12
-        }
-      };
-    };
-    const vrpSeries = vue.computed(
-      () => buildVrpSeries(filteredChartData.value, state.volTenor)
-    );
-    const vrpStats = vue.computed(() => {
-      const values = vrpSeries.value.map(([, value]) => value);
-      return computeVrpStats(values);
-    });
-    const meanHeaderValue = vue.computed(() => {
-      var _a, _b;
-      if (state.loadingFlag) {
-        return "-";
-      }
-      return formatVrpPercent((_b = (_a = vrpStats.value) == null ? void 0 : _a.mean) != null ? _b : null, 1);
-    });
-    const statsDisplay = vue.computed(() => {
-      const days = `${selectedPeriodDays.value}d`;
-      if (state.loadingFlag || !vrpStats.value) {
-        return {
-          mean: "-",
-          max: "-",
-          min: "-",
-          days
-        };
-      }
-      return {
-        mean: formatVrpPercent(vrpStats.value.mean, 1),
-        max: formatVrpPercent(vrpStats.value.max, 1),
-        min: formatVrpPercent(vrpStats.value.min, 1),
-        days
-      };
-    });
     vue.watch(currency, () => {
       fetchData();
     });
@@ -258,10 +110,8 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       }).then((res) => {
         var _a;
         const resData = (_a = res.data) == null ? void 0 : _a.data;
-        if (!resData) {
-          state.chartData = [];
+        if (!resData)
           return;
-        }
         state.chartData = resData;
       }).finally(() => {
         state.loadingFlag = false;
@@ -277,12 +127,44 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       state.periodDateRange = chartHelp.showDateRange(selectedPeriod.days);
       fetchData();
     };
-    const getEchartOption = (vrpData, stats) => {
-      const markLineData = [getZeroMarkLine()];
-      const showMeanLine = !state.loadingFlag && stats != null;
-      if (showMeanLine) {
-        markLineData.push(getMeanMarkLine(stats.mean));
+    const getEchartData = () => {
+      const data = [...state.chartData];
+      let vrpData = [];
+      let tempResolution = 30;
+      switch (state.volTenor) {
+        case "1D":
+          tempResolution = 1;
+          break;
+        case "3D":
+          tempResolution = 3;
+          break;
+        case "7D":
+          tempResolution = 7;
+          break;
+        case "15D":
+          tempResolution = 15;
+          break;
+        case "1M":
+          tempResolution = 30;
+          break;
+        case "3M":
+          tempResolution = 90;
+          break;
       }
+      data.forEach((item) => {
+        let dataList = item.data;
+        dataList.forEach((dataItem) => {
+          if (dataItem.day === tempResolution) {
+            vrpData.push([item.datetime, dataItem.iv - dataItem.rv]);
+          }
+        });
+      });
+      return {
+        vrpData
+      };
+    };
+    const getEchartOption = (params) => {
+      const { vrpData } = params;
       const option = {
         color: ["#FFD600"],
         tooltip: {
@@ -295,11 +177,11 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
               color: "#343A40",
               padding: [4, 6, 4, 6],
               margin: 9,
-              formatter: (params) => {
-                if (params.axisDimension === "x") {
-                  return chartHelp.timestampFormat(params.value);
+              formatter: (params2) => {
+                if (params2.axisDimension === "x") {
+                  return chartHelp.timestampFormat(params2.value);
                 } else {
-                  return chartHelp.numberFormat(params.value, 2);
+                  return chartHelp.numberFormat(params2.value, 2);
                 }
               }
             },
@@ -310,19 +192,19 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
               color: "#8B959F"
             }
           },
-          formatter: (params) => {
+          formatter: (params2) => {
             try {
               let html = `
             <div style="display: flex;justify-content: space-between;align-items: center;">
-              <div>${chartHelp.getTooltipDate(params[0].axisValue, locale.value.name, {
+              <div>${chartHelp.getTooltipDate(params2[0].axisValue, locale.value.name, {
                 showSeconds: false
               })}</div>
             </div>
             `;
-              if (params[0]) {
+              if (params2[0]) {
                 html += `<div style="display: flex;justify-content: space-between;align-items: center;">
-              <div style="margin-right: 40px;">${params[0].marker}&nbsp;${params[0].seriesName}</div>
-              <div>&nbsp;${chartHelp.numberFormat(params[0].data[1], 2)}</div>
+              <div style="margin-right: 40px;">${params2[0].marker}&nbsp;${params2[0].seriesName}</div>
+              <div>&nbsp;${chartHelp.numberFormat(params2[0].data[1], 2)}</div>
             </div>`;
               }
               return html;
@@ -381,6 +263,8 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
           scale: true,
           name: "VRP(%)",
           nameLocation: "end",
+          nameGap: -30,
+          nameRotate: 90,
           nameTextStyle: {
             color: isDark.value ? "#8B959F" : "#8B959F",
             fontWeight: 400,
@@ -406,9 +290,9 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
           }
         },
         grid: {
-          top: 30,
+          top: 20,
           left: "left",
-          right: 40,
+          right: 15,
           bottom: 50,
           containLabel: true
         },
@@ -439,7 +323,15 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
             data: vrpData,
             symbol: "none",
             markLine: {
-              data: markLineData
+              data: [
+                {
+                  name: "0",
+                  yAxis: 0,
+                  lineStyle: {
+                    color: "#909399"
+                  }
+                }
+              ]
             }
           }
         ]
@@ -447,7 +339,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       return option;
     };
     const chartOption = vue.computed(() => {
-      return getEchartOption(vrpSeries.value, vrpStats.value);
+      return getEchartOption(getEchartData());
     });
     return (_ctx, _cache) => {
       const _component_g_icon = vue.resolveComponent("g-icon");
@@ -525,159 +417,6 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                   _: 1
                 }, 8, ["value", "size"])
               ]),
-              vue.createElementVNode(
-                "div",
-                {
-                  class: vue.normalizeClass(vue.unref(ns).e("mean-value"))
-                },
-                [
-                  vue.createVNode(_component_g_tooltip, {
-                    underdotted: true,
-                    placement: "bottom",
-                    isMobile: vue.unref(isMobile)
-                  }, {
-                    title: vue.withCtx(() => [
-                      vue.createElementVNode(
-                        "div",
-                        {
-                          class: vue.normalizeClass(vue.unref(ns).e("stats-tooltip"))
-                        },
-                        [
-                          vue.createElementVNode(
-                            "div",
-                            {
-                              class: vue.normalizeClass(vue.unref(ns).e("stats-header"))
-                            },
-                            vue.toDisplayString(vue.unref(t)("message.vrpRangeStats")),
-                            3
-                          ),
-                          vue.createElementVNode(
-                            "div",
-                            {
-                              class: vue.normalizeClass(vue.unref(ns).e("stats-row"))
-                            },
-                            [
-                              vue.createElementVNode(
-                                "span",
-                                {
-                                  class: vue.normalizeClass(vue.unref(ns).e("stats-label"))
-                                },
-                                vue.toDisplayString(vue.unref(t)("message.statMean")),
-                                3
-                              ),
-                              vue.createElementVNode(
-                                "span",
-                                {
-                                  class: vue.normalizeClass(vue.unref(ns).e("stats-value"))
-                                },
-                                vue.toDisplayString(vue.unref(statsDisplay).mean),
-                                3
-                              )
-                            ],
-                            2
-                          ),
-                          vue.createElementVNode(
-                            "div",
-                            {
-                              class: vue.normalizeClass(vue.unref(ns).e("stats-row"))
-                            },
-                            [
-                              vue.createElementVNode(
-                                "span",
-                                {
-                                  class: vue.normalizeClass(vue.unref(ns).e("stats-label"))
-                                },
-                                vue.toDisplayString(vue.unref(t)("message.statMax")),
-                                3
-                              ),
-                              vue.createElementVNode(
-                                "span",
-                                {
-                                  class: vue.normalizeClass(vue.unref(ns).e("stats-value"))
-                                },
-                                vue.toDisplayString(vue.unref(statsDisplay).max),
-                                3
-                              )
-                            ],
-                            2
-                          ),
-                          vue.createElementVNode(
-                            "div",
-                            {
-                              class: vue.normalizeClass(vue.unref(ns).e("stats-row"))
-                            },
-                            [
-                              vue.createElementVNode(
-                                "span",
-                                {
-                                  class: vue.normalizeClass(vue.unref(ns).e("stats-label"))
-                                },
-                                vue.toDisplayString(vue.unref(t)("message.statMin")),
-                                3
-                              ),
-                              vue.createElementVNode(
-                                "span",
-                                {
-                                  class: vue.normalizeClass(vue.unref(ns).e("stats-value"))
-                                },
-                                vue.toDisplayString(vue.unref(statsDisplay).min),
-                                3
-                              )
-                            ],
-                            2
-                          ),
-                          vue.createElementVNode(
-                            "div",
-                            {
-                              class: vue.normalizeClass(vue.unref(ns).e("stats-row"))
-                            },
-                            [
-                              vue.createElementVNode(
-                                "span",
-                                {
-                                  class: vue.normalizeClass(vue.unref(ns).e("stats-label"))
-                                },
-                                vue.toDisplayString(vue.unref(t)("message.statDays")),
-                                3
-                              ),
-                              vue.createElementVNode(
-                                "span",
-                                {
-                                  class: vue.normalizeClass(vue.unref(ns).e("stats-value"))
-                                },
-                                vue.toDisplayString(vue.unref(statsDisplay).days),
-                                3
-                              )
-                            ],
-                            2
-                          )
-                        ],
-                        2
-                      )
-                    ]),
-                    default: vue.withCtx(() => [
-                      vue.createElementVNode(
-                        "span",
-                        {
-                          class: vue.normalizeClass(vue.unref(ns).e("mean-label"))
-                        },
-                        vue.toDisplayString(vue.unref(t)("message.vrpMean")),
-                        3
-                      ),
-                      vue.createElementVNode(
-                        "span",
-                        {
-                          class: vue.normalizeClass(vue.unref(ns).e("mean-text"))
-                        },
-                        vue.toDisplayString(vue.unref(meanHeaderValue)),
-                        3
-                      )
-                    ]),
-                    _: 1
-                  }, 8, ["isMobile"])
-                ],
-                2
-              ),
               vue.createElementVNode("div", _hoisted_4, [
                 vue.createElementVNode(
                   "span",