greeks-live-ui 0.0.21 → 0.0.22

package/lib/packages/components/panel-implied-volatility-surface/src/panel-implied-volatility-surface.js

@@ -2,32 +2,288 @@
 
 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 chartHelp = require('../../../utils/chartHelp.js');
+var dataLab = require('../../../utils/dataLab.js');
+var panelImpliedVolatilitySurface = require('./panel-implied-volatility-surface2.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');
 
-const panelImpliedVolatilitySurfaceEmits = {
-  "update:currency": (currency) => true,
-  "update:exchange": (exchange) => true
+const _hoisted_1 = ["innerHTML"];
+const _hoisted_2 = { class: "period-range h5-hide" };
+const _hoisted_3 = {
+  class: "echart",
+  ref: "echart"
 };
-const panelImpliedVolatilitySurfaceProps = runtime.buildProps({
-  defaultCurrency: {
-    type: String,
-    required: false
-  },
-  defaultExchange: {
-    type: String,
-    required: false
-  },
-  currency: {
-    type: String,
-    required: false
-  },
-  exchange: {
-    type: String,
-    required: false
+const __default__ = {
+  name: "GPanelImpliedVolatilitySurface"
+};
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  ...__default__,
+  props: panelImpliedVolatilitySurface.panelImpliedVolatilitySurfaceProps,
+  emits: panelImpliedVolatilitySurface.panelImpliedVolatilitySurfaceEmits,
+  setup(__props, { emit }) {
+    const props = __props;
+    const ns = index.useNamespace("panel-implied-volatility-surface");
+    const { t } = index$1.useLocale();
+    const state = vue.reactive({
+      loadingFlag: false,
+      exchange: props.exchange || props.defaultExchange || "Deribit",
+      currency: props.currency || props.defaultCurrency || "BTC",
+      pageCount: 0,
+      periodDateRange: "",
+      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;
+      }
+    });
+    vue.watch(currency, () => {
+      fetchData();
+    });
+    vue.watch(exchange, () => {
+      fetchData();
+    });
+    const fetchData = () => {
+      state.loadingFlag = true;
+      dataLab.getAtmData({ currency: currency.value, page_num: state.pageCount }).then((res) => {
+        if (res && res.code === 200) {
+          state.chartData = res.data || [];
+        }
+      }).finally(() => {
+        state.loadingFlag = false;
+      });
+    };
+    vue.onMounted(() => {
+      fetchData();
+      getDateTimeRange();
+    });
+    const getDateTimeRange = () => {
+      const curTimestamp = (/* @__PURE__ */ new Date()).getTime();
+      const day = 24 * 36e5;
+      const startTimestamp = curTimestamp - day * (state.pageCount + 1);
+      const endTimestamp = curTimestamp - day * state.pageCount;
+      state.periodDateRange = `${chartHelp.getCurrentDateTimezone()} ${chartHelp.timestampFormat(
+        startTimestamp,
+        "{y}/{m}/{d} {h}:00"
+      )} - ${chartHelp.timestampFormat(endTimestamp, "{y}/{m}/{d} {h}:00")}`;
+    };
+    const handlePageChange = (direction) => {
+      if (direction === "prev") {
+        state.pageCount++;
+      } else {
+        if (state.pageCount <= 0) {
+          return;
+        }
+        state.pageCount--;
+      }
+      fetchData();
+      getDateTimeRange();
+    };
+    const getEchartData = () => {
+      const data = [...state.chartData];
+      return {
+        data
+      };
+    };
+    const theme = "light";
+    const getEchartOption = (params) => {
+      const { data } = params;
+      let commonStyle = {
+        axisLabel: {
+          textStyle: {
+            color: theme === "light" ? "#606266" : "#9F9D99"
+          }
+        },
+        axisLine: {
+          lineStyle: {
+            color: theme === "light" ? "#606266" : "#9F9D99"
+          }
+        },
+        splitLine: {
+          lineStyle: {
+            color: theme === "light" ? "#C0C4CC" : "#6F6F6F"
+          }
+        }
+      };
+      const option = {
+        tooltip: {},
+        visualMap: {
+          show: false,
+          dimension: 2,
+          min: 50,
+          max: 150,
+          inRange: {
+            color: [
+              "#313695",
+              "#4575b4",
+              "#74add1",
+              "#abd9e9",
+              "#e0f3f8",
+              "#ffffbf",
+              "#fee090",
+              "#fdae61",
+              "#f46d43",
+              "#d73027",
+              "#a50026"
+            ]
+          }
+        },
+        xAxis3D: {
+          name: "Days",
+          type: "value",
+          scale: true,
+          ...commonStyle
+        },
+        yAxis3D: {
+          name: "Strike Price",
+          type: "value",
+          scale: true,
+          ...commonStyle
+        },
+        zAxis3D: {
+          name: "IV",
+          type: "value",
+          scale: true,
+          ...commonStyle
+        },
+        grid3D: {
+          viewControl: {}
+        },
+        series: [
+          {
+            type: "surface",
+            parametric: true,
+            wireframe: {},
+            parametricEquation: {
+              u: {
+                min: 0,
+                max: data.length - 1,
+                step: 1
+              },
+              v: {
+                min: -10,
+                max: 10,
+                step: 1
+              },
+              x: (u) => {
+                let item = data[u];
+                return item.day;
+              },
+              y: (u, v) => {
+                let item = data[u];
+                let list = item.list;
+                let index = item.atm_index + v;
+                if (index < 0) {
+                  index = 0;
+                } else if (index >= list.length) {
+                  index = list.length - 1;
+                }
+                return list[index].strike;
+              },
+              z: (u, v) => {
+                let item = data[u];
+                let list = item.list;
+                let index = item.atm_index + v;
+                if (index < 0) {
+                  index = 0;
+                } else if (index >= list.length) {
+                  index = list.length - 1;
+                }
+                return list[index].iv;
+              }
+            }
+          }
+        ]
+      };
+      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_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[0] || (_cache[0] = ($event) => vue.isRef(currency) ? currency.value = $event : null),
+            exchange: vue.unref(exchange),
+            "onUpdate:exchange": _cache[1] || (_cache[1] = ($event) => vue.isRef(exchange) ? exchange.value = $event : null),
+            loading: state.loadingFlag,
+            onRefresh: fetchData
+          }, {
+            title: vue.withCtx(() => [
+              vue.createVNode(_component_g_tooltip, { placement: "bottom" }, {
+                title: vue.withCtx(() => [
+                  vue.createElementVNode("div", {
+                    innerHTML: vue.unref(t)("message.impliedVolatilitySurfaceTips")
+                  }, null, 8, _hoisted_1)
+                ]),
+                default: vue.withCtx(() => [
+                  vue.createTextVNode(
+                    vue.toDisplayString(vue.unref(t)("message.ivSurface")) + " ",
+                    1
+                  ),
+                  vue.createVNode(_component_g_icon, { type: "info_question_circle" })
+                ]),
+                _: 1
+              })
+            ]),
+            tool: vue.withCtx(() => [
+              vue.createCommentVNode(' <span class="filter-box h5-hide">\n          <g-icon type="chart_filter" :size="15" />\n        </span> '),
+              vue.createElementVNode(
+                "span",
+                _hoisted_2,
+                vue.toDisplayString(state.periodDateRange),
+                1
+              ),
+              vue.createVNode(_component_g_page_turner, {
+                prevDisabled: state.loadingFlag,
+                nextDisabled: state.loadingFlag || state.pageCount <= 0,
+                onChange: handlePageChange
+              }, null, 8, ["prevDisabled", "nextDisabled"])
+            ]),
+            body: vue.withCtx(() => [
+              vue.createElementVNode(
+                "div",
+                _hoisted_3,
+                [
+                  vue.createVNode(_component_g_chart, {
+                    class: "skew-chart",
+                    option: vue.unref(chartOption)
+                  }, null, 8, ["option"])
+                ],
+                512
+              )
+            ]),
+            _: 1
+          }, 8, ["currency", "exchange", "loading"])
+        ],
+        2
+      );
+    };
   }
 });
