greeks-live-ui 0.1.21 → 0.1.22

package/es/packages/components/panel-sabr-iv-curve/src/panel-sabr-iv-curve2.mjs

@@ -1,592 +1,32 @@
-import { defineComponent, reactive, computed, watch, onMounted, resolveComponent, openBlock, createElementBlock, normalizeClass, unref, createVNode, isRef, withCtx, createTextVNode, toDisplayString, createElementVNode, Fragment, renderList, createBlock, renderSlot } from 'vue';
-import { GProBadge } from '../../pro-badge/index.mjs';
-import '../../../hooks/index.mjs';
 import '../../../utils/index.mjs';
-import { panelSabrIvCurveProps, panelSabrIvCurveEmits } from './panel-sabr-iv-curve.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 { thousandthFormat, showEndDateTime, parseExpiryToDate } from '../../../utils/chartHelp.mjs';
-import { buildSabrIvCurvePreviewState } from '../../../utils/sabrPreview.mjs';
-import { getSabrIvCurve, getSabrDiagnostics } from '../../../utils/dataLab.mjs';
+import { buildProps } from '../../../utils/vue/props/runtime.mjs';
 
-const _hoisted_1 = ["innerHTML"];
-const _hoisted_2 = { class: "tool-left" };
-const _hoisted_3 = { class: "expiry-row" };
-const _hoisted_4 = { class: "selector-label" };
-const _hoisted_5 = { class: "metrics-row" };
-const _hoisted_6 = { class: "metric-item" };
-const _hoisted_7 = { class: "metric-item" };
-const _hoisted_8 = { class: "metric-item" };
-const _hoisted_9 = { class: "period-controls" };
-const _hoisted_10 = { class: "selector-label h5-hide" };
-const _hoisted_11 = { class: "period-range" };
-const _hoisted_12 = {
-  class: "echart",
-  ref: "echart"
+const panelSabrIvCurveEmits = {
+  "update:currency": (currency) => true,
+  "update:exchange": (exchange) => true
 };
-const __default__ = {
-  name: "GPanelSabrIvCurve"
-};
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  ...__default__,
-  props: panelSabrIvCurveProps,
-  emits: panelSabrIvCurveEmits,
-  setup(__props, { emit: emits }) {
-    const props = __props;
-    const ns = useNamespace("panel-sabr-iv-curve");
-    const { t } = useLocale();
-    const { isMobile, isPC } = useDeviceType();
-    const { isDark } = useTheme();
-    const state = reactive({
-      loadingFlag: false,
-      exchange: "deribit",
-      currency: "BTC",
-      expiryOptions: [],
-      selectedExpiry: "",
-      snapshotTs: 0,
-      snapshotTimeDisplay: "-",
-      rmseBps: 0,
-      forward: 0,
-      strikesCount: 0,
-      modelCurve: [],
-      marketPoints: []
-    });
-    const currency = computed({
-      get: () => "BTC",
-      set: (newVal) => {
-        emits("update:currency", newVal);
-      }
-    });
-    const exchange = computed({
-      get: () => "deribit",
-      set: (newVal) => {
-        emits("update:exchange", newVal);
-      }
-    });
-    const currencyList = [{ value: "BTC", label: "BTC", icon: "currency_btc" }];
-    const isValidNumber = (value) => typeof value === "number" && Number.isFinite(value);
-    const formatRmse = (value) => isValidNumber(value) ? value.toFixed(1) : "-";
-    const formatForward = (value) => isValidNumber(value) ? thousandthFormat(value, 2) : "-";
-    const formatStrikes = (value) => isValidNumber(value) ? thousandthFormat(value, 0) : "-";
-    const formatStrike = (value) => Number(value).toLocaleString(void 0, {
-      minimumFractionDigits: 0,
-      maximumFractionDigits: 8
-    });
-    const formatIvPercent = (value) => isValidNumber(value) ? `${value.toFixed(2)}%` : "-";
-    const normalizeIvPercent = (value) => {
-      if (value === null || value === void 0 || value === "") {
-        return null;
-      }
-      const n = Number(value);
-      if (!Number.isFinite(n))
-        return null;
-      return Math.abs(n) <= 2 ? n * 100 : n;
-    };
-    const resetCurveData = () => {
-      state.snapshotTs = 0;
-      state.snapshotTimeDisplay = "-";
-      state.rmseBps = 0;
-      state.forward = 0;
-      state.strikesCount = 0;
-      state.modelCurve = [];
-      state.marketPoints = [];
-    };
-    const applyPreviewData = () => {
-      state.loadingFlag = false;
-      state.exchange = "deribit";
-      const preview = buildSabrIvCurvePreviewState();
-      state.expiryOptions = preview.expiryOptions;
-      state.selectedExpiry = preview.selectedExpiry;
-      state.snapshotTs = preview.snapshotTs;
-      state.snapshotTimeDisplay = preview.snapshotTs > 0 ? showEndDateTime(preview.snapshotTs) : "-";
-      state.rmseBps = preview.rmseBps;
-      state.forward = preview.forward;
-      state.strikesCount = preview.strikesCount;
-      state.modelCurve = preview.modelCurve;
-      state.marketPoints = preview.marketPoints;
-    };
-    const fetchIvCurveByExpiry = async (expiry) => {
-      if (props.previewMode) {
-        return;
-      }
-      if (!expiry) {
-        resetCurveData();
-        return;
-      }
-      const res = await getSabrIvCurve({
-        currency: "BTC",
-        exchange: "deribit",
-        expiry
-      });
-      if (res && res.code === 200 && res.data) {
-        state.snapshotTs = Number(res.data.ts || 0);
-        state.snapshotTimeDisplay = state.snapshotTs > 0 ? showEndDateTime(state.snapshotTs) : "-";
-        state.rmseBps = Number(res.data.rmse_bps || 0);
-        state.forward = Number(res.data.forward || 0);
-        state.strikesCount = Number(res.data.strikes_count || 0);
-        state.modelCurve = Array.isArray(res.data.model_curve) ? res.data.model_curve : [];
-        state.marketPoints = Array.isArray(res.data.market_points) ? res.data.market_points : [];
-        return;
-      }
-      resetCurveData();
-    };
-    const fetchDiagnosticsExpiries = async () => {
-      const res = await getSabrDiagnostics({
-        currency: "BTC",
-        exchange: "deribit"
-      });
-      if (res && res.code === 200 && res.data) {
-        const rows = Array.isArray(res.data.expiries) ? res.data.expiries : [];
-        const allExpiries = Array.from(
-          new Set(
-            rows.map((item) => String(item.expiry || "").trim()).filter((expiry) => expiry.length > 0)
-          )
-        ).sort(
-          (a, b) => parseExpiryToDate(a).getTime() - parseExpiryToDate(b).getTime()
-        );
-        state.expiryOptions = allExpiries;
-        return;
-      }
-      state.expiryOptions = [];
-    };
-    const fetchAllData = async () => {
-      if (props.previewMode) {
-        applyPreviewData();
-        return;
-      }
-      state.loadingFlag = true;
-      state.exchange = "deribit";
-      try {
-        await fetchDiagnosticsExpiries();
-        const hasCurrent = state.expiryOptions.includes(state.selectedExpiry);
-        state.selectedExpiry = hasCurrent ? state.selectedExpiry : state.expiryOptions[0] || "";
-        await fetchIvCurveByExpiry(state.selectedExpiry);
-      } finally {
-        state.loadingFlag = false;
-      }
-    };
-    const handleExpiryChange = async (value) => {
-      if (props.previewMode) {
-        return;
-      }
-      state.selectedExpiry = value;
-      state.loadingFlag = true;
-      try {
-        await fetchIvCurveByExpiry(state.selectedExpiry);
-      } finally {
-        state.loadingFlag = false;
-      }
-    };
-    const strikeKey = (value) => value.toFixed(8);
-    const marketPointMap = computed(() => {
-      const map = /* @__PURE__ */ new Map();
-      state.marketPoints.forEach((point) => {
-        if (point.strike_kind === 0 && isValidNumber(point.strike)) {
-          map.set(strikeKey(point.strike), point);
-        }
-      });
-      return map;
-    });
-    const interpolatedPointMap = computed(() => {
-      const map = /* @__PURE__ */ new Map();
-      state.marketPoints.forEach((point) => {
-        if (point.strike_kind === 1 && isValidNumber(point.strike)) {
-          map.set(strikeKey(point.strike), point);
-        }
-      });
-      return map;
-    });
-    const nearestModelIv = (strike) => {
-      let nearestIv = null;
-      let nearestDelta = Number.POSITIVE_INFINITY;
-      state.modelCurve.forEach((point) => {
-        if (!isValidNumber(point.k) || !isValidNumber(point.iv))
-          return;
-        const delta = Math.abs(point.k - strike);
-        if (delta < nearestDelta) {
-          nearestDelta = delta;
-          nearestIv = point.iv;
-        }
-      });
-      return nearestIv;
-    };
-    const chartOption = computed(() => {
-      const modelData = state.modelCurve.map((item) => {
-        const k = Number(item.k);
-        const iv = normalizeIvPercent(item.iv);
-        return Number.isFinite(k) && isValidNumber(iv) ? [k, iv] : null;
-      }).filter((item) => Array.isArray(item));
-      const marketLineData = state.marketPoints.filter((item) => item.strike_kind === 0).map((item) => {
-        const strike = Number(item.strike);
-        const ivMid = normalizeIvPercent(item.iv_mid);
-        return Number.isFinite(strike) ? [strike, ivMid] : null;
-      }).filter((item) => Array.isArray(item)).sort((a, b) => a[0] - b[0]);
-      const interpolatedData = state.marketPoints.filter((item) => item.strike_kind === 1).map((item) => {
-        const strike = Number(item.strike);
-        const y = normalizeIvPercent(item.iv_model);
-        return Number.isFinite(strike) && isValidNumber(y) ? [strike, y] : null;
-      }).filter((point) => Array.isArray(point)).sort((a, b) => a[0] - b[0]);
-      return {
-        color: ["#1fad9c", "#8B959F", "#FF9A2E"],
-        legend: {
-          top: 0,
-          left: "center",
-          itemGap: isMobile.value ? 6 : 16,
-          textStyle: {
-            color: isDark.value ? "#CED4DA" : "#596169",
-            fontSize: 12
-          },
-          data: [
-            {
-              name: t("message.sabrIVLegendModel"),
-              icon: "path://M14.5 0C15.3284 0 16 0.671573 16 1.5C16 2.32843 15.3284 3 14.5 3H1.5C0.671573 3 0 2.32843 0 1.5C0 0.671573 0.671573 0 1.5 0H14.5Z"
-            },
-            {
-              name: t("message.sabrIVLegendMarket"),
-              icon: "path://M2.5 2C3.05228 2 3.5 2.44772 3.5 3C3.5 3.55228 3.05228 4 2.5 4H1C0.447715 4 0 3.55228 0 3C0 2.44772 0.447715 2 1 2H2.5ZM8.5 2C9.05228 2 9.5 2.44772 9.5 3C9.5 3.55228 9.05228 4 8.5 4H5.5C4.94772 4 4.5 3.55228 4.5 3C4.5 2.44772 4.94772 2 5.5 2H8.5ZM20.5 2C21.0523 2 21.5 2.44772 21.5 3C21.5 3.55228 21.0523 4 20.5 4H17.5C16.9477 4 16.5 3.55228 16.5 3C16.5 2.44772 16.9477 2 17.5 2H20.5ZM25 2C25.5523 2 26 2.44772 26 3C26 3.55228 25.5523 4 25 4H23.5C22.9477 4 22.5 3.55228 22.5 3C22.5 2.44772 22.9477 2 23.5 2H25Z M13,0 A3,3,0,0,1,16,3 A3,3,0,0,1,13,6 A3,3,0,0,1,10,3 A3,3,0,0,1,13,0Z M13,1.5 A1.5,1.5,0,0,0,11.5,3 A1.5,1.5,0,0,0,13,4.5 A1.5,1.5,0,0,0,14.5,3 A1.5,1.5,0,0,0,13,1.5Z"
-            },
-            {
-              name: t("message.sabrIVLegendInterpolated")
-            }
-          ]
-        },
-        tooltip: {
-          trigger: "axis",
-          axisPointer: {
-            type: "cross",
-            snap: false,
-            label: {
-              show: true,
-              backgroundColor: "#DEE2E6",
-              color: "#343A40",
-              fontSize: 10,
-              padding: [4, 6, 4, 8],
-              formatter: (params) => {
-                if ((params == null ? void 0 : params.axisDimension) === "y") {
-                  const y = Number(params == null ? void 0 : params.value);
-                  return Number.isFinite(y) ? `${y.toFixed(2)}%` : "-";
-                }
-                const x = params == null ? void 0 : params.value;
-                const xNum = Number(x);
-                return Number.isFinite(xNum) ? formatStrike(xNum) : "-";
-              }
-            }
-          },
-          backgroundColor: isDark.value ? "#E9ECEF" : "#292F3D",
-          borderWidth: 0,
-          padding: [6, 8, 5, 6],
-          textStyle: {
-            color: isDark.value ? "#000000" : "#FFFFFF",
-            fontSize: 12,
-            lineHeight: 16,
-            fontWeight: 400
-          },
-          formatter: (params) => {
-            var _a, _b;
-            const first = Array.isArray(params) && params.length > 0 ? params[0] : null;
-            if (!first)
-              return "";
-            const strike = Number(first.axisValue);
-            const strikeText = isValidNumber(strike) ? formatStrike(strike) : "-";
-            const marketPoint = marketPointMap.value.get(strikeKey(strike));
-            const interpolatedPoint = interpolatedPointMap.value.get(
-              strikeKey(strike)
-            );
-            const isInterpolated = Boolean(interpolatedPoint);
-            const sabrIvRaw = isInterpolated ? (_a = interpolatedPoint == null ? void 0 : interpolatedPoint.iv_model) != null ? _a : nearestModelIv(strike) : isValidNumber(marketPoint == null ? void 0 : marketPoint.iv_model) ? marketPoint == null ? void 0 : marketPoint.iv_model : nearestModelIv(strike);
-            const marketIvRaw = isInterpolated ? null : (_b = marketPoint == null ? void 0 : marketPoint.iv_mid) != null ? _b : null;
-            const sabrIv = normalizeIvPercent(sabrIvRaw);
-            const marketIv = normalizeIvPercent(marketIvRaw);
-            const strikeLine = isInterpolated ? `${strikeText} <span style="color:#ADB5BD;">(${t(
-              "message.sabrIVInterpolatedStrike"
-            )})</span>` : strikeText;
-            const sabrRow = `
-            <div class="chart-tooltip">
-              <div>
-                <span class="chart-tooltip-line" style="background-color:#1fad9c;"></span>
-                <span>${t("message.sabrIVTooltipSabrAtmIv")}</span>
-              </div>
-              <span class="chart-tooltip-value">${formatIvPercent(
-              sabrIv
-            )}</span>
-            </div>`;
-            const marketRow = `
-            <div class="chart-tooltip">
-              <div>
-                <span class="sabr-tooltip-legend sabr-tooltip-legend--market-mid" aria-hidden="true">
-                  <span class="sabr-tooltip-legend-segment"></span>
-                  <span class="sabr-tooltip-legend-dot"></span>
-                  <span class="sabr-tooltip-legend-segment"></span>
-                </span>
-                <span>${t("message.sabrIVTooltipMarketMidIv")}</span>
-              </div>
-              <span class="chart-tooltip-value">${formatIvPercent(
-              marketIv
-            )}</span>
-            </div>`;
-            return `<div class="chart-tooltip-box"><div style="margin-bottom:4px;">${strikeLine}</div>${sabrRow}${marketRow}</div>`;
-          }
-        },
-        grid: {
-          top: isMobile.value ? 50 : 40,
-          left: "left",
-          right: 16,
-          bottom: 30,
-          containLabel: true
-        },
-        xAxis: {
-          type: "value",
-          scale: true,
-          axisTick: { show: false },
-          axisLine: { show: false },
-          axisLabel: {
-            color: isDark.value ? "#CED4DA" : "#343A40",
-            fontWeight: 400,
-            fontSize: 10,
-            formatter: (value) => formatStrike(value)
-          },
-          splitLine: {
-            show: false
-          }
-        },
-        yAxis: {
-          type: "value",
-          scale: true,
-          name: t("message.sabrIVYAxisLabel"),
-          nameTextStyle: {
-            color: "#8B959F",
-            fontSize: 10,
-            padding: [0, 0, 0, 0]
-          },
-          axisTick: { show: false },
-          axisLine: { show: false },
-          axisLabel: {
-            color: isDark.value ? "#CED4DA" : "#343A40",
-            fontWeight: 400,
-            fontSize: 10,
-            formatter: (value) => `${value.toFixed(2)}%`
-          },
-          splitLine: {
-            lineStyle: {
-              color: isDark.value ? "#2B2F32" : "#F1F1F1",
-              width: 1
-            }
-          }
-        },
-        series: [
-          {
-            name: t("message.sabrIVLegendModel"),
-            type: "line",
-            smooth: true,
-            showSymbol: false,
-            symbol: "none",
-            silent: true,
-            tooltip: {
-              show: false
-            },
-            lineStyle: {
-              color: "#1fad9c"
-            },
-            data: modelData
-          },
-          {
-            name: t("message.sabrIVLegendMarket"),
-            type: "line",
-            showSymbol: true,
-            connectNulls: false,
-            symbolSize: 5,
-            lineStyle: {
-              width: 1,
-              type: "dashed",
-              color: "#8B959F"
-            },
-            data: marketLineData
-          },
-          {
-            name: t("message.sabrIVLegendInterpolated"),
-            type: "scatter",
-            symbol: "circle",
-            symbolSize: 5,
-            itemStyle: {
-              color: "transparent",
-              borderColor: "#FF9A2E",
-              borderWidth: 2
-            },
-            tooltip: {
-              show: true
-            },
-            data: interpolatedData
-          }
-        ]
-      };
-    });
-    watch(
-      () => props.previewMode,
-      (locked, wasLocked) => {
-        if (locked) {
-          applyPreviewData();
-          return;
-        }
-        if (wasLocked === true) {
-          fetchAllData();
-        }
-      }
-    );
-    onMounted(() => {
-      if (props.previewMode) {
-        applyPreviewData();
-      } else {
-        fetchAllData();
-      }
-    });
-    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 = 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[1] || (_cache[1] = ($event) => isRef(currency) ? currency.value = $event : null),
-            exchange: unref(exchange),
-            "onUpdate:exchange": _cache[2] || (_cache[2] = ($event) => isRef(exchange) ? exchange.value = $event : null),
-            loading: state.loadingFlag,
-            showExchangeSelector: false,
-            showCurrencySelector: false,
-            currencyList,
-            "content-locked": props.previewMode,
-            onRefresh: fetchAllData
-          }, {
-            title: withCtx(() => [
-              createTextVNode(
-                toDisplayString(unref(t)("message.sabrIVTitle")) + " ",
-                1
-              ),
-              createVNode(_component_g_tooltip, { placement: "bottom" }, {
-                title: withCtx(() => [
-                  createElementVNode("div", {
-                    class: "greeks-panel-tip",
-                    innerHTML: unref(t)("message.sabrIVTips")
-                  }, null, 8, _hoisted_1)
-                ]),
-                default: withCtx(() => [
-                  createVNode(_component_g_icon, { name: "info_question_circle" })
-                ]),
-                _: 1
-              }),
-              createVNode(unref(GProBadge))
-            ]),
-            tool: withCtx(() => [
-              createElementVNode("div", _hoisted_2, [
-                createElementVNode("div", _hoisted_3, [
-                  createElementVNode(
-                    "span",
-                    _hoisted_4,
-                    toDisplayString(unref(t)("message.expiry")),
-                    1
-                  ),
-                  createVNode(_component_g_select, {
-                    value: state.selectedExpiry,
-                    "onUpdate:value": _cache[0] || (_cache[0] = ($event) => state.selectedExpiry = $event),
-                    size: unref(isPC) ? "small" : "medium",
-                    class: "expiry-select",
-                    onChange: handleExpiryChange
-                  }, {
-                    default: withCtx(() => [
-                      (openBlock(true), createElementBlock(
-                        Fragment,
-                        null,
-                        renderList(state.expiryOptions, (expiry) => {
-                          return openBlock(), createBlock(_component_g_select_option, {
-                            key: expiry,
-                            value: expiry
-                          }, {
-                            default: withCtx(() => [
-                              createTextVNode(
-                                toDisplayString(expiry),
-                                1
-                              )
-                            ]),
-                            _: 2
-                          }, 1032, ["value"]);
-                        }),
-                        128
-                      ))
-                    ]),
-                    _: 1
-                  }, 8, ["value", "size"])
-                ]),
-                createElementVNode("div", _hoisted_5, [
-                  createElementVNode(
-                    "span",
-                    _hoisted_6,
-                    "RMSE " + toDisplayString(formatRmse(state.rmseBps)) + " bps",
-                    1
-                  ),
-                  createElementVNode(
-                    "span",
-                    _hoisted_7,
-                    "| Forward " + toDisplayString(formatForward(state.forward)),
-                    1
-                  ),
-                  createElementVNode(
-                    "span",
-                    _hoisted_8,
-                    "| " + toDisplayString(formatStrikes(state.strikesCount)) + " " + toDisplayString(unref(t)("message.sabrIVStrikes")),
-                    1
-                  )
-                ])
-              ]),
-              createElementVNode("div", _hoisted_9, [
-                createElementVNode(
-                  "span",
-                  _hoisted_10,
-                  toDisplayString(unref(t)("message.time")),
-                  1
-                ),
-                createElementVNode(
-                  "span",
-                  _hoisted_11,
-                  toDisplayString(state.snapshotTimeDisplay),
-                  1
-                )
-              ])
-            ]),
-            body: withCtx(() => [
-              createElementVNode(
-                "div",
-                _hoisted_12,
-                [
-                  createVNode(_component_g_chart, {
-                    class: "skew-chart",
-                    option: unref(chartOption)
-                  }, null, 8, ["option"])
-                ],
-                512
-              )
-            ]),
-            "content-locked-overlay": withCtx(() => [
-              renderSlot(_ctx.$slots, "content-locked-overlay")
-            ]),
-            _: 3
-          }, 8, ["currency", "exchange", "loading", "content-locked"])
-        ],
-        2
-      );
-    };
+const panelSabrIvCurveProps = buildProps({
+  defaultCurrency: {
+    type: String,
+    required: false
+  },
+  defaultExchange: {
+    type: String,
+    required: false
+  },
+  currency: {
+    type: String,
+    required: false
+  },
+  exchange: {
+    type: String,
+    required: false
+  },
+  previewMode: {
+    type: Boolean,
+    default: false
   }
 });
-var PanelSabrIvCurve = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "/Users/luobowen/Desktop/greeks/greeks-live-ui/packages/components/panel-sabr-iv-curve/src/panel-sabr-iv-curve.vue"]]);
 
-export { PanelSabrIvCurve as default };
+export { panelSabrIvCurveEmits, panelSabrIvCurveProps };
 //# sourceMappingURL=panel-sabr-iv-curve2.mjs.map