greeks-live-ui 0.0.19 → 0.0.21

package/lib/packages/components/panel-atm-iv/src/panel-atm-iv2.js

@@ -2,896 +2,32 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var vue = require('vue');
-require('../../../hooks/index.js');
-var panelAtmIv = require('./panel-atm-iv.js');
 require('../../../utils/index.js');
-var pluginVue_exportHelper = require('../../../../_virtual/plugin-vue_export-helper.js');
-var index = require('../../../hooks/use-namespace/index.js');
-var index$1 = require('../../../hooks/use-locale/index.js');
-var index$2 = require('../../../hooks/use-device-type/index.js');
-var index$3 = require('../../../hooks/use-theme/index.js');
-var dataLab = require('../../../utils/dataLab.js');
-var chartHelp = require('../../../utils/chartHelp.js');
+var runtime = require('../../../utils/vue/props/runtime.js');
 
-const _hoisted_1 = /* @__PURE__ */ vue.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 panelAtmIvEmits = {
+  "update:currency": (currency) => true,
+  "update:exchange": (exchange) => true
 };
-const _hoisted_6 = { class: "h5-tip-title" };
-const _hoisted_7 = { class: "h5-legend" };
-const __default__ = {
-  name: "GPanelAtmIv"
-};
-const _sfc_main = /* @__PURE__ */ vue.defineComponent({
-  ...__default__,
-  props: panelAtmIv.panelAtmIvProps,
-  emits: panelAtmIv.panelAtmIvEmits,
-  setup(__props, { emit }) {
-    const props = __props;
-    const ns = index.useNamespace("panel-atm-iv");
-    const { t } = index$1.useLocale();
-    const { isMobile, isPC } = index$2.useDeviceType();
-    const { isDark } = index$3.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 = vue.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 = vue.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 = vue.computed(() => {
-      if (currency.value === "BTC" || currency.value === "ETH") {
-        return "3M";
-      } else if (currency.value.includes("PAXG")) {
-        return "3M";
-      } else {
-        return "1M";
-      }
-    });
-    const state = vue.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 = vue.computed({
-      get: () => props.currency || state.currency || "BTC",
-      set: (newVal) => {
-        props.currency ? emit("update:currency", newVal) : state.currency = newVal;
-      }
-    });
-    const exchange = vue.computed({
-      get: () => props.exchange || state.exchange || "Deribit",
-      set: (newVal) => {
-        props.exchange ? emit("update:exchange", newVal) : state.exchange = newVal;
-      }
-    });
-    vue.watch(currency, () => {
-      fetchData();
-    });
-    vue.watch(exchange, () => {
-      fetchData();
-    });
-    const fetchData = () => {
-      state.loadingFlag = true;
-      dataLab.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;
-      });
-    };
-    vue.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 = chartHelp.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 = chartHelp.formatDateForNumber(data0.created_at - day1);
-      let dataDate2 = chartHelp.formatDateForNumber(data0.created_at - day1 * 2);
-      let dataDate7 = chartHelp.formatDateForNumber(data0.created_at - day1 * 7);
-      let dataDate15 = chartHelp.formatDateForNumber(data0.created_at - day1 * 14);
-      let dataDate30 = chartHelp.formatDateForNumber(data0.created_at - day1 * 30);
-      let map = {};
-      data.forEach((item) => {
-        let date = chartHelp.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 ? chartHelp.numberFormat(item.one_day, 2) : ""
-        );
-        week1.push(
-          item.one_week ? chartHelp.numberFormat(item.one_week, 2) : ""
-        );
-        month1.push(chartHelp.numberFormat(item.month1, 2));
-        month2.push(
-          item.month2 ? chartHelp.numberFormat(item.month2, 2) : ""
-        );
-        month3.push(chartHelp.numberFormat(item.month3, 2));
-        month6.push(chartHelp.numberFormat(item.month6, 2));
-        year1.push(
-          item.one_year ? chartHelp.numberFormat(item.one_year, 2) : ""
-        );
-        date.push(chartHelp.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(chartHelp.numberFormat(item2.hv, 2));
-          } else if (item2.day === 7) {
-            set.delete("days7");
-            days7.push(chartHelp.numberFormat(item2.hv, 2));
-          } else if (item2.day === 30) {
-            set.delete("days30");
-            days30.push(chartHelp.numberFormat(item2.hv, 2));
-          } else if (item2.day === 60) {
-            set.delete("days60");
-            days60.push(chartHelp.numberFormat(item2.hv, 2));
-          } else if (item2.day === 90) {
-            set.delete("days90");
-            days90.push(chartHelp.numberFormat(item2.hv, 2));
-          } else if (item2.day === 180) {
-            set.delete("days180");
-            days180.push(chartHelp.numberFormat(item2.hv, 2));
-          } else if (item2.day === 365) {
-            set.delete("days365");
-            days365.push(chartHelp.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 = chartHelp.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 = vue.resolveComponent("g-icon");
-      const _component_g_tooltip = vue.resolveComponent("g-tooltip");
-      const _component_g_select_option = vue.resolveComponent("g-select-option");
-      const _component_g_select = vue.resolveComponent("g-select");
-      const _component_g_chart_table = vue.resolveComponent("g-chart-table");
-      const _component_g_chart = vue.resolveComponent("g-chart");
-      const _component_g_chart_panel = vue.resolveComponent("g-chart-panel");
-      return vue.openBlock(), vue.createElementBlock(
-        "div",
-        {
-          class: vue.normalizeClass([vue.unref(ns).b()])
-        },
-        [
-          vue.createVNode(_component_g_chart_panel, {
-            currency: vue.unref(currency),
-            "onUpdate:currency": _cache[4] || (_cache[4] = ($event) => vue.isRef(currency) ? currency.value = $event : null),
-            exchange: vue.unref(exchange),
-            "onUpdate:exchange": _cache[5] || (_cache[5] = ($event) => vue.isRef(exchange) ? exchange.value = $event : null),
-            operations: ["toggle"],
-            loading: state.loadingFlag,
-            onToggle: handleToggleTableChart,
-            onRefresh: fetchData
-          }, {
-            title: vue.withCtx(() => [
-              vue.createVNode(_component_g_tooltip, {
-                placement: "bottom",
-                "arrow-point-at-center": ""
-              }, {
-                title: vue.withCtx(() => [
-                  vue.createElementVNode("div", {
-                    innerHTML: vue.unref(t)("message.atmIVTips")
-                  }, null, 8, _hoisted_2)
-                ]),
-                default: vue.withCtx(() => [
-                  _hoisted_1,
-                  vue.createVNode(_component_g_icon, { type: "info_question_circle" })
-                ]),
-                _: 1
-              })
-            ]),
-            tool: vue.withCtx(() => [
-              !state.showTableCard ? (vue.openBlock(), vue.createElementBlock(
-                vue.Fragment,
-                { key: 0 },
-                [
-                  vue.createVNode(_component_g_select, {
-                    value: state.period,
-                    "onUpdate:value": _cache[0] || (_cache[0] = ($event) => state.period = $event),
-                    onChange: handleChangePeriod,
-                    size: vue.unref(isPC) ? "small" : "medium",
-                    class: "period-select"
-                  }, {
-                    default: vue.withCtx(() => [
-                      (vue.openBlock(true), vue.createElementBlock(
-                        vue.Fragment,
-                        null,
-                        vue.renderList(vue.unref(periodList), (periodItem) => {
-                          return vue.openBlock(), vue.createBlock(_component_g_select_option, {
-                            value: periodItem.value
-                          }, {
-                            default: vue.withCtx(() => [
-                              vue.createTextVNode(
-                                vue.toDisplayString(periodItem.label),
-                                1
-                              )
-                            ]),
-                            _: 2
-                          }, 1032, ["value"]);
-                        }),
-                        256
-                      ))
-                    ]),
-                    _: 1
-                  }, 8, ["value", "size"]),
-                  vue.createElementVNode(
-                    "span",
-                    _hoisted_3,
-                    vue.toDisplayString(state.periodDateRange),
-                    1
-                  )
-                ],
-                64
-              )) : vue.createCommentVNode("v-if", true),
-              vue.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: vue.unref(isPC) ? "small" : "medium"
-              }, {
-                default: vue.withCtx(() => [
-                  (vue.openBlock(true), vue.createElementBlock(
-                    vue.Fragment,
-                    null,
-                    vue.renderList(vue.unref(rangeList), (item) => {
-                      return vue.openBlock(), vue.createBlock(_component_g_select_option, {
-                        key: item,
-                        value: item
-                      }, {
-                        default: vue.withCtx(() => [
-                          vue.createTextVNode(
-                            vue.toDisplayString(item) + " HV:" + vue.toDisplayString(vue.unref(chartHelp.numberFormat)(state.hvMap[item])),
-                            1
-                          ),
-                          state.hvMap[item] !== null || !isNaN(state.hvMap[item]) ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_4, "%")) : vue.createCommentVNode("v-if", true)
-                        ]),
-                        _: 2
-                      }, 1032, ["value"]);
-                    }),
-                    128
-                  ))
-                ]),
-                _: 1
-              }, 8, ["value", "size"])
-            ]),
-            body: vue.withCtx(() => [
-              state.showTableCard ? (vue.openBlock(), vue.createBlock(_component_g_chart_table, {
-                key: 0,
-                tableData: state.tableData,
-                name: "IV"
-              }, null, 8, ["tableData"])) : (vue.openBlock(), vue.createElementBlock(
-                "div",
-                _hoisted_5,
-                [
-                  vue.createElementVNode(
-                    "div",
-                    {
-                      class: vue.normalizeClass({
-                        "h5-legend-box-hover": state.isToolTipShow,
-                        "h5-legend-box": true,
-                        "pc-hide": true
-                      })
-                    },
-                    [
-                      vue.createElementVNode(
-                        "h6",
-                        _hoisted_6,
-                        vue.toDisplayString(state.toolTipTitle),
-                        1
-                      ),
-                      vue.createElementVNode("div", _hoisted_7, [
-                        (vue.openBlock(true), vue.createElementBlock(
-                          vue.Fragment,
-                          null,
-                          vue.renderList(vue.unref(legendList).slice(1), (legendItem) => {
-                            var _a, _b, _c, _d;
-                            return vue.openBlock(), vue.createElementBlock("div", {
-                              key: legendItem.label
-                            }, [
-                              vue.createElementVNode(
-                                "span",
-                                {
-                                  style: vue.normalizeStyle({ backgroundColor: legendItem.color }),
-                                  class: "legend-line"
-                                },
-                                null,
-                                4
-                              ),
-                              vue.createElementVNode("div", null, [
-                                vue.createElementVNode(
-                                  "div",
-                                  null,
-                                  vue.toDisplayString(legendItem.label),
-                                  1
-                                ),
-                                vue.createElementVNode(
-                                  "p",
-                                  {
-                                    class: vue.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("-")
-                                    })
-                                  },
-                                  vue.toDisplayString(state.legendMap[legendItem.value]),
-                                  3
-                                )
-                              ])
-                            ]);
-                          }),
-                          128
-                        ))
-                      ])
-                    ],
-                    2
-                  ),
-                  vue.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
-      );
-    };
+const panelAtmIvProps = runtime.buildProps({
+  defaultCurrency: {
+    type: String,
+    required: false
+  },
+  defaultExchange: {
+    type: String,
+    required: false
+  },
+  currency: {
+    type: String,
+    required: false
+  },
+  exchange: {
+    type: String,
+    required: false
   }
 });
-var PanelAtmIv = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["__file", "/Users/luobowen/Desktop/greeks/greeks-live-ui/packages/components/panel-atm-iv/src/panel-atm-iv.vue"]]);
 
-exports["default"] = PanelAtmIv;
+exports.panelAtmIvEmits = panelAtmIvEmits;
+exports.panelAtmIvProps = panelAtmIvProps;
 //# sourceMappingURL=panel-atm-iv2.js.map