greeks-live-ui 0.1.21 → 0.1.22

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

@@ -1,591 +1,28 @@
-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-structure.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 '../../../utils/index.mjs';
+import { buildProps } from '../../../utils/vue/props/runtime.mjs';
 
-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 panelVolatilityTermStructureEmits = {
+  "update:currency": (currency) => true,
+  "update:exchange": (exchange) => true
 };
-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
-      );
-    };
+const panelVolatilityTermStructureProps = buildProps({
+  defaultCurrency: {
+    type: String,
+    required: false
+  },
+  defaultExchange: {
+    type: String,
+    required: false
+  },
+  currency: {
+    type: String,
+    required: false
+  },
+  exchange: {
+    type: String,
+    required: false
   }
 });
-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 { PanelVolatilityTermStructure as default };
+export { panelVolatilityTermStructureEmits, panelVolatilityTermStructureProps };
 //# sourceMappingURL=panel-volatility-term-structure2.mjs.map