onesight-charts 1.4.2 → 1.4.3

package/lib/components/common-bar/index.js

@@ -55,37 +55,13 @@ function CommonBar(props) {
     }
   } = props;
   const [total, setTotal] = (0, import_react.useState)(0);
-  let chart = (0, import_react.useRef)(null);
+  const chart = (0, import_react.useRef)(null);
   const [currentPage, setCurrentPage] = (0, import_react.useState)(1);
   const chartRef = (0, import_react.useRef)(null);
   const prevDepsRef = (0, import_react.useRef)(null);
   const tooltipClassNameRef = (0, import_react.useRef)(
     `onesight-chart-common-bar-tooltip-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`
   );
-  (0, import_react.useEffect)(() => {
-    const currentDeps = JSON.stringify({ currentPage, data });
-    const prevDeps = prevDepsRef.current;
-    if (prevDeps !== null && currentDeps === prevDeps) {
-      return;
-    }
-    prevDepsRef.current = currentDeps;
-    let copyData = JSON.parse(JSON.stringify(data));
-    let splice_data = copyData.slice(
-      (currentPage - 1) * number,
-      currentPage * number
-    );
-    if (data.length) {
-      setTotal(Math.ceil(data.length / number));
-    }
-    init2(splice_data);
-    callbackGetPage(currentPage);
-    setTimeout(() => {
-      bindClickEvents();
-    }, 0);
-    return () => {
-      unbindClickEvents();
-    };
-  }, [currentPage, data, bindClickEvents, unbindClickEvents]);
   const paginationCb = (currData, page) => {
     setCurrentPage(page);
   };
@@ -94,15 +70,13 @@ function CommonBar(props) {
       const tooltipElement = event.target.closest(
         `.${tooltipClassNameRef.current}`
       );
-      if (!tooltipElement) {
+      if (!tooltipElement)
         return;
-      }
       const seriesNameElement = event.target.closest(".item");
       if (seriesNameElement) {
         const seriesItem = seriesNameElement.getAttribute("data-series-item");
-        if (!seriesItem) {
+        if (!seriesItem)
           return;
-        }
         const seriesData = JSON.parse(seriesItem);
         handleClick && handleClick("tooltipType", seriesData);
       }
@@ -121,6 +95,35 @@ function CommonBar(props) {
       chartElement.removeEventListener("click", onChartClick);
     }
   }, [onChartClick]);
