greeks-live-ui 0.1.19 → 0.1.21

package/es/packages/components/panel-vol-fly/src/panel-vol-fly2.mjs

@@ -1,765 +1,28 @@
-import { defineComponent, computed, reactive, watch, onMounted, resolveComponent, openBlock, createElementBlock, normalizeClass, unref, createVNode, isRef, withCtx, createTextVNode, toDisplayString, createElementVNode, Fragment, renderList, createBlock } from 'vue';
-import '../../../hooks/index.mjs';
-import { panelVolFlyProps, panelVolFlyEmits } from './panel-vol-fly.mjs';
 import '../../../utils/index.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 { formatDate, getCurrentDateTimezone, showDateRange, getTooltipDate, formatTenorSeriesTooltipName } from '../../../utils/chartHelp.mjs';
-import { getFlyChart } from '../../../utils/dataLab.mjs';
+import { buildProps } from '../../../utils/vue/props/runtime.mjs';
 
-const _hoisted_1 = ["innerHTML"];
-const _hoisted_2 = { class: "selector-label h5-hide" };
-const _hoisted_3 = {
-  key: 1,
-  class: "period-controls"
+const panelVolFlyEmits = {
+  "update:currency": (currency) => true,
+  "update:exchange": (exchange) => true
 };
-const _hoisted_4 = { class: "selector-label h5-hide" };
-const _hoisted_5 = { class: "period-range h5-hide" };
-const _hoisted_6 = {
-  key: 1,
-  class: "echart",
-  ref: "echart"
-};
-const __default__ = {
-  name: "GPanelVolFly"
-};
-const _sfc_main = defineComponent({
-  ...__default__,
-  props: panelVolFlyProps,
-  emits: panelVolFlyEmits,
-  setup(__props, { emit }) {
-    const props = __props;
-    const ns = useNamespace("panel-vol-fly");
-    const { t, locale } = useLocale();
-    const { isMobile, isPC } = useDeviceType();
-    const { isDark } = useTheme();
-    const dataTypeList = [
-      {
-        value: "natural",
-        label: "Natural",
-        labelKey: "message.natural",
-        tooltipKey: "message.naturalModeTips"
-      },
-      {
-        value: "settlement",
-        label: "Settlement",
-        labelKey: "message.settlement",
-        tooltipKey: "message.settlementModeTips"
-      }
-    ];
-    let legendList = [
-      {
-        value: "1D",
-        label: "1D",
-        days: 1,
-        color: "#23C343"
-      },
-      {
-        value: "7D",
-        label: "7D",
-        days: 7,
-        color: "#7630F7"
-      },
-      {
-        value: "1M",
-        label: "1M",
-        days: 30,
-        color: "#FFD600"
-      },
-      {
-        value: "15D",
-        label: "15D",
-        days: 15,
-        color: "#FF8D1F"
-      },
-      {
-        value: "3M",
-        label: "3M",
-        days: 90,
-        color: "#FF3B30"
-      },
-      {
-        value: "6M",
-        label: "6M",
-        days: 180,
-        color: "#007AFF"
-      },
-      {
-        value: "1Y",
-        label: "1Y",
-        days: 365,
-        color: "#00C7BE"
-      }
-    ];
-    const periodList = computed(() => {
-      let list = [
-        {
-          value: "ALL",
-          label: "All",
-          days: 0,
-          color: "#00B42A"
-        },
-        ...legendList
-      ];
-      return list;
-    });
-    const state = reactive({
-      loadingFlag: false,
-      showTableCard: true,
-      toolTipTitle: "",
-      exchange: props.exchange || props.defaultExchange || "Deribit",
-      currency: props.currency || props.defaultCurrency || "BTC",
-      period: "3M",
-      periodDateRange: "",
-      dataType: "natural",
-      flyData: [],
-      tableData: [],
-      legendMap: {},
-      legendSelected: {}
-    });
-    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;
-      }
-    });
-    const currencyList = [
-      { value: "BTC", label: "BTC", icon: "currency_btc" },
-      { value: "ETH", label: "ETH", icon: "currency_eth" }
-    ];
-    watch(currency, () => {
-      state.legendSelected = {};
-      fetchData();
-    });
-    watch(exchange, () => {
-      state.legendSelected = {};
-      fetchData();
-    });
-    watch(
-      () => state.dataType,
-      () => {
-        if (state.flyData.length > 0) {
-          getTableData();
-        }
-      }
-    );
-    const getPeriodDateRangeFromChartData = (data) => {
-      const timestamps = (data || []).map((item) => item == null ? void 0 : item.timestamps).filter(
-        (ts) => typeof ts === "number" && Number.isFinite(ts)
-      );
-      if (timestamps.length === 0)
-        return "";
-      const minTs = Math.min(...timestamps);
-      const maxTs = Math.max(...timestamps);
-      return `${formatDate(new Date(minTs))}-${formatDate(
-        new Date(maxTs)
-      )} ${getCurrentDateTimezone()}`;
-    };
-    const fetchData = () => {
-      state.loadingFlag = true;
-      getFlyChart({
-        currency: currency.value,
-        gap: state.showTableCard ? "3M" : state.period,
-        exchange: exchange.value
-      }).then((res) => {
-        if (res && res.code === 200) {
-          state.flyData = res.data || [];
-          state.showTableCard && getTableData();
-          getLegendData();
-          if (!state.showTableCard) {
-            const nextRange = getPeriodDateRangeFromChartData(state.flyData);
-            if (nextRange)
-              state.periodDateRange = nextRange;
-          }
-        }
-      }).finally(() => {
-        state.loadingFlag = false;
-      });
-    };
-    onMounted(() => {
-      handleChangePeriod(state.period);
-    });
-    const handleChangePeriod = (value) => {
-      const selectedPeriod = periodList.value.find((v) => v.value === value);
-      if (!selectedPeriod)
-        return;
-      if (selectedPeriod.days !== 0) {
-        state.periodDateRange = showDateRange(selectedPeriod.days);
-      }
-      fetchData();
-    };
-    const handleToggleTableChart = () => {
-      state.showTableCard = !state.showTableCard;
-      fetchData();
-    };
-    const handleLegendSelectChanged = (params) => {
-      state.legendSelected = params.selected;
-    };
-    const getTableData = () => {
-      let data = state.flyData || [];
-      let day1 = 864e5;
-      let data0 = data[data.length - 1];
-      const findClosestData = (targetTime) => {
-        let closestData = null;
-        let minDiff = Infinity;
-        data.forEach((item) => {
-          const diff = Math.abs(item.timestamps - targetTime);
-          if (diff < minDiff) {
-            minDiff = diff;
-            closestData = item;
-          }
-        });
-        return closestData;
-      };
-      let list = [];
-      if (state.dataType === "settlement") {
-        const currentTime = data0.timestamps;
-        const currentDate = new Date(currentTime);
-        const getSettlementTime = (targetDate) => {
-          const date = new Date(targetDate);
-          date.setUTCHours(0, 0, 0, 0);
-          return date.getTime() + 8 * 60 * 60 * 1e3;
-        };
-        const todaySettlementTime = getSettlementTime(currentDate);
-        const settlementTimes = [];
-        const isAfterTodaySettlement = currentTime >= todaySettlementTime;
-        if (isAfterTodaySettlement) {
-          const targetDates = [
-            new Date(currentDate),
-            new Date(currentDate.getTime() - day1),
-            new Date(currentDate.getTime() - day1 * 6),
-            new Date(currentDate.getTime() - day1 * 13),
-            new Date(currentDate.getTime() - day1 * 29)
-          ];
-          targetDates.forEach((date) => {
-            const settlementTime = getSettlementTime(date);
-            settlementTimes.push(settlementTime);
-          });
-        } else {
-          const targetDates = [
-            new Date(currentDate.getTime() - day1),
-            new Date(currentDate.getTime() - day1 * 2),
-            new Date(currentDate.getTime() - day1 * 7),
-            new Date(currentDate.getTime() - day1 * 14),
-            new Date(currentDate.getTime() - day1 * 30)
-          ];
-          targetDates.forEach((date) => {
-            const settlementTime = getSettlementTime(date);
-            settlementTimes.push(settlementTime);
-          });
-        }
-        list = settlementTimes.map((time) => findClosestData(time)).filter((item) => item !== null);
-      } else {
-        let targetTime1 = data0.timestamps - day1;
-        let targetTime2 = data0.timestamps - day1 * 2;
-        let targetTime7 = data0.timestamps - day1 * 7;
-        let targetTime15 = data0.timestamps - day1 * 14;
-        let targetTime30 = data0.timestamps - day1 * 30;
-        let historicalData1 = findClosestData(targetTime1);
-        let historicalData2 = findClosestData(targetTime2);
-        let historicalData7 = findClosestData(targetTime7);
-        let historicalData15 = findClosestData(targetTime15);
-        let historicalData30 = findClosestData(targetTime30);
-        if (historicalData1)
-          list.push(historicalData1);
-        if (historicalData2)
-          list.push(historicalData2);
-        if (historicalData7)
-          list.push(historicalData7);
-        if (historicalData15)
-          list.push(historicalData15);
-        if (historicalData30)
-          list.push(historicalData30);
-        list.sort((prev, next) => next.timestamps - prev.timestamps);
-      }
-      let dataMap1 = { expire: "1 Day", atm: data0.day1 };
-      let dataMap2 = { expire: "1 Week", atm: data0.days7 };
-      let dataMap3 = { expire: "1 Month", atm: data0.days30 };
-      let dataMap4 = { expire: "2 Months", atm: data0.days60 };
-      let dataMap5 = { expire: "3 Months", atm: data0.days90 };
-      let dataMap6 = { expire: "6 Months", atm: data0.days180 };
-      let dataMap7 = { expire: "1 Year", atm: data0.days365 };
-      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.day1 - item.day1;
-        dataMap2[key] = data0.days7 - item.days7;
-        dataMap3[key] = data0.days30 - item.days30;
-        dataMap4[key] = data0.days60 - item.days60;
-        dataMap5[key] = data0.days90 - item.days90;
-        dataMap6[key] = data0.days180 - item.days180;
-        dataMap7[key] = data0.days365 - item.days365;
-      }
-      state.tableData = [
-        dataMap1,
-        dataMap2,
-        dataMap3,
-        dataMap4,
-        dataMap5,
-        dataMap6,
-        dataMap7
-      ];
-    };
-    const getLegendValue = (days) => {
-      var _a;
-      const r = Number((_a = days[days.length - 1]) == null ? void 0 : _a.toFixed(2));
-      return r >= 0 ? `+${r}%` : `${r}%`;
-    };
-    const getLegendData = () => {
-      const { day1, days7, days30, days60, days90, days180, days365 } = getEchartData();
-      state.legendMap = {
-        "1D": getLegendValue(day1.map((item) => item[1])),
-        "7D": getLegendValue(days7.map((item) => item[1])),
-        "1M": getLegendValue(days30.map((item) => item[1])),
-        "2M": getLegendValue(days60.map((item) => item[1])),
-        "3M": getLegendValue(days90.map((item) => item[1])),
-        "6M": getLegendValue(days180.map((item) => item[1])),
-        "1Y": getLegendValue(days365.map((item) => item[1]))
-      };
-    };
-    const getEchartData = () => {
-      let data = [...state.flyData];
-      let day1 = [];
-      let days7 = [];
-      let days30 = [];
-      let days60 = [];
-      let days90 = [];
-      let days180 = [];
-      let days365 = [];
-      data.forEach((item) => {
-        const timestamp = item.timestamps;
-        day1.push([timestamp, item.day1]);
-        days7.push([timestamp, item.days7]);
-        days30.push([timestamp, item.days30]);
-        days60.push([timestamp, item.days60]);
-        days90.push([timestamp, item.days90]);
-        days180.push([timestamp, item.days180]);
-        days365.push([timestamp, item.days365]);
-      });
-      return {
-        day1,
-        days7,
-        days30,
-        days60,
-        days90,
-        days180,
-        days365
-      };
-    };
-    const getEchartOption = (params) => {
-      const { day1, days7, days30, days60, days90, days180, days365 } = params;
-      const option = {
-        color: legendList.map((v) => v.color),
-        tooltip: {
-          trigger: "axis",
-          axisPointer: {
-            type: "cross",
-            label: {
-              show: true,
-              backgroundColor: "#DEE2E6",
-              color: "#343A40",
-              padding: [4, 6, 4, 6],
-              margin: 9
-            },
-            crossStyle: {
-              color: "#8B959F"
-            },
-            lineStyle: {
-              color: "#8B959F"
-            }
-          },
-          backgroundColor: isDark.value ? "#E9ECEF" : "#292F3D",
-          padding: [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].axisValue,
-              locale.value.name,
-              {
-                showSeconds: false
-              }
-            );
-            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>${formatTenorSeriesTooltipName(param.seriesName)}</span>
-              </div>
-              <span>${param.data[1].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: true,
-          left: "left",
-          width: "100%",
-          icon: "rect",
-          itemWidth: 14,
-          itemHeight: 2,
-          itemGap: isMobile.value ? 10 : 20,
-          textStyle: {
-            color: isDark.value ? "#ADB5BD" : "#596169",
-            fontSize: 12
-          },
-          lineStyle: {
-            inactiveColor: isDark.value ? "#2B2F32" : "#DEE2E6"
-          },
-          inactiveColor: isDark.value ? "#495057" : "#BDC4CB",
-          formatter: function(name) {
-            var _a, _b, _c, _d, _e, _f, _g;
-            try {
-              switch (name) {
-                case "1D":
-                  return name + `(${(_a = day1[day1.length - 1]) == null ? void 0 : _a[1].toFixed(2)}%)`;
-                case "7D":
-                  return name + `(${(_b = days7[days7.length - 1]) == null ? void 0 : _b[1].toFixed(2)}%)`;
-                case "1M":
-                  return name + `(${(_c = days30[days30.length - 1]) == null ? void 0 : _c[1].toFixed(2)}%)`;
-                case "2M":
-                  return name + `(${(_d = days60[days60.length - 1]) == null ? void 0 : _d[1].toFixed(2)}%)`;
-                case "3M":
-                  return name + `(${(_e = days90[days90.length - 1]) == null ? void 0 : _e[1].toFixed(2)}%)`;
-                case "6M":
-                  return name + `(${(_f = days180[days180.length - 1]) == null ? void 0 : _f[1].toFixed(2)}%)`;
-                case "1Y":
-                  return name + `(${(_g = days365[days365.length - 1]) == null ? void 0 : _g[1].toFixed(2)}%)`;
-              }
-            } catch (e) {
-              return name;
-            }
-          },
-          selected: Object.keys(state.legendSelected).length > 0 ? state.legendSelected : {
-            "1D": false,
-            "7D": false,
-            "1M": true,
-            "2M": false,
-            "3M": true,
-            "6M": true,
-            "1Y": false
-          }
-        },
-        xAxis: {
-          type: "time",
-          axisTick: {
-            show: false
-          },
-          axisLabel: {
-            color: isDark.value ? "#CED4DA" : "#343A40",
-            fontWeight: 400,
-            fontSize: 10,
-            hideOverlap: true
-          },
-          axisLine: {
-            show: false,
-            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: "Fly(%)",
-          nameLocation: "end",
-          nameGap: 10,
-          nameRotate: 0,
-          nameTextStyle: {
-            color: isDark.value ? "#8B959F" : "#8B959F",
-            fontWeight: 400,
-            fontSize: 10,
-            padding: isMobile.value ? [0, 20, 0, 0] : [0, 0, 0, 15]
-          },
-          axisLine: {
-            lineStyle: {
-              color: isDark.value ? "#CED4DA" : "#343A40"
-            }
-          },
-          splitLine: {
-            lineStyle: {
-              color: isDark.value ? "#2B2F32" : "#F1F1F1",
-              width: 1,
-              type: "solid"
-            }
-          }
-        },
-        grid: {
-          top: isMobile.value ? 65 : 75,
-          left: "left",
-          right: 15,
-          bottom: 50,
-          containLabel: true
-        },
-        dataZoom: [
-          {
-            type: "inside",
-            start: 80,
-            end: 100,
-            handleIcon: "path://M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z"
-          },
-          {
-            show: true,
-            type: "slider",
-            rangeMode: "percent",
-            bottom: "20px",
-            start: 80,
-            end: 100,
-            handleIcon: "path://M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z"
-          }
-        ],
-        series: [
-          {
-            name: "1D",
-            key: 1,
-            type: "line",
-            symbol: "none",
-            data: day1
-          },
-          {
-            name: "7D",
-            key: 7,
-            type: "line",
-            symbol: "none",
-            data: days7
-          },
-          {
-            name: "1M",
-            key: 30,
-            type: "line",
-            symbol: "none",
-            data: days30
-          },
-          {
-            name: "2M",
-            key: 60,
-            type: "line",
-            symbol: "none",
-            data: days60
-          },
-          {
-            name: "3M",
-            key: 90,
-            type: "line",
-            symbol: "none",
-            data: days90
-          },
-          {
-            name: "6M",
-            key: 180,
-            type: "line",
-            symbol: "none",
-            data: days180
-          },
-          {
-            name: "1Y",
-            key: 365,
-            type: "line",
-            symbol: "none",
-            data: days365
-          }
-        ]
-      };
-      return option;
-    };
-    const chartOption = computed(() => {
-      return getEchartOption(getEchartData());
-    });
-    return (_ctx, _cache) => {
-      const _component_g_icon = resolveComponent("g-icon");
-      const _component_g_tooltip = resolveComponent("g-tooltip");
-      const _component_g_toggle_button = resolveComponent("g-toggle-button");
-      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[2] || (_cache[2] = ($event) => isRef(currency) ? currency.value = $event : null),
-            exchange: unref(exchange),
-            "onUpdate:exchange": _cache[3] || (_cache[3] = ($event) => isRef(exchange) ? exchange.value = $event : null),
-            loading: state.loadingFlag,
-            showExchangeSelector: false,
-            currencyList,
-            operations: [state.showTableCard ? "line" : "toggle"],
-            onOperation: handleToggleTableChart,
-            onRefresh: fetchData
-          }, {
-            title: withCtx(() => [
-              createTextVNode(
-                toDisplayString(unref(t)("message.volFly")) + " ",
-                1
-              ),
-              createVNode(_component_g_tooltip, { isMobile: unref(isMobile) }, {
-                title: withCtx(() => [
-                  createElementVNode("div", {
-                    class: "greeks-panel-tip",
-                    innerHTML: unref(t)("message.volFlyTips")
-                  }, null, 8, _hoisted_1)
-                ]),
-                default: withCtx(() => [
-                  createVNode(_component_g_icon, { name: "info_question_circle" })
-                ]),
-                _: 1
-              }, 8, ["isMobile"])
-            ]),
-            tool: withCtx(() => [
-              state.showTableCard ? (openBlock(), createElementBlock(
-                Fragment,
-                { key: 0 },
-                [
-                  createElementVNode(
-                    "span",
-                    _hoisted_2,
-                    toDisplayString(unref(t)("message.mode")),
-                    1
-                  ),
-                  createVNode(_component_g_toggle_button, {
-                    modelValue: state.dataType,
-                    "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => state.dataType = $event),
-                    options: dataTypeList,
-                    "show-tooltip": true
-                  }, null, 8, ["modelValue"])
-                ],
-                64
-              )) : (openBlock(), createElementBlock("div", _hoisted_3, [
-                createElementVNode(
-                  "span",
-                  _hoisted_4,
-                  toDisplayString(unref(t)("message.range")),
-                  1
-                ),
-                createVNode(_component_g_select, {
-                  value: state.period,
-                  "onUpdate:value": _cache[1] || (_cache[1] = ($event) => state.period = $event),
-                  onChange: handleChangePeriod,
-                  size: unref(isPC) ? "small" : "medium"
-                }, {
-                  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_5,
-                  toDisplayString(state.periodDateRange),
-                  1
-                )
-              ]))
-            ]),
-            body: withCtx(() => [
-              state.showTableCard ? (openBlock(), createBlock(_component_g_chart_table, {
-                key: 0,
-                tableData: state.tableData,
-                name: "FLY"
-              }, null, 8, ["tableData"])) : (openBlock(), createElementBlock(
-                "div",
-                _hoisted_6,
-                [
-                  createVNode(_component_g_chart, {
-                    class: "skew-chart",
-                    option: unref(chartOption),
-                    onLegendselectchanged: handleLegendSelectChanged
-                  }, null, 8, ["option"])
-                ],
-                512
-              ))
-            ]),
-            _: 1
-          }, 8, ["currency", "exchange", "loading", "operations"])
-        ],
-        2
-      );
-    };
+const panelVolFlyProps = buildProps({
+  defaultCurrency: {
+    type: String,
+    required: false
+  },
+  defaultExchange: {
+    type: String,
+    required: false
+  },
+  currency: {
+    type: String,
+    required: false
+  },
+  exchange: {
+    type: String,
+    required: false
   }
 });
-var PanelVolFly = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "/Users/luobowen/Desktop/greeks/greeks-live-ui/packages/components/panel-vol-fly/src/panel-vol-fly.vue"]]);
 
-export { PanelVolFly as default };
+export { panelVolFlyEmits, panelVolFlyProps };
 //# sourceMappingURL=panel-vol-fly2.mjs.map