greeks-live-ui 0.1.21 → 0.1.22

package/es/packages/components/panel-option-open-interest/src/panel-option-open-interest2.mjs

@@ -1,28 +1,480 @@
-import '../../../utils/index.mjs';
-import { buildProps } from '../../../utils/vue/props/runtime.mjs';
+import { defineComponent, reactive, computed, watch, onMounted, resolveComponent, openBlock, createElementBlock, normalizeClass, unref, createVNode, isRef, withCtx, createTextVNode, toDisplayString, createElementVNode } from 'vue';
+import '../../../hooks/index.mjs';
+import { numberFormat, formatTimestampToExpiry, thousandthFormat, formatLargeNumber, timestampFormat } from '../../../utils/chartHelp.mjs';
+import { getOpenInterestStatistics } from '../../../utils/dataLab.mjs';
+import { panelOptionOpenInterestProps, panelOptionOpenInterestEmits } from './panel-option-open-interest.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 panelOptionOpenInterestEmits = {
-  "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 = {
+  class: "echart",
+  ref: "echart"
 };
-const panelOptionOpenInterestProps = buildProps({
-  defaultCurrency: {
-    type: String,
-    required: false
-  },
-  defaultExchange: {
-    type: String,
-    required: false
-  },
-  currency: {
-    type: String,
-    required: false
-  },
-  exchange: {
-    type: String,
-    required: false
+const _hoisted_6 = { class: "footer-pcr" };
+const _hoisted_7 = ["innerHTML"];
+const __default__ = {
+  name: "GPanelOptionOpenInterest"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  props: panelOptionOpenInterestProps,
+  emits: panelOptionOpenInterestEmits,
+  setup(__props, { emit }) {
+    const props = __props;
+    const ns = useNamespace("panel-option-open-interest");
+    const { t } = useLocale();
+    const { isMobile } = useDeviceType();
+    const { isDark } = useTheme();
+    const dataTypeList = [
+      { value: "expire", label: "Expire" },
+      { value: "strike", label: "Strike" }
+    ];
+    const state = reactive({
+      loadingFlag: false,
+      exchange: props.exchange || props.defaultExchange || "Deribit",
+      currency: props.currency || props.defaultCurrency || "BTC",
+      dataType: "expire",
+      pcr: 0,
+      usdTotal: "",
+      coinTotal: "",
+      seriesSelected: {
+        call: true,
+        put: true
+      },
+      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;
+      }
+    });
+    watch(currency, () => {
+      fetchData();
+    });
+    watch(exchange, () => {
+      fetchData();
+    });
+    const fetchData = () => {
+      state.loadingFlag = true;
+      getOpenInterestStatistics({
+        currency: currency.value,
+        exchange: exchange.value
+      }).then((res) => {
+        if (res && res.code === 200) {
+          state.chartData = res.data;
+        }
+      }).finally(() => {
+        state.loadingFlag = false;
+      });
+    };
+    onMounted(() => {
+      fetchData();
+    });
+    const getEchartData = () => {
+      let date = [];
+      let openInterestCall = [];
+      let openInterestCallTotal = 0;
+      let openInterestPut = [];
+      let openInterestPutTotal = 0;
+      let openInterestVolume = [];
+      let totalVolume = 0;
+      let openInterestRate = [];
+      if (state.dataType === "strike") {
+        const data = state.chartData.by_strike || [];
+        data.forEach((item) => {
+          date.push(`$${numberFormat(item.strike, 0)}`);
+          let callVolume = item.open_interest_call;
+          let putVolume = item.open_interest_put;
+          openInterestCall.push(callVolume);
+          openInterestCallTotal += callVolume;
+          openInterestPut.push(putVolume);
+          openInterestPutTotal += putVolume;
+        });
+      } else {
+        const data = state.chartData.by_expiry || [];
+        data.forEach((item) => {
+          date.push(formatTimestampToExpiry(item.end_ts));
+          let callVolume = item.open_interest_call;
+          let putVolume = item.open_interest_put;
+          openInterestCall.push(callVolume);
+          openInterestCallTotal += callVolume;
+          openInterestPut.push(putVolume);
+          openInterestPutTotal += putVolume;
+          let sumVolume = callVolume + putVolume;
+          openInterestVolume.push(sumVolume);
+          totalVolume += sumVolume;
+        });
+        openInterestRate = openInterestVolume.map((item) => {
+          return item / totalVolume * 100;
+        });
+      }
+      state.pcr = openInterestPutTotal / openInterestCallTotal;
+      return {
+        date,
+        openInterestCallTotal,
+        openInterestCall,
+        openInterestPutTotal,
+        openInterestPut,
+        openInterestRate
+      };
+    };
+    const getEchartOption = (params) => {
+      if (!params)
+        return {};
+      const {
+        date,
+        openInterestCallTotal,
+        openInterestCall,
+        openInterestPutTotal,
+        openInterestPut,
+        openInterestRate
+      } = params;
+      const callName = `Calls (${thousandthFormat(openInterestCallTotal)})`;
+      const putName = `Puts (${thousandthFormat(openInterestPutTotal)})`;
+      const series = [
+        {
+          name: callName,
+          type: "bar",
+          stack: "optionGlobalOpenInterestbyStrike",
+          color: isDark.value ? "#E56065" : "#F76560",
+          emphasis: {
+            focus: "series"
+          },
+          data: openInterestCall,
+          itemStyle: {
+            borderRadius: 0,
+            opacity: 1
+          },
+          blur: {
+            itemStyle: {
+              opacity: 1
+            }
+          }
+        },
+        {
+          name: putName,
+          type: "bar",
+          stack: "optionGlobalOpenInterestbyStrike",
+          color: isDark.value ? "#3298D9" : "#94BFFF",
+          emphasis: {
+            focus: "series"
+          },
+          data: openInterestPut,
+          itemStyle: {
+            borderRadius: 0,
+            opacity: 1
+          },
+          blur: {
+            itemStyle: {
+              opacity: 1
+            }
+          }
+        }
+      ];
+      if (state.seriesSelected.call && state.seriesSelected.put) {
+        series.push({
+          name: "rate",
+          type: "scatter",
+          yAxisIndex: 0,
+          symbolSize: 0,
+          silent: true,
+          showSymbol: false,
+          showLegendSymbol: false,
+          data: openInterestCall.map(
+            (item, index) => item + openInterestPut[index]
+          ),
+          label: {
+            show: state.dataType === "strike" ? false : true,
+            position: "top",
+            formatter: (params2) => {
+              return numberFormat(openInterestRate[params2.dataIndex], 2) + "%";
+            },
+            textStyle: {
+              color: isDark.value ? "#CED4DA" : "#343A40",
+              fontSize: isMobile.value ? 8 : 12,
+              fontWeight: 400
+            }
+          },
+          emphasis: {
+            disabled: true
+          }
+        });
+      }
+      const option = {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+            backgroundColor: isDark.value ? "#E9ECEF" : "#292F3D",
+            textStyle: {
+              color: isDark.value ? "#000000" : "#FFFFFF",
+              fontSize: 12,
+              lineHeight: 16,
+              fontWeight: 400
+            }
+          },
+          formatter: function(params2) {
+            var _a, _b;
+            const filteredParams = params2.filter(
+              (item) => item.seriesName !== "rate"
+            );
+            if (filteredParams.length === 0) {
+              return "";
+            }
+            let seriesName0 = "";
+            let seriesName1 = "";
+            let html = `
+            <div style="display: flex;justify-content: space-between;align-items: center;"><div>${filteredParams[0].axisValue}</div></div>
+        `;
+            if (filteredParams[0]) {
+              seriesName0 = filteredParams[0].seriesName.split(" ")[0];
+              html += `
+            <div style="display: flex;justify-content: space-between;align-items: center;"><div style="margin-right: 40px;">${filteredParams[0].marker} ${seriesName0}</div><div>${thousandthFormat(
+                filteredParams[0].data,
+                2
+              )}</div></div>
+          `;
+            }
+            if (filteredParams[1]) {
+              seriesName1 = filteredParams[1].seriesName.split(" ")[0];
+              html += `
+            <div style="display: flex;justify-content: space-between;align-items: center;"><div style="margin-right: 40px;">${filteredParams[1].marker} ${seriesName1}</div><div>${thousandthFormat(
+                filteredParams[1].data,
+                2
+              )}</div></div>
+          `;
+            }
+            if (((_a = filteredParams[0]) == null ? void 0 : _a.data) && ((_b = filteredParams[1]) == null ? void 0 : _b.data)) {
+              html += `
+            <div style="display: flex;justify-content: space-between;align-items: center;"><div style="margin-right: 40px;margin-left: 18px;">PCR</div><div>${numberFormat(
+                filteredParams[1].data / filteredParams[0].data,
+                2
+              )}</div></div>
+          `;
+            }
+            return html;
+          },
+          backgroundColor: isDark.value ? "#E9ECEF" : "#292F3D",
+          borderWidth: 0,
+          textStyle: {
+            color: isDark.value ? "#000000" : "#FFFFFF",
+            fontSize: 12,
+            lineHeight: 16,
+            fontWeight: 400
+          }
+        },
+        legend: {
+          data: [callName, putName],
+          textStyle: {
+            color: isDark.value ? "#ADB5BD" : "#596169"
+          },
+          selected: {
+            [callName]: state.seriesSelected.call,
+            [putName]: state.seriesSelected.put
+          }
+        },
+        xAxis: {
+          type: "category",
+          data: date,
+          axisLabel: {
+            color: isDark.value ? "#CED4DA" : "#343A40",
+            fontWeight: 400,
+            fontSize: 10,
+            rotate: state.dataType === "strike" ? 90 : 45
+          },
+          axisTick: {
+            show: false
+          },
+          axisLine: {
+            show: false,
+            lineStyle: {
+              color: isDark.value ? "#CED4DA" : "#343A40"
+            }
+          }
+        },
+        yAxis: [
+          {
+            type: "value",
+            name: `Open Interest(${currency.value})`,
+            nameLocation: "end",
+            nameGap: -85,
+            nameRotate: 90,
+            nameTextStyle: {
+              color: isDark.value ? "#8B959F" : "#8B959F",
+              fontWeight: 400,
+              fontSize: 10,
+              padding: isMobile.value ? [0, 0, 0, 15] : [0, 0, 0, 3]
+            },
+            axisLabel: {
+              show: true,
+              color: isDark.value ? "#CED4DA" : "#343A40",
+              fontWeight: 400,
+              fontSize: 10,
+              formatter: (v, digits) => {
+                if (isMobile.value) {
+                  return formatLargeNumber(v, 0);
+                }
+                return thousandthFormat(v, 0);
+              }
+            },
+            axisLine: {
+              lineStyle: {
+                color: isDark.value ? "#CED4DA" : "#343A40"
+              }
+            },
+            splitLine: {
+              lineStyle: {
+                color: isDark.value ? "#2B2F32" : "#F1F1F1",
+                width: 1,
+                type: "dashed"
+              }
+            }
+          }
+        ],
+        grid: {
+          top: 50,
+          left: 10,
+          right: 10,
+          bottom: 0,
+          containLabel: true
+        },
+        series
+      };
+      return option;
+    };
+    const handleLegendSelectedChange = (params) => {
+      const selectedValues = Object.values(params.selected);
+      if (selectedValues.length >= 2) {
+        state.seriesSelected.call = selectedValues[0];
+        state.seriesSelected.put = selectedValues[1];
+      }
+    };
+    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_toggle_button = resolveComponent("g-toggle-button");
+      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[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,
+            onRefresh: fetchData
+          }, {
+            title: withCtx(() => [
+              createTextVNode(
+                toDisplayString(unref(t)("message.optionsOpenInterest")) + " ",
+                1
+              ),
+              createVNode(_component_g_tooltip, { isMobile: unref(isMobile) }, {
+                title: withCtx(() => [
+                  createElementVNode("div", {
+                    class: "greeks-panel-tip",
+                    innerHTML: unref(t)("message.optionsOpenInterestTips")
+                  }, null, 8, _hoisted_1)
+                ]),
+                default: withCtx(() => [
+                  createVNode(_component_g_icon, { name: "info_question_circle" })
+                ]),
+                _: 1
+              }, 8, ["isMobile"])
+            ]),
+            tool: withCtx(() => [
+              createVNode(_component_g_toggle_button, {
+                modelValue: state.dataType,
+                "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => state.dataType = $event),
+                options: dataTypeList
+              }, null, 8, ["modelValue"]),
+              createElementVNode("div", _hoisted_2, [
+                createElementVNode(
+                  "span",
+                  _hoisted_3,
+                  toDisplayString(unref(t)("message.upto")),
+                  1
+                ),
+                createElementVNode(
+                  "span",
+                  _hoisted_4,
+                  toDisplayString(unref(timestampFormat)(/* @__PURE__ */ new Date(), "{y}/{m}/{d}")),
+                  1
+                )
+              ])
+            ]),
+            body: withCtx(() => [
+              createElementVNode(
+                "div",
+                _hoisted_5,
+                [
+                  createVNode(_component_g_chart, {
+                    class: "skew-chart",
+                    option: unref(chartOption),
+                    onLegendselectchanged: handleLegendSelectedChange
+                  }, null, 8, ["option"])
+                ],
+                512
+              ),
+              createElementVNode("div", _hoisted_6, [
+                createVNode(_component_g_tooltip, { placement: "left" }, {
+                  title: withCtx(() => [
+                    createElementVNode("div", {
+                      class: "greeks-panel-tip",
+                      innerHTML: unref(t)("message.cprTips")
+                    }, null, 8, _hoisted_7)
+                  ]),
+                  default: withCtx(() => [
+                    createElementVNode(
+                      "span",
+                      {
+                        class: normalizeClass(unref(ns).e("pcr-trigger"))
+                      },
+                      [
+                        createTextVNode(
+                          " PCR:\xA0" + toDisplayString(unref(numberFormat)(state.pcr)) + " ",
+                          1
+                        ),
+                        createVNode(_component_g_icon, { name: "info_question_circle" })
+                      ],
+                      2
+                    )
+                  ]),
+                  _: 1
+                })
+              ])
+            ]),
+            _: 1
+          }, 8, ["currency", "exchange", "loading"])
+        ],
+        2
+      );
+    };
   }
 });
