greeks-live-ui 0.1.21 → 0.1.22

package/es/packages/components/panel-vrp/src/panel-vrp2.mjs

@@ -1,745 +1,28 @@
-import { defineComponent, reactive, computed, watch, onMounted, resolveComponent, openBlock, createElementBlock, normalizeClass, unref, createVNode, isRef, withCtx, createTextVNode, toDisplayString, createElementVNode, Fragment, renderList } from 'vue';
-import '../../../hooks/index.mjs';
-import { showDateRange, timestampFormat, numberFormat, getTooltipDate } from '../../../utils/chartHelp.mjs';
-import { getVrp } from '../../../utils/dataLab.mjs';
-import { panelVrpProps, panelVrpEmits } from './panel-vrp.mjs';
-import _export_sfc from '../../../../_virtual/plugin-vue_export-helper.mjs';
-import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
-import { useDeviceType } from '../../../hooks/use-device-type/index.mjs';
-import { useTheme } from '../../../hooks/use-theme/index.mjs';
-import { useLocale } from '../../../hooks/use-locale/index.mjs';
+import '../../../utils/index.mjs';
+import { buildProps } from '../../../utils/vue/props/runtime.mjs';
 
-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 panelVrpEmits = {
+  "update:currency": (currency) => true,
+  "update:exchange": (exchange) => true
 };
