greeks-live-ui 0.1.21 → 0.1.22

package/lib/packages/components/panel-spots-etf-net-inflow/src/panel-spots-etf-net-inflow.js

@@ -2,32 +2,634 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var vue = require('vue');
+require('../../../hooks/index.js');
 require('../../../utils/index.js');
-var runtime = require('../../../utils/vue/props/runtime.js');
+var dataLab = require('../../../utils/dataLab.js');
+var panelSpotsEtfNetInflow = require('./panel-spots-etf-net-inflow2.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-device-type/index.js');
+var index$2 = require('../../../hooks/use-theme/index.js');
+var index$3 = require('../../../hooks/use-locale/index.js');
+var chartHelp = require('../../../utils/chartHelp.js');
 
-const panelSpotsEtfNetInflowEmits = {
-  "update:currency": (currency) => true,
-  "update:exchange": (exchange) => true
+const _hoisted_1 = ["innerHTML"];
+const _hoisted_2 = { class: "selector-label h5-hide" };
+const _hoisted_3 = { class: "period-controls" };
+const _hoisted_4 = { class: "selector-label h5-hide" };
+const _hoisted_5 = { class: "period-range h5-hide" };
+const _hoisted_6 = {
+  class: "echart",
+  ref: "echart"
 };
-const panelSpotsEtfNetInflowProps = 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: "GPanelSpotsEtfNetInflow"
+};
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  ...__default__,
+  props: panelSpotsEtfNetInflow.panelSpotsEtfNetInflowProps,
+  emits: panelSpotsEtfNetInflow.panelSpotsEtfNetInflowEmits,
+  setup(__props, { emit }) {
+    const props = __props;
+    const ns = index.useNamespace("panel-spots-etf-net-inflow");
+    const { isMobile, isPC } = index$1.useDeviceType();
+    const { isDark } = index$2.useTheme();
+    const { t, locale } = index$3.useLocale();
+    const state = vue.reactive({
+      loadingFlag: false,
+      exchange: props.exchange || props.defaultExchange || "Deribit",
+      currency: props.currency || props.defaultCurrency || "BTC",
+      period: "1M",
+      periodDateRange: "",
+      resolution: "1",
+      chartData: [],
+      legendSelected: {}
+    });
+    const currency = vue.computed({
+      get: () => props.currency || state.currency || "BTC",
+      set: (newVal) => {
+        props.currency ? emit("update:currency", newVal) : state.currency = newVal;
+      }
+    });
+    const exchange = vue.computed({
+      get: () => props.exchange || state.exchange || "Deribit",
+      set: (newVal) => {
+        props.exchange ? emit("update:exchange", newVal) : state.exchange = newVal;
+      }
+    });
+    const currencyList = [
+      { value: "BTC", label: "BTC", icon: "currency_btc" },
+      { value: "ETH", label: "ETH", icon: "currency_eth" }
+    ];
+    vue.watch(currency, () => {
+      state.legendSelected = {};
+      fetchData();
+    });
+    let periodList = [
+      {
+        value: "ALL",
+        label: "All",
+        days: 0
+      },
+      {
+        value: "7D",
+        label: "7 D",
+        days: 7
+      },
+      {
+        value: "15D",
+        label: "15 D",
+        days: 15
+      },
+      {
+        value: "1M",
+        label: "1 M",
+        days: 30
+      },
+      {
+        value: "3M",
+        label: "3 M",
+        days: 90
+      },
+      {
+        value: "6M",
+        label: "6 M",
+        days: 180
+      },
+      {
+        value: "1Y",
+        label: "1 Y",
+        days: 365
+      }
+    ];
+    const resolutionList = [
+      {
+        label: "1D",
+        value: "1"
+      },
+      {
+        label: "1W",
+        value: "7"
+      }
+    ];
+    const handleChangePeriod = (value) => {
+      const selectedPeriod = periodList.find((v) => v.value === value);
+      if (!selectedPeriod)
+        return;
+      state.periodDateRange = chartHelp.showDateRange(selectedPeriod.days);
+      fetchData();
+    };
+    const handleLegendSelectChanged = (params) => {
+      state.legendSelected = params.selected;
+    };
+    const changeResolution = (value) => {
+      if (value === "7") {
+        state.period = "3M";
+        handleChangePeriod("3M");
+      } else {
+        handleChangePeriod(state.period);
+      }
+    };
+    const getPeriodTimestamps = () => {
+      const selectedPeriod = periodList.find((v) => v.value === state.period);
+      const now = Date.now();
+      let start_timestamp = 0;
+      let end_timestamp = now;
+      if (selectedPeriod && selectedPeriod.days > 0) {
+        start_timestamp = now - selectedPeriod.days * 24 * 60 * 60 * 1e3;
+      }
+      return { start_timestamp, end_timestamp };
+    };
+    const fetchData = () => {
+      state.loadingFlag = true;
+      const { start_timestamp, end_timestamp } = getPeriodTimestamps();
+      dataLab.getSpotsEtfNetInflow({
+        currency: currency.value,
+        exchange: exchange.value,
+        start_timestamp,
+        end_timestamp
+      }).then((res) => {
+        if (res && res.code === 200 && Array.isArray(res.data)) {
+          state.chartData = res.data;
+        } else {
+          state.chartData = [];
+        }
+      }).finally(() => {
+        state.loadingFlag = false;
+      });
+    };
+    vue.onMounted(() => {
+      handleChangePeriod(state.period);
+    });
+    const getEchartData = () => {
+      var _a, _b;
+      const data = Array.isArray(state.chartData) ? state.chartData : [];
+      if (!data.length) {
+        return {
+          xData: [],
+          monthIndices: [],
+          barData: [],
+          netAssetsData: [],
+          indexPriceData: [],
+          raw: []
+        };
+      }
+      if (state.resolution !== "1") {
+        const MS_PER_DAY = 24 * 3600 * 1e3;
+        const MS_PER_WEEK = 7 * MS_PER_DAY;
+        const sorted = data;
+        let start = data[0].ts;
+        let end = data[data.length - 1].ts;
+        if (state.periodDateRange) {
+          const match = state.periodDateRange.match(/(\d{4}[\/-]\d{2}[\/-]\d{2})/g);
+          if (match && match.length === 2) {
+            start = new Date(match[0].replace(/-/g, "/")).getTime();
+            end = new Date(match[1].replace(/-/g, "/")).getTime();
+          }
+        }
+        const weekGroups = [];
+        let groupStartTs = start;
+        while (groupStartTs <= end) {
+          const groupEndTs = groupStartTs + MS_PER_WEEK;
+          const group = sorted.filter(
+            (item) => item.ts >= groupStartTs && item.ts < groupEndTs
+          );
+          weekGroups.push(group);
+          groupStartTs = groupEndTs;
+        }
+        const timestamps = [];
+        const barData = [];
+        const netAssetsData = [];
+        const indexPriceData = [];
+        const raw = [];
+        groupStartTs = start;
+        for (const arr of weekGroups) {
+          if (arr.length) {
+            timestamps.push(arr[0].ts);
+            barData.push(arr.reduce((sum, cur) => {
+              var _a2;
+              return sum + ((_a2 = cur.fund_flow) != null ? _a2 : 0);
+            }, 0));
+            netAssetsData.push((_a = arr[0].total_net_assets_value) != null ? _a : null);
+            indexPriceData.push((_b = arr[0].index_price) != null ? _b : null);
+            raw.push(arr[0]);
+          }
+          groupStartTs += MS_PER_WEEK;
+        }
+        const { labels: xData } = chartHelp.formatTimestampsForAxis(timestamps);
+        return {
+          xData,
+          barData,
+          netAssetsData,
+          indexPriceData,
+          raw
+        };
+      } else {
+        const timestamps = data.map((item) => item.ts);
+        const { labels: xData } = chartHelp.formatTimestampsForAxis(timestamps);
+        return {
+          xData,
+          barData: data.map((item) => item.fund_flow),
+          netAssetsData: data.map((item) => item.total_net_assets_value),
+          indexPriceData: data.map((item) => item.index_price),
+          raw: data
+        };
+      }
+    };
+    const getEchartOption = (params) => {
+      const { xData, barData, netAssetsData, indexPriceData, raw } = params;
+      const currencyIndexName = `${currency.value} Index`;
+      const option = {
+        color: ["#00b42a", "#ff7d00", "#0e42d2"],
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "cross",
+            label: {
+              show: false,
+              backgroundColor: "#DEE2E6",
+              color: "#343A40",
+              padding: [4, 6, 4, 6],
+              margin: 9
+            },
+            crossStyle: {
+              color: "#8B959F"
+            },
+            lineStyle: {
+              color: "#8B959F"
+            }
+          },
+          backgroundColor: isDark.value ? "#E9ECEF" : "#292F3D",
+          padding: [6, 8, 5, 6],
+          borderWidth: 0,
+          textStyle: {
+            color: isDark.value ? "#000000" : "#FFFFFF",
+            fontSize: 12,
+            lineHeight: 16,
+            fontWeight: 400
+          },
+          formatter: (params2) => {
+            if (!params2 || !params2.length)
+              return "";
+            const d = params2[0];
+            const idx = d.dataIndex;
+            const item = raw[idx];
+            if (!item)
+              return "";
+            const tooltipDate = chartHelp.getTooltipDate(item.ts, locale.value.name, {
+              showSeconds: false
+            });
+            const sign = item.fund_flow > 0 ? "+" : "";
+            const netInflow = barData[idx];
+            let content = "";
+            content += `<div class="chart-tooltip-box"><div style="margin-bottom:4px;">${tooltipDate}</div>`;
+            content += `
+          <div class="chart-tooltip">
+            <div>
+              <span>Net Inflow</span>
+            </div>
+            <span style="color:${netInflow >= 0 ? "#00b42a" : "#f53f3f"};">${sign} $ ${chartHelp.formatLargeNumber(netInflow)}</span>
+          </div>
+        `;
+            content += `
+          <div class="chart-tooltip">
+            <div>
+              <span>Net Assets</span>
+            </div>
+            <span>$ ${chartHelp.formatLargeNumber(item.total_net_assets_value)}</span>
+          </div>
+        `;
+            content += `
+          <div class="chart-tooltip">
+            <div>
+              <span>${currency.value} Index</span>
+            </div>
+            <span>$ ${item.index_price}</span>
+          </div>
+        `;
+            return content + "</div>";
+          }
+        },
+        legend: {
+          selectedMode: true,
+          data: [
+            { name: "Net Inflow" },
+            { name: "Net Assets", icon: "path://M0,0 h10 v1 h-10 z" },
+            { name: currencyIndexName, icon: "path://M0,0 h10 v1 h-10 z" }
+          ],
+          textStyle: {
+            color: isDark.value ? "#ADB5BD" : "#596169",
+            fontSize: 12
+          },
+          itemGap: 16,
+          lineStyle: {
+            inactiveColor: isDark.value ? "#2B2F32" : "#DEE2E6"
+          },
+          inactiveColor: isDark.value ? "#495057" : "#BDC4CB",
+          selected: Object.keys(state.legendSelected).length > 0 ? state.legendSelected : void 0
+        },
+        grid: {
+          top: 40,
+          left: 10,
+          right: 10,
+          bottom: 50,
+          containLabel: true
+        },
+        dataZoom: [
+          {
+            type: "inside",
+            start: 0,
+            end: 100,
+            handleIcon: "path://M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z"
+          },
+          {
+            show: true,
+            type: "slider",
+            rangeMode: "percent",
+            bottom: "10px",
+            start: 0,
+            end: 100,
+            handleIcon: "path://M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z"
+          }
+        ],
+        xAxis: {
+          type: "category",
+          data: xData,
+          axisTick: { show: false },
+          axisLabel: {
+            color: isDark.value ? "#CED4DA" : "#343A40",
+            fontWeight: 400,
+            fontSize: 10,
+            rich: {
+              month: {
+                color: isDark.value ? "#CED4DA" : "#343A40",
+                fontWeight: 600,
+                fontSize: 12
+              },
+              year: {
+                color: isDark.value ? "#CED4DA" : "#343A40",
+                fontWeight: 600,
+                fontSize: 12
+              }
+            }
+          },
+          axisLine: {
+            lineStyle: { color: isDark.value ? "#CED4DA" : "#343A40" }
+          },
+          splitLine: {
+            show: !isMobile.value && !isDark.value,
+            lineStyle: { color: "#F1F1F1", width: 1, type: "solid" }
+          }
+        },
+        yAxis: [
+          {
+            type: "value",
+            name: "Net Inflow ($)",
+            position: "left",
+            nameGap: 10,
+            nameRotate: 0,
+            nameTextStyle: {
+              color: isDark.value ? "#8B959F" : "#8B959F",
+              fontWeight: 400,
+              fontSize: 10,
+              padding: isMobile.value ? [0, 0, 0, 0] : [0, 0, 0, 50]
+            },
+            axisLabel: {
+              color: isDark.value ? "#CED4DA" : "#343A40",
+              fontWeight: 400,
+              fontSize: 10,
+              formatter: (v, digits) => chartHelp.formatLargeNumber(v, 0)
+            },
+            axisLine: {
+              lineStyle: { color: isDark.value ? "#CED4DA" : "#343A40" }
+            },
+            splitLine: {
+              lineStyle: {
+                color: isDark.value ? "#2B2F32" : "#F1F1F1",
+                width: 1,
+                type: "solid"
+              }
+            }
+          },
+          {
+            type: "value",
+            name: "Net Assets ($)",
+            nameGap: 10,
+            nameRotate: 0,
+            scale: true,
+            position: "right",
+            nameTextStyle: {
+              color: isDark.value ? "#8B959F" : "#8B959F",
+              fontWeight: 400,
+              fontSize: 10,
+              padding: isMobile.value ? [0, 0, 0, 0] : [0, 45, 0, 0]
+            },
+            axisLabel: {
+              color: isDark.value ? "#CED4DA" : "#343A40",
+              fontWeight: 400,
+              fontSize: 10,
+              formatter: (v, digits) => chartHelp.formatLargeNumber(v, 0)
+            },
+            axisLine: {
+              lineStyle: { color: isDark.value ? "#CED4DA" : "#343A40" }
+            },
+            splitLine: { show: false }
+          },
+          {
+            type: "value",
+            name: `${currency.value} Price ($)`,
+            scale: true,
+            position: "right",
+            offset: 0,
+            show: false,
+            axisLine: { show: false },
+            axisLabel: { show: false },
+            splitLine: { show: false },
+            axisTick: { show: false },
+            width: 1
+          }
+        ],
+        series: [
+          {
+            name: "Net Inflow",
+            type: "bar",
+            data: barData,
+            yAxisIndex: 0,
+            emphasis: {
+              focus: "series"
+            },
+            itemStyle: {
+              color: (params2) => params2.value >= 0 ? "#00b42a" : "#f53f3f"
+            }
+          },
+          {
+            name: "Net Assets",
+            type: "line",
+            data: netAssetsData,
+            yAxisIndex: 1,
+            symbol: "none",
+            lineStyle: { color: "#ff7d00", width: 2 }
+          },
+          {
+            name: `${currency.value} Index`,
+            type: "line",
+            data: indexPriceData,
+            yAxisIndex: 2,
+            symbol: "none",
+            lineStyle: { color: "#0e42d2", width: 2 }
+          }
+        ]
+      };
+      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_select_option = vue.resolveComponent("g-select-option");
+      const _component_g_select = vue.resolveComponent("g-select");
+      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[2] || (_cache[2] = ($event) => vue.isRef(currency) ? currency.value = $event : null),
+            exchange: vue.unref(exchange),
+            "onUpdate:exchange": _cache[3] || (_cache[3] = ($event) => vue.isRef(exchange) ? exchange.value = $event : null),
+            loading: state.loadingFlag,
+            showExchangeSelector: false,
+            currencyList,
+            onRefresh: fetchData
+          }, {
+            title: vue.withCtx(() => [
+              vue.createTextVNode(
+                vue.toDisplayString(vue.unref(t)("message.spotsEtfNetInflow")) + " ",
+                1
+              ),
+              vue.createVNode(_component_g_tooltip, { placement: "bottom" }, {
+                title: vue.withCtx(() => [
+                  vue.createElementVNode("div", {
+                    class: "greeks-panel-tip",
+                    innerHTML: vue.unref(t)("message.spotsEtfNetInflowTips")
+                  }, null, 8, _hoisted_1)
+                ]),
+                default: vue.withCtx(() => [
+                  vue.createVNode(_component_g_icon, { name: "info_question_circle" })
+                ]),
+                _: 1
+              })
+            ]),
+            tool: vue.withCtx(() => [
+              vue.createElementVNode(
+                "span",
+                _hoisted_2,
+                vue.toDisplayString(vue.unref(t)("message.periodLabel")),
+                1
+              ),
+              vue.createVNode(_component_g_select, {
+                value: state.resolution,
+                "onUpdate:value": _cache[0] || (_cache[0] = ($event) => state.resolution = $event),
+                onChange: changeResolution,
+                size: vue.unref(isPC) ? "small" : "medium",
+                class: "second-select"
+              }, {
+                default: vue.withCtx(() => [
+                  (vue.openBlock(), vue.createElementBlock(
+                    vue.Fragment,
+                    null,
+                    vue.renderList(resolutionList, (item) => {
+                      return vue.createVNode(_component_g_select_option, {
+                        value: item.value
+                      }, {
+                        default: vue.withCtx(() => [
+                          vue.createTextVNode(
+                            vue.toDisplayString(item.label),
+                            1
+                          )
+                        ]),
+                        _: 2
+                      }, 1032, ["value"]);
+                    }),
+                    64
+                  ))
+                ]),
+                _: 1
+              }, 8, ["value", "size"]),
+              vue.createElementVNode("div", _hoisted_3, [
+                vue.createElementVNode(
+                  "span",
+                  _hoisted_4,
+                  vue.toDisplayString(vue.unref(t)("message.range")),
+                  1
+                ),
+                vue.createVNode(_component_g_select, {
+                  value: state.period,
+                  "onUpdate:value": _cache[1] || (_cache[1] = ($event) => state.period = $event),
+                  onChange: handleChangePeriod,
+                  size: vue.unref(isPC) ? "small" : "medium",
+                  class: "period-select"
+                }, {
+                  default: vue.withCtx(() => [
+                    (vue.openBlock(true), vue.createElementBlock(
+                      vue.Fragment,
+                      null,
+                      vue.renderList(vue.unref(periodList), (periodItem) => {
+                        return vue.openBlock(), vue.createBlock(_component_g_select_option, {
+                          value: periodItem.value
+                        }, {
+                          default: vue.withCtx(() => [
+                            vue.createTextVNode(
+                              vue.toDisplayString(periodItem.label),
+                              1
+                            )
+                          ]),
+                          _: 2
+                        }, 1032, ["value"]);
+                      }),
+                      256
+                    ))
+                  ]),
+                  _: 1
+                }, 8, ["value", "size"]),
+                vue.createElementVNode(
+                  "span",
+                  _hoisted_5,
+                  vue.toDisplayString(state.periodDateRange),
+                  1
+                )
+              ])
+            ]),
+            body: vue.withCtx(() => [
+              vue.createElementVNode(
+                "div",
+                _hoisted_6,
+                [
+                  vue.createVNode(_component_g_chart, {
+                    class: "skew-chart",
+                    option: vue.unref(chartOption),
+                    onLegendselectchanged: handleLegendSelectChanged
+                  }, null, 8, ["option"])
+                ],
+                512
+              )
+            ]),
+            _: 1
+          }, 8, ["currency", "exchange", "loading"])
+        ],
+        2
+      );
+    };
   }
 });
+var PanelSpotsEtfNetInflow = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["__file", "/Users/luobowen/Desktop/greeks/greeks-live-ui/packages/components/panel-spots-etf-net-inflow/src/panel-spots-etf-net-inflow.vue"]]);
 
-exports.panelSpotsEtfNetInflowEmits = panelSpotsEtfNetInflowEmits;
-exports.panelSpotsEtfNetInflowProps = panelSpotsEtfNetInflowProps;
+exports["default"] = PanelSpotsEtfNetInflow;
 //# sourceMappingURL=panel-spots-etf-net-inflow.js.map