greeks-live-ui 0.0.21 → 0.0.22

package/es/packages/components/panel-skew/src/panel-skew2.mjs

@@ -1,679 +1,28 @@
-import { createTextVNode, defineComponent, computed, reactive, watch, onMounted, resolveComponent, openBlock, createElementBlock, normalizeClass, unref, createVNode, isRef, createSlots, withCtx, createElementVNode, createBlock, toDisplayString, Fragment, renderList, normalizeStyle } from 'vue';
-import '../../../hooks/index.mjs';
-import { panelSkewProps, panelSkewEmits } from './panel-skew.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 { getSkewChart } from '../../../utils/dataLab.mjs';
-import { showDateRange, formatDateForNumber, getTooltipDate } from '../../../utils/chartHelp.mjs';
+import { buildProps } from '../../../utils/vue/props/runtime.mjs';
 
-const _hoisted_1 = /* @__PURE__ */ createTextVNode(" 25\u0394 Skew ");
-const _hoisted_2 = ["innerHTML"];
-const _hoisted_3 = { class: "period-range h5-hide" };
-const _hoisted_4 = {
-  key: 1,
-  class: "echart",
-  ref: "echart"
+const panelSkewEmits = {
+  "update:currency": (currency) => true,
+  "update:exchange": (exchange) => true
 };
-const _hoisted_5 = { class: "h5-tip-title" };
-const _hoisted_6 = { class: "h5-legend" };
-const __default__ = {
-  name: "GPanelSkew"
-};
-const _sfc_main = defineComponent({
-  ...__default__,
-  props: panelSkewProps,
-  emits: panelSkewEmits,
-  setup(__props, { emit }) {
-    const props = __props;
-    const ns = useNamespace("panel-skew");
-    const { t } = useLocale();
-    const { isMobile, isPC } = useDeviceType();
-    const { isDark } = useTheme();
-    let legendList = [
-      {
-        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(() => {
-      let list = [
-        {
-          value: "ALL",
-          label: "All",
-          days: 0,
-          color: "#00B42A"
-        },
-        ...legendList
-      ];
-      if (isMobile.value) {
-        list = list.slice(1);
-      }
-      return list;
-    });
-    const state = reactive({
-      loadingFlag: false,
-      showTableCard: true,
-      isToolTipShow: false,
-      toolTipTitle: "",
-      exchange: props.exchange || props.defaultExchange || "Deribit",
-      currency: props.currency || props.defaultCurrency || "BTC",
-      period: "3M",
-      periodDateRange: "",
-      skewData: [],
-      tableData: [],
-      legendMap: {}
-    });
-    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;
-      getSkewChart({
-        currency: currency.value,
-        gap: state.showTableCard ? "3M" : state.period
-      }).then((res) => {
-        if (res && res.code === 200) {
-          state.skewData = res.data || [];
-          state.showTableCard && getTableData();
-          getLegendData();
-        }
-      }).finally(() => {
-        state.loadingFlag = false;
-      });
-    };
-    onMounted(() => {
-      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 getTableData = () => {
-      let data = state.skewData || [];
-      let day1 = 864e5;
-      let data0 = data[data.length - 1];
-      let dataDate1 = formatDateForNumber(data0.timestamps - day1);
-      let dataDate2 = formatDateForNumber(data0.timestamps - day1 * 2);
-      let dataDate7 = formatDateForNumber(data0.timestamps - day1 * 7);
-      let dataDate15 = formatDateForNumber(data0.timestamps - day1 * 14);
-      let dataDate30 = formatDateForNumber(data0.timestamps - day1 * 30);
-      let map = {};
-      data.forEach((item) => {
-        let date = formatDateForNumber(item.timestamps);
-        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.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 month", atm: data0.days60 };
-      let dataMap5 = { expire: "3 month", atm: data0.days90 };
-      let dataMap6 = { expire: "6 month", 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),
-        "1W": getLegendValue(days7),
-        "1M": getLegendValue(days30),
-        "2M": getLegendValue(days60),
-        "3M": getLegendValue(days90),
-        "6M": getLegendValue(days180),
-        "1Y": getLegendValue(days365)
-      };
-    };
-    const getEchartData = () => {
-      let data = [...state.skewData];
-      let date = [];
-      let day1 = [];
-      let days7 = [];
-      let days30 = [];
-      let days60 = [];
-      let days90 = [];
-      let days180 = [];
-      let days365 = [];
-      data.forEach((item) => {
-        day1.push(item.day1);
-        days7.push(item.days7);
-        days30.push(item.days30);
-        days60.push(item.days60);
-        days90.push(item.days90);
-        days180.push(item.days180);
-        days365.push(item.days365);
-        date.push(formatDateForNumber(Number(item.timestamps)));
-      });
-      return {
-        date,
-        day1,
-        days7,
-        days30,
-        days60,
-        days90,
-        days180,
-        days365
-      };
-    };
-    const getEchartOption = (params) => {
-      const { date, 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: 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: 0,
-          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].toFixed(2)}%)`;
-                case "1 W":
-                  return name + ` (${days7[days7.length - 1].toFixed(2)}%)`;
-                case "1 M":
-                  return name + ` (${days30[days30.length - 1].toFixed(2)}%)`;
-                case "2 M":
-                  return name + ` (${days60[days60.length - 1].toFixed(2)}%)`;
-                case "3 M":
-                  return name + ` (${days90[days90.length - 1].toFixed(2)}%)`;
-                case "6 M":
-                  return name + ` (${days180[days180.length - 1].toFixed(2)}%)`;
-                case "1 Y":
-                  return name + ` (${days365[days365.length - 1].toFixed(2)}%)`;
-              }
-            } 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,
-            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: [
-          {
-            name: "1 D",
-            key: 1,
-            type: "line",
-            symbol: "none",
-            data: day1
-          },
-          {
-            name: "1 W",
-            key: 7,
-            type: "line",
-            symbol: "none",
-            data: days7
-          },
-          {
-            name: "1 M",
-            key: 30,
-            type: "line",
-            symbol: "none",
-            data: days30
-          },
-          {
-            name: "2 M",
-            key: 60,
-            type: "line",
-            symbol: "none",
-            data: days60
-          },
-          {
-            name: "3 M",
-            key: 90,
-            type: "line",
-            symbol: "none",
-            data: days90
-          },
-          {
-            name: "6 M",
-            key: 180,
-            type: "line",
-            symbol: "none",
-            data: days180
-          },
-          {
-            name: "1 Y",
-            key: 365,
-            type: "line",
-            symbol: "none",
-            data: days365
-          }
-        ]
-      };
-      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[3] || (_cache[3] = ($event) => isRef(currency) ? currency.value = $event : null),
-            exchange: unref(exchange),
-            "onUpdate:exchange": _cache[4] || (_cache[4] = ($event) => isRef(exchange) ? exchange.value = $event : null),
-            loading: state.loadingFlag,
-            operations: ["toggle"],
-            onToggle: handleToggleTableChart,
-            onRefresh: fetchData
-          }, createSlots({
-            title: withCtx(() => [
-              createVNode(_component_g_tooltip, { placement: "bottom" }, {
-                title: withCtx(() => [
-                  createElementVNode("div", {
-                    innerHTML: unref(t)("message.deltaSkewTips")
-                  }, null, 8, _hoisted_2)
-                ]),
-                default: withCtx(() => [
-                  _hoisted_1,
-                  createVNode(_component_g_icon, { type: "info_question_circle" })
-                ]),
-                _: 1
-              })
-            ]),
-            body: withCtx(() => [
-              state.showTableCard ? (openBlock(), createBlock(_component_g_chart_table, {
-                key: 0,
-                tableData: state.tableData,
-                name: "SKEW"
-              }, null, 8, ["tableData"])) : (openBlock(), createElementBlock(
-                "div",
-                _hoisted_4,
-                [
-                  createElementVNode(
-                    "div",
-                    {
-                      class: normalizeClass({
-                        "h5-legend-box-hover": state.isToolTipShow,
-                        "h5-legend-box": true,
-                        "pc-hide": true
-                      })
-                    },
-                    [
-                      createElementVNode(
-                        "h6",
-                        _hoisted_5,
-                        toDisplayString(state.toolTipTitle),
-                        1
-                      ),
-                      createElementVNode("div", _hoisted_6, [
-                        (openBlock(true), createElementBlock(
-                          Fragment,
-                          null,
-                          renderList(unref(legendList), (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[1] || (_cache[1] = ($event) => handleTipShow(true)),
-                    onHideTip: _cache[2] || (_cache[2] = ($event) => handleTipShow(false))
-                  }, null, 8, ["option"])
-                ],
-                512
-              ))
-            ]),
-            _: 2
-          }, [
-            !state.showTableCard ? {
-              name: "tool",
-              fn: withCtx(() => [
-                createVNode(_component_g_select, {
-                  value: state.period,
-                  "onUpdate:value": _cache[0] || (_cache[0] = ($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_3,
-                  toDisplayString(state.periodDateRange),
-                  1
-                )
-              ])
-            } : void 0
-          ]), 1032, ["currency", "exchange", "loading"])
-        ],
-        2
-      );
-    };
+const panelSkewProps = buildProps({
+  defaultCurrency: {
+    type: String,
+    required: false
+  },
+  defaultExchange: {
+    type: String,
+    required: false
+  },
+  currency: {
+    type: String,
+    required: false
+  },
+  exchange: {
+    type: String,
+    required: false
   }
 });
-var PanelSkew = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "/Users/luobowen/Desktop/greeks/greeks-live-ui/packages/components/panel-skew/src/panel-skew.vue"]]);
 
-export { PanelSkew as default };
+export { panelSkewEmits, panelSkewProps };
 //# sourceMappingURL=panel-skew2.mjs.map