greeks-live-ui 0.1.20 → 0.1.21

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

@@ -2,32 +2,748 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('../../../utils/index.js');
-var runtime = require('../../../utils/vue/props/runtime.js');
+var vue = require('vue');
+require('../../../hooks/index.js');
+var chartHelp = require('../../../utils/chartHelp.js');
+var dataLab = require('../../../utils/dataLab.js');
+var panelVrp = require('./panel-vrp2.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-device-type/index.js');
+var index$2 = require('../../../hooks/use-theme/index.js');
+var index$3 = require('../../../hooks/use-locale/index.js');
 
-const panelVrpEmits = {
-  "update:currency": (currency) => true,
-  "update:exchange": (exchange) => true
+const _hoisted_1 = ["innerHTML"];
+const _hoisted_2 = { class: "second-select" };
+const _hoisted_3 = { class: "selector-label h5-hide" };
+const _hoisted_4 = { class: "period-controls" };
+const _hoisted_5 = { class: "selector-label h5-hide" };
+const _hoisted_6 = { class: "period-range h5-hide" };
+const _hoisted_7 = {
+  class: "echart",
+  ref: "echart"
 };
-const panelVrpProps = runtime.buildProps({
-  defaultCurrency: {
-    type: String,
-    required: false
-  },
-  defaultExchange: {
-    type: String,
-    required: false
-  },
-  currency: {
-    type: String,
-    required: false
-  },
-  exchange: {
-    type: String,
-    required: false
+const __default__ = {
+  name: "GPanelVrp"
+};
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  ...__default__,
+  props: panelVrp.panelVrpProps,
+  emits: panelVrp.panelVrpEmits,
+  setup(__props, { emit }) {
+    const props = __props;
+    const ns = index.useNamespace("panel-vrp");
+    const { isMobile, isPC } = index$1.useDeviceType();
+    const { isDark } = index$2.useTheme();
+    const { t, locale } = index$3.useLocale();
+    const periodList = [
+      {
+        value: "1D",
+        label: "1D",
+        days: 1
+      },
+      {
+        value: "7D",
+        label: "7D",
+        days: 7
+      },
+      {
+        value: "15D",
+        label: "15D",
+        days: 15
+      },
+      {
+        value: "1M",
+        label: "1M",
+        days: 30
+      },
+      {
+        value: "3M",
+        label: "3M",
+        days: 90
+      },
+      {
+        value: "6M",
+        label: "6M",
+        days: 180
+      },
+      {
+        value: "1Y",
+        label: "1Y",
+        days: 365
+      }
+    ];
+    const volTenorList = ["1D", "3D", "7D", "15D", "1M", "3M"];
+    const state = vue.reactive({
+      loadingFlag: false,
+      exchange: props.exchange || props.defaultExchange || "Deribit",
+      currency: props.currency || props.defaultCurrency || "BTC",
+      volTenor: "15D",
+      period: "15D",
+      periodDateRange: "",
+      chartData: []
+    });
+    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;
+      }
+    });
+    const selectedPeriodDays = vue.computed(() => {
+      var _a, _b;
+      return (_b = (_a = periodList.find((item) => item.value === state.period)) == null ? void 0 : _a.days) != null ? _b : 0;
+    });
+    const filterChartDataByPeriod = (chartData, days) => {
+      if (!days) {
+        return chartData;
+      }
+      const cutoff = Date.now() - days * 24 * 60 * 60 * 1e3;
+      return chartData.filter((item) => item.datetime >= cutoff);
+    };
+    const filteredChartData = vue.computed(
+      () => filterChartDataByPeriod(state.chartData, selectedPeriodDays.value)
+    );
+    const getVolTenorResolution = (volTenor) => {
+      switch (volTenor) {
+        case "1D":
+          return 1;
+        case "3D":
+          return 3;
+        case "7D":
+          return 7;
+        case "15D":
+          return 15;
+        case "1M":
+          return 30;
+        case "3M":
+          return 90;
+        default:
+          return 15;
+      }
+    };
+    const buildVrpSeries = (chartData, volTenor) => {
+      const resolution = getVolTenorResolution(volTenor);
+      const vrpData = [];
+      chartData.forEach((item) => {
+        item.data.forEach((dataItem) => {
+          if (dataItem.day === resolution) {
+            vrpData.push([item.datetime, dataItem.iv - dataItem.rv]);
+          }
+        });
+      });
+      return vrpData;
+    };
+    const formatVrpPercent = (value, fractionDigits = 1) => {
+      if (value == null || !Number.isFinite(value)) {
+        return "-";
+      }
+      const fixed = Number(value).toFixed(fractionDigits);
+      if (Number(fixed) === 0) {
+        return "0.0%";
+      }
+      return `${fixed}%`;
+    };
+    const computeVrpStats = (values) => {
+      if (!values.length) {
+        return null;
+      }
+      let sum = 0;
+      let max = values[0];
+      let min = values[0];
+      values.forEach((value) => {
+        sum += value;
+        if (value > max)
+          max = value;
+        if (value < min)
+          min = value;
+      });
+      return {
+        mean: sum / values.length,
+        max,
+        min
+      };
+    };
+    const getZeroMarkLine = () => ({
+      name: "0",
+      yAxis: 0,
+      symbol: ["none", "arrow"],
+      symbolSize: [0, 8],
+      silent: true,
+      lineStyle: {
+        color: "#909399"
+      },
+      label: {
+        show: true,
+        position: "end",
+        color: isDark.value ? "#CED4DA" : "#343A40",
+        borderWidth: 0,
+        padding: 0,
+        shadowBlur: 0,
+        fontSize: 12
+      }
+    });
+    const getMeanMarkLine = (mean) => {
+      const meanLabel = mean.toFixed(1);
+      return {
+        name: "mean",
+        yAxis: mean,
+        symbol: ["none", "arrow"],
+        symbolSize: [0, 8],
+        silent: true,
+        lineStyle: {
+          color: "#ADB5BD",
+          type: "dashed"
+        },
+        label: {
+          show: true,
+          position: "end",
+          formatter: meanLabel,
+          color: isDark.value ? "#CED4DA" : "#343A40",
+          borderWidth: 0,
+          padding: 0,
+          shadowBlur: 0,
+          fontSize: 12
+        }
+      };
+    };
+    const vrpSeries = vue.computed(
+      () => buildVrpSeries(filteredChartData.value, state.volTenor)
+    );
+    const vrpStats = vue.computed(() => {
+      const values = vrpSeries.value.map(([, value]) => value);
+      return computeVrpStats(values);
+    });
+    const meanHeaderValue = vue.computed(() => {
+      var _a, _b;
+      if (state.loadingFlag) {
+        return "-";
+      }
+      return formatVrpPercent((_b = (_a = vrpStats.value) == null ? void 0 : _a.mean) != null ? _b : null, 1);
+    });
+    const statsDisplay = vue.computed(() => {
+      const days = `${selectedPeriodDays.value}d`;
+      if (state.loadingFlag || !vrpStats.value) {
+        return {
+          mean: "-",
+          max: "-",
+          min: "-",
+          days
+        };
+      }
+      return {
+        mean: formatVrpPercent(vrpStats.value.mean, 1),
+        max: formatVrpPercent(vrpStats.value.max, 1),
+        min: formatVrpPercent(vrpStats.value.min, 1),
+        days
+      };
+    });
+    vue.watch(currency, () => {
+      fetchData();
+    });
+    vue.watch(exchange, () => {
+      fetchData();
+    });
+    const fetchData = () => {
+      state.loadingFlag = true;
+      dataLab.getVrp({
+        currency: currency.value,
+        gap: state.period,
+        exchange: exchange.value
+      }).then((res) => {
+        var _a;
+        const resData = (_a = res.data) == null ? void 0 : _a.data;
+        if (!resData) {
+          state.chartData = [];
+          return;
+        }
+        state.chartData = resData;
+      }).finally(() => {
+        state.loadingFlag = false;
+      });
+    };
+    vue.onMounted(() => {
+      handleChangePeriod(state.period);
+    });
+    const handleChangePeriod = (value) => {
+      const selectedPeriod = periodList.find((v) => v.value === value);
+      if (!selectedPeriod)
+        return;
+      state.periodDateRange = chartHelp.showDateRange(selectedPeriod.days);
+      fetchData();
+    };
+    const getEchartOption = (vrpData, stats) => {
+      const markLineData = [getZeroMarkLine()];
+      const showMeanLine = !state.loadingFlag && stats != null;
+      if (showMeanLine) {
+        markLineData.push(getMeanMarkLine(stats.mean));
+      }
+      const option = {
+        color: ["#FFD600"],
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "cross",
+            label: {
+              show: isMobile.value ? true : false,
+              backgroundColor: "#DEE2E6",
+              color: "#343A40",
+              padding: [4, 6, 4, 6],
+              margin: 9,
+              formatter: (params) => {
+                if (params.axisDimension === "x") {
+                  return chartHelp.timestampFormat(params.value);
+                } else {
+                  return chartHelp.numberFormat(params.value, 2);
+                }
+              }
+            },
+            crossStyle: {
+              color: "#8B959F"
+            },
+            lineStyle: {
+              color: "#8B959F"
+            }
+          },
+          formatter: (params) => {
+            try {
+              let html = `
+            <div style="display: flex;justify-content: space-between;align-items: center;">
+              <div>${chartHelp.getTooltipDate(params[0].axisValue, locale.value.name, {
+                showSeconds: false
+              })}</div>
+            </div>
+            `;
+              if (params[0]) {
+                html += `<div style="display: flex;justify-content: space-between;align-items: center;">
+              <div style="margin-right: 40px;">${params[0].marker}&nbsp;${params[0].seriesName}</div>
+              <div>&nbsp;${chartHelp.numberFormat(params[0].data[1], 2)}</div>
+            </div>`;
+              }
+              return html;
+            } catch (e) {
+              return "";
+            }
+          },
+          backgroundColor: isDark.value ? "#E9ECEF" : "#292F3D",
+          textStyle: {
+            color: isDark.value ? "#000000" : "#FFFFFF",
+            fontSize: 12,
+            lineHeight: 16,
+            fontWeight: 400
+          }
+        },
+        axisPointer: {
+          type: "line",
+          label: {
+            show: true,
+            backgroundColor: "#DEE2E6",
+            color: "#343A40",
+            fontSize: 10,
+            padding: [4, 6, 4, 8]
+          }
+        },
+        xAxis: {
+          position: "bottom",
+          type: "time",
+          boundaryGap: false,
+          axisTick: {
+            show: false
+          },
+          axisLabel: {
+            color: isDark.value ? "#CED4DA" : "#343A40",
+            fontWeight: 400,
+            fontSize: 10
+          },
+          axisLine: {
+            onZero: false,
+            show: false,
+            lineStyle: {
+              color: isDark.value ? "#CED4DA" : "#343A40"
+            }
+          },
+          splitLine: {
+            show: !isMobile.value && !isDark.value,
+            lineStyle: {
+              color: "#F1F1F1",
+              width: 1,
+              type: "solid"
+            }
+          }
+        },
+        yAxis: {
+          type: "value",
+          scale: true,
+          name: "VRP(%)",
+          nameLocation: "end",
+          nameTextStyle: {
+            color: isDark.value ? "#8B959F" : "#8B959F",
+            fontWeight: 400,
+            fontSize: 10
+          },
+          axisLabel: {
+            show: true,
+            color: isDark.value ? "#CED4DA" : "#343A40",
+            fontWeight: 400,
+            fontSize: 10
+          },
+          axisLine: {
+            lineStyle: {
+              color: isDark.value ? "#CED4DA" : "#343A40"
+            }
+          },
+          splitLine: {
+            lineStyle: {
+              color: isDark.value ? "#2B2F32" : "#F1F1F1",
+              width: 1,
+              type: "solid"
+            }
+          }
+        },
+        grid: {
+          top: 30,
+          left: "left",
+          right: 40,
+          bottom: 50,
+          containLabel: true
+        },
+        dataZoom: [
+          {
+            type: "inside",
+            start: 0,
+            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",
+            labelFormatter: (value) => {
+              return chartHelp.timestampFormat(value);
+            },
+            rangeMode: "percent",
+            bottom: "10px",
+            start: 0,
+            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: "VRP",
+            type: "line",
+            data: vrpData,
+            symbol: "none",
+            markLine: {
+              data: markLineData
+            }
+          }
+        ]
+      };
+      return option;
+    };
+    const chartOption = vue.computed(() => {
+      return getEchartOption(vrpSeries.value, vrpStats.value);
+    });
+    return (_ctx, _cache) => {
+      const _component_g_icon = vue.resolveComponent("g-icon");
+      const _component_g_tooltip = vue.resolveComponent("g-tooltip");
+      const _component_g_select_option = vue.resolveComponent("g-select-option");
+      const _component_g_select = vue.resolveComponent("g-select");
+      const _component_g_chart = 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,
+            onRefresh: fetchData
+          }, {
+            title: vue.withCtx(() => [
+              vue.createTextVNode(
+                vue.toDisplayString(vue.unref(t)("message.vrp")) + " ",
+                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.vrpTips")
+                  }, null, 8, _hoisted_1)
+                ]),
+                default: vue.withCtx(() => [
+                  vue.createVNode(_component_g_icon, { name: "info_question_circle" })
+                ]),
+                _: 1
+              }, 8, ["isMobile"])
+            ]),
+            tool: vue.withCtx(() => [
+              vue.createElementVNode("div", _hoisted_2, [
+                vue.createElementVNode(
+                  "span",
+                  _hoisted_3,
+                  vue.toDisplayString(vue.unref(t)("message.volTenor")),
+                  1
+                ),
+                vue.createVNode(_component_g_select, {
+                  value: state.volTenor,
+                  "onUpdate:value": _cache[0] || (_cache[0] = ($event) => state.volTenor = $event),
+                  size: vue.unref(isPC) ? "small" : "medium"
+                }, {
+                  default: vue.withCtx(() => [
+                    (vue.openBlock(), vue.createElementBlock(
+                      vue.Fragment,
+                      null,
+                      vue.renderList(volTenorList, (item) => {
+                        return vue.createVNode(_component_g_select_option, {
+                          value: item,
+                          key: item
+                        }, {
+                          default: vue.withCtx(() => [
+                            vue.createTextVNode(
+                              vue.toDisplayString(item),
+                              1
+                            )
+                          ]),
+                          _: 2
+                        }, 1032, ["value"]);
+                      }),
+                      64
+                    ))
+                  ]),
+                  _: 1
+                }, 8, ["value", "size"])
+              ]),
+              vue.createElementVNode(
+                "div",
+                {
+                  class: vue.normalizeClass(vue.unref(ns).e("mean-value"))
+                },
+                [
+                  vue.createVNode(_component_g_tooltip, {
+                    underdotted: true,
+                    placement: "bottom",
+                    isMobile: vue.unref(isMobile)
+                  }, {
+                    title: vue.withCtx(() => [
+                      vue.createElementVNode(
+                        "div",
+                        {
+                          class: vue.normalizeClass(vue.unref(ns).e("stats-tooltip"))
+                        },
+                        [
+                          vue.createElementVNode(
+                            "div",
+                            {
+                              class: vue.normalizeClass(vue.unref(ns).e("stats-header"))
+                            },
+                            vue.toDisplayString(vue.unref(t)("message.vrpRangeStats")),
+                            3
+                          ),
+                          vue.createElementVNode(
+                            "div",
+                            {
+                              class: vue.normalizeClass(vue.unref(ns).e("stats-row"))
+                            },
+                            [
+                              vue.createElementVNode(
+                                "span",
+                                {
+                                  class: vue.normalizeClass(vue.unref(ns).e("stats-label"))
+                                },
+                                vue.toDisplayString(vue.unref(t)("message.statMean")),
+                                3
+                              ),
+                              vue.createElementVNode(
+                                "span",
+                                {
+                                  class: vue.normalizeClass(vue.unref(ns).e("stats-value"))
+                                },
+                                vue.toDisplayString(vue.unref(statsDisplay).mean),
+                                3
+                              )
+                            ],
+                            2
+                          ),
+                          vue.createElementVNode(
+                            "div",
+                            {
+                              class: vue.normalizeClass(vue.unref(ns).e("stats-row"))
+                            },
+                            [
+                              vue.createElementVNode(
+                                "span",
+                                {
+                                  class: vue.normalizeClass(vue.unref(ns).e("stats-label"))
+                                },
+                                vue.toDisplayString(vue.unref(t)("message.statMax")),
+                                3
+                              ),
+                              vue.createElementVNode(
+                                "span",
+                                {
+                                  class: vue.normalizeClass(vue.unref(ns).e("stats-value"))
+                                },
+                                vue.toDisplayString(vue.unref(statsDisplay).max),
+                                3
+                              )
+                            ],
+                            2
+                          ),
+                          vue.createElementVNode(
+                            "div",
+                            {
+                              class: vue.normalizeClass(vue.unref(ns).e("stats-row"))
+                            },
+                            [
+                              vue.createElementVNode(
+                                "span",
+                                {
+                                  class: vue.normalizeClass(vue.unref(ns).e("stats-label"))
+                                },
+                                vue.toDisplayString(vue.unref(t)("message.statMin")),
+                                3
+                              ),
+                              vue.createElementVNode(
+                                "span",
+                                {
+                                  class: vue.normalizeClass(vue.unref(ns).e("stats-value"))
+                                },
+                                vue.toDisplayString(vue.unref(statsDisplay).min),
+                                3
+                              )
+                            ],
+                            2
+                          ),
+                          vue.createElementVNode(
+                            "div",
+                            {
+                              class: vue.normalizeClass(vue.unref(ns).e("stats-row"))
+                            },
+                            [
+                              vue.createElementVNode(
+                                "span",
+                                {
+                                  class: vue.normalizeClass(vue.unref(ns).e("stats-label"))
+                                },
+                                vue.toDisplayString(vue.unref(t)("message.statDays")),
+                                3
+                              ),
+                              vue.createElementVNode(
+                                "span",
+                                {
+                                  class: vue.normalizeClass(vue.unref(ns).e("stats-value"))
+                                },
+                                vue.toDisplayString(vue.unref(statsDisplay).days),
+                                3
+                              )
+                            ],
+                            2
+                          )
+                        ],
+                        2
+                      )
+                    ]),
+                    default: vue.withCtx(() => [
+                      vue.createElementVNode(
+                        "span",
+                        {
+                          class: vue.normalizeClass(vue.unref(ns).e("mean-label"))
+                        },
+                        vue.toDisplayString(vue.unref(t)("message.vrpMean")),
+                        3
+                      ),
+                      vue.createElementVNode(
+                        "span",
+                        {
+                          class: vue.normalizeClass(vue.unref(ns).e("mean-text"))
+                        },
+                        vue.toDisplayString(vue.unref(meanHeaderValue)),
+                        3
+                      )
+                    ]),
+                    _: 1
+                  }, 8, ["isMobile"])
+                ],
+                2
+              ),
+              vue.createElementVNode("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),
+                  size: vue.unref(isPC) ? "small" : "medium",
+                  onChange: handleChangePeriod
+                }, {
+                  default: vue.withCtx(() => [
+                    (vue.openBlock(), vue.createElementBlock(
+                      vue.Fragment,
+                      null,
+                      vue.renderList(periodList, (item) => {
+                        return vue.createVNode(_component_g_select_option, {
+                          value: item.value,
+                          key: item.value
+                        }, {
+                          default: vue.withCtx(() => [
+                            vue.createTextVNode(
+                              vue.toDisplayString(item.label),
+                              1
+                            )
+                          ]),
+                          _: 2
+                        }, 1032, ["value"]);
+                      }),
+                      64
+                    ))
+                  ]),
+                  _: 1
+                }, 8, ["value", "size"]),
+                vue.createElementVNode(
+                  "span",
+                  _hoisted_6,
+                  vue.toDisplayString(state.periodDateRange),
+                  1
+                )
+              ])
+            ]),
+            body: vue.withCtx(() => [
+              vue.createElementVNode(
+                "div",
+                _hoisted_7,
+                [
+                  vue.createVNode(_component_g_chart, {
+                    class: "skew-chart",
+                    option: vue.unref(chartOption)
+                  }, null, 8, ["option"])
+                ],
+                512
+              )
+            ]),
+            _: 1
+          }, 8, ["currency", "exchange", "loading"])
+        ],
+        2
+      );
+    };
   }
 });
+var PanelVrp = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["__file", "/Users/luobowen/Desktop/greeks/greeks-live-ui/packages/components/panel-vrp/src/panel-vrp.vue"]]);
 
-exports.panelVrpEmits = panelVrpEmits;
-exports.panelVrpProps = panelVrpProps;
+exports["default"] = PanelVrp;
 //# sourceMappingURL=panel-vrp.js.map