@easyv/charts 1.3.8 → 1.3.10

package/lib/components/Band.js

@@ -102,6 +102,7 @@ var _default = /*#__PURE__*/(0, _react.memo)(function (_ref3) {
       showHighlight = _ref3$config$highligh.show,
       extent = _ref3$config$highligh.extent,
       highlightFill = _ref3$config$highligh.fill,
+      headDecorate = _ref3$config.headDecorate,
       _ref3$bandLength = _ref3.bandLength,
       bandLength = _ref3$bandLength === void 0 ? 0 : _ref3$bandLength,
       data = _ref3.data,
@@ -142,6 +143,12 @@ var _default = /*#__PURE__*/(0, _react.memo)(function (_ref3) {
     var y1 = yScaler(isVertical ? end : start);
     var y2 = yScaler(isVertical ? start : end);
     var positionX = xScaler(x) - step / 2 + seriesStart + index * seriesStep;
+    var showHead, headUrl, headWidth, headHeight, headTranslate;
+
+    if (headDecorate) {
+      showHead = headDecorate.show, headUrl = headDecorate.url, headWidth = headDecorate.size.width, headHeight = headDecorate.size.height, headTranslate = headDecorate.headTranslate;
+    }
+
     if (isNaN(positionX)) return null;
     var positionY = y < 0 ? y1 : y2;
     var attr = getAttr({
@@ -152,10 +159,24 @@ var _default = /*#__PURE__*/(0, _react.memo)(function (_ref3) {
       seriesWidth: seriesWidth
     });
     return /*#__PURE__*/_react["default"].createElement("foreignObject", (0, _extends2["default"])({
-      key: i
+      key: i,
+      style: {
+        overflow: "visible",
+        position: "relative"
+      }
     }, attr, {
       onClick: triggerClick,
       "data-data": JSON.stringify(data)
+    }), headUrl && showHead && /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        position: "absolute",
+        background: "url(".concat(window.appConfig.ASSETS_URL + headUrl, ") 0 0/100% 100%"),
+        width: headWidth,
+        height: headHeight,
+        left: "50%",
+        zIndex: 1,
+        transform: "translate(calc(-50% + ".concat(headTranslate.x, "px), ").concat(headTranslate.y, "px)")
+      }
     }), /*#__PURE__*/_react["default"].createElement("div", {
       style: {
         width: '100%',

package/lib/components/CartesianChart.js

@@ -136,7 +136,7 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     axis: axisX,
     config: background,
     bandLength: bandLength
-  }), (0, _toConsumableArray2["default"])(axes.values()).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

package/lib/components/Label.js

@@ -49,17 +49,18 @@ var _default = /*#__PURE__*/(0, _react.memo)(function (_ref) {
 
   var _useContext = (0, _react.useContext)(_context.chartContext),
       width = _useContext.width,
-      height = _useContext.height; // const { seriesStep, seriesWidth, seriesStart } = getSeriesInfo({
-  //   step,
-  //   bandLength,
-  //   paddingInner,
-  //   paddingOuter,
-  // });
+      height = _useContext.height;
+
+  var _getSeriesInfo = (0, _utils.getSeriesInfo)({
+    step: step,
+    bandLength: bandLength,
+    paddingInner: paddingInner,
+    paddingOuter: paddingOuter
+  }),
+      seriesStep = _getSeriesInfo.seriesStep,
+      seriesWidth = _getSeriesInfo.seriesWidth,
+      seriesStart = _getSeriesInfo.seriesStart;
 
-
-  var seriesStep = (1 + paddingInner) * step,
-      seriesWidth = step,
-      seriesStart = paddingOuter * step;
   var isVertical = direction === 'vertical';
   var _position = label.position;
   return /*#__PURE__*/React.createElement("g", {

package/lib/components/Line.js

@@ -120,6 +120,7 @@ var _default = /*#__PURE__*/(0, _react.memo)(function (_ref6) {
       curve = _ref6$config$line.curve,
       tension = _ref6$config$line.tension,
       connectNulls = _ref6$config$line.connectNulls,
+      lineShadow = _ref6$config$line.lineShadow,
       lighter = _ref6$config$line.lighter,
       _ref6$line = _ref6.line,
       lineId = _ref6$line.id,
@@ -169,11 +170,16 @@ var _default = /*#__PURE__*/(0, _react.memo)(function (_ref6) {
   }, [direction, xScaler, yScaler, tension, curve]);
   var path = lineGen(_data);
   var showLighter = lighter && lighter.show;
+  var show = lineShadow && lineShadow.show;
+  var shadow = lineShadow && lineShadow.shadow;
   return /*#__PURE__*/_react["default"].createElement("g", {
     className: "__easyv-line"
   }, /*#__PURE__*/_react["default"].createElement("path", {
     d: path,
     stroke: stroke,
+    style: {
+      filter: show ? "drop-shadow(".concat(shadow.hShadow, "px ").concat(shadow.vShadow, "px ").concat(shadow.blur, "px ").concat(shadow.color, ")") : "none"
+    },
     fill: "none",
     strokeDasharray: lineType === 'dash' ? '3 3' : null,
     strokeWidth: lineWidth

package/package.json

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

package/src/components/Axis.tsx

@@ -89,8 +89,8 @@ const getLayout: (
   }
 };
 const AxisLine: ({
-  orientation: Orientation,
-  config: ChartLine,
+  orientation,
+  config,
 }: any) => ReactComponentElement<ComponentType> | null = ({
   orientation = defaultOrientation,
   config: { show, color, lineWidth },
@@ -108,11 +108,11 @@ const AxisLine: ({
 
 const Unit: ({
   config: {
-    show: boolean,
-    text: string,
-    font: Font,
-    translate: Translate,
-    align: Align,
+    show,
+    text,
+    font,
+    translate,
+    align,
   },
 }: any) => ReactComponentElement<ComponentType> | null = ({
   config: {

package/src/components/Band.tsx

@@ -78,6 +78,7 @@ export default memo(
       fill,
       opacity,
       highlight: { show: showHighlight, extent, fill: highlightFill },
+      headDecorate
     },
     bandLength = 0,
     data,
@@ -115,6 +116,15 @@ export default memo(
             const positionX =
               xScaler(x) - step / 2 + seriesStart + index * seriesStep;
 
+            let showHead , headUrl, headWidth, headHeight, headTranslate;
+            if(headDecorate){
+              showHead = headDecorate.show,
+              headUrl = headDecorate.url,
+              headWidth = headDecorate.size.width,
+              headHeight = headDecorate.size.height,
+              headTranslate = headDecorate.headTranslate;
+            }
+
             if (isNaN(positionX)) return null;
             const positionY = y < 0 ? y1 : y2;
             const attr = getAttr({
@@ -124,14 +134,26 @@ export default memo(
               length: Math.abs(y1 - y2),
               seriesWidth,
             });
-
             return (
               <foreignObject
                 key={i}
+                style={{
+                  overflow:"visible",
+                  position:"relative"
+                }}
                 {...attr}
                 onClick={triggerClick}
                 data-data={JSON.stringify(data)}
               >
+                {headUrl && showHead && <div style={{
+                  position:"absolute",
+                  background:`url(${window.appConfig.ASSETS_URL+headUrl}) 0 0/100% 100%`,
+                  width:headWidth,
+                  height:headHeight,
+                  left:"50%",
+                  zIndex:1,
+                  transform:`translate(calc(-50% + ${headTranslate.x}px), ${headTranslate.y}px)`
+                }}></div>}
                 <div
                   style={{
                     width: '100%',

package/src/components/CartesianChart.js

@@ -138,7 +138,8 @@ const Chart = memo(
               bandLength={bandLength}
             />
           )}
-          {[...axes.values()].map((item, index) => {
+          
+          {[...axes.values()].reverse().map((item, index) => {
             const config = item.axisType == 'x' ? axisX : item;
             return (
               <Axis triggerClick={onInteraction} {...config} key={index} />
@@ -146,6 +147,7 @@ const Chart = memo(
           })}
 
           {showTooltip && <Indicator {...indicator} {...indicatorAttr} />}
+          
           {series.map(({ Component, yOrZ, ...config }, index) => {
             const yAxis = axes.get(yOrZ);
             return (

package/src/components/Label.js

@@ -27,15 +27,13 @@ export default memo(
     if (!(data.length && (showIcon || showLabel))) return null;
     const { width, height } = useContext(chartContext);
 
-    // const { seriesStep, seriesWidth, seriesStart } = getSeriesInfo({
-    //   step,
-    //   bandLength,
-    //   paddingInner,
-    //   paddingOuter,
-    // });
+    const { seriesStep, seriesWidth, seriesStart } = getSeriesInfo({
+      step,
+      bandLength,
+      paddingInner,
+      paddingOuter,
+    });
 
-    const seriesStep = (1 + paddingInner) * step,
-      seriesWidth = step, seriesStart = paddingOuter * step;
     const isVertical = direction === 'vertical';
     const _position = label.position;
     return (

package/src/components/Line.js

@@ -72,6 +72,7 @@ export default memo(
         curve,
         tension,
         connectNulls,
+        lineShadow,
         lighter,
       },
       // icon,
@@ -119,13 +120,17 @@ export default memo(
     }, [direction, xScaler, yScaler, tension, curve]);
 
     const path = lineGen(_data);
-
     const showLighter = lighter && lighter.show;
+    const show = lineShadow && lineShadow.show;
+    const shadow = lineShadow && lineShadow.shadow;
     return (
       <g className='__easyv-line'>
         <path
           d={path}
           stroke={stroke}
+          style={{
+            filter:show?`drop-shadow(${shadow.hShadow}px ${shadow.vShadow}px ${shadow.blur}px ${shadow.color})`:"none"
+          }}
           fill='none'
           strokeDasharray={lineType === 'dash' ? '3 3' : null}
           strokeWidth={lineWidth}