@easyv/charts 1.3.34 → 1.3.36

package/lib/components/Axis.js

@@ -244,7 +244,9 @@ var _default = /*#__PURE__*/(0, _react.memo)(function (_ref6) {
       tickLine = _ref6$config.tickLine,
       gridLine = _ref6$config.gridLine,
       unit = _ref6$config.unit,
-      positions = _ref6.positions;
+      positions = _ref6.positions,
+      xLineRange = _ref6.xLineRange,
+      yLineRange = _ref6.yLineRange;
   if (!(on && ticks.length > 0)) return null;
 
   var _useContext = (0, _react.useContext)(_context.chartContext),
@@ -268,7 +270,14 @@ var _default = /*#__PURE__*/(0, _react.memo)(function (_ref6) {
 
       var _tickSize = tickLine.tickSize || tickSize;
 
-      return /*#__PURE__*/_react["default"].createElement(_element.Line, (0, _extends2["default"])({
+      var gridCoord = (0, _utils.getGridCoord)({
+        orientation: orientation,
+        coordinate: coordinate,
+        end: orientation == 'left' || orientation == 'right' ? width : height
+      });
+      var x1 = gridCoord.x1;
+      var y1 = gridCoord.y1;
+      return !(orientation == "bottom" && (x1 < 0 || x1 > xLineRange) || y1 < 0 || y1 > yLineRange) && /*#__PURE__*/_react["default"].createElement(_element.Line, (0, _extends2["default"])({
         className: "__easyv-tickLine",
         key: index,
         config: tickLine
@@ -289,7 +298,14 @@ var _default = /*#__PURE__*/(0, _react.memo)(function (_ref6) {
 
     var _tickSize = tickLine.tickSize || tickSize;
 
-    return /*#__PURE__*/_react["default"].createElement(_element.Line, (0, _extends2["default"])({
+    var gridCoord = (0, _utils.getGridCoord)({
+      orientation: orientation,
+      coordinate: coordinate,
+      end: orientation == 'left' || orientation == 'right' ? width : height
+    });
+    var x1 = gridCoord.x1;
+    var y1 = gridCoord.y1;
+    return !(orientation == "bottom" && (x1 < 0 || x1 > xLineRange) || y1 < 0 || y1 > yLineRange) && /*#__PURE__*/_react["default"].createElement(_element.Line, (0, _extends2["default"])({
       className: "__easyv-tickLine",
       key: index,
       config: tickLine
@@ -306,7 +322,14 @@ var _default = /*#__PURE__*/(0, _react.memo)(function (_ref6) {
 
     var _tickSize = tickLine.tickSize || tickSize;
 
-    return /*#__PURE__*/_react["default"].createElement("g", {
+    var gridCoord = (0, _utils.getGridCoord)({
+      orientation: orientation,
+      coordinate: coordinate,
+      end: orientation == 'left' || orientation == 'right' ? width : height
+    });
+    var x1 = gridCoord.x1;
+    var y1 = gridCoord.y1;
+    return !(orientation == "bottom" && (x1 < 0 || x1 > xLineRange) || y1 < 0 || y1 > yLineRange) && /*#__PURE__*/_react["default"].createElement("g", {
       key: index
     }, label && /*#__PURE__*/_react["default"].createElement(Label, {
       className: "__easyv-label",
@@ -321,11 +344,7 @@ var _default = /*#__PURE__*/(0, _react.memo)(function (_ref6) {
     }), gridLine && /*#__PURE__*/_react["default"].createElement(_element.Line, (0, _extends2["default"])({
       className: "__easyv-gridLine",
       config: gridLine
-    }, (0, _utils.getGridCoord)({
-      orientation: orientation,
-      coordinate: coordinate,
-      end: orientation == 'left' || orientation == 'right' ? width : height
-    }))));
+    }, gridCoord)));
   }), unit && /*#__PURE__*/_react["default"].createElement(Unit, {
     config: unit
   })));

package/lib/components/CartesianChart.js

@@ -43,6 +43,8 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
       _ref$config$chart$mar = _ref$config$chart.margin,
       marginLeft = _ref$config$chart$mar.marginLeft,
       marginTop = _ref$config$chart$mar.marginTop,
+      marginRight = _ref$config$chart$mar.marginRight,
+      marginBottom = _ref$config$chart$mar.marginBottom,
       animation = _ref$config$chart.animation,
       legend = _ref$config$chart.legend,
       series = _ref$config.series,
@@ -88,6 +90,8 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     context: context
   });
   var axisX = (0, _hooks.useCarouselAxisX)(axes.get('x'), animation, isHover);
+  var xLineRange = width - marginLeft - marginRight;
+  var yLineRange = height - marginTop - marginBottom;
 
   var _useTooltip = (0, _hooks.useTooltip)({
     svg: svg,
@@ -144,19 +148,37 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
       setIndex(e);
     },
     ref: svg
-  }, background && /*#__PURE__*/_react["default"].createElement(_.Background, {
+  }, background && /*#__PURE__*/_react["default"].createElement("foreignObject", {
+    style: {
+      width: xLineRange,
+      height: yLineRange
+    }
+  }, /*#__PURE__*/_react["default"].createElement("svg", {
+    width: "100%",
+    height: "100%"
+  }, /*#__PURE__*/_react["default"].createElement(_.Background, {
     length: isVertical ? chartWidth : chartHeight,
     axis: axisX,
     config: background,
     bandLength: bandLength
-  }), (0, _toConsumableArray2["default"])(axes.values()).reverse().map(function (item, index) {
+  }))), (0, _toConsumableArray2["default"])(axes.values()).reverse().map(function (item, index) {
     var config = item.axisType == 'x' ? axisX : item;
     return /*#__PURE__*/_react["default"].createElement(_.Axis, (0, _extends2["default"])({
-      triggerClick: onInteraction
+      triggerClick: onInteraction,
+      xLineRange: xLineRange,
+      yLineRange: yLineRange
     }, config, {
       key: index
     }));
-  }), showTooltip && /*#__PURE__*/_react["default"].createElement(_.Indicator, (0, _extends2["default"])({}, indicator, indicatorAttr)), series.map(function (_ref2, index) {
+  }), showTooltip && /*#__PURE__*/_react["default"].createElement(_.Indicator, (0, _extends2["default"])({}, indicator, indicatorAttr)), /*#__PURE__*/_react["default"].createElement("foreignObject", {
+    style: {
+      width: xLineRange,
+      height: yLineRange
+    }
+  }, /*#__PURE__*/_react["default"].createElement("svg", {
+    width: "100%",
+    height: "100%"
+  }, series.map(function (_ref2, index) {
     var Component = _ref2.Component,
         yOrZ = _ref2.yOrZ,
         config = (0, _objectWithoutProperties2["default"])(_ref2, _excluded);
@@ -182,7 +204,7 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
       yAxis: yAxis,
       triggerClick: onInteraction
     }));
-  }), baseLineData && baseLineData.length > 0 && baseLineData.map(function (item, index) {
+  }))), baseLineData && baseLineData.length > 0 && baseLineData.map(function (item, index) {
     var yOrZ = baseLineConfig[index].line.yOrZ;
     var yAxis = axes.get(yOrZ);
     return yAxis && /*#__PURE__*/_react["default"].createElement(_.BaseLine, {

package/package.json

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

package/src/components/Axis.tsx

@@ -229,11 +229,14 @@ export default memo(
     triggerClick,
     config: { on, label, axisLine, tickLine, gridLine, unit },
     positions,
+    xLineRange,
+    yLineRange
   }: any) => {
     if (!(on && ticks.length > 0)) return null;
     const { width, height } = useContext(chartContext);
     const x = orientation == 'right' ? width : 0;
     const y = orientation == 'bottom' ? height : 0;
+
     return (
       <>
         {axisLine && tickLine && (
@@ -248,8 +251,18 @@ export default memo(
                         const coordinate = scaler(tick);
                         if (isNaN(coordinate)) return null;
                         const _tickSize = tickLine.tickSize || tickSize;
+                        const gridCoord = getGridCoord({
+                          orientation,
+                          coordinate,
+                          end:
+                            orientation == 'left' || orientation == 'right'
+                              ? width
+                              : height,
+                        });
+                        const x1 = gridCoord.x1;
+                        const y1 = gridCoord.y1;
                         return (
-                          <Line
+                          !(orientation=="bottom" && (x1<0 || x1>xLineRange) || (y1<0 || y1>yLineRange) ) && <Line
                             className='__easyv-tickLine'
                             key={index}
                             config={tickLine}
@@ -271,8 +284,18 @@ export default memo(
                       const coordinate = scaler(tick);
                       if (isNaN(coordinate)) return null;
                       const _tickSize = tickLine.tickSize || tickSize;
+                      const gridCoord = getGridCoord({
+                        orientation,
+                        coordinate,
+                        end:
+                          orientation == 'left' || orientation == 'right'
+                            ? width
+                            : height,
+                      });
+                      const x1 = gridCoord.x1;
+                      const y1 = gridCoord.y1;
                       return (
-                        <Line
+                        !(orientation=="bottom" && (x1<0 || x1>xLineRange) || (y1<0 || y1>yLineRange)) && <Line
                           className='__easyv-tickLine'
                           key={index}
                           config={tickLine}
@@ -295,8 +318,18 @@ export default memo(
               const coordinate = scaler(tick);
               if (isNaN(coordinate)) return null;
               const _tickSize = tickLine.tickSize || tickSize;
+              const gridCoord = getGridCoord({
+                orientation,
+                coordinate,
+                end:
+                  orientation == 'left' || orientation == 'right'
+                    ? width
+                    : height,
+              });
+              const x1 = gridCoord.x1;
+              const y1 = gridCoord.y1;
               return (
-                <g key={index}>
+                !(orientation=="bottom" && (x1<0 || x1>xLineRange) || (y1<0 || y1>yLineRange)) && <g key={index}>
                   {label && (
                     <Label
                       className='__easyv-label'
@@ -314,14 +347,7 @@ export default memo(
                     <Line
                       className='__easyv-gridLine'
                       config={gridLine}
-                      {...getGridCoord({
-                        orientation,
-                        coordinate,
-                        end:
-                          orientation == 'left' || orientation == 'right'
-                            ? width
-                            : height,
-                      })}
+                      {...gridCoord}
                     />
                   )}
                 </g>

package/src/components/CartesianChart.js

@@ -37,7 +37,7 @@ const Chart = memo(
         dimension: {
           chartDimension: { height, width },
         },
-        margin: { marginLeft, marginTop },
+        margin: { marginLeft, marginTop, marginRight, marginBottom },
         animation,
         legend,
       },
@@ -71,6 +71,8 @@ const Chart = memo(
     const svg = createRef();
     const axes = useAxes({ axes: axesConfig, context });
     const axisX = useCarouselAxisX(axes.get('x'), animation, isHover);
+    const xLineRange = width-marginLeft-marginRight;
+    const yLineRange = height-marginTop-marginBottom;
 
     const {
       x: tooltipX,
@@ -133,53 +135,66 @@ const Chart = memo(
           ref={svg}
         >
           {background && (
-            <Background
-              length={isVertical ? chartWidth : chartHeight}
-              axis={axisX}
-              config={background}
-              bandLength={bandLength}
-            />
+            <foreignObject style={{
+              width:xLineRange,
+              height:yLineRange
+            }}>
+              <svg width="100%" height="100%">
+                <Background
+                  length={isVertical ? chartWidth : chartHeight}
+                  axis={axisX}
+                  config={background}
+                  bandLength={bandLength}
+                />
+              </svg>
+            </foreignObject>
           )}
-          {[...axes.values()].reverse().map((item, index) => {
+          {[...axes.values()].reverse().map((item, index) => {         
             const config = item.axisType == 'x' ? axisX : item;
             return (
-              <Axis triggerClick={onInteraction} {...config} key={index} />
+              <Axis triggerClick={onInteraction} xLineRange={xLineRange} yLineRange={yLineRange} {...config} key={index} />
             );
           })}
 
           {showTooltip && <Indicator {...indicator} {...indicatorAttr} />}
-          
-          {series.map(({ Component, yOrZ, ...config }, index) => {
-            const yAxis = axes.get(yOrZ);
-            return (
-              yAxis &&
-              Component && (
-                <Component
-                  key={index}
-                  {...config}
-                  bandLength={bandLength}
-                  xAxis={axisX}
-                  yAxis={yAxis}
-                  triggerClick={onInteraction}
-                />
-              )
-            );
-          })}
-          {series.map(({ Component, yOrZ, ...config }, index) => {
-            const yAxis = axes.get(yOrZ);
-            return (
-              yAxis && (
-                <Label
-                  key={index}
-                  {...config}
-                  bandLength={bandLength}
-                  xAxis={axisX}
-                  yAxis={yAxis}
-                  triggerClick={onInteraction}
-                />
-              )
-            );
-          })}
+          <foreignObject style={{
+            width:xLineRange,
+            height:yLineRange
+          }}>
+            <svg width="100%" height="100%">
+              {series.map(({ Component, yOrZ, ...config }, index) => {
+                const yAxis = axes.get(yOrZ);
+                return (
+                  yAxis &&
+                  Component && (
+                    <Component
+                      key={index}
+                      {...config}
+                      bandLength={bandLength}
+                      xAxis={axisX}
+                      yAxis={yAxis}
+                      triggerClick={onInteraction}
+                    />
+                  )
+                );
+              })}
+              {series.map(({ Component, yOrZ, ...config }, index) => {
+                const yAxis = axes.get(yOrZ);
+                return (
+                  yAxis && (
+                    <Label
+                      key={index}
+                      {...config}
+                      bandLength={bandLength}
+                      xAxis={axisX}
+                      yAxis={yAxis}
+                      triggerClick={onInteraction}
+                    />
+                  )
+                );
+              })}
+            </svg>
+          </foreignObject>
           {baseLineData &&
             baseLineData.length > 0 &&
             baseLineData.map((item, index) => {