+  (0, import_react.useEffect)(() => {
+    const currentDeps = JSON.stringify({ currentPage, data });
+    const prevDeps = prevDepsRef.current;
+    if (prevDeps !== null && currentDeps === prevDeps)
+      return;
+    prevDepsRef.current = currentDeps;
+    const copyData = JSON.parse(JSON.stringify(data));
+    const splice_data = copyData.slice(
+      (currentPage - 1) * number,
+      currentPage * number
+    );
+    if (data.length)
+      setTotal(Math.ceil(data.length / number));
+    init2(splice_data);
+    callbackGetPage(currentPage);
+    setTimeout(() => {
+      bindClickEvents();
+    }, 0);
+    return () => {
+      unbindClickEvents();
+    };
+  }, [
+    currentPage,
+    data,
+    bindClickEvents,
+    unbindClickEvents,
+    number,
+    callbackGetPage
+  ]);
   function toggleAxisPointer(myChart, show) {
     myChart.setOption({
       tooltip: {
@@ -136,35 +139,30 @@ function CommonBar(props) {
     return String(jsonString).replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/'/g, "&#39;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
   }
   const calculateWidth = (len) => {
-    if (len === 1 || len === 2 || len === 3) {
+    if (len === 1 || len === 2 || len === 3)
       return 42;
-    } else if (len === 4) {
+    if (len === 4)
       return 40;
-    } else if (len === 5) {
+    if (len === 5)
       return 32;
-    } else if (len === 6) {
+    if (len === 6)
       return 26;
-    } else if (len === 7) {
+    if (len === 7)
       return 24;
-    } else if (len === 8) {
+    if (len === 8)
       return 20;
-    } else if (len === 9) {
+    if (len === 9)
       return 18;
-    } else if (len === 10) {
+    if (len === 10)
       return 16;
-    }
+    return 16;
   };
   function setBarData(myChart, newData) {
     if (!myChart)
       return;
     myChart.setOption(
       {
-        series: [
-          // 背景柱（seriesIndex 0）保持不变
-          {},
-          // 前景柱（seriesIndex 1）换成新数组
-          { data: newData }
-        ]
+        series: [{}, { data: newData }]
       },
       false
     );
@@ -180,14 +178,10 @@ function CommonBar(props) {
         fontWeight: 500,
         lineHeight: 20,
         align: "right",
-        // 文本宽度 = 总宽 - 图标宽度 - 间距
-        // width: Math.max(0, maxLabelWidth - ICON_SIZE - ICON_GAP),
         overflow: "truncate",
         ellipsis: "...",
-        // 如果没有任何图标，则不需要左边距
         padding: hasAnyIcon ? [0, 0, 0, ICON_GAP] : [0, 0, 0, 0]
       },
-      // 为没有图标的项目创建一个空的样式
       noIcon: {
         width: 0,
         height: 0
@@ -200,15 +194,10 @@ function CommonBar(props) {
           height: ICON_SIZE,
           align: "right",
           borderRadius: 4,
-          // 这里用图片作为文本块的背景
           backgroundColor: { image: row.platformIcon }
-          // 建议传绝对路径或 public 下的路径
         };
       } else {
-        rich[`icon${i}`] = {
-          width: 0,
-          height: 0
-        };
+        rich[`icon${i}`] = { width: 0, height: 0 };
       }
     });
     return rich;
@@ -221,9 +210,8 @@ function CommonBar(props) {
     if (!labelText)
       return "";
     const fullRect = echarts.format.getTextRect(labelText, font);
-    if (fullRect.width <= maxWidthPx) {
+    if (fullRect.width <= maxWidthPx)
       return labelText;
-    }
     const DOT = "...";
     const dotW = echarts.format.getTextRect(DOT, font).width;
     let prefixLen = 1;
@@ -239,9 +227,8 @@ function CommonBar(props) {
         best = candidate;
         bestW = w;
         prefixLen++;
-        if (prefixLen % 2 === 0) {
+        if (prefixLen % 2 === 0)
           suffixLen++;
-        }
       } else {
         break;
       }
@@ -260,39 +247,12 @@ function CommonBar(props) {
     let fadedData = null;
     let lastIndex = null;
     const axisData = currentData.map((item) => item.format || item.name || "-");
-    let seriesData = currentData.map((item) => {
-      const itemColor = item.color || barColor;
-      if (showProportion) {
-        return {
-          name: item.name || "-",
-          value: (item == null ? void 0 : item.proportion) || 0,
-          label: {
-            // 负数就把文字放左边，正数/0 放右边
-            position: (item == null ? void 0 : item.proportion) < 0 ? "left" : "right"
-          },
-          itemStyle: (item == null ? void 0 : item.proportion) ? { color: itemColor } : { color: "rgba(29, 169, 160, 0)" }
-        };
-      } else {
-        return {
-          name: item.name || "-",
-          value: item.value || 0,
-          label: {
-            // 负数就把文字放左边，正数/0 放右边
-            position: item.value < 0 ? "left" : "right"
-          },
-          itemStyle: item.value ? { color: itemColor } : { color: "rgba(29, 169, 160, 0)" }
-        };
-      }
-    });
-    const originalData = seriesData.map((d) => ({
-      ...d,
-      itemStyle: { ...d.itemStyle || {}, opacity: 1 }
-    }));
-    let maxDataValue = Math.max(
-      ...currentData.map(
-        (item) => showProportion ? item == null ? void 0 : item.proportion : item.value
-      )
-    );
+    const yIconFlag = (_a = data == null ? void 0 : data[0]) == null ? void 0 : _a.platformIcon;
+    const valueAccessor = (item) => showProportion ? (item == null ? void 0 : item.proportion) || 0 : item.value || 0;
+    const maxDataValue = Math.max(...currentData.map(valueAccessor));
+    const minDataValue = Math.min(...currentData.map(valueAccessor));
+    const hasNegative = minDataValue < 0;
+    const allNegative = maxDataValue < 0;
     const ySample = axisData.reduce(
       (a, b) => a.length > b.length ? a : b,
       ""
@@ -313,12 +273,9 @@ function CommonBar(props) {
       sampleText,
       "14px sans-serif"
     ).width;
-    const extra = 15;
-    const yIconFlag = (_a = data[0]) == null ? void 0 : _a.platformIcon;
-    const valueAccessor = (item) => showProportion ? (item == null ? void 0 : item.proportion) || 0 : item.value || 0;
-    const minDataValue = Math.min(...currentData.map(valueAccessor));
-    const hasNegative = minDataValue < 0;
-    const allNegative = maxDataValue < 0;
+    const LABEL_DISTANCE = 5;
+    const SAFE_PX = 12;
+    const extra = 15 + LABEL_DISTANCE + SAFE_PX;
     let bgValue;
     if (allNegative) {
       bgValue = 0;
@@ -326,7 +283,7 @@ function CommonBar(props) {
       bgValue = maxDataValue * barAreaWidth / (barAreaWidth - labelWidth - extra);
     } else {
       const overflowPx = labelWidth + extra - barAreaWidth;
-      const unitPerPx = maxDataValue / barAreaWidth;
+      const unitPerPx = maxDataValue / Math.max(barAreaWidth, 1);
       bgValue = maxDataValue + overflowPx * unitPerPx;
     }
     let minBgValue = 0;
@@ -365,7 +322,7 @@ function CommonBar(props) {
         negativeBarAreaWidth - minLabelWidth - minExtra
       );
       const dataPerPixel = absMinDataValue / availableBarWidth;
-      const labelSpaceInData = (minLabelWidth + minExtra) * dataPerPixel;
+      const labelSpaceInData = (minLabelWidth + minExtra) * dataPerPixel * 1.3;
       minBgValue = -(absMinDataValue + labelSpaceInData);
       if (maxDataValue > 0 && !allNegative) {
         const positiveBarAreaWidth = barAreaWidth - negativeBarAreaWidth;
@@ -378,22 +335,48 @@ function CommonBar(props) {
         }
       }
     }
+    const MIN_BAR_PX = 4;
+    const safeBarAreaWidth = Math.max(1, barAreaWidth);
+    let axisSpan = bgValue - minBgValue;
+    axisSpan = Math.max(axisSpan, 1);
+    let minVisibleValue = axisSpan * (MIN_BAR_PX / safeBarAreaWidth);
+    minVisibleValue = Math.max(minVisibleValue, 1);
+    if (hasNegative) {
+      minBgValue = Math.min(minBgValue, -minVisibleValue * 1.1);
+      axisSpan = Math.max(bgValue - minBgValue, 1);
+      minVisibleValue = Math.max(axisSpan * (MIN_BAR_PX / safeBarAreaWidth), 1);
+    }
+    const seriesData = currentData.map((item) => {
+      const itemColor = item.color || barColor;
+      const raw = valueAccessor(item);
+      const displayValue = raw === 0 ? 0 : Math.sign(raw) * Math.max(Math.abs(raw), minVisibleValue);
+      return {
+        name: item.name || "-",
+        rawValue: raw,
+        value: displayValue,
+        label: {
+          position: raw < 0 ? "left" : "right"
+        },
+        itemStyle: raw ? { color: itemColor } : { color: "rgba(29, 169, 160, 0)" }
+      };
+    });
+    const originalData = seriesData.map((d) => ({
+      ...d,
+      itemStyle: { ...d.itemStyle || {}, opacity: 1 }
+    }));
     let option = {
       tooltip: {
         className: `onesight-chart-common-bar-tooltip ${tooltipClassNameRef.current}`,
         trigger: "axis",
         enterable: true,
-        // showContent: true,
-        // alwaysShowContent: true,
-        // hideDelay: 1000000000,
         padding: 0,
         position: (point, params, dom) => {
           const tooltipHeight = (dom == null ? void 0 : dom.offsetHeight) || 0;
           const currentHeight = myDom.offsetHeight;
-          let len = axisData.length > 10 ? 10 : axisData.length;
+          const len = axisData.length > 10 ? 10 : axisData.length;
           let yValue = 0;
           if (tooltipHeight) {
-            let dataIndex = params[0].dataIndex;
+            const dataIndex = params[0].dataIndex;
             yValue = currentHeight / len * dataIndex - tooltipHeight - 12;
           }
           return [290 - (278 + 2) / 2, yValue];
@@ -401,82 +384,68 @@ function CommonBar(props) {
         axisPointer: {
           type: "shadow",
           z: 1,
-          shadowStyle: {
-            color: "rgba(243,244,244,1)"
-          },
+          shadowStyle: { color: "rgba(243,244,244,1)" },
           clickable: true
         },
         formatter: (res) => {
           var _a2, _b;
-          if (!res.some((i) => i.value !== void 0 && i.value !== null)) {
+          if (!res.some((i) => i.value !== void 0 && i.value !== null))
             return "";
-          }
-          let dataArr = [res[1]];
-          let currentColor = ((_a2 = res[1]) == null ? void 0 : _a2.color) || "#1DA9A0";
-          let triangleWidth = 280;
+          const dataArr = [res[1]];
+          const currentColor = ((_a2 = res[1]) == null ? void 0 : _a2.color) || "#1DA9A0";
+          const triangleWidth = 280;
           const dataIndex = (_b = res[1]) == null ? void 0 : _b.dataIndex;
           const originalItem = currentData[dataIndex];
           return `<div class='onesight-chart-common-bar-tooltip-box' style="width:278px;position: relative;">
-                        ${isTooltipTitleShow ? `<div class="tooltip-head">
-                              ${res[0].format || res[0].name}
-                            </div>` : ""}
-                        <div class='tooltip-body'>
-                        ${dataArr.map((item) => {
+                    ${isTooltipTitleShow ? `<div class="tooltip-head">${res[0].format || res[0].name}</div>` : ""}
+                    <div class='tooltip-body'>
+                    ${dataArr.map((item) => {
+            var _a3;
+            const raw = ((_a3 = item == null ? void 0 : item.data) == null ? void 0 : _a3.rawValue) !== void 0 ? item.data.rawValue : item.value;
             const itemWithAlias = {
               ...item,
               alias: originalItem == null ? void 0 : originalItem.alias,
               alias2: originalItem == null ? void 0 : originalItem.alias2,
-              aliasArray: originalItem == null ? void 0 : originalItem.aliasArray
+              aliasArray: originalItem == null ? void 0 : originalItem.aliasArray,
+              rawValue: raw
             };
             const escapedJson = escapeHtmlAttribute(
               JSON.stringify(itemWithAlias)
             );
             return `<div class='item' data-series-item="${escapedJson}" key='${item.seriesName}'>
-                                <div class='l'>
-                                        <span style="display:inline-block;width: 14px;vertical-align: middle;height: 14px;background-color:${currentColor};border-radius: 4px;margin-bottom: 2px;margin-right:6px"></span>
-                                        <span>${tooltipItemName ? res[0].format || res[0].name : tipName}
-                                        </span>
-                                </div>
-                                <div class='r' style="padding-left:6px;">
-                                <span class='num'>
-                                    ${showProportion ? (0, import_chartUtils.computeFloat)(item.value) : (0, import_chartUtils.changeDataTypeEn)(item.value)}
-                                </span>
-                                </div>
-                            </div>`;
+                                  <div class='l'>
+                                    <span style="display:inline-block;width: 14px;vertical-align: middle;height: 14px;background-color:${currentColor};border-radius: 4px;margin-bottom: 2px;margin-right:6px"></span>
+                                    <span>${tooltipItemName ? res[0].format || res[0].name : tipName}</span>
+                                  </div>
+                                  <div class='r' style="padding-left:6px;">
+                                    <span class='num'>${showProportion ? (0, import_chartUtils.computeFloat)(raw) : (0, import_chartUtils.changeDataTypeEn)(raw)}</span>
+                                  </div>
+                                </div>`;
           }).join("")}
-                        </div>
-                        <div class='triangle-down' style='width:${triangleWidth}px'></div>
-                    </div>`;
+                    </div>
+                    <div class='triangle-down' style='width:${triangleWidth}px'></div>
+                  </div>`;
         }
       },
       animation: true,
       animationEasing: "cubicInOut",
       animationEasingUpdate: "cubicInOut",
-      legend: {
-        show: false
-      },
+      legend: { show: false },
       grid: {
         top: 0,
-        // bottom: 30,
         bottom: 0,
         left: 12,
-        right: hasNegative ? 30 : 0,
+        right: 0,
         containLabel: true
       },
       xAxis: {
         type: "value",
         max: bgValue,
-        min: hasNegative ? minBgValue : void 0,
+        min: minBgValue,
         show: false,
-        axisLine: {
-          show: false
-        },
-        axisLabel: {
-          show: false
-        },
-        splitLine: {
-          show: false
-        },
+        axisLine: { show: false },
+        axisLabel: { show: false },
+        splitLine: { show: false },
         boundaryGap: false
       },
       yAxis: {
@@ -491,27 +460,13 @@ function CommonBar(props) {
           show: true,
           interval: 0,
           rotate: 0,
-          // width: 188,
           overflow: "truncate",
           ellipsis: "...",
-          // formatter: function (value, index) {
-          //   // 检查当前项是否有 platformIcon
-          //   if (yIconFlag) {
-          //     return `{icon${index}|} {label|${value}}`;
-          //   } else {
-          //     return value;
-          //   }
-          // },
           formatter: function(value, index) {
             var _a2;
             const rowHasIcon = !!(yIconFlag && ((_a2 = currentData[index]) == null ? void 0 : _a2.platformIcon));
             const maxPx = getMaxTextWidthForRow(rowHasIcon);
-            const finalText = middleEllipsis(
-              value,
-              maxPx,
-              "14px sans-serif"
-              // 跟 axisLabel 字体保持一致
-            );
+            const finalText = middleEllipsis(value, maxPx, "14px sans-serif");
             if (yIconFlag) {
               return `{icon${index}|} {label|${finalText}}`;
             } else {
@@ -519,82 +474,55 @@ function CommonBar(props) {
             }
           }
         },
-        axisTick: {
-          show: false
-        },
-        axisLine: {
-          show: false
-        },
-        splitLine: {
-          show: false
-        },
+        axisTick: { show: false },
+        axisLine: { show: false },
+        splitLine: { show: false },
         data: axisData
       },
       series: [
         {
-          // === 背景柱系列 ===
-          // 需要背景柱的原因是让柱状条加上后面的数字标签的和不超过悬浮上去的阴影的长度
           name: "背景条",
           type: "bar",
-          // 让它在最底层
           z: 1,
-          // 不需要点击/hover 交互
           silent: true,
-          // 让柱子和后面的柱子重叠在同一个类目位置
           barGap: "-100%",
-          emphasis: {
-            disabled: true
-          },
-          // 柱子的样式
-          itemStyle: {
-            color: "rgba(0, 0, 0, 0)"
-            // 背景色可自定义
-          },
-          // 这里的 data 根据正负数使用不同的背景值
+          emphasis: { disabled: true },
+          itemStyle: { color: "rgba(0, 0, 0, 0)" },
           data: currentData.map((item) => {
-            const value = valueAccessor(item);
-            return value < 0 ? minBgValue : bgValue;
+            const v = valueAccessor(item);
+            return v < 0 ? minBgValue : bgValue;
           }),
-          // 根据你需要的柱宽
-          // barMaxWidth: 42,
-          // barMinWidth: 16,
           barWidth: calculateWidth(seriesData.length),
+          // 这里留着也无所谓，但“最小可见长度”由方案B控制
           barMinHeight: 4,
+          barMinWidth: 4,
           cursor: "pointer",
           animation: false,
           showBackground: false
-          // 这层本身不再需要 showBackground
         },
         {
           type: "bar",
-          // showBackground: true,
           label: {
             show: true,
-            // position: 'right',
             fontWeight: 400,
             fontSize: 14,
             color: "#515E5F",
             distance: 5,
             formatter: (params) => {
-              if (showProportion) {
-                return (0, import_chartUtils.computeFloat)(params.value);
-              } else {
-                return (0, import_chartUtils.numberFormatNull)(params.value);
-              }
+              var _a2;
+              const raw = ((_a2 = params == null ? void 0 : params.data) == null ? void 0 : _a2.rawValue) ?? params.value;
+              return showProportion ? (0, import_chartUtils.computeFloat)(raw) : (0, import_chartUtils.numberFormatNull)(raw);
             }
           },
-          emphasis: {
-            disabled: true
-          },
+          emphasis: { disabled: true },
           itemStyle: {
             borderColor: "rgba(0,0,0,0)",
             borderWidth: 0,
             borderType: "solid"
           },
-          // barMaxWidth: 42,
-          // barMinWidth: 16,
           barWidth: calculateWidth(seriesData.length),
           barMinHeight: 4,
+          barMinWidth: 4,
           cursor: "pointer",
           animation: false,
           data: seriesData
@@ -605,8 +533,8 @@ function CommonBar(props) {
       option.yAxis.axisLabel.rich = makeYAxisRich(currentData);
     }
     myChart.getZr().on("click", function(params) {
-      let pointInPixel = [params.offsetX, params.offsetY];
-      let dataCoord = myChart.convertFromPixel(
+      const pointInPixel = [params.offsetX, params.offsetY];
+      const dataCoord = myChart.convertFromPixel(
         { seriesIndex: 0 },
         pointInPixel
       );
@@ -663,9 +591,7 @@ function CommonBar(props) {
       (0, import_chartUtils.dealBarPath)(myDom, true);
     });
     myChart.setOption(option, true);
-    const element = document.querySelector(
-      `.${tooltipClassNameRef.current}`
-    );
+    const element = document.querySelector(`.${tooltipClassNameRef.current}`);
     if (element) {
       element.addEventListener("mouseleave", function(event) {
         if (event && element.offsetHeight && event.offsetY < element.offsetHeight - 2) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "onesight-charts",
-  "version": "1.4.2",
+  "version": "1.4.3",
   "private": false,
   "description": "OneSight前端图表公共组件库",
   "license": "MIT",