greeks-live-ui 0.0.20 → 0.0.21

package/es/packages/components/panel-atm-iv/src/panel-atm-iv2.mjs

@@ -1,28 +1,893 @@
+import { createTextVNode, defineComponent, computed, reactive, watch, onMounted, resolveComponent, openBlock, createElementBlock, normalizeClass, unref, createVNode, isRef, withCtx, createElementVNode, Fragment, renderList, createBlock, toDisplayString, createCommentVNode, normalizeStyle } from 'vue';
+import '../../../hooks/index.mjs';
+import { panelAtmIvProps, panelAtmIvEmits } from './panel-atm-iv.mjs';
 import '../../../utils/index.mjs';
-import { buildProps } from '../../../utils/vue/props/runtime.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 { getIvHistory } from '../../../utils/dataLab.mjs';
+import { showDateRange, formatDateForNumber, numberFormat, getTooltipDate } from '../../../utils/chartHelp.mjs';
 
-const panelAtmIvEmits = {
-  "update:currency": (currency) => true,
-  "update:exchange": (exchange) => true
+const _hoisted_1 = /* @__PURE__ */ createTextVNode(" ATM IV");
+const _hoisted_2 = ["innerHTML"];
+const _hoisted_3 = { class: "period-range h5-hide" };
+const _hoisted_4 = { key: 0 };
+const _hoisted_5 = {
+  key: 1,
+  class: "echart",
+  ref: "echart"
 };
-const panelAtmIvProps = buildProps({
-  defaultCurrency: {
-    type: String,
-    required: false
-  },
-  defaultExchange: {
-    type: String,
-    required: false
-  },
-  currency: {
-    type: String,
-    required: false
-  },
-  exchange: {
-    type: String,
-    required: false
+const _hoisted_6 = { class: "h5-tip-title" };
+const _hoisted_7 = { class: "h5-legend" };
+const __default__ = {
+  name: "GPanelAtmIv"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  props: panelAtmIvProps,
+  emits: panelAtmIvEmits,
+  setup(__props, { emit }) {
+    const props = __props;
+    const ns = useNamespace("panel-atm-iv");
+    const { t } = useLocale();
+    const { isMobile, isPC } = useDeviceType();
+    const { isDark } = useTheme();
+    let legendList = [
+      {
+        value: "ALL",
+        label: "All",
+        days: 0,
+        color: "#00B42A"
+      },
+      {
+        value: "1D",
+        label: "1 D",
+        days: 1,
+        color: "#7630F7"
+      },
+      {
+        value: "1W",
+        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(() => {
+      if (currency.value === "BTC" || currency.value === "ETH") {
+        return legendList.filter(
+          (v) => ["ALL", "1W", "1M", "3M", "1Y"].includes(v.value)
+        );
+      } else if (currency.value.includes("PAXG")) {
+        return legendList.filter(
+          (v) => ["ALL", "1W", "1M", "3M"].includes(v.value)
+        );
+      } else {
+        return legendList.filter((v) => ["ALL", "1W", "1M"].includes(v.value));
+      }
+    });
+    const rangeList = computed(() => {
+      if (currency.value === "BTC" || currency.value === "ETH") {
+        return ["1D", "1W", "1M", "2M", "3M", "6M", "1Y"];
+      } else if (currency.value.includes("PAXG")) {
+        return ["1D", "1W", "1M", "3M", "6M"];
+      } else {
+        return ["1D", "1W", "1M"];
+      }
+    });
+    const defaultPeriod = computed(() => {
+      if (currency.value === "BTC" || currency.value === "ETH") {
+        return "3M";
+      } else if (currency.value.includes("PAXG")) {
+        return "3M";
+      } else {
+        return "1M";
+      }
+    });
+    const state = reactive({
+      loadingFlag: false,
+      showTableCard: true,
+      isToolTipShow: false,
+      toolTipTitle: "",
+      exchange: props.exchange || props.defaultExchange || "Deribit",
+      currency: props.currency || props.defaultCurrency || "BTC",
+      range: "1W",
+      period: "3M",
+      periodDateRange: "",
+      chartData: [],
+      tableData: [],
+      legendMap: {},
+      hvMap: {},
+      legendList: []
+    });
+    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;
+      getIvHistory({
+        currency: currency.value,
+        gap: state.showTableCard ? defaultPeriod.value : state.period
+      }).then((res) => {
+        if (res && res.code === 200) {
+          state.chartData = res.data || [];
+          getTableData();
+          getLegendData();
+        }
+      }).finally(() => {
+        state.loadingFlag = false;
+      });
+    };
+    onMounted(() => {
+      state.period = defaultPeriod.value;
+      handleChangePeriod(state.period);
+    });
+    const handleChangePeriod = (value) => {
+      const selectedPeriod = periodList.value.find((v) => v.value === value);
+      if (!selectedPeriod)
+        return;
+      state.periodDateRange = showDateRange(selectedPeriod.days);
+      fetchData();
+    };
+    const handleToggleTableChart = () => {
+      state.showTableCard = !state.showTableCard;
+      fetchData();
+    };
+    const handleTipShow = (isShow) => {
+      state.isToolTipShow = isShow;
+      !isShow && (state.toolTipTitle = "");
+    };
+    const getLegendValue = (days) => {
+      var _a;
+      const r = Number((_a = Number(days[days.length - 1])) == null ? void 0 : _a.toFixed(2));
+      return r >= 0 ? `+${r}%` : `${r}%`;
+    };
+    const getLegendData = () => {
+      const { day1, week1, month1, month2, month3, month6, year1, hvText, dataHv } = getEchartData();
+      state.legendMap = {
+        "1D": getLegendValue(day1),
+        "1W": getLegendValue(week1),
+        "1M": getLegendValue(month1),
+        "2M": getLegendValue(month2),
+        "3M": getLegendValue(month3),
+        "6M": getLegendValue(month6),
+        "1Y": getLegendValue(year1),
+        [hvText]: getLegendValue(dataHv)
+      };
+    };
+    const getTableData = () => {
+      var _a;
+      let data = state.chartData || [];
+      let hvMap = {};
+      let arr = ((_a = data[data.length - 1]) == null ? void 0 : _a.data) || [];
+      arr.forEach((item) => {
+        let key = "";
+        if (item.day === 1) {
+          key = "1D";
+        } else if (item.day === 7) {
+          key = "1W";
+        } else if (item.day === 30) {
+          key = "1M";
+        } else if (item.day === 60) {
+          key = "2M";
+        } else if (item.day === 90) {
+          key = "3M";
+        } else if (item.day === 180) {
+          key = "6M";
+        } else if (item.day === 365) {
+          key = "1Y";
+        }
+        hvMap[key] = item.hv;
+        state.hvMap = hvMap;
+      });
+      let day1 = 864e5;
+      let data0 = data[data.length - 1];
+      let dataDate1 = formatDateForNumber(data0.created_at - day1);
+      let dataDate2 = formatDateForNumber(data0.created_at - day1 * 2);
+      let dataDate7 = formatDateForNumber(data0.created_at - day1 * 7);
+      let dataDate15 = formatDateForNumber(data0.created_at - day1 * 14);
+      let dataDate30 = formatDateForNumber(data0.created_at - day1 * 30);
+      let map = {};
+      data.forEach((item) => {
+        let date = formatDateForNumber(item.created_at);
+        if (date === dataDate1) {
+          map[date] = item;
+        } else if (date === dataDate2) {
+          map[date] = item;
+        } else if (date === dataDate7) {
+          map[date] = item;
+        } else if (date === dataDate15) {
+          map[date] = item;
+        } else if (date === dataDate30) {
+          map[date] = item;
+        }
+      });
+      let list = Object.values(map).sort(
+        (prev, next) => next.created_at - prev.created_at
+      );
+      let dataMap1 = { expire: "1 day", atm: data0.one_day };
+      let dataMap2 = { expire: "1 week", atm: data0.one_week };
+      let dataMap3 = { expire: "1 month", atm: data0.month1 };
+      let dataMap4 = { expire: "2 month", atm: data0.month2 };
+      let dataMap5 = { expire: "3 month", atm: data0.month3 };
+      let dataMap6 = { expire: "6 month", atm: data0.month6 };
+      let dataMap7 = { expire: "1 year", atm: data0.one_year };
+      for (let i = 0; i < list.length; i++) {
+        let item = list[i];
+        let key;
+        switch (i) {
+          case 0:
+            key = "chg1";
+            break;
+          case 1:
+            key = "chg2";
+            break;
+          case 2:
+            key = "chg7";
+            break;
+          case 3:
+            key = "chg14";
+            break;
+          case 4:
+            key = "chg30";
+            break;
+          default:
+            continue;
+        }
+        dataMap1[key] = data0.one_day - item.one_day;
+        dataMap2[key] = data0.one_week - item.one_week;
+        dataMap3[key] = data0.month1 - item.month1;
+        dataMap4[key] = data0.month2 - item.month2;
+        dataMap5[key] = data0.month3 - item.month3;
+        dataMap6[key] = data0.month6 - item.month6;
+        dataMap7[key] = data0.one_year - item.one_year;
+      }
+      let tableData = [];
+      if (currency.value === "BTC" || currency.value === "ETH") {
+        tableData = [
+          dataMap1,
+          dataMap2,
+          dataMap3,
+          dataMap4,
+          dataMap5,
+          dataMap6,
+          dataMap7
+        ];
+      } else if (currency.value.includes("PAXG")) {
+        tableData = [dataMap1, dataMap2, dataMap3, dataMap4, dataMap5, dataMap6];
+      } else {
+        tableData = [dataMap1, dataMap2, dataMap3];
+      }
+      state.tableData = tableData.map((v) => {
+        v["vrp"] = v.atm - Number(hvMap[state.range]);
+        v["vrpLabel"] = state.range + " VRP";
+        return v;
+      });
+    };
+    const getEchartData = () => {
+      let data = [...state.chartData];
+      const data2 = data.map((v) => v.data);
+      let date = [];
+      let day1 = [];
+      let week1 = [];
+      let month1 = [];
+      let month2 = [];
+      let month3 = [];
+      let month6 = [];
+      let year1 = [];
+      data.forEach((item) => {
+        day1.push(
+          item.one_day ? numberFormat(item.one_day, 2) : ""
+        );
+        week1.push(
+          item.one_week ? numberFormat(item.one_week, 2) : ""
+        );
+        month1.push(numberFormat(item.month1, 2));
+        month2.push(
+          item.month2 ? numberFormat(item.month2, 2) : ""
+        );
+        month3.push(numberFormat(item.month3, 2));
+        month6.push(numberFormat(item.month6, 2));
+        year1.push(
+          item.one_year ? numberFormat(item.one_year, 2) : ""
+        );
+        date.push(formatDateForNumber(item.created_at));
+      });
+      let days1 = [];
+      let days7 = [];
+      let days30 = [];
+      let days60 = [];
+      let days90 = [];
+      let days180 = [];
+      let days365 = [];
+      data2.forEach((item) => {
+        item = item || [];
+        let set = /* @__PURE__ */ new Set([
+          "days1",
+          "days7",
+          "days30",
+          "days60",
+          "days90",
+          "days180",
+          "days365"
+        ]);
+        item.forEach((item2) => {
+          if (item2.day === 1) {
+            set.delete("days1");
+            days1.push(numberFormat(item2.hv, 2));
+          } else if (item2.day === 7) {
+            set.delete("days7");
+            days7.push(numberFormat(item2.hv, 2));
+          } else if (item2.day === 30) {
+            set.delete("days30");
+            days30.push(numberFormat(item2.hv, 2));
+          } else if (item2.day === 60) {
+            set.delete("days60");
+            days60.push(numberFormat(item2.hv, 2));
+          } else if (item2.day === 90) {
+            set.delete("days90");
+            days90.push(numberFormat(item2.hv, 2));
+          } else if (item2.day === 180) {
+            set.delete("days180");
+            days180.push(numberFormat(item2.hv, 2));
+          } else if (item2.day === 365) {
+            set.delete("days365");
+            days365.push(numberFormat(item2.hv, 2));
+          }
+        });
+        let arr = [...set];
+        arr.forEach((item3) => {
+          if (item3 === "days1") {
+            days1.push("");
+          } else if (item3 === "days7") {
+            days7.push("");
+          } else if (item3 === "days30") {
+            days30.push("");
+          } else if (item3 === "days60") {
+            days60.push("");
+          } else if (item3 === "days90") {
+            days90.push("");
+          } else if (item3 === "days180") {
+            days180.push("");
+          } else if (item3 === "days365") {
+            days365.push("");
+          }
+        });
+      });
+      let dataHv = [];
+      if (state.range === "1D") {
+        dataHv = days1;
+      } else if (state.range === "1W") {
+        dataHv = days7;
+      } else if (state.range === "1M") {
+        dataHv = days30;
+      } else if (state.range === "2M") {
+        dataHv = days60;
+      } else if (state.range === "3M") {
+        dataHv = days90;
+      } else if (state.range === "6M") {
+        dataHv = days180;
+      } else if (state.range === "1Y") {
+        dataHv = days365;
+      }
+      const hvText = `${state.range.toLocaleLowerCase()} HV`;
+      return {
+        date,
+        day1,
+        week1,
+        month1,
+        month2,
+        month3,
+        month6,
+        year1,
+        hvText,
+        dataHv
+      };
+    };
+    const getEchartOption = (params) => {
+      const {
+        date,
+        day1,
+        week1,
+        month1,
+        month2,
+        month3,
+        month6,
+        year1,
+        hvText,
+        dataHv
+      } = params;
+      const seriesMap = {
+        "1D": {
+          name: "1 D",
+          key: 1,
+          type: "line",
+          symbol: "none",
+          data: day1
+        },
+        "1W": {
+          name: "1 W",
+          key: 7,
+          type: "line",
+          symbol: "none",
+          data: week1
+        },
+        "1M": {
+          name: "1 M",
+          key: 30,
+          type: "line",
+          symbol: "none",
+          data: month1
+        },
+        "2M": {
+          name: "2 M",
+          key: 60,
+          type: "line",
+          symbol: "none",
+          data: month2
+        },
+        "3M": {
+          name: "3 M",
+          key: 90,
+          type: "line",
+          symbol: "none",
+          data: month3
+        },
+        "6M": {
+          name: "6 M",
+          key: 180,
+          type: "line",
+          symbol: "none",
+          data: month6
+        },
+        "1Y": {
+          name: "1 Y",
+          key: 365,
+          type: "line",
+          symbol: "none",
+          data: year1
+        }
+      };
+      const filteredSeries = rangeList.value.map((range) => seriesMap[range]);
+      filteredSeries.push({
+        name: hvText,
+        type: "line",
+        symbol: "none",
+        data: dataHv
+      });
+      const option = {
+        color: legendList.slice(1).map((v) => v.color),
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "cross",
+            label: {
+              show: isMobile.value ? true : false,
+              backgroundColor: "#DEE2E6",
+              color: "#343A40",
+              padding: [4, 6, 4, 6],
+              margin: 9
+            },
+            crossStyle: {
+              color: "#8B959F"
+            },
+            lineStyle: {
+              color: "#8B959F"
+            }
+          },
+          backgroundColor: isDark.value ? "#E9ECEF" : "#292F3D",
+          padding: isMobile.value ? 0 : [6, 8, 5, 6],
+          textStyle: {
+            color: isDark.value ? "#000000" : "#FFFFFF",
+            fontSize: 12,
+            lineHeight: 16,
+            fontWeight: 400
+          },
+          formatter: (params2) => {
+            let content = "";
+            state.toolTipTitle = getTooltipDate(params2[0].axisValueLabel, "en-US");
+            content += `<div class="chart-tooltip-box"><div style="margin-bottom:4px;">${state.toolTipTitle}</div> `;
+            params2.forEach(
+              (param) => {
+                content += `
+            <div class="chart-tooltip">
+              <div>
+                <span class="chart-tooltip-line" style="background-color:${param.color};"></span>
+                <span>${param.seriesName}</span>
+              </div>
+              <span>${param.value.toFixed(2)}</span>
+            </div>
+          `;
+              }
+            );
+            return content + "</div>";
+          }
+        },
+        axisPointer: {
+          type: "line",
+          label: {
+            show: true,
+            backgroundColor: "#DEE2E6",
+            color: "#343A40",
+            fontSize: 10,
+            padding: [4, 6, 4, 8]
+          }
+        },
+        legend: {
+          show: !isMobile.value,
+          left: "center",
+          width: "90%",
+          icon: "rect",
+          itemWidth: 14,
+          itemHeight: 2,
+          itemGap: 20,
+          textStyle: {
+            color: "#596169",
+            fontSize: 12
+          },
+          lineStyle: {
+            inactiveColor: isDark.value ? "#2B2F32" : "#DEE2E6"
+          },
+          inactiveColor: isDark.value ? "#495057" : "#BDC4CB",
+          formatter: function(name) {
+            try {
+              switch (name) {
+                case "1 D":
+                  return name + ` (${day1[day1.length - 1]}%)`;
+                case "1 W":
+                  return name + ` (${week1[week1.length - 1]}%)`;
+                case "1 M":
+                  return name + ` (${month1[month1.length - 1]}%)`;
+                case "2 M":
+                  return name + ` (${month2[month2.length - 1]}%)`;
+                case "3 M":
+                  return name + ` (${month3[month3.length - 1]}%)`;
+                case "6 M":
+                  return name + ` (${month6[month6.length - 1]}%)`;
+                case "1 Y":
+                  return name + ` (${year1[year1.length - 1]}%)`;
+                case hvText:
+                  return name + ` (${dataHv[dataHv.length - 1]}%)`;
+              }
+            } catch (e) {
+              return name;
+            }
+          },
+          selected: {
+            "1 D": false,
+            "1 W": false,
+            "1 M": true,
+            "2 M": false,
+            "3 M": true,
+            "6 M": true,
+            "1 Y": false
+          }
+        },
+        xAxis: {
+          type: "category",
+          data: date,
+          axisTick: {
+            show: false
+          },
+          axisLabel: {
+            color: isDark.value ? "#CED4DA" : "#343A40",
+            fontWeight: 400,
+            fontSize: 10
+          },
+          axisLine: {
+            show: false,
+            lineStyle: {
+              color: isDark.value ? "#CED4DA" : "#343A40"
+            }
+          },
+          splitLine: {
+            show: !isMobile.value && !isDark.value,
+            lineStyle: {
+              color: "#F1F1F1",
+              width: 1,
+              type: "solid"
+            }
+          }
+        },
+        yAxis: {
+          type: "value",
+          scale: true,
+          axisLabel: {
+            show: true,
+            color: isDark.value ? "#CED4DA" : "#343A40",
+            fontWeight: 400,
+            fontSize: 10
+          },
+          name: "IV(%)",
+          nameLocation: "end",
+          nameGap: isMobile.value ? -30 : 20,
+          nameRotate: isMobile.value ? 90 : 0,
+          nameTextStyle: {
+            color: isDark.value ? "#8B959F" : "#8B959F",
+            fontWeight: 400,
+            fontSize: 10
+          },
+          axisLine: {
+            lineStyle: {
+              color: isDark.value ? "#CED4DA" : "#343A40"
+            }
+          },
+          splitLine: {
+            lineStyle: {
+              color: isDark.value ? "#2B2F32" : "#F1F1F1",
+              width: 1,
+              type: "solid"
+            }
+          }
+        },
+        grid: {
+          top: isPC.value ? 60 : 20,
+          left: "left",
+          right: 27,
+          bottom: 0,
+          containLabel: true
+        },
+        series: filteredSeries
+      };
+      if (isMobile.value) {
+        option.series = option.series.map((v) => ({ ...v, symbol: "circle" }));
+      }
+      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_table = resolveComponent("g-chart-table");
+      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[4] || (_cache[4] = ($event) => isRef(currency) ? currency.value = $event : null),
+            exchange: unref(exchange),
+            "onUpdate:exchange": _cache[5] || (_cache[5] = ($event) => isRef(exchange) ? exchange.value = $event : null),
+            operations: ["toggle"],
+            loading: state.loadingFlag,
+            onToggle: handleToggleTableChart,
+            onRefresh: fetchData
+          }, {
+            title: withCtx(() => [
+              createVNode(_component_g_tooltip, {
+                placement: "bottom",
+                "arrow-point-at-center": ""
+              }, {
+                title: withCtx(() => [
+                  createElementVNode("div", {
+                    innerHTML: unref(t)("message.atmIVTips")
+                  }, null, 8, _hoisted_2)
+                ]),
+                default: withCtx(() => [
+                  _hoisted_1,
+                  createVNode(_component_g_icon, { type: "info_question_circle" })
+                ]),
+                _: 1
+              })
+            ]),
+            tool: withCtx(() => [
+              !state.showTableCard ? (openBlock(), createElementBlock(
+                Fragment,
+                { key: 0 },
+                [
+                  createVNode(_component_g_select, {
+                    value: state.period,
+                    "onUpdate:value": _cache[0] || (_cache[0] = ($event) => state.period = $event),
+                    onChange: handleChangePeriod,
+                    size: unref(isPC) ? "small" : "medium",
+                    class: "period-select"
+                  }, {
+                    default: withCtx(() => [
+                      (openBlock(true), createElementBlock(
+                        Fragment,
+                        null,
+                        renderList(unref(periodList), (periodItem) => {
+                          return openBlock(), createBlock(_component_g_select_option, {
+                            value: periodItem.value
+                          }, {
+                            default: withCtx(() => [
+                              createTextVNode(
+                                toDisplayString(periodItem.label),
+                                1
+                              )
+                            ]),
+                            _: 2
+                          }, 1032, ["value"]);
+                        }),
+                        256
+                      ))
+                    ]),
+                    _: 1
+                  }, 8, ["value", "size"]),
+                  createElementVNode(
+                    "span",
+                    _hoisted_3,
+                    toDisplayString(state.periodDateRange),
+                    1
+                  )
+                ],
+                64
+              )) : createCommentVNode("v-if", true),
+              createVNode(_component_g_select, {
+                value: state.range,
+                "onUpdate:value": _cache[1] || (_cache[1] = ($event) => state.range = $event),
+                onChange: getTableData,
+                class: "input-select second-select",
+                size: unref(isPC) ? "small" : "medium"
+              }, {
+                default: withCtx(() => [
+                  (openBlock(true), createElementBlock(
+                    Fragment,
+                    null,
+                    renderList(unref(rangeList), (item) => {
+                      return openBlock(), createBlock(_component_g_select_option, {
+                        key: item,
+                        value: item
+                      }, {
+                        default: withCtx(() => [
+                          createTextVNode(
+                            toDisplayString(item) + " HV:" + toDisplayString(unref(numberFormat)(state.hvMap[item])),
+                            1
+                          ),
+                          state.hvMap[item] !== null || !isNaN(state.hvMap[item]) ? (openBlock(), createElementBlock("span", _hoisted_4, "%")) : createCommentVNode("v-if", true)
+                        ]),
+                        _: 2
+                      }, 1032, ["value"]);
+                    }),
+                    128
+                  ))
+                ]),
+                _: 1
+              }, 8, ["value", "size"])
+            ]),
+            body: withCtx(() => [
+              state.showTableCard ? (openBlock(), createBlock(_component_g_chart_table, {
+                key: 0,
+                tableData: state.tableData,
+                name: "IV"
+              }, null, 8, ["tableData"])) : (openBlock(), createElementBlock(
+                "div",
+                _hoisted_5,
+                [
+                  createElementVNode(
+                    "div",
+                    {
+                      class: normalizeClass({
+                        "h5-legend-box-hover": state.isToolTipShow,
+                        "h5-legend-box": true,
+                        "pc-hide": true
+                      })
+                    },
+                    [
+                      createElementVNode(
+                        "h6",
+                        _hoisted_6,
+                        toDisplayString(state.toolTipTitle),
+                        1
+                      ),
+                      createElementVNode("div", _hoisted_7, [
+                        (openBlock(true), createElementBlock(
+                          Fragment,
+                          null,
+                          renderList(unref(legendList).slice(1), (legendItem) => {
+                            var _a, _b, _c, _d;
+                            return openBlock(), createElementBlock("div", {
+                              key: legendItem.label
+                            }, [
+                              createElementVNode(
+                                "span",
+                                {
+                                  style: normalizeStyle({ backgroundColor: legendItem.color }),
+                                  class: "legend-line"
+                                },
+                                null,
+                                4
+                              ),
+                              createElementVNode("div", null, [
+                                createElementVNode(
+                                  "div",
+                                  null,
+                                  toDisplayString(legendItem.label),
+                                  1
+                                ),
+                                createElementVNode(
+                                  "p",
+                                  {
+                                    class: normalizeClass({
+                                      "positive-text": (_b = (_a = state.legendMap) == null ? void 0 : _a[legendItem.value]) == null ? void 0 : _b.includes("+"),
+                                      "negative-text": (_d = (_c = state.legendMap) == null ? void 0 : _c[legendItem.value]) == null ? void 0 : _d.includes("-")
+                                    })
+                                  },
+                                  toDisplayString(state.legendMap[legendItem.value]),
+                                  3
+                                )
+                              ])
+                            ]);
+                          }),
+                          128
+                        ))
+                      ])
+                    ],
+                    2
+                  ),
+                  createVNode(_component_g_chart, {
+                    class: "skew-chart",
+                    option: setOption(),
+                    onShowTip: _cache[2] || (_cache[2] = ($event) => handleTipShow(true)),
+                    onHideTip: _cache[3] || (_cache[3] = ($event) => handleTipShow(false))
+                  }, null, 8, ["option"])
+                ],
+                512
+              ))
+            ]),
+            _: 1
+          }, 8, ["currency", "exchange", "loading"])
+        ],
+        2
+      );
+    };
   }
 });
+var PanelAtmIv = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "/Users/luobowen/Desktop/greeks/greeks-live-ui/packages/components/panel-atm-iv/src/panel-atm-iv.vue"]]);
 
-export { panelAtmIvEmits, panelAtmIvProps };
+export { PanelAtmIv as default };
 //# sourceMappingURL=panel-atm-iv2.mjs.map