+var PanelImpliedVolatilitySurface = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["__file", "/Users/luobowen/Desktop/greeks/greeks-live-ui/packages/components/panel-implied-volatility-surface/src/panel-implied-volatility-surface.vue"]]);
 
-exports.panelImpliedVolatilitySurfaceEmits = panelImpliedVolatilitySurfaceEmits;
-exports.panelImpliedVolatilitySurfaceProps = panelImpliedVolatilitySurfaceProps;
+exports["default"] = PanelImpliedVolatilitySurface;
 //# sourceMappingURL=panel-implied-volatility-surface.js.map

package/lib/packages/components/panel-implied-volatility-surface/src/panel-implied-volatility-surface.js.map

@@ -1 +1 @@
-{"version":3,"file":"panel-implied-volatility-surface.js","sources":["../../../../../../../packages/components/panel-implied-volatility-surface/src/panel-implied-volatility-surface.ts"],"sourcesContent":["import { buildProps } from '@greeks-live-ui/utils'\nimport type PanelImpliedVolatilitySurface from './panel-implied-volatility-surface.vue'\nimport type { ExtractPropTypes } from 'vue'\n\nexport const panelImpliedVolatilitySurfaceEmits = {\n  'update:currency': (currency: string) => true,\n  'update:exchange': (exchange: string) => true,\n}\nexport type PanelImpliedVolatilitySurfaceEmits = typeof panelImpliedVolatilitySurfaceEmits\nexport const panelImpliedVolatilitySurfaceProps = 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 PanelImpliedVolatilitySurfaceProps = ExtractPropTypes<typeof panelImpliedVolatilitySurfaceProps>\nexport type PanelImpliedVolatilitySurfaceInstance = InstanceType<typeof PanelImpliedVolatilitySurface>\n"],"names":["buildProps"],"mappings":";;;;;;;AAIO,MAAM,kCAAqC,GAAA;AAAA,EAChD,iBAAA,EAAmB,CAAC,QAAqB,KAAA,IAAA;AAAA,EACzC,iBAAA,EAAmB,CAAC,QAAqB,KAAA,IAAA;AAC3C,EAAA;AAEO,MAAM,qCAAqCA,kBAAW,CAAA;AAAA,EAC3D,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-implied-volatility-surface.js","sources":["../../../../../../../packages/components/panel-implied-volatility-surface/src/panel-implied-volatility-surface.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        <g-tooltip placement=\"bottom\">\n          {{ t('message.ivSurface') }}\n          <g-icon type=\"info_question_circle\" />\n          <template #title>\n            <div v-html=\"t('message.impliedVolatilitySurfaceTips')\"></div>\n          </template>\n        </g-tooltip>\n      </template>\n      <template #tool>\n        <!-- <span class=\"filter-box h5-hide\">\n          <g-icon type=\"chart_filter\" :size=\"15\" />\n        </span> -->\n        <span class=\"period-range h5-hide\">{{ state.periodDateRange }}</span>\n\n        <g-page-turner\n          :prevDisabled=\"state.loadingFlag\"\n          :nextDisabled=\"state.loadingFlag || state.pageCount <= 0\"\n          @change=\"handlePageChange\"\n        ></g-page-turner>\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 { useNamespace, useLocale } from '@greeks-live-ui/hooks';\nimport { reactive, onMounted, watch, computed } from 'vue';\n\nimport {\n  timestampFormat,\n  getCurrentDateTimezone,\n} from '@greeks-live-ui/utils/chartHelp';\nimport { getAtmData, IAtmDataRes } from '@greeks-live-ui/utils/dataLab';\nimport {\n  panelImpliedVolatilitySurfaceProps,\n  panelImpliedVolatilitySurfaceEmits,\n} from './panel-implied-volatility-surface';\n\ndefineOptions({\n  name: 'GPanelImpliedVolatilitySurface',\n});\nconst props = defineProps(panelImpliedVolatilitySurfaceProps);\nconst emit = defineEmits(panelImpliedVolatilitySurfaceEmits);\nconst ns = useNamespace('panel-implied-volatility-surface');\nconst { t } = useLocale();\n\nconst state = reactive({\n  loadingFlag: false,\n\n  exchange: props.exchange || props.defaultExchange || 'Deribit',\n  currency: props.currency || props.defaultCurrency || 'BTC',\n\n  pageCount: 0,\n  periodDateRange: '',\n\n  chartData: [] as IAtmDataRes[],\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});\nconst fetchData = () => {\n  state.loadingFlag = true;\n  getAtmData({ currency: currency.value, page_num: state.pageCount })\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  const curTimestamp = new Date().getTime();\n  const day = 24 * 3600000;\n  const startTimestamp = curTimestamp - day * (state.pageCount + 1);\n  const endTimestamp = curTimestamp - day * state.pageCount;\n  state.periodDateRange = `${getCurrentDateTimezone()} ${timestampFormat(\n    startTimestamp,\n    '{y}/{m}/{d} {h}:00'\n  )} - ${timestampFormat(endTimestamp, '{y}/{m}/{d} {h}:00')}`;\n};\n\nconst handlePageChange = (direction: 'prev' | 'next') => {\n  if (direction === 'prev') {\n    state.pageCount++;\n  } else {\n    if (state.pageCount <= 0) {\n      return;\n    }\n    state.pageCount--;\n  }\n  fetchData();\n  getDateTimeRange();\n};\n\nconst getEchartData = () => {\n  const data = [...state.chartData];\n  return {\n    data,\n  };\n};\nconst theme = 'light';\n\nconst getEchartOption = (params: ReturnType<typeof getEchartData>) => {\n  const { data } = params;\n\n  let commonStyle = {\n    axisLabel: {\n      textStyle: {\n        color: theme === 'light' ? '#606266' : '#9F9D99',\n      },\n    },\n    axisLine: {\n      lineStyle: {\n        color: theme === 'light' ? '#606266' : '#9F9D99',\n      },\n    },\n    splitLine: {\n      lineStyle: {\n        color: theme === 'light' ? '#C0C4CC' : '#6F6F6F',\n      },\n    },\n  };\n\n  const option = {\n    tooltip: {\n      // formatter: function (prams) {\n      //   console.log('prams====>', prams);\n      //   let days = `Days: ${prams.value[0]}<br/>`;\n      //   let strike = `Strike: ${numberFormat(\n      //     prams.value[1] / 1000.0,\n      //     1\n      //   )}k<br />`;\n      //   let iv = `IV：${numberFormat(prams.value[2], 2)}%`;\n      //   return days + strike + iv;\n      // },\n    },\n    visualMap: {\n      show: false,\n      dimension: 2,\n      min: 50,\n      max: 150,\n      inRange: {\n        color: [\n          '#313695',\n          '#4575b4',\n          '#74add1',\n          '#abd9e9',\n          '#e0f3f8',\n          '#ffffbf',\n          '#fee090',\n          '#fdae61',\n          '#f46d43',\n          '#d73027',\n          '#a50026',\n        ],\n      },\n    },\n    xAxis3D: {\n      name: 'Days',\n      type: 'value',\n      scale: true,\n      ...commonStyle,\n    },\n    yAxis3D: {\n      name: 'Strike Price',\n      type: 'value',\n      scale: true,\n      ...commonStyle,\n    },\n    zAxis3D: {\n      name: 'IV',\n      type: 'value',\n      scale: true,\n      ...commonStyle,\n    },\n    grid3D: {\n      viewControl: {\n        // projection: 'orthographic'\n      },\n    },\n    series: [\n      {\n        type: 'surface',\n        parametric: true,\n        wireframe: {\n          //  show: false\n        },\n        parametricEquation: {\n          u: {\n            min: 0,\n            max: data.length - 1,\n            step: 1,\n          },\n          v: {\n            min: -10,\n            max: 10,\n            step: 1,\n          },\n          x: (u: number) => {\n            let item = data[u];\n            return item.day;\n          },\n          y: (u: number, v: number) => {\n            let item = data[u];\n            let list = item.list;\n            let index = item.atm_index + v;\n            if (index < 0) {\n              index = 0;\n            } else if (index >= list.length) {\n              index = list.length - 1;\n            }\n            return list[index].strike;\n          },\n          z: (u: number, v: number) => {\n            let item = data[u];\n            let list = item.list;\n            let index = item.atm_index + v;\n            if (index < 0) {\n              index = 0;\n            } else if (index >= list.length) {\n              index = list.length - 1;\n            }\n\n            return list[index].iv;\n          },\n        },\n      },\n    ],\n  };\n  return option;\n};\n\nconst chartOption = computed(() => {\n  return getEchartOption(getEchartData());\n});\n</script>\n"],"names":["useNamespace","useLocale","reactive","computed","watch","getAtmData","onMounted","getCurrentDateTimezone","timestampFormat"],"mappings":"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"}

