@easyv/charts 1.8.24 → 1.8.26

package/lib/components/Axis.js

@@ -168,8 +168,8 @@ var Label = function Label(_ref5) {
     _ref5$rotate = _ref5.rotate,
     rotate = _ref5$rotate === void 0 ? 0 : _ref5$rotate,
     config = _ref5.config,
-    _ref5$onClick = _ref5.onClick,
-    onClick = _ref5$onClick === void 0 ? defaultEvent : _ref5$onClick,
+    _ref5$events = _ref5.events,
+    events = _ref5$events === void 0 ? defaultEvent : _ref5$events,
     _ref5$config = _ref5.config,
     show = _ref5$config.show,
     style = _ref5$config.style,
@@ -205,7 +205,9 @@ var Label = function Label(_ref5) {
     }
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: className,
-    onClick: onClick,
+    onClick: function onClick(e) {
+      return events(e, "click");
+    },
     "data-data": JSON.stringify({
       x: label
     }),
@@ -217,6 +219,7 @@ var Label = function Label(_ref5) {
       top: y + (isIOS ? iosY : 0)
     })
   }, /*#__PURE__*/_react["default"].createElement(_TextOverflow["default"], {
+    ShowType: "normal",
     type: textOverflow,
     speed: speed,
     value: _label,
@@ -236,7 +239,7 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(/*#__PURE__*/(
     ticks = _ref6.ticks,
     formatter = _ref6.formatter,
     rotate = _ref6.rotate,
-    triggerClick = _ref6.triggerClick,
+    triggerEvents = _ref6.triggerEvents,
     _ref6$config = _ref6.config,
     on = _ref6$config.on,
     label = _ref6$config.label,
@@ -331,7 +334,7 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(/*#__PURE__*/(
           tickSize: _tickSize,
           formatter: formatter,
           rotate: rotate,
-          onClick: triggerClick
+          events: triggerEvents
         }), gridLine && /*#__PURE__*/_react["default"].createElement(_element.Line, (0, _extends2["default"])({
           className: "__easyv-gridLine",
           config: gridLine

package/lib/components/Band.js

@@ -88,7 +88,7 @@ var getBorderRadius = function getBorderRadius(_ref2) {
   return isVertical ? positive ? "0px " + seriesWidth + "px " + seriesWidth + "px 0" : seriesWidth + "px 0 0 " + seriesWidth + "px" : positive ? seriesWidth / 2 + "px " + seriesWidth / 2 + "px 0 0" : "0 0 " + seriesWidth / 2 + "px " + seriesWidth / 2 + "px";
 };
 var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref3) {
-  var triggerClick = _ref3.triggerClick,
+  var triggerEvents = _ref3.triggerEvents,
     indicatorWidth = _ref3.indicatorWidth,
     _ref3$isControlChart = _ref3.isControlChart,
     isControlChart = _ref3$isControlChart === void 0 ? false : _ref3$isControlChart,
@@ -243,7 +243,10 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
       }
     }, bgAttr, {
       onClick: function onClick(e) {
-        return triggerClick(e, "setCurrent");
+        return triggerEvents ? triggerEvents(e, "setCurrent") : "";
+      },
+      onMouseMove: function onMouseMove(e) {
+        return triggerEvents ? triggerEvents(e, "mouseenter") : "";
       },
       onMouseEnter: function onMouseEnter() {
         if (isControlChart) {
@@ -265,7 +268,8 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
           });
         }
       },
-      onMouseLeave: function onMouseLeave() {
+      onMouseLeave: function onMouseLeave(e) {
+        triggerEvents ? triggerEvents(e, "mouseleave") : "";
         if (isControlChart && !auto) {
           setCtlTip(function (pre) {
             return {

package/lib/components/CartesianChart.js

@@ -81,6 +81,8 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     curXLabel = _useState4[0],
     setCurXLabel = _useState4[1];
   var isIOS = context.isIOS,
+    scale = context.scale,
+    screenPos = context.screenPos,
     chartWidth = context.width,
     chartHeight = context.height,
     triggerOnRelative = context.triggerOnRelative,
@@ -265,16 +267,32 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
   };
   var onInteraction = (0, _react.useCallback)(function (e, type) {
     e.stopPropagation();
+    var _e$nativeEvent = e.nativeEvent,
+      pageX = _e$nativeEvent.pageX,
+      pageY = _e$nativeEvent.pageY;
     var data = e.currentTarget.dataset.data;
     var _data = JSON.parse(data);
+    var _scale$current = (0, _slicedToArray2["default"])(scale.current, 2),
+      scaleX = _scale$current[0],
+      scaleY = _scale$current[1];
+    var _screenPos$current = screenPos.current,
+      left = _screenPos$current.left,
+      top = _screenPos$current.top;
+    var eventData = _objectSpread(_objectSpread({}, _data), {}, {
+      xPos: (pageX - left) * scaleX,
+      yPos: (pageY - top) * scaleY
+    });
     if (type == "setCurrent") {
       setCurXLabel(function (pre) {
         return pre == _data.x ? "" : _data.x;
       });
+      triggerOnRelative("click", eventData);
+      onEmit("click", eventData);
+    } else {
+      triggerOnRelative(type, eventData);
+      onEmit(type, eventData);
     }
-    triggerOnRelative('click', _data);
-    onEmit("click", _data);
-  }, [triggerOnRelative, onEmit]);
+  }, [triggerOnRelative, onEmit, scale]);
 
   /**
    * 控制图相关
@@ -538,7 +556,7 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
       ref: function ref(d) {
         axisElList.current[index] = d;
       },
-      triggerClick: onInteraction,
+      triggerEvents: onInteraction,
       xLineRange: xLineRange,
       yLineRange: yLineRange,
       controlInfo: controlInfo,
@@ -601,7 +619,7 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
       ,
       isControlChart: !!control,
       indicatorWidth: indicatorWidth,
-      triggerClick: onInteraction,
+      triggerEvents: onInteraction,
       setCtlTip: setCtlTip,
       isXRepeat: isXRepeat
     }));
@@ -620,7 +638,8 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
       bandLength: bandLength,
       xAxis: axisX,
       yAxis: yAxis,
-      triggerClick: onInteraction
+      triggerEvents: onInteraction,
+      isControlChart: !!control
     }));
   }), /*#__PURE__*/_react["default"].createElement("g", null, control && zIndex != "bottom" && ctlIndicatorList.map(function (item, index) {
     var x = axisX.scaler(item.tick);

package/lib/components/Chart.js

@@ -30,7 +30,7 @@ var getCallbackData = function getCallbackData(action, callbacks, data) {
         target = _ref.target,
         _action = _ref.actions;
       if (action === _action) {
-        callbackData[target] = data[origin];
+        callbackData[target] = origin ? data[origin] : data;
       }
     });
   }
@@ -64,19 +64,23 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref2) {
     active = _useState2[0],
     setActive = _useState2[1];
   var scaleRef = (0, _react.useRef)([1, 1]);
+  var screenPosRef = (0, _react.useRef)({
+    left: 0,
+    top: 0
+  });
   var triggerOnRelative = (0, _react.useCallback)(function (action, data) {
     if (!interaction) return;
     var callbacks = interaction.callbacks,
       remoteControls = interaction.remoteControls;
     var callbackData = getCallbackData(action, callbacks, data);
-    if (JSON.stringify(callbackData) != "{}") {
+    if (Object.keys(callbackData).length > 0) {
       onRelative && onRelative(id, callbackData);
       remoteControls && emitEvent && remoteControls.forEach(function (o) {
         var control = JSON.parse(o.control);
-        if (control.screen && control.type && control.type === 'callback') {
+        if (control.screen && control.type && control.type === "callback") {
           emitEvent({
             screen: control.screen,
-            type: 'callback',
+            type: "callback",
             callbackData: callbackData
           });
         }
@@ -84,7 +88,7 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref2) {
     }
   }, [JSON.stringify(interaction)]);
   var onEmit = (0, _react.useCallback)(function () {
-    var type = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'click';
+    var type = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "click";
     var data = arguments.length > 1 ? arguments[1] : undefined;
     return emit && emit(type, data);
   }, [emit]);
@@ -95,6 +99,8 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref2) {
       //是否为IOS设备
       scale: scaleRef,
       //大屏的缩放比
+      screenPos: screenPosRef,
+      //大屏的偏移位置
       width: chartWidth,
       height: chartHeight,
       triggerOnRelative: triggerOnRelative,
@@ -121,7 +127,7 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref2) {
   var data = checkData(originData);
   return /*#__PURE__*/_react["default"].createElement(_context.chartContext.Provider, {
     value: context
-  }, type == 'pie' ? /*#__PURE__*/_react["default"].createElement(_.PieChart, (0, _extends2["default"])({
+  }, type == "pie" ? /*#__PURE__*/_react["default"].createElement(_.PieChart, (0, _extends2["default"])({
     id: id,
     config: config,
     data: data,
@@ -142,8 +148,12 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref2) {
         var scale = transform ? transform.match(/^scale\((.+)\)$/)[1] : "1,1";
         var arr = scale.split(",");
         scaleRef.current = [1 / arr[0], 1 / (arr.length === 1 ? arr[0] : arr[1])]; //这里做一次除法，后面就可以用乘法计算值了
+        screenPosRef.current = {
+          left: parseFloat(dom.style.left),
+          top: parseFloat(dom.style.top)
+        };
       }
-    }, 50);
+    }, 100);
   }
   //预检数据格式是否规范
   function checkData(data) {

package/lib/components/Label.js

@@ -51,7 +51,7 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
     _ref$config$paddingIn = _ref$config.paddingInner,
     paddingOuter = _ref$config$paddingIn === void 0 ? 0 : _ref$config$paddingIn,
     _ref$config$showType = _ref$config.showType,
-    seriesType = _ref$config$showType === void 0 ? 'bar' : _ref$config$showType,
+    seriesType = _ref$config$showType === void 0 ? "bar" : _ref$config$showType,
     _ref$config$highlight = _ref$config.highlight,
     _ref$config$highlight2 = _ref$config$highlight === void 0 ? {} : _ref$config$highlight,
     showHighlight = _ref$config$highlight2.show,
@@ -65,14 +65,19 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
     bandLength = _ref$bandLength === void 0 ? 0 : _ref$bandLength,
     data = _ref.data,
     _ref$xAxis = _ref.xAxis,
-    xScaler = _ref$xAxis.scaler,
-    step = _ref$xAxis.step,
+    normalScaler = _ref$xAxis.scaler,
+    normalStep = _ref$xAxis.step,
     direction = _ref$xAxis.direction,
+    controlStep = _ref$xAxis.controlStep,
+    controlDragScaler = _ref$xAxis.controlDragScaler,
     _ref$yAxis = _ref.yAxis,
     yScaler = _ref$yAxis.scaler,
     isClipAxis = _ref$yAxis.isClipAxis,
     clipValue = _ref$yAxis.clipValue,
-    triggerClick = _ref.triggerClick;
+    triggerEvents = _ref.triggerEvents,
+    isControlChart = _ref.isControlChart;
+  var step = isControlChart ? controlStep : normalStep;
+  var xScaler = isControlChart ? controlDragScaler : normalScaler;
   var selectConfig = other;
   if (selectStyle) {
     var show = selectStyle.show,
@@ -183,7 +188,13 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
     return /*#__PURE__*/React.createElement("g", {
       key: i,
       onClick: function onClick(e) {
-        return triggerClick(e, "setCurrent");
+        return triggerEvents(e, "setCurrent");
+      },
+      onMouseMove: function onMouseMove(e) {
+        return triggerEvents(e, "mouseenter");
+      },
+      onMouseLeave: function onMouseLeave(e) {
+        return triggerEvents(e, "mouseleave");
       },
       style: {
         cursor: "pointer"

package/lib/components/Line.js

@@ -47,7 +47,8 @@ var Area = function Area(_ref) {
     curve = _ref$config.curve,
     tension = _ref$config.tension,
     xScaler = _ref.xScaler,
-    yScaler = _ref.yScaler;
+    yScaler = _ref.yScaler,
+    Areaopacity = _ref.opacity;
   var _yScaler$range = yScaler.range(),
     _yScaler$range2 = (0, _slicedToArray2["default"])(_yScaler$range, 1),
     height = _yScaler$range2[0];
@@ -72,7 +73,8 @@ var Area = function Area(_ref) {
   return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("path", {
     d: areaGen(data),
     style: {
-      pointerEvents: "none"
+      pointerEvents: "none",
+      opacity: Areaopacity
     },
     stroke: "none",
     fill: 'url(#' + id + ')'
@@ -94,7 +96,9 @@ var Area = function Area(_ref) {
 };
 var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
   var type = _ref5.type,
-    _ref5$config$line = _ref5.config.line,
+    _ref5$config = _ref5.config,
+    opacity = _ref5$config.areaColor.linear.opacity,
+    _ref5$config$line = _ref5$config.line,
     lineType = _ref5$config$line.type,
     lineWidth = _ref5$config$line.lineWidth,
     curve = _ref5$config$line.curve,
@@ -169,7 +173,8 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
       tension: tension
     }),
     xScaler: xScaler,
-    yScaler: yScaler
+    yScaler: yScaler,
+    opacity: opacity
   }), showLighter && /*#__PURE__*/_react["default"].createElement(_.Lighter, {
     path: path,
     config: lighter

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@easyv/charts",
-  "version": "1.8.24",
+  "version": "1.8.26",
   "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>