greeks-live-ui 0.1.19 → 0.1.21

package/lib/packages/components/panel-max-pain-price/src/panel-max-pain-price.js

@@ -2,32 +2,382 @@
 
 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 dayjs = require('dayjs');
+var chartHelp = require('../../../utils/chartHelp.js');
+var dataLab = require('../../../utils/dataLab.js');
+var panelMaxPainPrice = require('./panel-max-pain-price2.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-locale/index.js');
+var index$2 = require('../../../hooks/use-device-type/index.js');
+var index$3 = require('../../../hooks/use-theme/index.js');
 
-const panelMaxPainPriceEmits = {
-  "update:currency": (currency) => true,
-  "update:exchange": (exchange) => true
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var dayjs__default = /*#__PURE__*/_interopDefaultLegacy(dayjs);
+
+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 = {
+  class: "echart",
+  ref: "echart"
+};
+const __default__ = {
+  name: "GPanelMaxPainPrice"
 };
-const panelMaxPainPriceProps = runtime.buildProps({
-  defaultCurrency: {
-    type: String,
-    required: false
-  },
-  defaultExchange: {
-    type: String,
-    required: false
-  },
-  currency: {
-    type: String,
-    required: false
-  },
-  exchange: {
-    type: String,
-    required: false
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  ...__default__,
+  props: panelMaxPainPrice.panelMaxPainPriceProps,
+  emits: panelMaxPainPrice.panelMaxPainPriceEmits,
+  setup(__props, { emit }) {
+    const props = __props;
+    const ns = index.useNamespace("max-pain-price");
+    const { t } = index$1.useLocale();
+    const { isMobile, isPC } = index$2.useDeviceType();
+    const { isDark } = index$3.useTheme();
+    const state = vue.reactive({
+      loadingFlag: false,
+      toolTipTitle: "",
+      exchange: props.exchange || props.defaultExchange || "Deribit",
+      currency: props.currency || props.defaultCurrency || "BTC",
+      pageCount: 0,
+      selectedDateTime: dayjs__default["default"](),
+      endDateDisplay: "",
+      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 isPrevDisabled = vue.computed(() => {
+      const now = dayjs__default["default"]();
+      const sixMonthsAgo = now.subtract(6, "month");
+      const nextDay = dayjs__default["default"](state.selectedDateTime).subtract(1, "day");
+      return nextDay.isBefore(sixMonthsAgo.startOf("day"));
+    });
+    vue.watch(currency, () => {
+      fetchData();
+    });
+    vue.watch(exchange, () => {
+      fetchData();
+    });
+    const fetchData = () => {
+      state.loadingFlag = true;
+      dataLab.getStrikePain({
+        currency: currency.value,
+        exchange: exchange.value,
+        end_timestamp: state.selectedDateTime.valueOf()
+      }).then((res) => {
+        if (res && res.code === 200) {
+          state.chartData = res.data || [];
+        }
+      }).finally(() => {
+        state.loadingFlag = false;
+      });
+    };
+    vue.onMounted(() => {
+      fetchData();
+      getDateTimeRange();
+    });
+    const getDateTimeRange = () => {
+      const endTime = state.selectedDateTime || dayjs__default["default"]();
+      state.endDateDisplay = chartHelp.showEndDateTime(endTime);
+    };
+    const handlePageChange = (direction) => {
+      if (direction === "prev") {
+        const newDateTime = dayjs__default["default"](state.selectedDateTime).subtract(1, "day");
+        const now = dayjs__default["default"]();
+        const sixMonthsAgo = now.subtract(6, "month");
+        if (newDateTime.isBefore(sixMonthsAgo.startOf("day"))) {
+          return;
+        }
+        state.pageCount++;
+        state.selectedDateTime = newDateTime;
+      } else {
+        if (state.pageCount <= 0) {
+          return;
+        }
+        state.pageCount--;
+        state.selectedDateTime = dayjs__default["default"](state.selectedDateTime).add(1, "day");
+      }
+      getDateTimeRange();
+      fetchData();
+    };
+    const handleDateTimeChange = (value) => {
+      state.selectedDateTime = value;
+      const now = dayjs__default["default"]();
+      const selectedTime = dayjs__default["default"](value);
+      const diffInDays = now.diff(selectedTime, "day");
+      state.pageCount = Math.max(0, diffInDays);
+      getDateTimeRange();
+      fetchData();
+    };
+    const disabledDateForMaxPain = (current) => {
+      const now = dayjs__default["default"]();
+      const sixMonthsAgo = now.subtract(6, "month");
+      return current < sixMonthsAgo.startOf("day") || current > now.endOf("day");
+    };
+    const getEchartData = () => {
+      const data = [...state.chartData];
+      let x = [];
+      let y = [];
+      data.forEach((item) => {
+        x.push(chartHelp.formatTimestampToExpiry(item.expiration_timestamp) || "");
+        y.push(item.strike);
+      });
+      return {
+        x,
+        y
+      };
+    };
+    const getEchartOption = (params) => {
+      const { x, y } = params;
+      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
+            },
+            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>
+              </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,
+          left: 0,
+          icon: "rect",
+          itemWidth: 14,
+          itemHeight: 2,
+          itemGap: 20,
+          textStyle: {
+            color: isDark.value ? "#ADB5BD" : "#596169",
+            fontSize: 12
+          },
+          lineStyle: {
+            inactiveColor: isDark.value ? "#2B2F32" : "#DEE2E6"
+          },
+          inactiveColor: isDark.value ? "#495057" : "#BDC4CB"
+        },
+        xAxis: {
+          type: "category",
+          data: x,
+          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
+          },
+          top: 0,
+          bottom: 0,
+          axisLine: {
+            lineStyle: {
+              color: isDark.value ? "#CED4DA" : "#343A40"
+            }
+          },
+          splitLine: {
+            lineStyle: {
+              color: isDark.value ? "#2B2F32" : "#F1F1F1",
+              width: 1,
+              type: "solid"
+            }
+          }
+        },
+        grid: {
+          top: 20,
+          bottom: 0,
+          left: 10,
+          right: 15,
+          containLabel: true
+        },
+        series: [
+          {
+            type: "line",
+            data: y,
+            color: "#FFD600"
+          }
+        ]
+      };
+      return option;
+    };
+    const chartOption = vue.computed(() => {
+      return getEchartOption(getEchartData());
+    });
+    return (_ctx, _cache) => {
+      const _component_g_icon = vue.resolveComponent("g-icon");
+      const _component_g_tooltip = vue.resolveComponent("g-tooltip");
+      const _component_g_page_turner = vue.resolveComponent("g-page-turner");
+      const _component_g_date_time_picker = vue.resolveComponent("g-date-time-picker");
+      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[1] || (_cache[1] = ($event) => vue.isRef(currency) ? currency.value = $event : null),
+            exchange: vue.unref(exchange),
+            "onUpdate:exchange": _cache[2] || (_cache[2] = ($event) => vue.isRef(exchange) ? exchange.value = $event : null),
+            loading: state.loadingFlag,
+            onRefresh: fetchData
+          }, {
+            title: vue.withCtx(() => [
+              vue.createTextVNode(
+                vue.toDisplayString(vue.unref(t)("message.maxPainPrice")) + " ",
+                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.maxPainPriceTips")
+                  }, null, 8, _hoisted_1)
+                ]),
+                default: vue.withCtx(() => [
+                  vue.createVNode(_component_g_icon, { name: "info_question_circle" })
+                ]),
+                _: 1
+              }, 8, ["isMobile"])
+            ]),
+            tool: vue.withCtx(() => [
+              vue.createCommentVNode(' <span class="filter-box h5-hide">\n          <g-icon name="chart_filter" :size="15" />\n        </span> '),
+              vue.createElementVNode("div", _hoisted_2, [
+                vue.createElementVNode(
+                  "span",
+                  _hoisted_3,
+                  vue.toDisplayString(vue.unref(t)("message.time")),
+                  1
+                ),
+                vue.createElementVNode(
+                  "span",
+                  _hoisted_4,
+                  vue.toDisplayString(state.endDateDisplay),
+                  1
+                ),
+                vue.createVNode(_component_g_page_turner, {
+                  prevDisabled: state.loadingFlag || vue.unref(isPrevDisabled),
+                  nextDisabled: state.loadingFlag || state.pageCount <= 0,
+                  onChange: handlePageChange
+                }, null, 8, ["prevDisabled", "nextDisabled"]),
+                vue.createVNode(_component_g_date_time_picker, {
+                  modelValue: state.selectedDateTime,
+                  "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => state.selectedDateTime = $event),
+                  "disabled-date": disabledDateForMaxPain,
+                  onChange: handleDateTimeChange
+                }, null, 8, ["modelValue"])
+              ])
+            ]),
+            body: vue.withCtx(() => [
+              vue.createElementVNode(
+                "div",
+                _hoisted_5,
+                [
+                  vue.createVNode(_component_g_chart, {
+                    class: "skew-chart",
+                    option: vue.unref(chartOption)
+                  }, null, 8, ["option"])
+                ],
+                512
+              )
+            ]),
+            _: 1
+          }, 8, ["currency", "exchange", "loading"])
+        ],
+        2
+      );
+    };
   }
 });
