greeks-live-ui 0.1.21 → 0.1.22

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

@@ -2,32 +2,761 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var vue = require('vue');
+require('../../../hooks/index.js');
+var panelSkew = require('./panel-skew2.js');
 require('../../../utils/index.js');
-var runtime = require('../../../utils/vue/props/runtime.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 chartHelp = require('../../../utils/chartHelp.js');
+var dataLab = require('../../../utils/dataLab.js');
 
-const panelSkewEmits = {
-  "update:currency": (currency) => true,
-  "update:exchange": (exchange) => true
+const _hoisted_1 = /* @__PURE__ */ vue.createTextVNode(" 25\u0394 Skew ");
+const _hoisted_2 = ["innerHTML"];
+const _hoisted_3 = { class: "selector-label h5-hide" };
+const _hoisted_4 = {
+  key: 1,
+  class: "period-controls"
 };
-const panelSkewProps = runtime.buildProps({
-  defaultCurrency: {
-    type: String,
-    required: false
-  },
-  defaultExchange: {
-    type: String,
-    required: false
-  },
-  currency: {
-    type: String,
-    required: false
-  },
-  exchange: {
-    type: String,
-    required: false
+const _hoisted_5 = { class: "selector-label h5-hide" };
+const _hoisted_6 = { class: "period-range h5-hide" };
+const _hoisted_7 = {
+  key: 1,
+  class: "echart",
+  ref: "echart"
+};
+const __default__ = {
+  name: "GPanelSkew"
+};
+const _sfc_main = vue.defineComponent({
+  ...__default__,
+  props: panelSkew.panelSkewProps,
+  emits: panelSkew.panelSkewEmits,
+  setup(__props, { emit }) {
+    const props = __props;
+    const ns = index.useNamespace("panel-skew");
+    const { t, locale } = index$1.useLocale();
+    const { isMobile, isPC } = index$2.useDeviceType();
+    const { isDark } = index$3.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 = vue.computed(() => {
+      let list = [
+        {
+          value: "ALL",
+          label: "All",
+          days: 0,
+          color: "#00B42A"
+        },
+        ...legendList
+      ];
+      return list;
+    });
+    const state = vue.reactive({
+      loadingFlag: false,
+      showTableCard: true,
+      isToolTipShow: false,
+      toolTipTitle: "",
+      exchange: props.exchange || props.defaultExchange || "Deribit",
+      currency: props.currency || props.defaultCurrency || "BTC",
+      period: "3M",
+      periodDateRange: "",
+      dataType: "natural",
+      skewData: [],
+      tableData: [],
+      legendMap: {},
+      legendSelected: {}
+    });
+    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, () => {
+      state.legendSelected = {};
+      fetchData();
+    });
+    vue.watch(exchange, () => {
+      state.legendSelected = {};
+      fetchData();
+    });
+    vue.watch(
+      () => state.dataType,
+      () => {
+        if (state.skewData.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 `${chartHelp.formatDate(new Date(minTs))}-${chartHelp.formatDate(
+        new Date(maxTs)
+      )} ${chartHelp.getCurrentDateTimezone()}`;
+    };
+    const fetchData = () => {
+      state.loadingFlag = true;
+      dataLab.getSkewChart({
+        currency: currency.value,
+        gap: state.showTableCard ? "3M" : state.period,
+        exchange: exchange.value
+      }).then((res) => {
+        if (res && res.code === 200) {
+          state.skewData = res.data || [];
+          state.showTableCard && getTableData();
+          getLegendData();
+          if (!state.showTableCard) {
+            const nextRange = getPeriodDateRangeFromChartData(state.skewData);
+            if (nextRange)
+              state.periodDateRange = nextRange;
+          }
+        }
+      }).finally(() => {
+        state.loadingFlag = false;
+      });
+    };
+    vue.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 = chartHelp.showDateRange(selectedPeriod.days);
+      }
+      fetchData();
+    };
+    const handleToggleTableChart = () => {
+      state.showTableCard = !state.showTableCard;
+      fetchData();
+    };
+    const handleLegendSelectChanged = (params) => {
+      state.legendSelected = params.selected;
+    };
+    const getTableData = () => {
+      let data = state.skewData || [];
+      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.skewData];
+      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: 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: [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].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>${chartHelp.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: "center",
+          width: "90%",
+          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: "Skew(%)",
+          nameLocation: "end",
+          nameGap: 10,
+          nameRotate: 0,
+          nameTextStyle: {
+            color: isDark.value ? "#8B959F" : "#8B959F",
+            fontWeight: 400,
+            fontSize: 10,
+            padding: isMobile.value ? [0, 0, 0, 3] : [0, 0, 0, 15]
+          },
+          axisLine: {
+            lineStyle: {
+              color: isDark.value ? "#CED4DA" : "#343A40"
+            }
+          },
+          splitLine: {
+            lineStyle: {
+              color: isDark.value ? "#2B2F32" : "#F1F1F1",
+              width: 1,
+              type: "solid"
+            }
+          }
+        },
+        grid: {
+          top: 60,
+          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 = vue.computed(() => {
+      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_toggle_button = vue.resolveComponent("g-toggle-button");
+      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[2] || (_cache[2] = ($event) => vue.isRef(currency) ? currency.value = $event : null),
+            exchange: vue.unref(exchange),
+            "onUpdate:exchange": _cache[3] || (_cache[3] = ($event) => vue.isRef(exchange) ? exchange.value = $event : null),
+            loading: state.loadingFlag,
+            operations: [state.showTableCard ? "line" : "toggle"],
+            onOperation: handleToggleTableChart,
+            onRefresh: fetchData
+          }, {
+            title: vue.withCtx(() => [
+              _hoisted_1,
+              vue.createVNode(_component_g_tooltip, { isMobile: vue.unref(isMobile) }, {
+                title: vue.withCtx(() => [
+                  vue.createElementVNode("div", {
+                    class: "greeks-panel-tip",
+                    innerHTML: vue.unref(t)("message.deltaSkewTips")
+                  }, null, 8, _hoisted_2)
+                ]),
+                default: vue.withCtx(() => [
+                  vue.createVNode(_component_g_icon, { name: "info_question_circle" })
+                ]),
+                _: 1
+              }, 8, ["isMobile"])
+            ]),
+            tool: vue.withCtx(() => [
+              state.showTableCard ? (vue.openBlock(), vue.createElementBlock(
+                vue.Fragment,
+                { key: 0 },
+                [
+                  vue.createElementVNode(
+                    "span",
+                    _hoisted_3,
+                    vue.toDisplayString(vue.unref(t)("message.mode")),
+                    1
+                  ),
+                  vue.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
+              )) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_4, [
+                vue.createElementVNode(
+                  "span",
+                  _hoisted_5,
+                  vue.toDisplayString(vue.unref(t)("message.range")),
+                  1
+                ),
+                vue.createVNode(_component_g_select, {
+                  value: state.period,
+                  "onUpdate:value": _cache[1] || (_cache[1] = ($event) => state.period = $event),
+                  onChange: handleChangePeriod,
+                  size: vue.unref(isPC) ? "small" : "medium"
+                }, {
+                  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_6,
+                  vue.toDisplayString(state.periodDateRange),
+                  1
+                )
+              ]))
+            ]),
+            body: vue.withCtx(() => [
+              state.showTableCard ? (vue.openBlock(), vue.createBlock(_component_g_chart_table, {
+                key: 0,
+                tableData: state.tableData,
+                name: "SKEW"
+              }, null, 8, ["tableData"])) : (vue.openBlock(), vue.createElementBlock(
+                "div",
+                _hoisted_7,
+                [
+                  vue.createVNode(_component_g_chart, {
+                    class: "skew-chart",
+                    option: vue.unref(chartOption),
+                    onLegendselectchanged: handleLegendSelectChanged
+                  }, null, 8, ["option"])
+                ],
+                512
+              ))
+            ]),
+            _: 1
+          }, 8, ["currency", "exchange", "loading", "operations"])
+        ],
+        2
+      );
+    };
   }
 });
+var PanelSkew = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["__file", "/Users/luobowen/Desktop/greeks/greeks-live-ui/packages/components/panel-skew/src/panel-skew.vue"]]);
 
-exports.panelSkewEmits = panelSkewEmits;
-exports.panelSkewProps = panelSkewProps;
+exports["default"] = PanelSkew;
 //# sourceMappingURL=panel-skew.js.map