greeks-live-ui 0.1.19 → 0.1.21

package/dist/index.full.mjs

@@ -11512,6 +11512,12 @@ var ZhCN = {
     periodLabel: "\u7C92\u5EA6\uFF1A",
     vrp: "\u6CE2\u52A8\u7387\u98CE\u9669\u6EA2\u4EF7",
     vrpTips: "<p>VRP\uFF08\u6CE2\u52A8\u7387\u98CE\u9669\u6EA2\u4EF7\uFF09</p><p>VRP \u5373 Volatility Risk Premium\uFF0C\u5373\u9690\u542B\u6CE2\u52A8\u7387\u4E0E\u5B9E\u73B0\u6CE2\u52A8\u7387\u4E4B\u5DEE\uFF0CVRP = IV - RV\u3002</p><p>\u6CE2\u52A8\u7387\u4EA4\u6613\u8005\u9664\u4E86\u5173\u6CE8\u9884\u671F\u7684\u6CE2\u52A8\u7387\uFF08\u9690\u542B\u6CE2\u52A8\u7387\uFF0CIV\uFF09\u4E4B\u5916\uFF0C\u4E5F\u5173\u6CE8\u5B9E\u9645\u53D1\u751F\u7684\u60C5\u51B5\uFF08\u5B9E\u73B0\u6CE2\u52A8\u7387\uFF0CRV\uFF09\u3002VRP \u5C31\u662F\u8861\u91CF\u4E8C\u8005\u4E4B\u95F4\u7684\u5DEE\u503C\u53D8\u52A8\u7684\u6307\u6807\u3002</p>",
+    vrpMean: "VRP \u5747\u503C\uFF1A",
+    vrpRangeStats: "\u533A\u95F4 VRP \u7EDF\u8BA1",
+    statMean: "\u5747\u503C\uFF1A",
+    statMax: "\u6700\u5927\uFF1A",
+    statMin: "\u6700\u5C0F\uFF1A",
+    statDays: "\u5929\u6570\uFF1A",
     volTenor: "\u6CE2\u52A8\u7387\u5468\u671F\uFF1A",
     samplePeriod: "\u6570\u636E\u6837\u672C\u5468\u671F\uFF1A",
     ivSurface: "\u9690\u542B\u6CE2\u52A8\u7387\u66F2\u9762",
@@ -106482,7 +106488,7 @@ const _hoisted_3$o = { class: "right-icons" };
 const _hoisted_4$o = { class: "chart-title-box" };
 const _hoisted_5$l = { class: "right-icons" };
 const _hoisted_6$f = { class: "greeks-panel-tool-box" };
-const _hoisted_7$a = { class: "greeks-panel-tool-box" };
+const _hoisted_7$b = { class: "greeks-panel-tool-box" };
 const __default__$A = {
   name: "GChartPanel"
 };
@@ -106652,7 +106658,7 @@ const _sfc_main$A = defineComponent({
                             class: normalizeClass([unref(ns).e("content-locked-tool"), "greeks-panel-tool"])
                           },
                           [
-                            createElementVNode("div", _hoisted_7$a, [
+                            createElementVNode("div", _hoisted_7$b, [
                               createVNode(_component_g_select, {
                                 value: unref(exchange),
                                 "onUpdate:value": _cache[4] || (_cache[4] = ($event) => isRef(exchange) ? exchange.value = $event : null),
@@ -107586,9 +107592,9 @@ const _hoisted_6$e = {
   key: 1,
   class: "period-controls"
 };
-const _hoisted_7$9 = { class: "selector-label h5-hide" };
-const _hoisted_8$2 = { class: "period-range h5-hide" };
-const _hoisted_9$2 = {
+const _hoisted_7$a = { class: "selector-label h5-hide" };
+const _hoisted_8$3 = { class: "period-range h5-hide" };
+const _hoisted_9$3 = {
   key: 1,
   class: "echart",
   ref: "echart"
@@ -108527,7 +108533,7 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
               !state.showTableCard ? (openBlock(), createElementBlock("div", _hoisted_6$e, [
                 createElementVNode(
                   "span",
-                  _hoisted_7$9,
+                  _hoisted_7$a,
                   toDisplayString(unref(t)("message.range")),
                   1
                 ),
@@ -108562,7 +108568,7 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
                 }, 8, ["value", "size"]),
                 createElementVNode(
                   "span",
-                  _hoisted_8$2,
+                  _hoisted_8$3,
                   toDisplayString(state.periodDateRange),
                   1
                 )
@@ -108575,7 +108581,7 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
                 name: "IV"
               }, null, 8, ["tableData"])) : (openBlock(), createElementBlock(
                 "div",
-                _hoisted_9$2,
+                _hoisted_9$3,
                 [
                   createCommentVNode(` <div
             :class="{
@@ -108820,7 +108826,7 @@ const _hoisted_4$l = {
 };
 const _hoisted_5$j = { class: "selector-label h5-hide" };
 const _hoisted_6$d = { class: "period-range h5-hide" };
-const _hoisted_7$8 = {
+const _hoisted_7$9 = {
   key: 1,
   class: "echart",
   ref: "echart"
@@ -109534,7 +109540,7 @@ const _sfc_main$u = defineComponent({
                 name: "SKEW"
               }, null, 8, ["tableData"])) : (openBlock(), createElementBlock(
                 "div",
-                _hoisted_7$8,
+                _hoisted_7$9,
                 [
                   createVNode(_component_g_chart, {
                     class: "skew-chart",
@@ -109589,7 +109595,7 @@ const _hoisted_4$k = {
 };
 const _hoisted_5$i = { class: "selector-label h5-hide" };
 const _hoisted_6$c = { class: "period-range h5-hide" };
-const _hoisted_7$7 = {
+const _hoisted_7$8 = {
   key: 2,
   class: "echart",
   ref: "echart"
@@ -110426,7 +110432,7 @@ const _sfc_main$t = defineComponent({
               }, null, 8, ["currency"])) : createCommentVNode("v-if", true),
               state.showType === "chart" ? (openBlock(), createElementBlock(
                 "div",
-                _hoisted_7$7,
+                _hoisted_7$8,
                 [
                   createVNode(_component_g_chart, {
                     class: "skew-chart",
@@ -111239,10 +111245,10 @@ const _hoisted_3$i = { class: "btn-box" };
 const _hoisted_4$i = { class: "item-box" };
 const _hoisted_5$g = { class: "input-label" };
 const _hoisted_6$a = { class: "item-box" };
-const _hoisted_7$6 = { class: "input-label" };
-const _hoisted_8$1 = { class: "input-calc" };
-const _hoisted_9$1 = { class: "input-number-unit" };
-const _hoisted_10$1 = { class: "input-number-unit" };
+const _hoisted_7$7 = { class: "input-label" };
+const _hoisted_8$2 = { class: "input-calc" };
+const _hoisted_9$2 = { class: "input-number-unit" };
+const _hoisted_10$2 = { class: "input-number-unit" };
 const _hoisted_11$1 = { class: "item-box" };
 const _hoisted_12$1 = { class: "period-statement-text" };
 const _hoisted_13 = { class: "result-box" };
@@ -111608,11 +111614,11 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
                 createElementVNode("div", _hoisted_6$a, [
                   createElementVNode(
                     "div",
-                    _hoisted_7$6,
+                    _hoisted_7$7,
                     toDisplayString(unref(t)("message.period")) + toDisplayString(unref(t)("message.colon")),
                     1
                   ),
-                  createElementVNode("div", _hoisted_8$1, [
+                  createElementVNode("div", _hoisted_8$2, [
                     createElementVNode("div", null, [
                       createVNode(_component_g_input_number, {
                         value: state.day,
@@ -111626,7 +111632,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
                       }, null, 8, ["value", "max", "formatter", "disabled"]),
                       createElementVNode(
                         "div",
-                        _hoisted_9$1,
+                        _hoisted_9$2,
                         " \xA0\xA0" + toDisplayString(unref(t)("message.day")) + "\xA0\xA0 ",
                         1
                       )
@@ -111644,7 +111650,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
                       }, null, 8, ["value", "max", "formatter", "disabled"]),
                       createElementVNode(
                         "div",
-                        _hoisted_10$1,
+                        _hoisted_10$2,
                         " \xA0\xA0" + toDisplayString(unref(t)("message.hour")),
                         1
                       )
@@ -111769,7 +111775,7 @@ const _hoisted_6$9 = {
   key: 1,
   class: "fiv-matrix-table"
 };
-const _hoisted_7$5 = /* @__PURE__ */ createTextVNode(" - ");
+const _hoisted_7$6 = /* @__PURE__ */ createTextVNode(" - ");
 const __default__$q = {
   name: "GPanelVolatilityTermStructure"
 };
@@ -112309,7 +112315,7 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
                             Fragment,
                             { key: 1 },
                             [
-                              _hoisted_7$5
+                              _hoisted_7$6
                             ],
                             64
                           ))
@@ -112369,7 +112375,7 @@ const _hoisted_6$8 = {
   key: 0,
   class: "footer-total"
 };
-const _hoisted_7$4 = /* @__PURE__ */ createTextVNode(" (");
+const _hoisted_7$5 = /* @__PURE__ */ createTextVNode(" (");
 const __default__$p = {
   name: "GPanelOptionFlow"
 };
@@ -112777,7 +112783,7 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
                   Fragment,
                   { key: 0 },
                   [
-                    _hoisted_7$4,
+                    _hoisted_7$5,
                     createVNode(_component_g_icon, { name: "currency_letter_dollar" }),
                     createTextVNode(
                       toDisplayString(unref(thousandthFormat)(state.usdTotal, 0)) + ") ",
@@ -112832,7 +112838,7 @@ const _hoisted_5$d = {
   ref: "echart"
 };
 const _hoisted_6$7 = { class: "footer-pcr" };
-const _hoisted_7$3 = ["innerHTML"];
+const _hoisted_7$4 = ["innerHTML"];
 const __default__$o = {
   name: "GPanelOptionOpenInterest"
 };
@@ -113258,7 +113264,7 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
                     createElementVNode("div", {
                       class: "greeks-panel-tip",
                       innerHTML: unref(t)("message.cprTips")
-                    }, null, 8, _hoisted_7$3)
+                    }, null, 8, _hoisted_7$4)
                   ]),
                   default: withCtx(() => [
                     createElementVNode(
@@ -115464,7 +115470,7 @@ const _hoisted_3$a = { class: "selector-label h5-hide" };
 const _hoisted_4$a = { class: "period-controls" };
 const _hoisted_5$9 = { class: "selector-label h5-hide" };
 const _hoisted_6$6 = { class: "period-range h5-hide" };
-const _hoisted_7$2 = {
+const _hoisted_7$3 = {
   class: "echart",
   ref: "echart"
 };
@@ -115540,6 +115546,154 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
         props.exchange ? emit("update:exchange", newVal) : state.exchange = newVal;
       }
     });
+    const selectedPeriodDays = computed(() => {
+      var _a, _b;
+      return (_b = (_a = periodList.find((item) => item.value === state.period)) == null ? void 0 : _a.days) != null ? _b : 0;
+    });
+    const filterChartDataByPeriod = (chartData, days) => {
+      if (!days) {
+        return chartData;
+      }
+      const cutoff = Date.now() - days * 24 * 60 * 60 * 1e3;
+      return chartData.filter((item) => item.datetime >= cutoff);
+    };
+    const filteredChartData = computed(
+      () => filterChartDataByPeriod(state.chartData, selectedPeriodDays.value)
+    );
+    const getVolTenorResolution = (volTenor) => {
+      switch (volTenor) {
+        case "1D":
+          return 1;
+        case "3D":
+          return 3;
+        case "7D":
+          return 7;
+        case "15D":
+          return 15;
+        case "1M":
+          return 30;
+        case "3M":
+          return 90;
+        default:
+          return 15;
+      }
+    };
+    const buildVrpSeries = (chartData, volTenor) => {
+      const resolution = getVolTenorResolution(volTenor);
+      const vrpData = [];
+      chartData.forEach((item) => {
+        item.data.forEach((dataItem) => {
+          if (dataItem.day === resolution) {
+            vrpData.push([item.datetime, dataItem.iv - dataItem.rv]);
+          }
+        });
+      });
+      return vrpData;
+    };
+    const formatVrpPercent = (value, fractionDigits = 1) => {
+      if (value == null || !Number.isFinite(value)) {
+        return "-";
+      }
+      const fixed = Number(value).toFixed(fractionDigits);
+      if (Number(fixed) === 0) {
+        return "0.0%";
+      }
+      return `${fixed}%`;
+    };
+    const computeVrpStats = (values) => {
+      if (!values.length) {
+        return null;
+      }
+      let sum = 0;
+      let max = values[0];
+      let min = values[0];
+      values.forEach((value) => {
+        sum += value;
+        if (value > max)
+          max = value;
+        if (value < min)
+          min = value;
+      });
+      return {
+        mean: sum / values.length,
+        max,
+        min
+      };
+    };
+    const getZeroMarkLine = () => ({
+      name: "0",
+      yAxis: 0,
+      symbol: ["none", "arrow"],
+      symbolSize: [0, 8],
+      silent: true,
+      lineStyle: {
+        color: "#909399"
+      },
+      label: {
+        show: true,
+        position: "end",
+        color: isDark.value ? "#CED4DA" : "#343A40",
+        borderWidth: 0,
+        padding: 0,
+        shadowBlur: 0,
+        fontSize: 12
+      }
+    });
+    const getMeanMarkLine = (mean) => {
+      const meanLabel = mean.toFixed(1);
+      return {
+        name: "mean",
+        yAxis: mean,
+        symbol: ["none", "arrow"],
+        symbolSize: [0, 8],
+        silent: true,
+        lineStyle: {
+          color: "#ADB5BD",
+          type: "dashed"
+        },
+        label: {
+          show: true,
+          position: "end",
+          formatter: meanLabel,
+          color: isDark.value ? "#CED4DA" : "#343A40",
+          borderWidth: 0,
+          padding: 0,
+          shadowBlur: 0,
+          fontSize: 12
+        }
+      };
+    };
+    const vrpSeries = computed(
+      () => buildVrpSeries(filteredChartData.value, state.volTenor)
+    );
+    const vrpStats = computed(() => {
+      const values = vrpSeries.value.map(([, value]) => value);
+      return computeVrpStats(values);
+    });
+    const meanHeaderValue = computed(() => {
+      var _a, _b;
+      if (state.loadingFlag) {
+        return "-";
+      }
+      return formatVrpPercent((_b = (_a = vrpStats.value) == null ? void 0 : _a.mean) != null ? _b : null, 1);
+    });
+    const statsDisplay = computed(() => {
+      const days = `${selectedPeriodDays.value}d`;
+      if (state.loadingFlag || !vrpStats.value) {
+        return {
+          mean: "-",
+          max: "-",
+          min: "-",
+          days
+        };
+      }
+      return {
+        mean: formatVrpPercent(vrpStats.value.mean, 1),
+        max: formatVrpPercent(vrpStats.value.max, 1),
+        min: formatVrpPercent(vrpStats.value.min, 1),
+        days
+      };
+    });
     watch(currency, () => {
       fetchData();
     });
@@ -115555,8 +115709,10 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
       }).then((res) => {
         var _a;
         const resData = (_a = res.data) == null ? void 0 : _a.data;
-        if (!resData)
+        if (!resData) {
+          state.chartData = [];
           return;
+        }
         state.chartData = resData;
       }).finally(() => {
         state.loadingFlag = false;
@@ -115572,44 +115728,12 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
       state.periodDateRange = showDateRange(selectedPeriod.days);
       fetchData();
     };
-    const getEchartData = () => {
-      const data = [...state.chartData];
-      let vrpData = [];
-      let tempResolution = 30;
-      switch (state.volTenor) {
-        case "1D":
-          tempResolution = 1;
-          break;
-        case "3D":
-          tempResolution = 3;
-          break;
-        case "7D":
-          tempResolution = 7;
-          break;
-        case "15D":
-          tempResolution = 15;
-          break;
-        case "1M":
-          tempResolution = 30;
-          break;
-        case "3M":
-          tempResolution = 90;
-          break;
+    const getEchartOption = (vrpData, stats) => {
+      const markLineData = [getZeroMarkLine()];
+      const showMeanLine = !state.loadingFlag && stats != null;
+      if (showMeanLine) {
+        markLineData.push(getMeanMarkLine(stats.mean));
       }
-      data.forEach((item) => {
-        let dataList = item.data;
-        dataList.forEach((dataItem) => {
-          if (dataItem.day === tempResolution) {
-            vrpData.push([item.datetime, dataItem.iv - dataItem.rv]);
-          }
-        });
-      });
-      return {
-        vrpData
-      };
-    };
-    const getEchartOption = (params) => {
-      const { vrpData } = params;
       const option = {
         color: ["#FFD600"],
         tooltip: {
@@ -115622,11 +115746,11 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
               color: "#343A40",
               padding: [4, 6, 4, 6],
               margin: 9,
-              formatter: (params2) => {
-                if (params2.axisDimension === "x") {
-                  return timestampFormat(params2.value);
+              formatter: (params) => {
+                if (params.axisDimension === "x") {
+                  return timestampFormat(params.value);
                 } else {
-                  return numberFormat(params2.value, 2);
+                  return numberFormat(params.value, 2);
                 }
               }
             },
@@ -115637,19 +115761,19 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
               color: "#8B959F"
             }
           },
-          formatter: (params2) => {
+          formatter: (params) => {
             try {
               let html = `
             <div style="display: flex;justify-content: space-between;align-items: center;">
-              <div>${getTooltipDate(params2[0].axisValue, locale.value.name, {
+              <div>${getTooltipDate(params[0].axisValue, locale.value.name, {
                 showSeconds: false
               })}</div>
             </div>
             `;
-              if (params2[0]) {
+              if (params[0]) {
                 html += `<div style="display: flex;justify-content: space-between;align-items: center;">
-              <div style="margin-right: 40px;">${params2[0].marker}&nbsp;${params2[0].seriesName}</div>
-              <div>&nbsp;${numberFormat(params2[0].data[1], 2)}</div>
+              <div style="margin-right: 40px;">${params[0].marker}&nbsp;${params[0].seriesName}</div>
+              <div>&nbsp;${numberFormat(params[0].data[1], 2)}</div>
             </div>`;
               }
               return html;
@@ -115708,8 +115832,6 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
           scale: true,
           name: "VRP(%)",
           nameLocation: "end",
-          nameGap: -30,
-          nameRotate: 90,
           nameTextStyle: {
             color: isDark.value ? "#8B959F" : "#8B959F",
             fontWeight: 400,
@@ -115735,9 +115857,9 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
           }
         },
         grid: {
-          top: 20,
+          top: 30,
           left: "left",
-          right: 15,
+          right: 40,
           bottom: 50,
           containLabel: true
         },
@@ -115768,15 +115890,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
             data: vrpData,
             symbol: "none",
             markLine: {
-              data: [
-                {
-                  name: "0",
-                  yAxis: 0,
-                  lineStyle: {
-                    color: "#909399"
-                  }
-                }
-              ]
+              data: markLineData
             }
           }
         ]
@@ -115784,7 +115898,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
       return option;
     };
     const chartOption = computed(() => {
-      return getEchartOption(getEchartData());
+      return getEchartOption(vrpSeries.value, vrpStats.value);
     });
     return (_ctx, _cache) => {
       const _component_g_icon = resolveComponent("g-icon");
@@ -115862,6 +115976,159 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
                   _: 1
                 }, 8, ["value", "size"])
               ]),
+              createElementVNode(
+                "div",
+                {
+                  class: normalizeClass(unref(ns).e("mean-value"))
+                },
+                [
+                  createVNode(_component_g_tooltip, {
+                    underdotted: true,
+                    placement: "bottom",
+                    isMobile: unref(isMobile)
+                  }, {
+                    title: withCtx(() => [
+                      createElementVNode(
+                        "div",
+                        {
+                          class: normalizeClass(unref(ns).e("stats-tooltip"))
+                        },
+                        [
+                          createElementVNode(
+                            "div",
+                            {
+                              class: normalizeClass(unref(ns).e("stats-header"))
+                            },
+                            toDisplayString(unref(t)("message.vrpRangeStats")),
+                            3
+                          ),
+                          createElementVNode(
+                            "div",
+                            {
+                              class: normalizeClass(unref(ns).e("stats-row"))
+                            },
+                            [
+                              createElementVNode(
+                                "span",
+                                {
+                                  class: normalizeClass(unref(ns).e("stats-label"))
+                                },
+                                toDisplayString(unref(t)("message.statMean")),
+                                3
+                              ),
+                              createElementVNode(
+                                "span",
+                                {
+                                  class: normalizeClass(unref(ns).e("stats-value"))
+                                },
+                                toDisplayString(unref(statsDisplay).mean),
+                                3
+                              )
+                            ],
+                            2
+                          ),
+                          createElementVNode(
+                            "div",
+                            {
+                              class: normalizeClass(unref(ns).e("stats-row"))
+                            },
+                            [
+                              createElementVNode(
+                                "span",
+                                {
+                                  class: normalizeClass(unref(ns).e("stats-label"))
+                                },
+                                toDisplayString(unref(t)("message.statMax")),
+                                3
+                              ),
+                              createElementVNode(
+                                "span",
+                                {
+                                  class: normalizeClass(unref(ns).e("stats-value"))
+                                },
+                                toDisplayString(unref(statsDisplay).max),
+                                3
+                              )
+                            ],
+                            2
+                          ),
+                          createElementVNode(
+                            "div",
+                            {
+                              class: normalizeClass(unref(ns).e("stats-row"))
+                            },
+                            [
+                              createElementVNode(
+                                "span",
+                                {
+                                  class: normalizeClass(unref(ns).e("stats-label"))
+                                },
+                                toDisplayString(unref(t)("message.statMin")),
+                                3
+                              ),
+                              createElementVNode(
+                                "span",
+                                {
+                                  class: normalizeClass(unref(ns).e("stats-value"))
+                                },
+                                toDisplayString(unref(statsDisplay).min),
+                                3
+                              )
+                            ],
+                            2
+                          ),
+                          createElementVNode(
+                            "div",
+                            {
+                              class: normalizeClass(unref(ns).e("stats-row"))
+                            },
+                            [
+                              createElementVNode(
+                                "span",
+                                {
+                                  class: normalizeClass(unref(ns).e("stats-label"))
+                                },
+                                toDisplayString(unref(t)("message.statDays")),
+                                3
+                              ),
+                              createElementVNode(
+                                "span",
+                                {
+                                  class: normalizeClass(unref(ns).e("stats-value"))
+                                },
+                                toDisplayString(unref(statsDisplay).days),
+                                3
+                              )
+                            ],
+                            2
+                          )
+                        ],
+                        2
+                      )
+                    ]),
+                    default: withCtx(() => [
+                      createElementVNode(
+                        "span",
+                        {
+                          class: normalizeClass(unref(ns).e("mean-label"))
+                        },
+                        toDisplayString(unref(t)("message.vrpMean")),
+                        3
+                      ),
+                      createElementVNode(
+                        "span",
+                        {
+                          class: normalizeClass(unref(ns).e("mean-text"))
+                        },
+                        toDisplayString(unref(meanHeaderValue)),
+                        3
+                      )
+                    ]),
+                    _: 1
+                  }, 8, ["isMobile"])
+                ],
+                2
+              ),
               createElementVNode("div", _hoisted_4$a, [
                 createElementVNode(
                   "span",
@@ -115909,7 +116176,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
             body: withCtx(() => [
               createElementVNode(
                 "div",
-                _hoisted_7$2,
+                _hoisted_7$3,
                 [
                   createVNode(_component_g_chart, {
                     class: "skew-chart",
@@ -117018,7 +117285,7 @@ const _hoisted_3$7 = /* @__PURE__ */ createTextVNode(" \u2265");
 const _hoisted_4$7 = { class: "period-controls" };
 const _hoisted_5$6 = { class: "selector-label h5-hide" };
 const _hoisted_6$4 = { class: "period-range h5-hide" };
-const _hoisted_7$1 = {
+const _hoisted_7$2 = {
   class: "echart",
   ref: "echart"
 };
@@ -117453,7 +117720,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
             body: withCtx(() => [
               createElementVNode(
                 "div",
-                _hoisted_7$1,
+                _hoisted_7$2,
                 [
                   createVNode(_component_g_chart, {
                     class: "skew-chart",
@@ -118197,6 +118464,9 @@ const greeksSummaryProps = buildProps({
   vomma: {
     type: Number
   },
+  stdVega: {
+    type: Number
+  },
   layout: {
     type: String,
     default: "horizontal"
@@ -118212,6 +118482,10 @@ const greeksSummaryProps = buildProps({
   optionsDelta: {
     type: Number,
     default: 0
+  },
+  labels: {
+    type: Object,
+    default: () => ({})
   }
 });
 
@@ -118221,11 +118495,28 @@ const _hoisted_3$6 = { class: "tooltip-item" };
 const _hoisted_4$6 = /* @__PURE__ */ createElementVNode(
   "span",
   { class: "tooltip-item-label" },
-  "Vanna",
+  "Raw Vega",
   -1
 );
-const _hoisted_5$5 = { class: "tooltip-item" };
+const _hoisted_5$5 = {
+  key: 0,
+  class: "tooltip-item"
+};
 const _hoisted_6$3 = /* @__PURE__ */ createElementVNode(
+  "span",
+  { class: "tooltip-item-label" },
+  "Std. Vega",
+  -1
+);
+const _hoisted_7$1 = { class: "tooltip-item" };
+const _hoisted_8$1 = /* @__PURE__ */ createElementVNode(
+  "span",
+  { class: "tooltip-item-label" },
+  "Vanna",
+  -1
+);
+const _hoisted_9$1 = { class: "tooltip-item" };
+const _hoisted_10$1 = /* @__PURE__ */ createElementVNode(
   "span",
   { class: "tooltip-item-label" },
   "Vomma",
@@ -118249,39 +118540,40 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
       return Math.abs(props.gamma || 0) < 10 ? 5 : 2;
     });
     const greeksData = computed(() => {
+      var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r;
       if (props.mode === "ddh") {
         return {
           deltaTotal: {
             symbol: "\u0394",
-            label: t("message.deltaTotal"),
+            label: (_b = (_a = props.labels) == null ? void 0 : _a.deltaTotal) != null ? _b : t("message.deltaTotal"),
             digits: deltaDigits.value,
             valueSymbol: "",
             value: props.deltaTotal
           },
           optionsDelta: {
             symbol: "\u0394",
-            label: t("message.optionsDelta"),
+            label: (_d = (_c = props.labels) == null ? void 0 : _c.optionsDelta) != null ? _d : t("message.optionsDelta"),
             digits: deltaDigits.value,
             valueSymbol: "",
             value: props.optionsDelta
           },
           gamma: {
             symbol: "\u0393",
-            label: "Gamma",
+            label: (_f = (_e = props.labels) == null ? void 0 : _e.gamma) != null ? _f : "Gamma",
             digits: gammaDigits.value,
             valueSymbol: "",
             value: props.gamma
           },
           vega: {
             symbol: "\u03BD",
-            label: "Vega",
+            label: (_h = (_g = props.labels) == null ? void 0 : _g.vega) != null ? _h : "Vega",
             digits: 2,
             valueSymbol: "USD",
             value: props.vega
           },
           theta: {
             symbol: "\u03B8",
-            label: "Theta",
+            label: (_j = (_i = props.labels) == null ? void 0 : _i.theta) != null ? _j : "Theta",
             digits: 2,
             valueSymbol: "USD",
             value: props.theta
@@ -118291,28 +118583,28 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
       return {
         delta: {
           symbol: "\u0394",
-          label: "*Delta ",
+          label: (_l = (_k = props.labels) == null ? void 0 : _k.delta) != null ? _l : "*Delta ",
           digits: deltaDigits.value,
           valueSymbol: "",
           value: props.delta
         },
         gamma: {
           symbol: "\u0393",
-          label: "Gamma",
+          label: (_n = (_m = props.labels) == null ? void 0 : _m.gamma) != null ? _n : "Gamma",
           digits: gammaDigits.value,
           valueSymbol: "",
           value: props.gamma
         },
         vega: {
           symbol: "\u03BD",
-          label: "Vega",
+          label: (_p = (_o = props.labels) == null ? void 0 : _o.vega) != null ? _p : "Vega",
           digits: 2,
           valueSymbol: "USD",
           value: props.vega
         },
         theta: {
           symbol: "\u03B8",
-          label: "Theta",
+          label: (_r = (_q = props.labels) == null ? void 0 : _q.theta) != null ? _r : "Theta",
           digits: 2,
           valueSymbol: "USD",
           value: props.theta
@@ -118422,14 +118714,36 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
                                   createElementVNode("div", _hoisted_3$6, [
                                     _hoisted_4$6,
                                     createVNode(unref(GNumberFormat), {
+                                      class: "tooltip-item-value",
+                                      value: props.vega,
+                                      digits: 2,
+                                      symbol: "USD",
+                                      "use-custom-color": true
+                                    }, null, 8, ["value"])
+                                  ]),
+                                  props.stdVega !== void 0 ? (openBlock(), createElementBlock("div", _hoisted_5$5, [
+                                    _hoisted_6$3,
+                                    createVNode(unref(GNumberFormat), {
+                                      class: "tooltip-item-value",
+                                      value: props.stdVega,
+                                      digits: 2,
+                                      symbol: "USD",
+                                      "use-custom-color": true
+                                    }, null, 8, ["value"])
+                                  ])) : createCommentVNode("v-if", true),
+                                  createElementVNode("div", _hoisted_7$1, [
+                                    _hoisted_8$1,
+                                    createVNode(unref(GNumberFormat), {
+                                      class: "tooltip-item-value",
                                       value: props.vanna,
                                       digits: 4,
                                       "use-custom-color": true
                                     }, null, 8, ["value"])
                                   ]),
-                                  createElementVNode("div", _hoisted_5$5, [
-                                    _hoisted_6$3,
+                                  createElementVNode("div", _hoisted_9$1, [
+                                    _hoisted_10$1,
                                     createVNode(unref(GNumberFormat), {
+                                      class: "tooltip-item-value",
                                       value: props.vomma,
                                       digits: 4,
                                       "use-custom-color": true