-const __default__ = {
-  name: "GPanelVrp"
-};
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  ...__default__,
-  props: panelVrpProps,
-  emits: panelVrpEmits,
-  setup(__props, { emit }) {
-    const props = __props;
-    const ns = useNamespace("panel-vrp");
-    const { isMobile, isPC } = useDeviceType();
-    const { isDark } = useTheme();
-    const { t, locale } = 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 = reactive({
-      loadingFlag: false,
-      exchange: props.exchange || props.defaultExchange || "Deribit",
-      currency: props.currency || props.defaultCurrency || "BTC",
-      volTenor: "15D",
-      period: "15D",
-      periodDateRange: "",
-      chartData: []
-    });
-    const currency = computed({
-      get: () => props.currency || state.currency || "BTC",
-      set: (newVal) => {
-        props.currency ? emit("update:currency", newVal) : state.currency = newVal;
-      }
-    });
-    const exchange = computed({
-      get: () => props.exchange || state.exchange || "Deribit",
-      set: (newVal) => {
-        props.exchange ? emit("update:exchange", newVal) : state.exchange = newVal;
-      }
-    });
-    const selectedPeriodDays = 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 = 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 = computed(
-      () => buildVrpSeries(filteredChartData.value, state.volTenor)
-    );
-    const vrpStats = computed(() => {
-      const values = vrpSeries.value.map(([, value]) => value);
-      return computeVrpStats(values);
-    });
-    const meanHeaderValue = 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 = 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
-      };
-    });
-    watch(currency, () => {
-      fetchData();
-    });
-    watch(exchange, () => {
-      fetchData();
-    });
-    const fetchData = () => {
-      state.loadingFlag = true;
-      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;
-      });
-    };
-    onMounted(() => {
-      handleChangePeriod(state.period);
-    });
-    const handleChangePeriod = (value) => {
-      const selectedPeriod = periodList.find((v) => v.value === value);
-      if (!selectedPeriod)
-        return;
-      state.periodDateRange = 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 timestampFormat(params.value);
-                } else {
-                  return 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>${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;${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 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 = computed(() => {
-      return getEchartOption(vrpSeries.value, vrpStats.value);
-    });
-    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[2] || (_cache[2] = ($event) => isRef(currency) ? currency.value = $event : null),
-            exchange: unref(exchange),
-            "onUpdate:exchange": _cache[3] || (_cache[3] = ($event) => isRef(exchange) ? exchange.value = $event : null),
-            loading: state.loadingFlag,
-            onRefresh: fetchData
-          }, {
-            title: withCtx(() => [
-              createTextVNode(
-                toDisplayString(unref(t)("message.vrp")) + " ",
-                1
-              ),
-              createVNode(_component_g_tooltip, { isMobile: unref(isMobile) }, {
-                title: withCtx(() => [
-                  createElementVNode("div", {
-                    class: "greeks-panel-tip",
-                    innerHTML: unref(t)("message.vrpTips")
-                  }, null, 8, _hoisted_1)
-                ]),
-                default: withCtx(() => [
-                  createVNode(_component_g_icon, { name: "info_question_circle" })
-                ]),
-                _: 1
-              }, 8, ["isMobile"])
-            ]),
-            tool: withCtx(() => [
-              createElementVNode("div", _hoisted_2, [
-                createElementVNode(
-                  "span",
-                  _hoisted_3,
-                  toDisplayString(unref(t)("message.volTenor")),
-                  1
-                ),
-                createVNode(_component_g_select, {
-                  value: state.volTenor,
-                  "onUpdate:value": _cache[0] || (_cache[0] = ($event) => state.volTenor = $event),
-                  size: unref(isPC) ? "small" : "medium"
-                }, {
-                  default: withCtx(() => [
-                    (openBlock(), createElementBlock(
-                      Fragment,
-                      null,
-                      renderList(volTenorList, (item) => {
-                        return createVNode(_component_g_select_option, {
-                          value: item,
-                          key: item
-                        }, {
-                          default: withCtx(() => [
-                            createTextVNode(
-                              toDisplayString(item),
-                              1
-                            )
-                          ]),
-                          _: 2
-                        }, 1032, ["value"]);
-                      }),
-                      64
-                    ))
-                  ]),
-                  _: 1
-                }, 8, ["value", "size"])
-              ]),
-              createElementVNode(
-                "div",
-                {
-                  class: normalizeClass(unref(ns).e("mean-value"))
-                },
-                [
-                  createVNode(_component_g_tooltip, {
-                    underdotted: true,
-                    placement: "bottom",
-                    isMobile: unref(isMobile)
-                  }, {
-                    title: withCtx(() => [
-                      createElementVNode(
-                        "div",
-                        {
-                          class: normalizeClass(unref(ns).e("stats-tooltip"))
-                        },
-                        [
-                          createElementVNode(
-                            "div",
-                            {
-                              class: normalizeClass(unref(ns).e("stats-header"))
-                            },
-                            toDisplayString(unref(t)("message.vrpRangeStats")),
-                            3
-                          ),
-                          createElementVNode(
-                            "div",
-                            {
-                              class: normalizeClass(unref(ns).e("stats-row"))
-                            },
-                            [
-                              createElementVNode(
-                                "span",
-                                {
-                                  class: normalizeClass(unref(ns).e("stats-label"))
-                                },
-                                toDisplayString(unref(t)("message.statMean")),
-                                3
-                              ),
-                              createElementVNode(
-                                "span",
-                                {
-                                  class: normalizeClass(unref(ns).e("stats-value"))
-                                },
-                                toDisplayString(unref(statsDisplay).mean),
-                                3
-                              )
-                            ],
-                            2
-                          ),
-                          createElementVNode(
-                            "div",
-                            {
-                              class: normalizeClass(unref(ns).e("stats-row"))
-                            },
-                            [
-                              createElementVNode(
-                                "span",
-                                {
-                                  class: normalizeClass(unref(ns).e("stats-label"))
-                                },
-                                toDisplayString(unref(t)("message.statMax")),
-                                3
-                              ),
-                              createElementVNode(
-                                "span",
-                                {
-                                  class: normalizeClass(unref(ns).e("stats-value"))
-                                },
-                                toDisplayString(unref(statsDisplay).max),
-                                3
-                              )
-                            ],
-                            2
-                          ),
-                          createElementVNode(
-                            "div",
-                            {
-                              class: normalizeClass(unref(ns).e("stats-row"))
-                            },
-                            [
-                              createElementVNode(
-                                "span",
-                                {
-                                  class: normalizeClass(unref(ns).e("stats-label"))
-                                },
-                                toDisplayString(unref(t)("message.statMin")),
-                                3
-                              ),
-                              createElementVNode(
-                                "span",
-                                {
-                                  class: normalizeClass(unref(ns).e("stats-value"))
-                                },
-                                toDisplayString(unref(statsDisplay).min),
-                                3
-                              )
-                            ],
-                            2
-                          ),
-                          createElementVNode(
-                            "div",
-                            {
-                              class: normalizeClass(unref(ns).e("stats-row"))
-                            },
-                            [
-                              createElementVNode(
-                                "span",
-                                {
-                                  class: normalizeClass(unref(ns).e("stats-label"))
-                                },
-                                toDisplayString(unref(t)("message.statDays")),
-                                3
-                              ),
-                              createElementVNode(
-                                "span",
-                                {
-                                  class: normalizeClass(unref(ns).e("stats-value"))
-                                },
-                                toDisplayString(unref(statsDisplay).days),
-                                3
-                              )
-                            ],
-                            2
-                          )
-                        ],
-                        2
-                      )
-                    ]),
-                    default: withCtx(() => [
-                      createElementVNode(
-                        "span",
-                        {
-                          class: normalizeClass(unref(ns).e("mean-label"))
-                        },
-                        toDisplayString(unref(t)("message.vrpMean")),
-                        3
-                      ),
-                      createElementVNode(
-                        "span",
-                        {
-                          class: normalizeClass(unref(ns).e("mean-text"))
-                        },
-                        toDisplayString(unref(meanHeaderValue)),
-                        3
-                      )
-                    ]),
-                    _: 1
-                  }, 8, ["isMobile"])
-                ],
-                2
-              ),
-              createElementVNode("div", _hoisted_4, [
-                createElementVNode(
-                  "span",
-                  _hoisted_5,
-                  toDisplayString(unref(t)("message.range")),
-                  1
-                ),
-                createVNode(_component_g_select, {
-                  value: state.period,
-                  "onUpdate:value": _cache[1] || (_cache[1] = ($event) => state.period = $event),
-                  size: unref(isPC) ? "small" : "medium",
-                  onChange: handleChangePeriod
-                }, {
-                  default: withCtx(() => [
-                    (openBlock(), createElementBlock(
-                      Fragment,
-                      null,
-                      renderList(periodList, (item) => {
-                        return createVNode(_component_g_select_option, {
-                          value: item.value,
-                          key: item.value
-                        }, {
-                          default: withCtx(() => [
-                            createTextVNode(
-                              toDisplayString(item.label),
-                              1
-                            )
-                          ]),
-                          _: 2
-                        }, 1032, ["value"]);
-                      }),
-                      64
-                    ))
-                  ]),
-                  _: 1
-                }, 8, ["value", "size"]),
-                createElementVNode(
-                  "span",
-                  _hoisted_6,
-                  toDisplayString(state.periodDateRange),
-                  1
-                )
-              ])
-            ]),
-            body: withCtx(() => [
-              createElementVNode(
-                "div",
-                _hoisted_7,
-                [
-                  createVNode(_component_g_chart, {
-                    class: "skew-chart",
-                    option: unref(chartOption)
-                  }, null, 8, ["option"])
-                ],
-                512
-              )
-            ]),
-            _: 1
-          }, 8, ["currency", "exchange", "loading"])
-        ],
-        2
-      );
-    };
+const panelVrpProps = buildProps({
+  defaultCurrency: {
+    type: String,
+    required: false
+  },
+  defaultExchange: {
+    type: String,
+    required: false
+  },
+  currency: {
+    type: String,
+    required: false
+  },
+  exchange: {
+    type: String,
+    required: false
   }
 });
-var PanelVrp = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "/Users/luobowen/Desktop/greeks/greeks-live-ui/packages/components/panel-vrp/src/panel-vrp.vue"]]);
 
-export { PanelVrp as default };
+export { panelVrpEmits, panelVrpProps };
 //# sourceMappingURL=panel-vrp2.mjs.map