st-comp 0.0.170 → 0.0.171

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "st-comp",
   "public": true,
-  "version": "0.0.170",
+  "version": "0.0.171",
   "type": "module",
   "scripts": {
     "dev": "vite",

package/packages/KlineConfig/config.js

@@ -25,11 +25,15 @@ export const getDefaultUserKlineConfig = () => {
     /**
      * @description: 功能配置
      */
-    enable_subChart: true, // 是否启用副图
-    enable_sliderChart: true, // 是否启用拖拽轴
-    enable_tradeLogBrush: true, // 是否开启交易范围高亮
-    enable_dbClickOpenSingel: true, // 是否开启双击打开单周期
-    enable_showScreenTimeRange: true, // 是否开启显示K线当屏时间范围
+    enable_tradeLogBrush: true, // 高亮交易范围
+    enable_showScreenTimeRange: true, // 展示当屏时间范围
+    enable_dbClickOpenSingel: true, // 多周期双击图表切换至单周期
+    
+    /**
+     * @description: 组件开关
+    */
+   enable_subChart: true, // 是否启用副图
+   enable_sliderChart: true, // 是否启用拖拽轴
   };
 };
 

package/packages/KlineConfig/index.vue

@@ -86,7 +86,7 @@ defineExpose({
         <!-- 偏好设置 -->
         <el-divider style="margin-top: 8px">偏好设置</el-divider>
         <div class="setting-item">
-          <span class="label">默认主图指标: </span>
+          <span class="label">主图指标: </span>
           <el-select
             v-model="form.mainIndicator"
             popper-class="element-dark"
@@ -100,7 +100,7 @@ defineExpose({
           </el-select>
         </div>
         <div class="setting-item">
-          <span class="label">成交点显示模式: </span>
+          <span class="label">交易点位: </span>
           <el-select
             v-model="form.sellBuy"
             popper-class="element-dark"
@@ -114,7 +114,7 @@ defineExpose({
           </el-select>
         </div>
         <div class="setting-item">
-          <span class="label">单周期默认展示: </span>
+          <span class="label">单周期: </span>
           <el-select
             v-model="form.singelCycle"
             popper-class="element-dark"
@@ -128,7 +128,7 @@ defineExpose({
           </el-select>
         </div>
         <div class="setting-item">
-          <span class="label">多周期默认展示: </span>
+          <span class="label">多周期: </span>
           <el-segmented
             size="small"
             v-model="form.multiCycleNum"
@@ -162,7 +162,7 @@ defineExpose({
           </template>
         </div>
         <div class="setting-item">
-          <span class="label">默认展示模块: </span>
+          <span class="label">默认展示: </span>
           <el-segmented
             size="small"
             v-model="form.pageType"
@@ -176,24 +176,26 @@ defineExpose({
         <!-- 功能配置 -->
         <el-divider style="margin-top: 44px">功能配置</el-divider>
         <div class="setting-item">
-          <span class="label">启用副图: </span>
-          <el-switch v-model="form.enable_subChart" />
+          <span class="label">高亮交易范围: </span>
+          <el-switch v-model="form.enable_tradeLogBrush" />
         </div>
         <div class="setting-item">
-          <span class="label">启用拖拽轴: </span>
-          <el-switch v-model="form.enable_sliderChart" />
+          <span class="label">展示当屏时间: </span>
+          <el-switch v-model="form.enable_showScreenTimeRange" />
         </div>
         <div class="setting-item">
-          <span class="label">交易范围高亮: </span>
-          <el-switch v-model="form.enable_tradeLogBrush" />
+          <span class="label">多周期双击图表切换至单周期: </span>
+          <el-switch v-model="form.enable_dbClickOpenSingel" />
         </div>
+        <!-- 组件开关 -->
+        <el-divider style="margin-top: 44px">组件开关</el-divider>
         <div class="setting-item">
-          <span class="label">双击跳转单周期: </span>
-          <el-switch v-model="form.enable_dbClickOpenSingel" />
+          <span class="label">开启副图: </span>
+          <el-switch v-model="form.enable_subChart" />
         </div>
         <div class="setting-item">
-          <span class="label">显示K线当屏时间范围: </span>
-          <el-switch v-model="form.enable_showScreenTimeRange" />
+          <span class="label">开启拖拽轴: </span>
+          <el-switch v-model="form.enable_sliderChart" />
         </div>
       </el-scrollbar>
       <div class="setting-footer">
@@ -241,6 +243,11 @@ defineExpose({
       align-items: center;
       justify-content: space-between;
       margin-bottom: 8px;
+      .label {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+      }
       .el-select {
         width: 130px;
       }

package/packages/KlinePlus/index.vue

@@ -4,7 +4,17 @@ import dayjs from "dayjs";
 import * as echarts from "echarts";
 import { stMath, debounce, addResizeListener } from "st-func";
 import { ref, watch, computed, onMounted, onUnmounted, inject } from "vue";
-import { loadKlineConfig, checkTimeInterval, getSubOptions, mergeklineData, handleMarkPointTradeLog, handleNetPositionLine, handleMarkPointOffset, normalizeToKlineTimeByMatch } from "./utils.js";
+import {
+  loadKlineConfig,
+  checkTimeInterval,
+  getSubOptions,
+  mergeklineData,
+  handleMarkPointTradeLog,
+  handleNetPositionLine,
+  handleTradeIncomeRateLine,
+  handleMarkPointOffset,
+  normalizeToKlineTimeByMatch,
+} from "./utils.js";
 import Tips from "./components/Tips.vue";
 import SliderChart from "./components/SliderChart.vue";
 
@@ -23,14 +33,16 @@ const props = defineProps({
   // 交互选项
   cycle: { type: String, required: true },
   sellBuy: { type: Number, default: 1 },
-  rightType: { type: Number, default: null },
-  klineType: { type: Number, default: null },
+  rightType: { type: Number, default: null }, // 复权类型
+  klineType: { type: Number, default: null }, // 合约类型
+  incomeType: { type: Number, default: 0 }, // 收益计算类型 0-单利, 1-复利
   initTimeRange: { type: Array, required: true },
   mainIndicator: { type: String, required: true },
 
   // 绘制数据
   tradeLog: { type: Array, default: () => [] }, // 成交数据
   netPositionData: { type: Array, default: () => [] }, // 净值数据
+  tradeIncomeRateData: { type: Array, default: () => [] }, // 成交收益率数据
 
   // 强制定位高亮(非必填)
   positionTime: { type: [String, null], default: null },
@@ -334,6 +346,8 @@ const draw = (params = { startValue: 0, endValue: 0 }) => {
   });
   // 配置数据: 净值曲线
   const { netPositionLineData } = handleNetPositionLine(props.netPositionData, props.cycle);
+  // 配置数据: 成交收益率曲线
+  const { tradeIncomeRateLineData } = handleTradeIncomeRateLine(props.tradeIncomeRateData, props.cycle, props.incomeType, time);
   // 配置数据: 成交点位 + 连线
   const { tradePointData, tradeLineData } = handleMarkPointTradeLog(props.tradeLog, props.cycle, props.sellBuy, time, data);
 
@@ -526,6 +540,21 @@ const draw = (params = { startValue: 0, endValue: 0 }) => {
             width: 2,
           },
         },
+        // 交易收益率曲线
+        {
+          type: "line",
+          name: "tradeIncomeRate",
+          data: tradeIncomeRateLineData,
+          symbol: "none",
+          yAxisIndex: 1,
+          connectNulls: false,
+          itemStyle: {
+            color: "#666666",
+          },
+          lineStyle: {
+            width: 2,
+          },
+        },
       ],
       toolbox: {
         show: false,
@@ -725,9 +754,9 @@ watch(
   },
   { deep: true }
 );
-// 监控: [成交点类型, 成交数据, 净值数据] => 重绘K线 (缩放不变)
+// 监控: [成交点类型, 成交数据, 净值数据, 收益计算类型, 成交收益率数据] => 重绘K线 (缩放不变)
 watch(
-  () => [props.sellBuy, props.tradeLog, props.netPositionData],
+  () => [props.sellBuy, props.tradeLog, props.netPositionData, props.incomeType, props.tradeIncomeRateData],
   () => {
     const { startValue, endValue } = mainChartIns.getOption()?.dataZoom[0] ?? {};
     draw({ startValue, endValue });

package/packages/KlinePlus/utils.js

@@ -719,7 +719,7 @@ export const handleMarkPointTradeLog = (tradeLog, cycle, sellBuy, klineTimeArray
   };
 };
 
-// 生成图表配置所需数据: 净值曲线
+// 生成图表配置所需数据: 净值曲线 (周, 月不展示)
 export const handleNetPositionLine = (netPositionData, cycle) => {
   let netPositionLineData = [];
   // 分钟线: 时间格式化
@@ -743,3 +743,20 @@ export const handleNetPositionLine = (netPositionData, cycle) => {
   }
   return { netPositionLineData };
 };
+
+// 生成图表配置所需数据: 成交收益率曲线 (仅在日, 周, 月展示)
+export const handleTradeIncomeRateLine = (tradeIncomeRateData, cycle, incomeType, klineTimeArray) => {
+  let tradeIncomeRateLineData = [];
+  if (["6", "7", "8"].includes(cycle)) {
+    const data = tradeIncomeRateData.reduce((result, item) => {
+      const key = normalizeToKlineTime(klineTimeArray, item.date, cycle);
+      const value = item[incomeType === 0 ? "simple" : "compound"];
+      result.set(key, value);
+      return result;
+    }, new Map());
+    tradeIncomeRateLineData = Array.from(data, ([key, value]) => [key, value]);
+  } else {
+    tradeIncomeRateLineData = [];
+  }
+  return { tradeIncomeRateLineData };
+};