greeks-live-ui 0.1.21 → 0.1.22

package/es/packages/components/panel-volatility-term-structure/src/panel-volatility-term-structure.mjs

@@ -1,28 +1,591 @@
-import '../../../utils/index.mjs';
-import { buildProps } from '../../../utils/vue/props/runtime.mjs';
+import { Table } from 'ant-design-vue/es';
+import { createTextVNode, defineComponent, reactive, computed, watch, onMounted, resolveComponent, openBlock, createElementBlock, normalizeClass, unref, createVNode, isRef, withCtx, toDisplayString, createElementVNode, Fragment, createCommentVNode, normalizeStyle } from 'vue';
+import '../../../hooks/index.mjs';
+import dayjs from 'dayjs';
+import { numberFormat, showEndDateTime } from '../../../utils/chartHelp.mjs';
+import { getAtmData, getForwardIVMatrix } from '../../../utils/dataLab.mjs';
+import { panelVolatilityTermStructureProps, panelVolatilityTermStructureEmits } from './panel-volatility-term-structure2.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';
 
-const panelVolatilityTermStructureEmits = {
-  "update:currency": (currency) => true,
-  "update:exchange": (exchange) => true
+const _hoisted_1 = ["innerHTML"];
+const _hoisted_2 = { class: "period-controls" };
+const _hoisted_3 = { class: "selector-label h5-hide" };
+const _hoisted_4 = { class: "period-range h5-hide" };
+const _hoisted_5 = {
+  key: 0,
+  class: "echart",
+  ref: "echart"
 };
-const panelVolatilityTermStructureProps = buildProps({
-  defaultCurrency: {
-    type: String,
-    required: false
-  },
-  defaultExchange: {
-    type: String,
-    required: false
-  },
-  currency: {
-    type: String,
-    required: false
-  },
-  exchange: {
-    type: String,
-    required: false
+const _hoisted_6 = {
+  key: 1,
+  class: "fiv-matrix-table"
+};
+const _hoisted_7 = /* @__PURE__ */ createTextVNode(" - ");
+const __default__ = {
+  name: "GPanelVolatilityTermStructure"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  props: panelVolatilityTermStructureProps,
+  emits: panelVolatilityTermStructureEmits,
+  setup(__props, { emit }) {
+    const props = __props;
+    const ns = useNamespace("panel-volatility-term-structure");
+    const { t } = useLocale();
+    const { isMobile, isPC } = useDeviceType();
+    const { isDark } = useTheme();
+    const state = reactive({
+      loadingFlag: false,
+      toolTipTitle: "",
+      showChartCard: true,
+      exchange: props.exchange || props.defaultExchange || "Deribit",
+      currency: props.currency || props.defaultCurrency || "BTC",
+      period: "3M",
+      pageCount: 0,
+      selectedDateTime: dayjs(),
+      endDateDisplay: "",
+      skewData: [],
+      forwardIVMatrixData: [],
+      forwardIVExpiries: [],
+      legendSelected: {}
+    });
+    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 currencyList = computed(() => {
+      return state.showChartCard ? void 0 : [
+        { value: "BTC", label: "BTC", icon: "currency_btc" },
+        { value: "ETH", label: "ETH", icon: "currency_eth" }
+      ];
+    });
+    watch(currency, () => {
+      state.legendSelected = {};
+      if (!state.showChartCard && currency.value !== "BTC" && currency.value !== "ETH") {
+        state.showChartCard = true;
+      }
+      fetchData();
+    });
+    watch(exchange, () => {
+      state.legendSelected = {};
+      if (exchange.value.toLowerCase() !== "deribit") {
+        state.showChartCard = true;
+      }
+      fetchData();
+    });
+    const fetchData = () => {
+      state.loadingFlag = true;
+      if (state.showChartCard) {
+        getAtmData({
+          currency: currency.value,
+          end_timestamp: state.selectedDateTime.valueOf(),
+          exchange: exchange.value
+        }).then((res) => {
+          if (res && res.code === 200) {
+            state.skewData = res.data || [];
+          }
+        }).finally(() => {
+          state.loadingFlag = false;
+        });
+      } else {
+        getForwardIVMatrix({
+          currency: currency.value,
+          exchange: exchange.value
+        }).then((matrixRes) => {
+          if (matrixRes && matrixRes.code === 200) {
+            const data = matrixRes.data || { expiries: [], matrix: [] };
+            state.forwardIVMatrixData = data.matrix;
+            state.forwardIVExpiries = data.expiries.map((item) => ({
+              label: item.label,
+              day: item.day
+            }));
+          } else {
+            state.forwardIVMatrixData = [];
+            state.forwardIVExpiries = [];
+          }
+        }).finally(() => {
+          state.loadingFlag = false;
+        });
+      }
+    };
+    function parseExpiryLabel(label, remainDays) {
+      return `${label}(${remainDays})`;
+    }
+    onMounted(() => {
+      fetchData();
+      getDateTimeRange();
+    });
+    const operations = computed(() => {
+      if (["BTC", "ETH"].includes(currency.value) && exchange.value.toLowerCase() === "deribit") {
+        if (state.showChartCard) {
+          return ["toggle"];
+        } else {
+          return ["line"];
+        }
+      }
+      return [];
+    });
+    const handleToggleChartMatrix = () => {
+      state.showChartCard = !state.showChartCard;
+      fetchData();
+    };
+    const handleLegendSelectChanged = (params) => {
+      state.legendSelected = params.selected;
+    };
+    const columns = computed(() => {
+      const cols = [
+        {
+          title: "Day",
+          dataIndex: "rowLabel",
+          key: "rowLabel",
+          align: "left",
+          fixed: "left",
+          width: 100
+        }
+      ];
+      state.forwardIVExpiries.slice(1).forEach((exp, i) => {
+        cols.push({
+          title: parseExpiryLabel(exp.label, exp.day),
+          dataIndex: `col${i + 1}`,
+          key: `col${i + 1}`,
+          align: "center",
+          width: 100
+        });
+      });
+      return cols;
+    });
+    const dataSource = computed(() => {
+      return state.forwardIVExpiries.map((exp, rowIdx) => {
+        var _a, _b;
+        const row = {
+          rowLabel: parseExpiryLabel(exp.label, exp.day)
+        };
+        for (let colIdx = 0; colIdx < state.forwardIVExpiries.length; colIdx++) {
+          if (colIdx <= rowIdx) {
+            row[`col${colIdx}`] = null;
+          } else {
+            const cell = (_b = (_a = state.forwardIVMatrixData) == null ? void 0 : _a[rowIdx]) == null ? void 0 : _b[colIdx];
+            if (cell) {
+              row[`col${colIdx}`] = {
+                value: numberFormat(cell.Value, 2),
+                diff: cell.Diff,
+                diffText: `${cell.Diff >= 0 ? "+" : ""}${numberFormat(
+                  cell.Diff,
+                  2
+                )}`,
+                color: getColorByDiff(cell.Diff)
+              };
+            } else {
+              row[`col${colIdx}`] = null;
+            }
+          }
+        }
+        return row;
+      });
+    });
+    const getColorByDiff = (diff) => {
+      if (diff > 0) {
+        const intensity = Math.min(diff / 10, 1);
+        return `rgba(123, 225, 136, ${intensity})`;
+      } else if (diff < 0) {
+        const intensity = Math.min(Math.abs(diff) / 10, 1);
+        return `rgba(251, 172, 163, ${intensity})`;
+      }
+      return "transparent";
+    };
+    const getDateTimeRange = () => {
+      const endTime = state.selectedDateTime || dayjs();
+      state.endDateDisplay = showEndDateTime(endTime);
+    };
+    const handlePageChange = (direction) => {
+      if (direction === "prev") {
+        state.pageCount++;
+        state.selectedDateTime = dayjs(state.selectedDateTime).subtract(1, "day");
+      } else {
+        if (state.pageCount <= 0) {
+          return;
+        }
+        state.pageCount--;
+        state.selectedDateTime = dayjs(state.selectedDateTime).add(1, "day");
+      }
+      getDateTimeRange();
+      fetchData();
+    };
+    const handleDateTimeChange = (value) => {
+      state.selectedDateTime = value;
+      const now = dayjs();
+      const selectedTime = dayjs(value);
+      const diffInDays = now.diff(selectedTime, "day");
+      state.pageCount = Math.max(0, diffInDays);
+      getDateTimeRange();
+      fetchData();
+    };
+    const getEchartData = () => {
+      const data = [...state.skewData];
+      let atmIvData = [];
+      let fwdIvData = [];
+      let date = [];
+      data.forEach((item) => {
+        let list = item.list;
+        let atmIndex = item.atm_index;
+        atmIvData.push(numberFormat(list[atmIndex].iv, 2));
+        fwdIvData.push(numberFormat(list[atmIndex].fwd_iv, 2));
+        date.push(item.underlying_index.split("-")[1]);
+      });
+      return {
+        date,
+        atmIvData,
+        fwdIvData
+      };
+    };
+    const getEchartOption = (params) => {
+      const {
+        date,
+        atmIvData,
+        fwdIvData
+      } = params;
+      const option = {
+        color: ["#7630F7", "#23C343"],
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "cross",
+            label: {
+              show: isMobile.value ? true : false,
+              backgroundColor: "#DEE2E6",
+              color: "#343A40",
+              padding: [4, 6, 4, 6],
+              margin: 9
+            },
+            crossStyle: {
+              color: "#8B959F"
+            },
+            lineStyle: {
+              color: "#8B959F"
+            }
+          },
+          backgroundColor: isDark.value ? "#E9ECEF" : "#292F3D",
+          padding: [6, 8, 5, 6],
+          textStyle: {
+            color: isDark.value ? "#000000" : "#FFFFFF",
+            fontSize: 12,
+            lineHeight: 16,
+            fontWeight: 400
+          },
+          formatter: (params2) => {
+            let content = "";
+            state.toolTipTitle = params2[0].axisValueLabel;
+            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 class="chart-tooltip-value">${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: true,
+          icon: "rect",
+          itemWidth: 14,
+          itemHeight: 2,
+          itemGap: 16,
+          textStyle: {
+            color: isDark.value ? "#ADB5BD" : "#596169",
+            fontSize: 12
+          },
+          lineStyle: {
+            inactiveColor: isDark.value ? "#2B2F32" : "#DEE2E6"
+          },
+          inactiveColor: isDark.value ? "#495057" : "#BDC4CB",
+          data: [
+            {
+              name: "ATM IV"
+            },
+            {
+              name: "FWD IV",
+              icon: "path://M234.666667 490.666667h-153.6a25.6 25.6 0 1 0 0 51.2h153.6a25.6 25.6 0 1 0 0-51.2zM473.6 490.666667h-153.6a25.6 25.6 0 1 0 0 51.2h153.6a25.6 25.6 0 1 0 0-51.2zM934.4 490.666667h-136.533333a25.6 25.6 0 1 0 0 51.2h136.533333a25.6 25.6 0 1 0 0-51.2zM712.533333 490.666667h-153.6a25.6 25.6 0 1 0 0 51.2h153.6a25.6 25.6 0 1 0 0-51.2z"
+            }
+          ],
+          selected: Object.keys(state.legendSelected).length > 0 ? state.legendSelected : void 0
+        },
+        xAxis: {
+          type: "category",
+          data: date,
+          axisTick: {
+            show: false
+          },
+          axisLabel: {
+            color: isDark.value ? "#CED4DA" : "#343A40",
+            fontWeight: 400,
+            fontSize: 10
+          },
+          axisLine: {
+            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,
+          axisLabel: {
+            show: true,
+            color: isDark.value ? "#CED4DA" : "#343A40",
+            fontWeight: 400,
+            fontSize: 10
+          },
+          name: "IV(%)",
+          nameLocation: "end",
+          nameGap: 10,
+          nameRotate: 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: 30,
+          bottom: 20,
+          left: 35,
+          right: 22
+        },
+        series: [
+          {
+            name: "ATM IV",
+            data: atmIvData,
+            type: "line",
+            smooth: true,
+            showSymbol: true
+          },
+          {
+            name: "FWD IV",
+            data: fwdIvData,
+            type: "line",
+            smooth: true,
+            showSymbol: true,
+            itemStyle: {
+              normal: {
+                lineStyle: {
+                  type: "dashed"
+                }
+              }
+            }
+          }
+        ]
+      };
+      return option;
+    };
+    const chartOption = computed(() => {
+      return getEchartOption(getEchartData());
+    });
+    return (_ctx, _cache) => {
+      const _component_g_icon = resolveComponent("g-icon");
+      const _component_g_tooltip = resolveComponent("g-tooltip");
+      const _component_g_page_turner = resolveComponent("g-page-turner");
+      const _component_g_date_time_picker = resolveComponent("g-date-time-picker");
+      const _component_g_chart = resolveComponent("g-chart");
+      const _component_a_table = Table;
+      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,
+            operations: unref(operations),
+            showExchangeSelector: state.showChartCard,
+            currencyList: unref(currencyList),
+            onOperation: handleToggleChartMatrix,
+            onRefresh: fetchData
+          }, {
+            title: withCtx(() => [
+              createTextVNode(
+                toDisplayString(unref(t)("message.atmVolatilityTermStructure")) + " ",
+                1
+              ),
+              createVNode(_component_g_tooltip, { placement: "bottom" }, {
+                title: withCtx(() => [
+                  createElementVNode("div", {
+                    class: "greeks-panel-tip",
+                    innerHTML: unref(t)("message.atmVolatilityTermStructureTips")
+                  }, null, 8, _hoisted_1)
+                ]),
+                default: withCtx(() => [
+                  createVNode(_component_g_icon, { name: "info_question_circle" })
+                ]),
+                _: 1
+              })
+            ]),
+            tool: withCtx(() => [
+              state.showChartCard ? (openBlock(), createElementBlock(
+                Fragment,
+                { key: 0 },
+                [
+                  createCommentVNode(' <span class="filter-box h5-hide">\n          <g-icon name="chart_filter" :size="15" />\n          </span> '),
+                  createElementVNode("div", _hoisted_2, [
+                    createElementVNode(
+                      "span",
+                      _hoisted_3,
+                      toDisplayString(unref(t)("message.time")),
+                      1
+                    ),
+                    createElementVNode(
+                      "span",
+                      _hoisted_4,
+                      toDisplayString(state.endDateDisplay),
+                      1
+                    ),
+                    createVNode(_component_g_page_turner, {
+                      prevDisabled: state.loadingFlag,
+                      nextDisabled: state.loadingFlag || state.pageCount <= 0,
+                      onChange: handlePageChange
+                    }, null, 8, ["prevDisabled", "nextDisabled"]),
+                    createVNode(_component_g_date_time_picker, {
+                      modelValue: state.selectedDateTime,
+                      "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => state.selectedDateTime = $event),
+                      onChange: handleDateTimeChange
+                    }, null, 8, ["modelValue"])
+                  ])
+                ],
+                64
+              )) : createCommentVNode("v-if", true)
+            ]),
+            body: withCtx(() => [
+              state.showChartCard ? (openBlock(), createElementBlock(
+                "div",
+                _hoisted_5,
+                [
+                  createVNode(_component_g_chart, {
+                    class: "skew-chart",
+                    option: unref(chartOption),
+                    onLegendselectchanged: handleLegendSelectChanged
+                  }, null, 8, ["option"])
+                ],
+                512
+              )) : (openBlock(), createElementBlock("div", _hoisted_6, [
+                createVNode(_component_a_table, {
+                  columns: unref(columns),
+                  dataSource: unref(dataSource),
+                  size: "small",
+                  pagination: false,
+                  scroll: { x: 600 },
+                  class: "no-zebra-table",
+                  sticky: { offsetHeader: 0 }
+                }, {
+                  bodyCell: withCtx(({ column, record }) => {
+                    var _a, _b, _c;
+                    return [
+                      column.dataIndex !== "rowLabel" ? (openBlock(), createElementBlock(
+                        "div",
+                        {
+                          key: 0,
+                          class: "cell-content",
+                          style: normalizeStyle({
+                            backgroundColor: ((_a = record[column.dataIndex]) == null ? void 0 : _a.color) || "transparent"
+                          })
+                        },
+                        [
+                          record[column.dataIndex] ? (openBlock(), createElementBlock(
+                            Fragment,
+                            { key: 0 },
+                            [
+                              createTextVNode(
+                                toDisplayString((_b = record[column.dataIndex]) == null ? void 0 : _b.value) + " ",
+                                1
+                              ),
+                              createElementVNode(
+                                "span",
+                                null,
+                                "(" + toDisplayString((_c = record[column.dataIndex]) == null ? void 0 : _c.diffText) + ")",
+                                1
+                              )
+                            ],
+                            64
+                          )) : (openBlock(), createElementBlock(
+                            Fragment,
+                            { key: 1 },
+                            [
+                              _hoisted_7
+                            ],
+                            64
+                          ))
+                        ],
+                        4
+                      )) : createCommentVNode("v-if", true)
+                    ];
+                  }),
+                  _: 1
+                }, 8, ["columns", "dataSource"])
+              ]))
+            ]),
+            _: 1
+          }, 8, ["currency", "exchange", "loading", "operations", "showExchangeSelector", "currencyList"])
+        ],
+        2
+      );
+    };
   }
 });
+var PanelVolatilityTermStructure = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "/Users/luobowen/Desktop/greeks/greeks-live-ui/packages/components/panel-volatility-term-structure/src/panel-volatility-term-structure.vue"]]);
 
-export { panelVolatilityTermStructureEmits, panelVolatilityTermStructureProps };
+export { PanelVolatilityTermStructure as default };
 //# sourceMappingURL=panel-volatility-term-structure.mjs.map