@easyv/charts 1.8.23 → 1.8.25

package/lib/components/pieTooltip.js

@@ -69,21 +69,21 @@ var PieTooltip = exports.PieTooltip = /*#__PURE__*/(0, _react.memo)(function (pr
     var _icon = (0, _utils.getIcon)(type, icon);
     return /*#__PURE__*/_react["default"].createElement("dd", {
       style: {
-        display: 'flex',
-        justifyContent: 'space-between',
-        lineHeight: lineHeight + 'px'
+        display: "flex",
+        justifyContent: "space-between",
+        lineHeight: lineHeight + "px"
       }
     }, /*#__PURE__*/_react["default"].createElement("span", {
       style: {
         // border: '1px solid red',
-        display: 'flex',
-        alignItems: 'center',
+        display: "flex",
+        alignItems: "center",
         gap: icon.iconGap
       }
     }, /*#__PURE__*/_react["default"].createElement("span", {
       style: _objectSpread(_objectSpread({}, _icon), {}, {
-        width: iconSize + 'px',
-        height: iconSize + 'px'
+        width: iconSize + "px",
+        height: iconSize + "px"
       })
     }), /*#__PURE__*/_react["default"].createElement("span", {
       style: (0, _utils.getFontStyle)(name)
@@ -95,30 +95,28 @@ var PieTooltip = exports.PieTooltip = /*#__PURE__*/(0, _react.memo)(function (pr
   };
   var getBigScreenScale = function getBigScreenScale() {
     // 优先使用全局提供的方法
-    if (typeof window.getScreenScale === 'function') {
+    if (typeof window.getScreenScale === "function") {
       try {
         var _result = window.getScreenScale();
         if (Array.isArray(_result) && _result.length >= 6) {
           return _result;
         }
       } catch (e) {
-        console.error('调用全局 getScreenScale 出错:', e);
+        console.error("调用全局 getScreenScale 出错:", e);
       }
     }
 
     // 获取容器元素
-    var bigscreenDom = document.getElementById('bigscreen-container');
+    var bigscreenDom = document.getElementById("bigscreen-container");
 
     // 元素不存在时的处理
     if (!bigscreenDom) {
-      console.warn('未找到 bigscreen-container 元素，使用视口尺寸');
       return [1, 1, window.innerWidth, window.innerHeight, 0, 0];
     }
 
     // 确保元素可见（未被隐藏）
-    var isVisible = window.getComputedStyle(bigscreenDom).display !== 'none' && window.getComputedStyle(bigscreenDom).visibility !== 'hidden';
+    var isVisible = window.getComputedStyle(bigscreenDom).display !== "none" && window.getComputedStyle(bigscreenDom).visibility !== "hidden";
     if (!isVisible) {
-      console.warn('bigscreen-container 元素不可见，使用视口尺寸');
       return [1, 1, window.innerWidth, window.innerHeight, 0, 0];
     }
 
@@ -137,14 +135,14 @@ var PieTooltip = exports.PieTooltip = /*#__PURE__*/(0, _react.memo)(function (pr
     try {
       var computedStyle = window.getComputedStyle(bigscreenDom);
       var transform = computedStyle.transform;
-      if (transform && transform !== 'none') {
+      if (transform && transform !== "none") {
         // 解析 transform matrix
         var matrix = new DOMMatrix(transform);
         scaleX = matrix.a; // 缩放X因子
         scaleY = matrix.d; // 缩放Y因子
       }
     } catch (e) {
-      console.error('解析缩放样式出错:', e);
+      console.error("解析缩放样式出错:", e);
     }
 
     // 最终返回值（确保不会有undefined）
@@ -185,19 +183,19 @@ var PieTooltip = exports.PieTooltip = /*#__PURE__*/(0, _react.memo)(function (pr
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: "__easyv-tooltip",
     style: {
-      pointerEvents: 'none',
+      pointerEvents: "none",
       transform: getTipPos(mousePos, pieCenter),
       width: tipWidth,
       height: tipHeight,
       padding: (0, _utils.getMargin)(margin),
-      background: image ? '50% 50% / 100% 100% no-repeat url(' + window.appConfig.ASSETS_URL + image + ')' : 'rgba(48, 55, 66, 0.85)'
+      background: image ? "50% 50% / 100% 100% no-repeat url(" + window.appConfig.ASSETS_URL + image + ")" : "rgba(48, 55, 66, 0.85)"
     }
   }, /*#__PURE__*/_react["default"].createElement("dl", {
     style: {
-      display: 'flex',
-      flexDirection: 'column',
-      justifyContent: 'space-between',
-      height: '100%'
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "space-between",
+      height: "100%"
     }
   }, Item()));
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@easyv/charts",
-  "version": "1.8.23",
+  "version": "1.8.25",
   "description": "",
   "main": "lib/index.js",
   "scripts": {

package/src/components/Axis.tsx

@@ -37,13 +37,13 @@ const defaultFormatter: (
 const getAxesPath: (
   orientation: Orientation,
   { width, height }: Context,
-  cHeight:number,
-  cPercent:number
+  cHeight: number,
+  cPercent: number
 ) => string = (orientation, { width, height }, cHeight, cPercent) => {
   switch (orientation) {
     case "top":
     case "bottom":
-      return "M-0.5, 0H" + width/cPercent;
+      return "M-0.5, 0H" + width / cPercent;
     case "left":
     case "right":
       return "M0, -0.5V" + (height + 0.5 - cHeight);
@@ -99,13 +99,13 @@ const AxisLine: ({
   config,
   isClipAxis,
   clipAxisRange,
-  cPercent
+  cPercent,
 }: any) => ReactComponentElement<ComponentType> | null = ({
   orientation = defaultOrientation,
   config: { show, color, lineWidth, cHeight },
   isClipAxis = false,
   clipAxisRange = [],
-  cPercent = 1
+  cPercent = 1,
 }) => {
   if (!show) return null;
   const context: Context = useContext(chartContext);
@@ -137,7 +137,7 @@ const AxisLine: ({
 
 const Unit: ({
   config: { show, text, font, translate, align },
-  dataUnit
+  dataUnit,
 }: any) => ReactComponentElement<ComponentType> | null = ({
   config: {
     show,
@@ -146,7 +146,7 @@ const Unit: ({
     translate: { x: translateX, y: translateY },
     align: { textAnchor } = defaultAlign,
   },
-  dataUnit
+  dataUnit,
 }) => {
   if (!show) return null;
   return (
@@ -182,7 +182,7 @@ type LabelType = {
   formatter: Function;
   tickSize: number;
   rotate: number;
-  onClick?: MouseEventHandler;
+  events?: Function;
   config: {
     show: boolean;
     translate: Translate;
@@ -199,13 +199,13 @@ const Label: (
   className,
   orientation = defaultOrientation,
   label,
-  iosTrans:{ isIOS, x:iosX, y:iosY },
+  iosTrans: { isIOS, x: iosX, y: iosY },
   coordinate,
   formatter = defaultFormatter,
   tickSize,
   rotate = 0,
   config,
-  onClick = defaultEvent,
+  events = defaultEvent,
   config: {
     show,
     style,
@@ -226,42 +226,48 @@ const Label: (
     (isVertical ? coordinate : tickSize * directionY) + translateY * directionY;
 
   const _style = style && (typeof style == "object" ? style : style(_label));
- 
+
   return (
-      <foreignObject
-        width="1"
-        height="1"
-        // x={x}
-        // y={y}
-        style={{ overflow: "visible" }}
+    <foreignObject
+      width="1"
+      height="1"
+      // x={x}
+      // y={y}
+      style={{ overflow: "visible" }}
+    >
+      <div
+        className={className}
+        onClick={(e) => events(e, "click")}
+        data-data={JSON.stringify({ x: label })}
+        style={{
+          ..._style,
+          ...getFontStyle(font),
+          /** Safari Bug **/
+          position: "absolute",
+          cursor: "pointer",
+          left: x + (isIOS ? iosX : 0),
+          top: y + (isIOS ? iosY : 0),
+        }}
       >
-        <div
-          className={className}
-          onClick={onClick}
-          data-data={JSON.stringify({ x: label })}
+        <TextOverflow
+          ShowType="normal"
+          type={textOverflow}
+          speed={speed}
+          value={_label}
           style={{
-            ..._style,
-            ...getFontStyle(font),
-            /** Safari Bug **/
-            position:"absolute",
-            cursor:"pointer",
-            left:x+(isIOS?iosX:0),
-            top:y+(isIOS?iosY:0)
+            width,
+            transform,
+            textAlign,
+            justifyContent:
+              textAlign == "left"
+                ? "flex-start"
+                : textAlign == "right"
+                ? "flex-end"
+                : "center",
           }}
-        >
-          <TextOverflow
-            type={textOverflow}
-            speed={speed}
-            value={_label}
-            style={{
-              width,
-              transform,
-              textAlign,
-              justifyContent: textAlign=="left"?"flex-start":textAlign=="right"?"flex-end":"center",
-            }}
-          ></TextOverflow>
-        </div>
-      </foreignObject>
+        ></TextOverflow>
+      </div>
+    </foreignObject>
   );
 };
 
@@ -275,9 +281,9 @@ export default memo(
         ticks,
         formatter,
         rotate,
-        triggerClick,
+        triggerEvents,
         config: { on, label, axisLine, tickLine, gridLine, unit },
-        margin:{ marginLeft, marginTop },
+        margin: { marginLeft, marginTop },
         positions,
         xLineRange,
         dataUnit,
@@ -297,8 +303,8 @@ export default memo(
       const { width, height, isIOS } = useContext(chartContext);
       const { cHeight, isC, cPercent } = controlInfo;
       const x = orientation == "right" ? width : 0;
-      const y = orientation == "bottom" ? height-cHeight : 0;
-      
+      const y = orientation == "bottom" ? height - cHeight : 0;
+
       function drawAxisTickLine() {
         const draw = (ticks: any, scaler: any) => {
           return ticks.map((tick: string, index: number) => {
@@ -318,7 +324,9 @@ export default memo(
             const y1 = gridCoord.y1;
             return (
               !(
-                (orientation == "bottom" && !isC && (x1 < 0 || x1 > xLineRange)) ||
+                (orientation == "bottom" &&
+                  !isC &&
+                  (x1 < 0 || x1 > xLineRange)) ||
                 y1 < 0 ||
                 y1 > yLineRange
               ) && (
@@ -336,7 +344,7 @@ export default memo(
             );
           });
         };
-        
+
         if (isClipAxis) {
           return (
             <>
@@ -347,7 +355,7 @@ export default memo(
           );
         } else if (isC && orientation == "bottom") {
           return <>{draw(rawTicks, scaler)}</>;
-        }else {
+        } else {
           return <>{draw(ticks, scaler)}</>;
         }
       }
@@ -380,13 +388,13 @@ export default memo(
                       className="__easyv-label"
                       orientation={orientation}
                       coordinate={coordinate}
-                      iosTrans = {{ isIOS, x:marginLeft+x ,y:marginTop+y }}
+                      iosTrans={{ isIOS, x: marginLeft + x, y: marginTop + y }}
                       config={label}
                       label={tick}
                       tickSize={_tickSize}
                       formatter={formatter}
                       rotate={rotate}
-                      onClick={triggerClick}
+                      events={triggerEvents}
                     />
                   )}
                   {gridLine && (
@@ -429,7 +437,7 @@ export default memo(
                     >
                       <AxisLine
                         orientation={orientation}
-                        config={{...axisLine,cHeight}}
+                        config={{ ...axisLine, cHeight }}
                         range={range}
                       />
                       {tickLine &&
@@ -473,7 +481,7 @@ export default memo(
                   <g transform={"translate(" + x + ", " + y + ")"}>
                     <AxisLine
                       orientation={orientation}
-                      config={{...axisLine,cHeight}}
+                      config={{ ...axisLine, cHeight }}
                       isClipAxis={isClipAxis}
                       clipAxisRange={clipAxisRange}
                       cPercent={cPercent}
@@ -487,23 +495,24 @@ export default memo(
           <svg
             width={width}
             style={{
-              overflow:
-                axisType === "x" && isC ? "hidden":"visible",
+              overflow: axisType === "x" && isC ? "hidden" : "visible",
             }}
           >
             <g transform={"translate(" + x + ", " + y + ")"}>
               {/* 用于控制图 */}
               <g ref={ref as any}>
                 {label && gridLine && drawLabel()}
-                {isC && <AxisLine
-                      orientation={orientation}
-                      config={{...axisLine,cHeight}}
-                      isClipAxis={isClipAxis}
-                      clipAxisRange={clipAxisRange}
-                      cPercent={cPercent}
-                    />}
+                {isC && (
+                  <AxisLine
+                    orientation={orientation}
+                    config={{ ...axisLine, cHeight }}
+                    isClipAxis={isClipAxis}
+                    clipAxisRange={clipAxisRange}
+                    cPercent={cPercent}
+                  />
+                )}
                 {isC && tickLine && drawAxisTickLine()}
-                {unit && <Unit config={unit} dataUnit={dataUnit}/>}
+                {unit && <Unit config={unit} dataUnit={dataUnit} />}
               </g>
             </g>
           </svg>