package/lib/packages/components/panel-implied-volatility-surface/src/panel-implied-volatility-surface2.js

@@ -2,288 +2,32 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var vue = require('vue');
-require('../../../hooks/index.js');
-var chartHelp = require('../../../utils/chartHelp.js');
-var dataLab = require('../../../utils/dataLab.js');
-var panelImpliedVolatilitySurface = require('./panel-implied-volatility-surface.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');
+require('../../../utils/index.js');
+var runtime = require('../../../utils/vue/props/runtime.js');
 
-const _hoisted_1 = ["innerHTML"];
-const _hoisted_2 = { class: "period-range h5-hide" };
-const _hoisted_3 = {
-  class: "echart",
-  ref: "echart"
+const panelImpliedVolatilitySurfaceEmits = {
+  "update:currency": (currency) => true,
+  "update:exchange": (exchange) => true
 };
-const __default__ = {
-  name: "GPanelImpliedVolatilitySurface"
-};
-const _sfc_main = /* @__PURE__ */ vue.defineComponent({
-  ...__default__,
-  props: panelImpliedVolatilitySurface.panelImpliedVolatilitySurfaceProps,
-  emits: panelImpliedVolatilitySurface.panelImpliedVolatilitySurfaceEmits,
-  setup(__props, { emit }) {
-    const props = __props;
-    const ns = index.useNamespace("panel-implied-volatility-surface");
-    const { t } = index$1.useLocale();
-    const state = vue.reactive({
-      loadingFlag: false,
-      exchange: props.exchange || props.defaultExchange || "Deribit",
-      currency: props.currency || props.defaultCurrency || "BTC",
-      pageCount: 0,
-      periodDateRange: "",
-      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;
-      }
-    });
-    vue.watch(currency, () => {
-      fetchData();
-    });
-    vue.watch(exchange, () => {
-      fetchData();
-    });
-    const fetchData = () => {
-      state.loadingFlag = true;
-      dataLab.getAtmData({ currency: currency.value, page_num: state.pageCount }).then((res) => {
-        if (res && res.code === 200) {
-          state.chartData = res.data || [];
-        }
-      }).finally(() => {
-        state.loadingFlag = false;
-      });
-    };
-    vue.onMounted(() => {
-      fetchData();
-      getDateTimeRange();
-    });
-    const getDateTimeRange = () => {
-      const curTimestamp = (/* @__PURE__ */ new Date()).getTime();
-      const day = 24 * 36e5;
-      const startTimestamp = curTimestamp - day * (state.pageCount + 1);
-      const endTimestamp = curTimestamp - day * state.pageCount;
-      state.periodDateRange = `${chartHelp.getCurrentDateTimezone()} ${chartHelp.timestampFormat(
-        startTimestamp,
-        "{y}/{m}/{d} {h}:00"
-      )} - ${chartHelp.timestampFormat(endTimestamp, "{y}/{m}/{d} {h}:00")}`;
-    };
-    const handlePageChange = (direction) => {
-      if (direction === "prev") {
-        state.pageCount++;
-      } else {
-        if (state.pageCount <= 0) {
-          return;
-        }
-        state.pageCount--;
-      }
-      fetchData();
-      getDateTimeRange();
-    };
-    const getEchartData = () => {
-      const data = [...state.chartData];
-      return {
-        data
-      };
-    };
-    const theme = "light";
-    const getEchartOption = (params) => {
-      const { data } = params;
-      let commonStyle = {
-        axisLabel: {
-          textStyle: {
-            color: theme === "light" ? "#606266" : "#9F9D99"
-          }
-        },
-        axisLine: {
-          lineStyle: {
-            color: theme === "light" ? "#606266" : "#9F9D99"
-          }
-        },
-        splitLine: {
-          lineStyle: {
-            color: theme === "light" ? "#C0C4CC" : "#6F6F6F"
-          }
-        }
-      };
-      const option = {
-        tooltip: {},
-        visualMap: {
-          show: false,
-          dimension: 2,
-          min: 50,
-          max: 150,
-          inRange: {
-            color: [
-              "#313695",
-              "#4575b4",
-              "#74add1",
-              "#abd9e9",
-              "#e0f3f8",
-              "#ffffbf",
-              "#fee090",
-              "#fdae61",
-              "#f46d43",
-              "#d73027",
-              "#a50026"
-            ]
-          }
-        },
-        xAxis3D: {
-          name: "Days",
-          type: "value",
-          scale: true,
-          ...commonStyle
-        },
-        yAxis3D: {
-          name: "Strike Price",
-          type: "value",
-          scale: true,
-          ...commonStyle
-        },
-        zAxis3D: {
-          name: "IV",
-          type: "value",
-          scale: true,
-          ...commonStyle
-        },
-        grid3D: {
-          viewControl: {}
-        },
-        series: [
-          {
-            type: "surface",
-            parametric: true,
-            wireframe: {},
-            parametricEquation: {
-              u: {
-                min: 0,
-                max: data.length - 1,
-                step: 1
-              },
-              v: {
-                min: -10,
-                max: 10,
-                step: 1
-              },
-              x: (u) => {
-                let item = data[u];
-                return item.day;
-              },
-              y: (u, v) => {
-                let item = data[u];
-                let list = item.list;
-                let index = item.atm_index + v;
-                if (index < 0) {
-                  index = 0;
-                } else if (index >= list.length) {
-                  index = list.length - 1;
-                }
-                return list[index].strike;
-              },
-              z: (u, v) => {
-                let item = data[u];
-                let list = item.list;
-                let index = item.atm_index + v;
-                if (index < 0) {
-                  index = 0;
-                } else if (index >= list.length) {
-                  index = list.length - 1;
-                }
-                return list[index].iv;
-              }
-            }
-          }
-        ]
-      };
-      return option;
-    };
-    const setOption = () => {
-      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_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[0] || (_cache[0] = ($event) => vue.isRef(currency) ? currency.value = $event : null),
-            exchange: vue.unref(exchange),
-            "onUpdate:exchange": _cache[1] || (_cache[1] = ($event) => vue.isRef(exchange) ? exchange.value = $event : null),
-            loading: state.loadingFlag,
-            onRefresh: fetchData
-          }, {
-            title: vue.withCtx(() => [
-              vue.createVNode(_component_g_tooltip, { placement: "bottom" }, {
-                title: vue.withCtx(() => [
-                  vue.createElementVNode("div", {
-                    innerHTML: vue.unref(t)("message.impliedVolatilitySurfaceTips")
-                  }, null, 8, _hoisted_1)
-                ]),
-                default: vue.withCtx(() => [
-                  vue.createTextVNode(
-                    vue.toDisplayString(vue.unref(t)("message.ivSurface")) + " ",
-                    1
-                  ),
-                  vue.createVNode(_component_g_icon, { type: "info_question_circle" })
-                ]),
-                _: 1
-              })
-            ]),
-            tool: vue.withCtx(() => [
-              vue.createCommentVNode(' <span class="filter-box h5-hide">\n          <g-icon type="chart_filter" :size="15" />\n        </span> '),
-              vue.createElementVNode(
-                "span",
-                _hoisted_2,
-                vue.toDisplayString(state.periodDateRange),
-                1
-              ),
-              vue.createVNode(_component_g_page_turner, {
-                prevDisabled: state.loadingFlag,
-                nextDisabled: state.loadingFlag || state.pageCount <= 0,
-                onChange: handlePageChange
-              }, null, 8, ["prevDisabled", "nextDisabled"])
-            ]),
-            body: vue.withCtx(() => [
-              vue.createElementVNode(
-                "div",
-                _hoisted_3,
-                [
-                  vue.createVNode(_component_g_chart, {
-                    class: "skew-chart",
-                    option: setOption()
-                  }, null, 8, ["option"])
-                ],
-                512
-              )
-            ]),
-            _: 1
-          }, 8, ["currency", "exchange", "loading"])
-        ],
-        2
-      );
-    };
+const panelImpliedVolatilitySurfaceProps = runtime.buildProps({
+  defaultCurrency: {
+    type: String,
+    required: false
+  },
+  defaultExchange: {
+    type: String,
+    required: false
+  },
+  currency: {
+    type: String,
+    required: false
+  },
+  exchange: {
+    type: String,
+    required: false
   }
 });
-var PanelImpliedVolatilitySurface = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["__file", "/Users/luobowen/Desktop/greeks/greeks-live-ui/packages/components/panel-implied-volatility-surface/src/panel-implied-volatility-surface.vue"]]);
 
-exports["default"] = PanelImpliedVolatilitySurface;
+exports.panelImpliedVolatilitySurfaceEmits = panelImpliedVolatilitySurfaceEmits;
+exports.panelImpliedVolatilitySurfaceProps = panelImpliedVolatilitySurfaceProps;
 //# sourceMappingURL=panel-implied-volatility-surface2.js.map