+var PanelOptionOpenInterest = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "/Users/luobowen/Desktop/greeks/greeks-live-ui/packages/components/panel-option-open-interest/src/panel-option-open-interest.vue"]]);
 
-export { panelOptionOpenInterestEmits, panelOptionOpenInterestProps };
+export { PanelOptionOpenInterest as default };
 //# sourceMappingURL=panel-option-open-interest2.mjs.map

package/es/packages/components/panel-option-open-interest/src/panel-option-open-interest2.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"panel-option-open-interest2.mjs","sources":["../../../../../../../packages/components/panel-option-open-interest/src/panel-option-open-interest.ts"],"sourcesContent":["import { buildProps } from '@greeks-live-ui/utils'\nimport type PanelOptionOpenInterest from './panel-option-open-interest.vue'\nimport type { ExtractPropTypes } from 'vue'\n\nexport const panelOptionOpenInterestEmits = {\n  'update:currency': (currency: string) => true,\n  'update:exchange': (exchange: string) => true,\n}\nexport type PanelOptionOpenInterestEmits = typeof panelOptionOpenInterestEmits\nexport const panelOptionOpenInterestProps = 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 PanelOptionOpenInterestProps = ExtractPropTypes<typeof panelOptionOpenInterestProps>\nexport type PanelOptionOpenInterestInstance = InstanceType<typeof PanelOptionOpenInterest>\n"],"names":[],"mappings":";;;AAIO,MAAM,4BAA+B,GAAA;AAAA,EAC1C,iBAAA,EAAmB,CAAC,QAAqB,KAAA,IAAA;AAAA,EACzC,iBAAA,EAAmB,CAAC,QAAqB,KAAA,IAAA;AAC3C,EAAA;AAEO,MAAM,+BAA+B,UAAW,CAAA;AAAA,EACrD,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-option-open-interest2.mjs","sources":["../../../../../../../packages/components/panel-option-open-interest/src/panel-option-open-interest.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.optionsOpenInterest') }}\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.optionsOpenInterestTips')\"></div>\n          </template>\n        </g-tooltip>\n      </template>\n      <template #tool>\n        <g-toggle-button\n          v-model=\"state.dataType\"\n          :options=\"dataTypeList\"\n        ></g-toggle-button>\n        <div class=\"period-controls\">\n          <span class=\"selector-label h5-hide\">{{ t('message.upto') }}</span>\n          <span class=\"period-range h5-hide\">{{\n            timestampFormat(new Date(), '{y}/{m}/{d}')\n          }}</span>\n        </div>\n      </template>\n      <template #body>\n        <div class=\"echart\" ref=\"echart\">\n          <g-chart\n            class=\"skew-chart\"\n            :option=\"chartOption\"\n            @legendselectchanged=\"handleLegendSelectedChange\"\n          ></g-chart>\n        </div>\n\n        <div class=\"footer-pcr\">\n          <g-tooltip placement=\"left\">\n            <span :class=\"ns.e('pcr-trigger')\">\n              PCR:&nbsp;{{ numberFormat(state.pcr) }}\n              <g-icon name=\"info_question_circle\" />\n            </span>\n            <template #title>\n              <div class=\"greeks-panel-tip\" v-html=\"t('message.cprTips')\"></div>\n            </template>\n          </g-tooltip>\n        </div>\n      </template>\n    </g-chart-panel>\n  </div>\n</template>\n<script lang=\"ts\" setup>\nimport { useNamespace, useDeviceType, useTheme } from '@greeks-live-ui/hooks';\nimport { reactive, onMounted, computed, watch } from 'vue';\nimport { useLocale } from '@greeks-live-ui/hooks';\n\nimport {\n  numberFormat,\n  timestampFormat,\n  thousandthFormat,\n  formatTimestampToExpiry,\n  formatLargeNumber,\n  showDateRange,\n} from '@greeks-live-ui/utils/chartHelp';\nimport {\n  getOpenInterestStatistics,\n  IByStrikeItem,\n  IOpenInterestStatisticsRes,\n} from '@greeks-live-ui/utils/dataLab';\nimport {\n  panelOptionOpenInterestEmits,\n  panelOptionOpenInterestProps,\n} from './panel-option-open-interest';\n\ndefineOptions({\n  name: 'GPanelOptionOpenInterest',\n});\nconst props = defineProps(panelOptionOpenInterestProps);\nconst emit = defineEmits(panelOptionOpenInterestEmits);\n\nconst ns = useNamespace('panel-option-open-interest');\nconst { t } = useLocale();\nconst { isMobile } = useDeviceType();\nconst { isDark } = useTheme();\n\nconst dataTypeList = [\n  { value: 'expire', label: 'Expire' },\n  { value: 'strike', label: 'Strike' },\n];\n\nconst state = reactive({\n  loadingFlag: false,\n\n  exchange: props.exchange || props.defaultExchange || 'Deribit',\n  currency: props.currency || props.defaultCurrency || 'BTC',\n\n  dataType: 'expire',\n  pcr: 0,\n\n  usdTotal: '',\n  coinTotal: '',\n\n  seriesSelected: {\n    call: true,\n    put: true,\n  },\n\n  chartData: {} as IOpenInterestStatisticsRes,\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\nwatch(currency, () => {\n  fetchData();\n});\n\nwatch(exchange, () => {\n  fetchData();\n});\n\nconst fetchData = () => {\n  state.loadingFlag = true;\n  getOpenInterestStatistics({\n    currency: currency.value,\n    exchange: exchange.value,\n  })\n    .then((res) => {\n      if (res && res.code === 200) {\n        state.chartData = res.data as IOpenInterestStatisticsRes;\n      }\n    })\n    .finally(() => {\n      state.loadingFlag = false;\n    });\n};\n\nonMounted(() => {\n  fetchData();\n});\n\nconst getEchartData = () => {\n  let date: string[] = [];\n  let openInterestCall: number[] = [];\n  let openInterestCallTotal = 0;\n  let openInterestPut: number[] = [];\n  let openInterestPutTotal = 0;\n  let openInterestVolume: number[] = [];\n  let totalVolume = 0;\n  let openInterestRate: number[] = [];\n\n  if (state.dataType === 'strike') {\n    const data = state.chartData.by_strike || [];\n    data.forEach((item: IByStrikeItem) => {\n      date.push(`$${numberFormat(item.strike, 0)}`);\n\n      let callVolume = item.open_interest_call;\n      let putVolume = item.open_interest_put;\n      openInterestCall.push(callVolume);\n      openInterestCallTotal += callVolume;\n      openInterestPut.push(putVolume);\n      openInterestPutTotal += putVolume;\n    });\n  } else {\n    const data = state.chartData.by_expiry || [];\n    data.forEach((item) => {\n      date.push(formatTimestampToExpiry(item.end_ts) as string);\n\n      let callVolume = item.open_interest_call;\n      let putVolume = item.open_interest_put;\n      openInterestCall.push(callVolume);\n      openInterestCallTotal += callVolume;\n      openInterestPut.push(putVolume);\n      openInterestPutTotal += putVolume;\n\n      let sumVolume = callVolume + putVolume;\n      openInterestVolume.push(sumVolume);\n      totalVolume += sumVolume;\n    });\n\n    openInterestRate = openInterestVolume.map((item) => {\n      return (item / totalVolume) * 100;\n    });\n  }\n\n  state.pcr = openInterestPutTotal / openInterestCallTotal;\n\n  return {\n    date,\n    openInterestCallTotal,\n    openInterestCall,\n    openInterestPutTotal,\n    openInterestPut,\n    openInterestRate,\n  };\n};\n\nconst getEchartOption = (params: ReturnType<typeof getEchartData>) => {\n  if (!params) return {};\n  const {\n    date,\n    openInterestCallTotal,\n    openInterestCall,\n    openInterestPutTotal,\n    openInterestPut,\n    openInterestRate,\n  } = params;\n  const callName = `Calls (${thousandthFormat(openInterestCallTotal)})`;\n  const putName = `Puts (${thousandthFormat(openInterestPutTotal)})`;\n\n  const series = [\n    {\n      name: callName,\n      type: 'bar',\n      // barWidth: '16px',\n      stack: 'optionGlobalOpenInterestbyStrike',\n      color: isDark.value ? '#E56065' : '#F76560',\n      emphasis: {\n        focus: 'series',\n      },\n      data: openInterestCall,\n      itemStyle: {\n        borderRadius: 0,\n        opacity: 1,\n      },\n      blur: {\n        itemStyle: {\n          opacity: 1,\n        },\n      },\n    },\n    {\n      name: putName,\n      type: 'bar',\n      // barWidth: '16px',\n      stack: 'optionGlobalOpenInterestbyStrike',\n      color: isDark.value ? '#3298D9' : '#94BFFF',\n      emphasis: {\n        focus: 'series',\n      },\n      data: openInterestPut,\n      itemStyle: {\n        borderRadius: 0,\n        opacity: 1,\n      },\n      blur: {\n        itemStyle: {\n          opacity: 1,\n        },\n      },\n    },\n  ];\n  if (state.seriesSelected.call && state.seriesSelected.put) {\n    series.push({\n      name: 'rate',\n      type: 'scatter',\n      yAxisIndex: 0,\n      symbolSize: 0,\n      silent: true,\n      showSymbol: false,\n      showLegendSymbol: false,\n      data: openInterestCall.map(\n        (item, index) => item + openInterestPut[index]\n      ),\n      label: {\n        show: state.dataType === 'strike' ? false : true,\n        position: 'top',\n        formatter: (params: { dataIndex: number }) => {\n          return numberFormat(openInterestRate[params.dataIndex], 2) + '%';\n        },\n        textStyle: {\n          color: isDark.value ? '#CED4DA' : '#343A40', // 浅色/Grey/12\n          fontSize: isMobile.value ? 8 : 12,\n          fontWeight: 400,\n        },\n      },\n      emphasis: {\n        disabled: true,\n      },\n    });\n  }\n\n  const option = {\n    tooltip: {\n      trigger: 'axis',\n      axisPointer: {\n        // 坐标轴指示器，坐标轴触发有效\n        type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'\n        backgroundColor: isDark.value ? '#E9ECEF' : '#292F3D', // 浅色/Grey/14\n        textStyle: {\n          color: isDark.value ? '#000000' : '#FFFFFF', // 浅色/Grey/White\n          fontSize: 12,\n          lineHeight: 16,\n          fontWeight: 400,\n        },\n      },\n      formatter: function (\n        params: Array<{\n          axisValueLabel: string;\n          axisValue: string;\n          seriesName: string;\n          color: string;\n          value: number;\n          marker: string;\n          data: number;\n        }>\n      ) {\n        const filteredParams = params.filter(\n          (item) => item.seriesName !== 'rate'\n        );\n        if (filteredParams.length === 0) {\n          return '';\n        }\n        let seriesName0 = '';\n        let seriesName1 = '';\n        let html = `\n            <div style=\"display: flex;justify-content: space-between;align-items: center;\"><div>${filteredParams[0].axisValue}</div></div>\n        `;\n        if (filteredParams[0]) {\n          seriesName0 = filteredParams[0].seriesName.split(' ')[0];\n          html += `\n            <div style=\"display: flex;justify-content: space-between;align-items: center;\"><div style=\"margin-right: 40px;\">${\n              filteredParams[0].marker\n            } ${seriesName0}</div><div>${thousandthFormat(\n            filteredParams[0].data,\n            2\n          )}</div></div>\n          `;\n        }\n        if (filteredParams[1]) {\n          seriesName1 = filteredParams[1].seriesName.split(' ')[0];\n          html += `\n            <div style=\"display: flex;justify-content: space-between;align-items: center;\"><div style=\"margin-right: 40px;\">${\n              filteredParams[1].marker\n            } ${seriesName1}</div><div>${thousandthFormat(\n            filteredParams[1].data,\n            2\n          )}</div></div>\n          `;\n        }\n\n        if (filteredParams[0]?.data && filteredParams[1]?.data) {\n          html += `\n            <div style=\"display: flex;justify-content: space-between;align-items: center;\"><div style=\"margin-right: 40px;margin-left: 18px;\">PCR</div><div>${numberFormat(\n              filteredParams[1].data / filteredParams[0].data,\n              2\n            )}</div></div>\n          `;\n        }\n        return html;\n      },\n      backgroundColor: isDark.value ? '#E9ECEF' : '#292F3D', // 浅色/Grey/14\n      borderWidth: 0,\n      textStyle: {\n        color: isDark.value ? '#000000' : '#FFFFFF', // 浅色/Grey/White\n        fontSize: 12,\n        lineHeight: 16,\n        fontWeight: 400,\n      },\n    },\n    legend: {\n      // top: '3%',\n      data: [callName, putName],\n      textStyle: {\n        color: isDark.value ? '#ADB5BD' : '#596169', // 浅色/Grey/10 // 设置图例文字颜色\n      },\n      selected: {\n        [callName]: state.seriesSelected.call,\n        [putName]: state.seriesSelected.put,\n      },\n    },\n    xAxis: {\n      type: 'category',\n      data: date,\n      axisLabel: {\n        // 坐标轴刻度标签\n        color: isDark.value ? '#CED4DA' : '#343A40', // 浅色/Grey/12\n        fontWeight: 400,\n        fontSize: 10,\n        rotate: state.dataType === 'strike' ? 90 : 45, // 倾斜度 -90 至 90 默认为0\n      },\n      axisTick: {\n        show: false, // 隐藏刻度线\n      },\n      axisLine: {\n        show: false, // 隐藏坐标轴轴线\n        lineStyle: {\n          color: isDark.value ? '#CED4DA' : '#343A40', // 线的颜色 浅色/Grey/12\n        },\n      },\n    },\n    yAxis: [\n      {\n        type: 'value',\n        name: `Open Interest(${currency.value})`,\n        nameLocation: 'end',\n        nameGap: -85,\n        nameRotate: 90,\n        nameTextStyle: {\n          color: isDark.value ? '#8B959F' : '#8B959F', // 浅色/Grey/8\n          fontWeight: 400,\n          fontSize: 10,\n          padding: isMobile.value ? [0, 0, 0, 15] : [0, 0, 0, 3],\n        },\n        axisLabel: {\n          // 坐标轴刻度标签\n          show: true,\n          color: isDark.value ? '#CED4DA' : '#343A40', // 浅色/Grey/12\n          fontWeight: 400,\n          fontSize: 10,\n          formatter: (v: number, digits: number) => {\n            if (isMobile.value) {\n              return formatLargeNumber(v, 0);\n            }\n            return thousandthFormat(v, 0);\n          },\n        },\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: 'dashed', // 网格线类型: 'solid', 'dashed', 'dotted'\n          },\n        },\n      },\n    ],\n    grid: {\n      top: 50,\n      left: 10,\n      right: 10,\n      bottom: 0,\n      containLabel: true,\n    },\n    series,\n  };\n  return option;\n};\n\nconst handleLegendSelectedChange = (params: any) => {\n  // 不依赖具体的 key 值，而是根据 selected 的顺序\n  const selectedValues = Object.values(params.selected);\n\n  if (selectedValues.length >= 2) {\n    state.seriesSelected.call = selectedValues[0] as boolean;\n    state.seriesSelected.put = selectedValues[1] as boolean;\n  }\n};\n\nconst chartOption = computed(() => {\n  return getEchartOption(getEchartData());\n});\n</script>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkFA,IAAA,MAAA,EAAA,GAAA,YAAA,CAAA,4BAAA,CAAA,CAAA;AACA,IAAA,MAAA,EAAA,CAAA,EAAA,GAAA,SAAA,EAAA,CAAA;AACA,IAAA,MAAA,EAAA,QAAA,EAAA,GAAA,aAAA,EAAA,CAAA;AACA,IAAA,MAAA,EAAA,MAAA,EAAA,GAAA,QAAA,EAAA,CAAA;AAEA,IAAA,MAAA,YAAA,GAAA;AAAA,MAAA,EAAA,KAAA,EAAA,QAAA,EAAA,KAAA,EAAA,QAAA,EAAA;AACA,MAAA,EAAA,KAAA,EAAA,QAAA,EAAA,KAAA,EAAA,QAAA,EAAA;AACA,KAAA,CAAA;AAGA,IAAA,MAAA,KAAA,GAAA,QAAA,CAAA;AAAA,MAAA,WAAA,EAAA,KAAA;AACA,MAAA,QAAA,EAAA,KAAA,CAAA,QAAA,IAAA,KAAA,CAAA,eAAA,IAAA,SAAA;AAEA,MAAA,QAAA,EAAA,KAAA,CAAA,QAAA,IAAA,KAAA,CAAA,eAAA,IAAA,KAAA;AACA,MAAA,QAAA,EAAA,QAAA;AAEA,MAAA,GAAA,EAAA,CAAA;AACA,MAAA,QAAA,EAAA,EAAA;AAEA,MAAA,SAAA,EAAA,EAAA;AACA,MAAA,cAAA,EAAA;AAEA,QAAA,IAAA,EAAA,IAAA;AACA,QAAA,GAAA,EAAA,IAAA;AACA,OAAA;AACA,MAAA,SAAA,EAAA,EAAA;AAEA,KAAA,CAAA,CAAA;AAGA,IAAA,MAAA,QAAA,GAAA,QAAA,CAAA;AAAA,MAAA,GAAA,EAAA,MAAA,KAAA,CAAA,QAAA,IAAA,KAAA,CAAA,QAAA,IAAA,KAAA;AACA,MAAA,GAAA,EAAA,CAAA,MAAA,KAAA;AAEA,QAAA,KAAA,CAAA,QAAA,GAAA,IAAA,CAAA,iBAAA,EAAA,MAAA,CAAA,GAAA,KAAA,CAAA,QAAA,GAAA,MAAA,CAAA;AAEA,OAAA;AACA,KAAA,CAAA,CAAA;AAGA,IAAA,MAAA,QAAA,GAAA,QAAA,CAAA;AAAA,MAAA,GAAA,EAAA,MAAA,KAAA,CAAA,QAAA,IAAA,KAAA,CAAA,QAAA,IAAA,SAAA;AACA,MAAA,GAAA,EAAA,CAAA,MAAA,KAAA;AAEA,QAAA,KAAA,CAAA,QAAA,GAAA,IAAA,CAAA,iBAAA,EAAA,MAAA,CAAA,GAAA,KAAA,CAAA,QAAA,GAAA,MAAA,CAAA;AAEA,OAAA;AACA,KAAA,CAAA,CAAA;AAGA,IAAA,KAAA,CAAA,QAAA,EAAA,MAAA;AACA,MAAA,SAAA,EAAA,CAAA;AAAA,KAAA,CAAA,CAAA;AAGA,IAAA,KAAA,CAAA,QAAA,EAAA,MAAA;AACA,MAAA,SAAA,EAAA,CAAA;AAAA,KAAA,CAAA,CAAA;AAGA,IAAA,MAAA,SAAA,GAAA,MAAA;AACA,MAAA,KAAA,CAAA,WAAA,GAAA,IAAA,CAAA;AACA,MAAA,yBAAA,CAAA;AAAA,QAAA,QAAA,EAAA,QAAA,CAAA,KAAA;AACA,QAAA,QAAA,EAAA,QAAA,CAAA,KAAA;AACA,OAAA,CAAA,CAAA,IAAA,CAAA,CAAA,GAAA,KAAA;AAGA,QAAA,IAAA,GAAA,IAAA,GAAA,CAAA,IAAA,KAAA,GAAA,EAAA;AACA,UAAA,KAAA,CAAA,SAAA,GAAA,GAAA,CAAA,IAAA,CAAA;AAAA,SAAA;AACA,OAAA,CAAA,CAAA,OAAA,CAAA,MAAA;AAGA,QAAA,KAAA,CAAA,WAAA,GAAA,KAAA,CAAA;AAAA,OAAA,CAAA,CAAA;AACA,KAAA,CAAA;AAGA,IAAA,SAAA,CAAA,MAAA;AACA,MAAA,SAAA,EAAA,CAAA;AAAA,KAAA,CAAA,CAAA;AAGA,IAAA,MAAA,aAAA,GAAA,MAAA;AACA,MAAA,IAAA,IAAA,GAAA,EAAA,CAAA;AACA,MAAA,IAAA,gBAAA,GAAA,EAAA,CAAA;AACA,MAAA,IAAA,qBAAA,GAAA,CAAA,CAAA;AACA,MAAA,IAAA,eAAA,GAAA,EAAA,CAAA;AACA,MAAA,IAAA,oBAAA,GAAA,CAAA,CAAA;AACA,MAAA,IAAA,kBAAA,GAAA,EAAA,CAAA;AACA,MAAA,IAAA,WAAA,GAAA,CAAA,CAAA;AACA,MAAA,IAAA,gBAAA,GAAA,EAAA,CAAA;AAEA,MAAA,IAAA,KAAA,CAAA,QAAA,KAAA,QAAA,EAAA;AACA,QAAA,MAAA,IAAA,GAAA,KAAA,CAAA,SAAA,CAAA,SAAA,IAAA,EAAA,CAAA;AACA,QAAA,IAAA,CAAA,OAAA,CAAA,CAAA,IAAA,KAAA;AACA,UAAA,IAAA,CAAA,IAAA,CAAA,CAAA,CAAA,EAAA,YAAA,CAAA,IAAA,CAAA,MAAA,EAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA;AAEA,UAAA,IAAA,UAAA,GAAA,IAAA,CAAA,kBAAA,CAAA;AACA,UAAA,IAAA,SAAA,GAAA,IAAA,CAAA,iBAAA,CAAA;AACA,UAAA,gBAAA,CAAA,IAAA,CAAA,UAAA,CAAA,CAAA;AACA,UAAA,qBAAA,IAAA,UAAA,CAAA;AACA,UAAA,eAAA,CAAA,IAAA,CAAA,SAAA,CAAA,CAAA;AACA,UAAA,oBAAA,IAAA,SAAA,CAAA;AAAA,SAAA,CAAA,CAAA;AACA,OAAA,MAAA;AAEA,QAAA,MAAA,IAAA,GAAA,KAAA,CAAA,SAAA,CAAA,SAAA,IAAA,EAAA,CAAA;AACA,QAAA,IAAA,CAAA,OAAA,CAAA,CAAA,IAAA,KAAA;AACA,UAAA,IAAA,CAAA,IAAA,CAAA,uBAAA,CAAA,IAAA,CAAA,MAAA,CAAA,CAAA,CAAA;AAEA,UAAA,IAAA,UAAA,GAAA,IAAA,CAAA,kBAAA,CAAA;AACA,UAAA,IAAA,SAAA,GAAA,IAAA,CAAA,iBAAA,CAAA;AACA,UAAA,gBAAA,CAAA,IAAA,CAAA,UAAA,CAAA,CAAA;AACA,UAAA,qBAAA,IAAA,UAAA,CAAA;AACA,UAAA,eAAA,CAAA,IAAA,CAAA,SAAA,CAAA,CAAA;AACA,UAAA,oBAAA,IAAA,SAAA,CAAA;AAEA,UAAA,IAAA,SAAA,GAAA,UAAA,GAAA,SAAA,CAAA;AACA,UAAA,kBAAA,CAAA,IAAA,CAAA,SAAA,CAAA,CAAA;AACA,UAAA,WAAA,IAAA,SAAA,CAAA;AAAA,SAAA,CAAA,CAAA;AAGA,QAAA,gBAAA,GAAA,kBAAA,CAAA,GAAA,CAAA,CAAA,IAAA,KAAA;AACA,UAAA,OAAA,IAAA,GAAA,WAAA,GAAA,GAAA,CAAA;AAAA,SAAA,CAAA,CAAA;AACA,OAAA;AAGA,MAAA,KAAA,CAAA,GAAA,GAAA,oBAAA,GAAA,qBAAA,CAAA;AAEA,MAAA,OAAA;AAAA,QAAA,IAAA;AACA,QAAA,qBAAA;AACA,QAAA,gBAAA;AACA,QAAA,oBAAA;AACA,QAAA,eAAA;AACA,QAAA,gBAAA;AACA,OAAA,CAAA;AACA,KAAA,CAAA;AAGA,IAAA,MAAA,eAAA,GAAA,CAAA,MAAA,KAAA;AACA,MAAA,IAAA,CAAA,MAAA;AAAA,QAAA,OAAA,EAAA,CAAA;AACA,MAAA,MAAA;AAAA,QAAA,IAAA;AACA,QAAA,qBAAA;AACA,QAAA,gBAAA;AACA,QAAA,oBAAA;AACA,QAAA,eAAA;AACA,QAAA,gBAAA;AACA,OAAA,GAAA,MAAA,CAAA;AAEA,MAAA,MAAA,QAAA,GAAA,CAAA,OAAA,EAAA,gBAAA,CAAA,qBAAA,CAAA,CAAA,CAAA,CAAA,CAAA;AACA,MAAA,MAAA,OAAA,GAAA,CAAA,MAAA,EAAA,gBAAA,CAAA,oBAAA,CAAA,CAAA,CAAA,CAAA,CAAA;AAEA,MAAA,MAAA,MAAA,GAAA;AAAA,QAAA;AACA,UAAA,IAAA,EAAA,QAAA;AACA,UAAA,IAAA,EAAA,KAAA;AACA,UAAA,KAAA,EAAA,kCAAA;AAEA,UAAA,KAAA,EAAA,MAAA,CAAA,KAAA,GAAA,SAAA,GAAA,SAAA;AACA,UAAA,QAAA,EAAA;AACA,YAAA,KAAA,EAAA,QAAA;AACA,WAAA;AACA,UAAA,IAAA,EAAA,gBAAA;AACA,UAAA,SAAA,EAAA;AACA,YAAA,YAAA,EAAA,CAAA;AACA,YAAA,OAAA,EAAA,CAAA;AACA,WAAA;AACA,UAAA,IAAA,EAAA;AACA,YAAA,SAAA,EAAA;AACA,cAAA,OAAA,EAAA,CAAA;AACA,aAAA;AACA,WAAA;AACA,SAAA;AACA,QAAA;AACA,UAAA,IAAA,EAAA,OAAA;AACA,UAAA,IAAA,EAAA,KAAA;AACA,UAAA,KAAA,EAAA,kCAAA;AAEA,UAAA,KAAA,EAAA,MAAA,CAAA,KAAA,GAAA,SAAA,GAAA,SAAA;AACA,UAAA,QAAA,EAAA;AACA,YAAA,KAAA,EAAA,QAAA;AACA,WAAA;AACA,UAAA,IAAA,EAAA,eAAA;AACA,UAAA,SAAA,EAAA;AACA,YAAA,YAAA,EAAA,CAAA;AACA,YAAA,OAAA,EAAA,CAAA;AACA,WAAA;AACA,UAAA,IAAA,EAAA;AACA,YAAA,SAAA,EAAA;AACA,cAAA,OAAA,EAAA,CAAA;AACA,aAAA;AACA,WAAA;AACA,SAAA;AACA,OAAA,CAAA;AAEA,MAAA,IAAA,KAAA,CAAA,cAAA,CAAA,IAAA,IAAA,KAAA,CAAA,cAAA,CAAA,GAAA,EAAA;AACA,QAAA,MAAA,CAAA,IAAA,CAAA;AAAA,UAAA,IAAA,EAAA,MAAA;AACA,UAAA,IAAA,EAAA,SAAA;AACA,UAAA,UAAA,EAAA,CAAA;AACA,UAAA,UAAA,EAAA,CAAA;AACA,UAAA,MAAA,EAAA,IAAA;AACA,UAAA,UAAA,EAAA,KAAA;AACA,UAAA,gBAAA,EAAA,KAAA;AACA,UAAA,IAAA,EAAA,gBAAA,CAAA,GAAA;AACA,YAAA,CAAA,IAAA,EAAA,KAAA,KAAA,IAAA,GAAA,eAAA,CAAA,KAAA,CAAA;AACA,WAAA;AACA,UAAA,KAAA,EAAA;AACA,YAAA,IAAA,EAAA,KAAA,CAAA,QAAA,KAAA,QAAA,GAAA,KAAA,GAAA,IAAA;AACA,YAAA,QAAA,EAAA,KAAA;AACA,YAAA,SAAA,EAAA,CAAA,OAAA,KAAA;AAEA,cAAA,OAAA,YAAA,CAAA,gBAAA,CAAA,OAAA,CAAA,SAAA,CAAA,EAAA,CAAA,CAAA,GAAA,GAAA,CAAA;AAAA,aAAA;AACA,YAAA,SAAA,EAAA;AACA,cAAA,KAAA,EAAA,MAAA,CAAA,KAAA,GAAA,SAAA,GAAA,SAAA;AACA,cAAA,QAAA,EAAA,QAAA,CAAA,KAAA,GAAA,CAAA,GAAA,EAAA;AACA,cAAA,UAAA,EAAA,GAAA;AACA,aAAA;AACA,WAAA;AACA,UAAA,QAAA,EAAA;AACA,YAAA,QAAA,EAAA,IAAA;AACA,WAAA;AACA,SAAA,CAAA,CAAA;AACA,OAAA;AAGA,MAAA,MAAA,MAAA,GAAA;AAAA,QAAA,OAAA,EAAA;AACA,UAAA,OAAA,EAAA,MAAA;AACA,UAAA,WAAA,EAAA;AACA,YAAA,IAAA,EAAA,QAAA;AAEA,YAAA,eAAA,EAAA,MAAA,CAAA,KAAA,GAAA,SAAA,GAAA,SAAA;AACA,YAAA,SAAA,EAAA;AACA,cAAA,KAAA,EAAA,MAAA,CAAA,KAAA,GAAA,SAAA,GAAA,SAAA;AACA,cAAA,QAAA,EAAA,EAAA;AACA,cAAA,UAAA,EAAA,EAAA;AACA,cAAA,UAAA,EAAA,GAAA;AACA,aAAA;AACA,WAAA;AACA,UAAA,SAAA,EAAA,SAAA,OAAA,EAAA;;AAYA,YAAA,MAAA,cAAA,GAAA,OAAA,CAAA,MAAA;AAAA,cAAA,CAAA,IAAA,KAAA,IAAA,CAAA,UAAA,KAAA,MAAA;AACA,aAAA,CAAA;AAEA,YAAA,IAAA,cAAA,CAAA,MAAA,KAAA,CAAA,EAAA;AACA,cAAA,OAAA,EAAA,CAAA;AAAA,aAAA;AAEA,YAAA,IAAA,WAAA,GAAA,EAAA,CAAA;AACA,YAAA,IAAA,WAAA,GAAA,EAAA,CAAA;AACA,YAAA,IAAA,IAAA,GAAA,CAAA;AAAA,gGAAA,EAAA,cAAA,CAAA,CAAA,CAAA,CAAA,SAAA,CAAA;AACA,QAAA,CAAA,CAAA;AAEA,YAAA,IAAA,cAAA,CAAA,CAAA,CAAA,EAAA;AACA,cAAA,WAAA,GAAA,cAAA,CAAA,CAAA,CAAA,CAAA,UAAA,CAAA,KAAA,CAAA,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA;AACA,cAAA,IAAA,IAAA,CAAA;AAAA,4HAAA,EAAA,cAAA,CAAA,CAAA,CAAA,CAAA,MAAA,CAAA,CAAA,EAAA,WAAA,CAAA,WAAA,EAAA,gBAAA;AAGA,gBAAA,cAAA,CAAA,CAAA,CAAA,CAAA,IAAA;AACA,gBAAA,CAAA;AACA,eAAA,CAAA;AACA,UAAA,CAAA,CAAA;AAAA,aAAA;AAGA,YAAA,IAAA,cAAA,CAAA,CAAA,CAAA,EAAA;AACA,cAAA,WAAA,GAAA,cAAA,CAAA,CAAA,CAAA,CAAA,UAAA,CAAA,KAAA,CAAA,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA;AACA,cAAA,IAAA,IAAA,CAAA;AAAA,4HAAA,EAAA,cAAA,CAAA,CAAA,CAAA,CAAA,MAAA,CAAA,CAAA,EAAA,WAAA,CAAA,WAAA,EAAA,gBAAA;AAGA,gBAAA,cAAA,CAAA,CAAA,CAAA,CAAA,IAAA;AACA,gBAAA,CAAA;AACA,eAAA,CAAA;AACA,UAAA,CAAA,CAAA;AAAA,aAAA;AAIA,YAAA,IAAA,CAAA,CAAA,EAAA,GAAA,cAAA,CAAA,CAAA,CAAA,KAAA,IAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,IAAA,MAAA,CAAA,EAAA,GAAA,cAAA,CAAA,CAAA,CAAA,KAAA,IAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,IAAA,CAAA,EAAA;AACA,cAAA,IAAA,IAAA,CAAA;AAAA,4JAAA,EAAA,YAAA;AACA,gBAAA,cAAA,CAAA,CAAA,CAAA,CAAA,IAAA,GAAA,cAAA,CAAA,CAAA,CAAA,CAAA,IAAA;AACA,gBAAA,CAAA;AACA,eAAA,CAAA;AACA,UAAA,CAAA,CAAA;AAAA,aAAA;AAGA,YAAA,OAAA,IAAA,CAAA;AAAA,WAAA;AACA,UAAA,eAAA,EAAA,MAAA,CAAA,KAAA,GAAA,SAAA,GAAA,SAAA;AACA,UAAA,WAAA,EAAA,CAAA;AACA,UAAA,SAAA,EAAA;AACA,YAAA,KAAA,EAAA,MAAA,CAAA,KAAA,GAAA,SAAA,GAAA,SAAA;AACA,YAAA,QAAA,EAAA,EAAA;AACA,YAAA,UAAA,EAAA,EAAA;AACA,YAAA,UAAA,EAAA,GAAA;AACA,WAAA;AACA,SAAA;AACA,QAAA,MAAA,EAAA;AACA,UAAA,IAAA,EAAA,CAAA,QAAA,EAAA,OAAA,CAAA;AAEA,UAAA,SAAA,EAAA;AACA,YAAA,KAAA,EAAA,MAAA,CAAA,KAAA,GAAA,SAAA,GAAA,SAAA;AACA,WAAA;AACA,UAAA,QAAA,EAAA;AACA,YAAA,CAAA,QAAA,GAAA,KAAA,CAAA,cAAA,CAAA,IAAA;AACA,YAAA,CAAA,OAAA,GAAA,KAAA,CAAA,cAAA,CAAA,GAAA;AACA,WAAA;AACA,SAAA;AACA,QAAA,KAAA,EAAA;AACA,UAAA,IAAA,EAAA,UAAA;AACA,UAAA,IAAA,EAAA,IAAA;AACA,UAAA,SAAA,EAAA;AACA,YAAA,KAAA,EAAA,MAAA,CAAA,KAAA,GAAA,SAAA,GAAA,SAAA;AAEA,YAAA,UAAA,EAAA,GAAA;AACA,YAAA,QAAA,EAAA,EAAA;AACA,YAAA,MAAA,EAAA,KAAA,CAAA,QAAA,KAAA,QAAA,GAAA,EAAA,GAAA,EAAA;AACA,WAAA;AACA,UAAA,QAAA,EAAA;AACA,YAAA,IAAA,EAAA,KAAA;AACA,WAAA;AACA,UAAA,QAAA,EAAA;AACA,YAAA,IAAA,EAAA,KAAA;AACA,YAAA,SAAA,EAAA;AACA,cAAA,KAAA,EAAA,MAAA,CAAA,KAAA,GAAA,SAAA,GAAA,SAAA;AACA,aAAA;AACA,WAAA;AACA,SAAA;AACA,QAAA,KAAA,EAAA;AACA,UAAA;AACA,YAAA,IAAA,EAAA,OAAA;AACA,YAAA,IAAA,EAAA,CAAA,cAAA,EAAA,QAAA,CAAA,KAAA,CAAA,CAAA,CAAA;AACA,YAAA,YAAA,EAAA,KAAA;AACA,YAAA,OAAA,EAAA,CAAA,EAAA;AACA,YAAA,UAAA,EAAA,EAAA;AACA,YAAA,aAAA,EAAA;AACA,cAAA,KAAA,EAAA,MAAA,CAAA,KAAA,GAAA,SAAA,GAAA,SAAA;AACA,cAAA,UAAA,EAAA,GAAA;AACA,cAAA,QAAA,EAAA,EAAA;AACA,cAAA,OAAA,EAAA,QAAA,CAAA,KAAA,GAAA,CAAA,CAAA,EAAA,CAAA,EAAA,CAAA,EAAA,EAAA,CAAA,GAAA,CAAA,CAAA,EAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA;AACA,aAAA;AACA,YAAA,SAAA,EAAA;AACA,cAAA,IAAA,EAAA,IAAA;AAEA,cAAA,KAAA,EAAA,MAAA,CAAA,KAAA,GAAA,SAAA,GAAA,SAAA;AACA,cAAA,UAAA,EAAA,GAAA;AACA,cAAA,QAAA,EAAA,EAAA;AACA,cAAA,SAAA,EAAA,CAAA,CAAA,EAAA,MAAA,KAAA;AAEA,gBAAA,IAAA,QAAA,CAAA,KAAA,EAAA;AACA,kBAAA,OAAA,iBAAA,CAAA,CAAA,EAAA,CAAA,CAAA,CAAA;AAAA,iBAAA;AAEA,gBAAA,OAAA,gBAAA,CAAA,CAAA,EAAA,CAAA,CAAA,CAAA;AAAA,eAAA;AACA,aAAA;AACA,YAAA,QAAA,EAAA;AACA,cAAA,SAAA,EAAA;AACA,gBAAA,KAAA,EAAA,MAAA,CAAA,KAAA,GAAA,SAAA,GAAA,SAAA;AACA,eAAA;AACA,aAAA;AACA,YAAA,SAAA,EAAA;AACA,cAAA,SAAA,EAAA;AACA,gBAAA,KAAA,EAAA,MAAA,CAAA,KAAA,GAAA,SAAA,GAAA,SAAA;AACA,gBAAA,KAAA,EAAA,CAAA;AACA,gBAAA,IAAA,EAAA,QAAA;AACA,eAAA;AACA,aAAA;AACA,WAAA;AACA,SAAA;AACA,QAAA,IAAA,EAAA;AACA,UAAA,GAAA,EAAA,EAAA;AACA,UAAA,IAAA,EAAA,EAAA;AACA,UAAA,KAAA,EAAA,EAAA;AACA,UAAA,MAAA,EAAA,CAAA;AACA,UAAA,YAAA,EAAA,IAAA;AACA,SAAA;AACA,QAAA,MAAA;AACA,OAAA,CAAA;AAEA,MAAA,OAAA,MAAA,CAAA;AAAA,KAAA,CAAA;AAGA,IAAA,MAAA,0BAAA,GAAA,CAAA,MAAA,KAAA;AAEA,MAAA,MAAA,cAAA,GAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,QAAA,CAAA,CAAA;AAEA,MAAA,IAAA,cAAA,CAAA,MAAA,IAAA,CAAA,EAAA;AACA,QAAA,KAAA,CAAA,cAAA,CAAA,IAAA,GAAA,cAAA,CAAA,CAAA,CAAA,CAAA;AACA,QAAA,KAAA,CAAA,cAAA,CAAA,GAAA,GAAA,cAAA,CAAA,CAAA,CAAA,CAAA;AAAA,OAAA;AACA,KAAA,CAAA;AAGA,IAAA,MAAA,WAAA,GAAA,QAAA,CAAA,MAAA;AACA,MAAA,OAAA,eAAA,CAAA,aAAA,EAAA,CAAA,CAAA;AAAA,KAAA,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/es/packages/components/panel-option-trade-volume/index.mjs

@@ -1,6 +1,6 @@
 import '../../utils/index.mjs';
-import PanelOptionTradeVolume from './src/panel-option-trade-volume2.mjs';
-export { panelOptionTradeVolumeEmits, panelOptionTradeVolumeProps } from './src/panel-option-trade-volume.mjs';
+import PanelOptionTradeVolume from './src/panel-option-trade-volume.mjs';
+export { panelOptionTradeVolumeEmits, panelOptionTradeVolumeProps } from './src/panel-option-trade-volume2.mjs';
 import { withInstall } from '../../utils/vue/install.mjs';
 
 const GPanelOptionTradeVolume = withInstall(PanelOptionTradeVolume);