+var PanelMaxPainPrice = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["__file", "/Users/luobowen/Desktop/greeks/greeks-live-ui/packages/components/panel-max-pain-price/src/panel-max-pain-price.vue"]]);
 
-exports.panelMaxPainPriceEmits = panelMaxPainPriceEmits;
-exports.panelMaxPainPriceProps = panelMaxPainPriceProps;
+exports["default"] = PanelMaxPainPrice;
 //# sourceMappingURL=panel-max-pain-price.js.map

package/lib/packages/components/panel-max-pain-price/src/panel-max-pain-price.js.map

@@ -1 +1 @@
-{"version":3,"file":"panel-max-pain-price.js","sources":["../../../../../../../packages/components/panel-max-pain-price/src/panel-max-pain-price.ts"],"sourcesContent":["import { buildProps } from '@greeks-live-ui/utils'\nimport type PanelMaxPainPrice from './panel-max-pain-price.vue'\nimport type { ExtractPropTypes } from 'vue'\n\nexport const panelMaxPainPriceEmits = {\n  'update:currency': (currency: string) => true,\n  'update:exchange': (exchange: string) => true,\n}\nexport type PanelMaxPainPriceEmits = typeof panelMaxPainPriceEmits\nexport const panelMaxPainPriceProps = buildProps({\n  defaultCurrency: {\n    type: String,\n    required: false,\n  },\n  defaultExchange: {\n    type: String,\n    required: false,\n  },\n  currency: {\n    type: String,\n    required: false,\n  },\n  exchange: {\n    type: String,\n    required: false,\n  },\n})\nexport type PanelMaxPainPriceProps = ExtractPropTypes<typeof panelMaxPainPriceProps>\nexport type PanelMaxPainPriceInstance = InstanceType<typeof PanelMaxPainPrice>\n"],"names":["buildProps"],"mappings":";;;;;;;AAIO,MAAM,sBAAyB,GAAA;AAAA,EACpC,iBAAA,EAAmB,CAAC,QAAqB,KAAA,IAAA;AAAA,EACzC,iBAAA,EAAmB,CAAC,QAAqB,KAAA,IAAA;AAC3C,EAAA;AAEO,MAAM,yBAAyBA,kBAAW,CAAA;AAAA,EAC/C,eAAiB,EAAA;AAAA,IACf,IAAM,EAAA,MAAA;AAAA,IACN,QAAU,EAAA,KAAA;AAAA,GACZ;AAAA,EACA,eAAiB,EAAA;AAAA,IACf,IAAM,EAAA,MAAA;AAAA,IACN,QAAU,EAAA,KAAA;AAAA,GACZ;AAAA,EACA,QAAU,EAAA;AAAA,IACR,IAAM,EAAA,MAAA;AAAA,IACN,QAAU,EAAA,KAAA;AAAA,GACZ;AAAA,EACA,QAAU,EAAA;AAAA,IACR,IAAM,EAAA,MAAA;AAAA,IACN,QAAU,EAAA,KAAA;AAAA,GACZ;AACF,CAAC;;;;;"}
+{"version":3,"file":"panel-max-pain-price.js","sources":["../../../../../../../packages/components/panel-max-pain-price/src/panel-max-pain-price.vue"],"sourcesContent":["<template>\n  <div :class=\"[ns.b()]\">\n    <g-chart-panel\n      v-model:currency=\"currency\"\n      v-model:exchange=\"exchange\"\n      :loading=\"state.loadingFlag\"\n      @refresh=\"fetchData\"\n    >\n      <template #title>\n        {{ t('message.maxPainPrice') }}\n        <g-tooltip :isMobile=\"isMobile\">\n          <g-icon name=\"info_question_circle\" />\n          <template #title>\n            <div class=\"greeks-panel-tip\" v-html=\"t('message.maxPainPriceTips')\"></div>\n          </template>\n        </g-tooltip>\n      </template>\n      <template #tool>\n        <!-- <span class=\"filter-box h5-hide\">\n          <g-icon name=\"chart_filter\" :size=\"15\" />\n        </span> -->\n        <div class=\"period-controls\">\n          <span class=\"selector-label h5-hide\">{{ t('message.time') }}</span>\n          <span class=\"period-range h5-hide\">{{ state.endDateDisplay }}</span>\n          <g-page-turner\n            :prevDisabled=\"state.loadingFlag || isPrevDisabled\"\n            :nextDisabled=\"state.loadingFlag || state.pageCount <= 0\"\n            @change=\"handlePageChange\"\n          />\n          <g-date-time-picker\n            v-model=\"state.selectedDateTime\"\n            :disabled-date=\"disabledDateForMaxPain\"\n            @change=\"handleDateTimeChange\"\n          />\n        </div>\n      </template>\n      <template #body>\n        <div class=\"echart\" ref=\"echart\">\n          <g-chart class=\"skew-chart\" :option=\"chartOption\"></g-chart>\n        </div>\n      </template>\n    </g-chart-panel>\n  </div>\n</template>\n<script lang=\"ts\" setup>\nimport {\n  useNamespace,\n  useLocale,\n  useDeviceType,\n  useTheme,\n} from '@greeks-live-ui/hooks';\nimport { reactive, onMounted, watch, computed } from 'vue';\nimport dayjs from 'dayjs';\n\nimport {\n  showEndDateTime,\n  formatTimestampToExpiry,\n} from '@greeks-live-ui/utils/chartHelp';\nimport { getStrikePain, IStrikePainItem } from '@greeks-live-ui/utils/dataLab';\nimport {\n  panelMaxPainPriceEmits,\n  panelMaxPainPriceProps,\n} from './panel-max-pain-price';\n\ndefineOptions({\n  name: 'GPanelMaxPainPrice',\n});\nconst props = defineProps(panelMaxPainPriceProps);\nconst emit = defineEmits(panelMaxPainPriceEmits);\n\nconst ns = useNamespace('max-pain-price');\nconst { t } = useLocale();\nconst { isMobile, isPC } = useDeviceType();\nconst { isDark } = useTheme();\n\nconst state = reactive({\n  loadingFlag: false,\n  toolTipTitle: '',\n\n  exchange: props.exchange || props.defaultExchange || 'Deribit',\n  currency: props.currency || props.defaultCurrency || 'BTC',\n\n  pageCount: 0,\n  selectedDateTime: dayjs(),\n  endDateDisplay: '',\n\n  chartData: [] as IStrikePainItem[],\n});\n\nconst currency = computed({\n  get: () => props.currency || state.currency || 'BTC',\n  set: (newVal) => {\n    props.currency\n      ? emit('update:currency', newVal)\n      : (state.currency = newVal);\n  },\n});\n\nconst exchange = computed({\n  get: () => props.exchange || state.exchange || 'Deribit',\n  set: (newVal) => {\n    props.exchange\n      ? emit('update:exchange', newVal)\n      : (state.exchange = newVal);\n  },\n});\n\nconst isPrevDisabled = computed(() => {\n  const now = dayjs();\n  const sixMonthsAgo = now.subtract(6, 'month');\n  const nextDay = dayjs(state.selectedDateTime).subtract(1, 'day');\n  return nextDay.isBefore(sixMonthsAgo.startOf('day'));\n});\n\nwatch(currency, () => {\n  fetchData();\n});\n\nwatch(exchange, () => {\n  fetchData();\n});\nconst fetchData = () => {\n  state.loadingFlag = true;\n  // TO1DO: page_num字段接口未支持，图表上翻页暂时删除 - , page_num: state.pageCount\n  getStrikePain({\n    currency: currency.value,\n    exchange: exchange.value,\n    end_timestamp: state.selectedDateTime.valueOf(),\n  })\n    .then((res) => {\n      if (res && res.code === 200) {\n        state.chartData = res.data || [];\n      }\n    })\n    .finally(() => {\n      state.loadingFlag = false;\n    });\n};\n\nonMounted(() => {\n  fetchData();\n  getDateTimeRange();\n});\n\nconst getDateTimeRange = () => {\n  // 只显示截止时间，pageCount为0时是当天，1为前一天\n  const endTime = state.selectedDateTime || dayjs();\n  state.endDateDisplay = showEndDateTime(endTime);\n};\n\nconst handlePageChange = (direction: 'prev' | 'next') => {\n  if (direction === 'prev') {\n    const newDateTime = dayjs(state.selectedDateTime).subtract(1, 'day');\n    const now = dayjs();\n    const sixMonthsAgo = now.subtract(6, 'month');\n\n    // 检查是否已经超过半年前，如果是则不允许继续向前翻页\n    if (newDateTime.isBefore(sixMonthsAgo.startOf('day'))) {\n      return;\n    }\n\n    state.pageCount++;\n    state.selectedDateTime = newDateTime;\n  } else {\n    if (state.pageCount <= 0) {\n      return;\n    }\n    state.pageCount--;\n    state.selectedDateTime = dayjs(state.selectedDateTime).add(1, 'day');\n  }\n  getDateTimeRange();\n  fetchData();\n};\n\nconst handleDateTimeChange = (value: any) => {\n  state.selectedDateTime = value;\n  // 根据用户选择的时间自动计算 pageCount\n  const now = dayjs();\n  const selectedTime = dayjs(value);\n  const diffInDays = now.diff(selectedTime, 'day');\n\n  // 如果选择的时间在当前时间前24h内，pageCount为0\n  // 否则，pageCount为相差的天数\n  state.pageCount = Math.max(0, diffInDays);\n  getDateTimeRange();\n  fetchData();\n};\n\nconst disabledDateForMaxPain = (current: any) => {\n  const now = dayjs();\n  const sixMonthsAgo = now.subtract(6, 'month');\n  // 只能选 [半年前, 今天] 之间，允许选今天\n  return current < sixMonthsAgo.startOf('day') || current > now.endOf('day');\n};\n\nconst getEchartData = () => {\n  const data = [...state.chartData];\n\n  let x: string[] = [];\n  let y: number[] = [];\n\n  data.forEach((item) => {\n    x.push(formatTimestampToExpiry(item.expiration_timestamp) || '');\n    y.push(item.strike);\n  });\n\n  return {\n    x,\n    y,\n  };\n};\n\nconst getEchartOption = (params: ReturnType<typeof getEchartData>) => {\n  const { x, y } = params;\n\n  const option = {\n    color: ['#FFD600'],\n\n    tooltip: {\n      trigger: 'axis',\n      axisPointer: {\n        type: 'cross',\n        label: {\n          show: isMobile.value ? true : false, // 标签显示\n          backgroundColor: '#DEE2E6',\n          color: '#343A40',\n          padding: [4, 6, 4, 6],\n          margin: 9,\n        },\n        crossStyle: {\n          // 十字准星X轴指示器样式\n          color: '#8B959F',\n        },\n        lineStyle: {\n          // 十字准星Y轴指示器样式\n          color: '#8B959F',\n        },\n      },\n\n      backgroundColor: isDark.value ? '#E9ECEF' : '#292F3D', // 浅色/Grey/14\n      padding: [6, 8, 5, 6],\n      textStyle: {\n        color: isDark.value ? '#000000' : '#FFFFFF', // 浅色/Grey/White\n        fontSize: 12,\n        lineHeight: 16,\n        fontWeight: 400,\n      },\n      formatter: (\n        params: Array<{\n          axisValueLabel: string;\n          seriesName: string;\n          color: string;\n          value: number;\n        }>\n      ) => {\n        let content = '';\n        state.toolTipTitle = params[0].axisValueLabel;\n        content += `<div class=\"chart-tooltip-box\"><div style=\"margin-bottom:4px;\">${state.toolTipTitle}</div> `;\n\n        params.forEach(\n          (param: {\n            axisValueLabel: string;\n            seriesName: string;\n            color: string;\n            value: number;\n          }) => {\n            content += `\n            <div class=\"chart-tooltip\">\n              <div>\n                <span class=\"chart-tooltip-line\" style=\"background-color:${\n                  param.color\n                };\"></span>\n              </div>\n              <span class=\"chart-tooltip-value\">$ ${param.value.toFixed(\n                2\n              )}</span>\n            </div>\n          `;\n          }\n        );\n        return content + '</div>';\n      },\n    },\n    axisPointer: {\n      type: 'line', // 显示指示线\n      label: {\n        show: true, // 显示指示线上的标签\n        backgroundColor: '#DEE2E6', // 标签背景颜色\n        color: '#343A40',\n        fontSize: 10,\n        padding: [4, 6, 4, 8],\n      },\n      // lineStyle: {\n      //   type: 'dashed', // 虚线\n      //   color: 'red'   // 线的颜色\n      // }\n    },\n    legend: {\n      // ...returnLegendStyle('line'),\n      show: true,\n\n      left: 0,\n      icon: 'rect', // 使用矩形作为图标，使其看起来像短横线\n      itemWidth: 14, // 控制短横线的长度\n      itemHeight: 2, // 控制短横线的粗细 (高度)\n      itemGap: 20, // 控制图例项之间的间距 (可选)\n      textStyle: {\n        // 控制图例文本样式 (可选)\n        color: isDark.value ? '#ADB5BD' : '#596169', // 文本颜色\n        fontSize: 12, // 文本字体大小\n      },\n      lineStyle: {\n        inactiveColor: isDark.value ? '#2B2F32' : '#DEE2E6', // 浅色/Grey/3 图例关闭时的线条描边颜色\n      },\n      inactiveColor: isDark.value ? '#495057' : '#BDC4CB', // 浅色/Grey/5 图例关闭时的颜色\n\n      // top: '3%',\n    },\n    xAxis: {\n      type: 'category',\n      data: x,\n      axisTick: {\n        show: false, // 隐藏刻度线\n      },\n      axisLabel: {\n        // 坐标轴刻度标签\n        color: isDark.value ? '#CED4DA' : '#343A40', // 浅色/Grey/12\n        fontWeight: 400,\n        fontSize: 10,\n      },\n      axisLine: {\n        show: false, // 隐藏坐标轴轴线\n        lineStyle: {\n          color: isDark.value ? '#CED4DA' : '#343A40', // 线的颜色 浅色/Grey/12\n        },\n      },\n      splitLine: {\n        show: !isMobile.value && !isDark.value, // 显示 X 轴网格线\n        lineStyle: {\n          color: '#F1F1F1', // 网格线颜色\n          width: 1, // 网格线宽度\n          type: 'solid', // 网格线类型: 'solid', 'dashed', 'dotted'\n        },\n      },\n    },\n    yAxis: {\n      type: 'value',\n      scale: true,\n      axisLabel: {\n        // 坐标轴刻度标签\n        show: true,\n        color: isDark.value ? '#CED4DA' : '#343A40', // 浅色/Grey/12\n        fontWeight: 400,\n        fontSize: 10,\n      },\n      top: 0,\n      bottom: 0,\n      axisLine: {\n        lineStyle: {\n          color: isDark.value ? '#CED4DA' : '#343A40', // 线的颜色 浅色/Grey/12\n        },\n      },\n      splitLine: {\n        lineStyle: {\n          color: isDark.value ? '#2B2F32' : '#F1F1F1', // 网格线颜色 浅色/Grey/3 '#F1F1F1'\n          width: 1, // 网格线宽度\n          type: 'solid', // 网格线类型: 'solid', 'dashed', 'dotted'\n        },\n      },\n    },\n    grid: {\n      top: 20,\n      bottom: 0,\n      left: 10,\n      right: 15,\n      containLabel: true,\n    },\n    series: [\n      {\n        type: 'line',\n        data: y,\n        color: '#FFD600',\n      },\n    ],\n  };\n  return option;\n};\n\nconst chartOption = computed(() => {\n  return getEchartOption(getEchartData());\n});\n</script>\n"],"names":["useNamespace","useLocale","useDeviceType","useTheme","reactive","dayjs","computed","watch","getStrikePain","onMounted","showEndDateTime","formatTimestampToExpiry","params"],"mappings":"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"}