greeks-live-ui 0.1.19 → 0.1.21

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

@@ -2,634 +2,32 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var vue = require('vue');
-require('../../../hooks/index.js');
 require('../../../utils/index.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');
+var runtime = require('../../../utils/vue/props/runtime.js');
 
-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 panelSpotsEtfNetInflowEmits = {
+  "update:currency": (currency) => true,
+  "update:exchange": (exchange) => true
 };
-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
-      );
-    };
+const panelSpotsEtfNetInflowProps = runtime.buildProps({
+  defaultCurrency: {
+    type: String,
+    required: false
+  },
+  defaultExchange: {
+    type: String,
+    required: false
+  },
+  currency: {
+    type: String,
+    required: false
+  },
+  exchange: {
+    type: String,
+    required: false
   }
 });
-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["default"] = PanelSpotsEtfNetInflow;
+exports.panelSpotsEtfNetInflowEmits = panelSpotsEtfNetInflowEmits;
+exports.panelSpotsEtfNetInflowProps = panelSpotsEtfNetInflowProps;
 //# sourceMappingURL=panel-spots-etf-net-inflow.js.map