@easyv/charts 1.0.72 → 1.0.75

package/lib/components/Band.js

@@ -89,7 +89,11 @@ var _default = /*#__PURE__*/(0, _react.memo)(function (_ref3) {
       _ref3$config$paddingI = _ref3$config.paddingInner,
       paddingOuter = _ref3$config$paddingI === void 0 ? 0 : _ref3$config$paddingI,
       style = _ref3$config.style,
+      fillType = _ref3$config.fillType,
+      url = _ref3$config.url,
+      size = _ref3$config.size,
       fill = _ref3$config.fill,
+      opacity = _ref3$config.opacity,
       _ref3$config$highligh = _ref3$config.highlight,
       showHighlight = _ref3$config$highligh.show,
       extent = _ref3$config$highligh.extent,
@@ -152,7 +156,8 @@ var _default = /*#__PURE__*/(0, _react.memo)(function (_ref3) {
       style: {
         width: '100%',
         height: '100%',
-        background: (0, _utils.getBandBackground)(pattern, extent === flag ? highlightFill : fill),
+        opacity: opacity,
+        background: fillType == 'pattern' ? "50% 50% / ".concat(size.width, "px ").concat(size.height, "px repeat ") + 'url(' + url + ')' : (0, _utils.getBandBackground)(pattern, extent === flag ? highlightFill : fill),
         borderRadius: style == 'square' ? '0 0 0 0' : getBorderRadius({
           isVertical: isVertical,
           positive: y > 0,

package/lib/components/Line.js

@@ -45,9 +45,16 @@ var getLineData = function getLineData(data, connectNulls) {
 
 var Area = function Area(_ref2) {
   var data = _ref2.data,
+      config = _ref2.config,
       _ref2$config = _ref2.config,
       id = _ref2$config.id,
       fill = _ref2$config.fill,
+      type = _ref2$config.type,
+      url = _ref2$config.url,
+      opacity = _ref2$config.opacity,
+      _ref2$config$size = _ref2$config.size,
+      patternW = _ref2$config$size.width,
+      patternH = _ref2$config$size.height,
       curve = _ref2$config.curve,
       tension = _ref2$config.tension,
       xScaler = _ref2.xScaler,
@@ -76,7 +83,17 @@ var Area = function Area(_ref2) {
     d: areaGen(data),
     stroke: "none",
     fill: 'url(#' + id + ')'
-  }), /*#__PURE__*/_react["default"].createElement("defs", null, /*#__PURE__*/_react["default"].createElement(_.LinearGradient, {
+  }), /*#__PURE__*/_react["default"].createElement("defs", null, type && type == 'pattern' ? /*#__PURE__*/_react["default"].createElement("pattern", {
+    id: id,
+    patternUnits: "userSpaceOnUse",
+    width: patternW,
+    height: patternH
+  }, url && /*#__PURE__*/_react["default"].createElement("image", {
+    opacity: opacity,
+    width: patternW,
+    height: patternH,
+    xlinkHref: window.appConfig.ASSETS_URL + url
+  })) : /*#__PURE__*/_react["default"].createElement(_.LinearGradient, {
     id: id,
     colors: area,
     rotate: 0

package/lib/components/PieChart.js

@@ -625,7 +625,8 @@ var Component = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
       textAnchor: "middle",
       style: _objectSpread(_objectSpread({}, categoryTextStyle), {}, {
         fontWeight: categoryTextStyle.bold ? "bold" : "normal",
-        fontStyle: categoryTextStyle.italic ? "italic" : "normal"
+        fontStyle: categoryTextStyle.italic ? "italic" : "normal",
+        pointerEvents: "none"
       }),
       fill: categoryTextStyle.color
     }, /*#__PURE__*/_react["default"].createElement("textPath", {
@@ -647,6 +648,8 @@ var Component = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
     }
   }, /*#__PURE__*/_react["default"].createElement(Current, {
     config: current,
+    width: width,
+    height: height,
     data: _arcs,
     currentIndex: +currentIndex
   })))), decorate && /*#__PURE__*/_react["default"].createElement(_.ConicalGradient, {
@@ -691,6 +694,8 @@ var Current = function Current(_ref9) {
       _ref9$config$value$su2 = _ref9$config$value$su.translate,
       translateSuffixX = _ref9$config$value$su2.x,
       translateSuffixY = _ref9$config$value$su2.y,
+      width = _ref9.width,
+      height = _ref9.height,
       data = _ref9.data,
       currentIndex = _ref9.currentIndex;
 
@@ -720,20 +725,21 @@ var Current = function Current(_ref9) {
   nameList.push(nameTemp);
   var foreignStyle = {
     //foreignObject标签样式，
-    width: "100%",
-    height: "100%",
-    transform: "translate(-50%,-50%)"
+    width: width,
+    height: height,
+    transform: "translate(-".concat(width / 2, "px,-").concat(height / 2, "px)"),
+    pointerEvents: "none"
   },
       boxStyle = {
     //弹性盒子样式，用于当前值的上下居中对齐等
-    width: "100%",
-    height: '100%',
+    width: width,
+    height: height,
     display: "flex",
     flexDirection: "column",
     justifyContent: "center",
     alignItems: "center"
   };
-  return show && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("foreignObject", {
+  return show && /*#__PURE__*/_react["default"].createElement("foreignObject", {
     style: foreignStyle
   }, /*#__PURE__*/_react["default"].createElement("div", {
     style: boxStyle
@@ -767,7 +773,7 @@ var Current = function Current(_ref9) {
     }, (0, _utils.getFontStyle)(percentFont)), {}, {
       margin: gap / 2 + "px 0"
     })
-  }, percent + '%'))));
+  }, percent + '%')));
 };
 
 var Label = function Label(_ref10) {

package/lib/hooks/useAxes.js

@@ -45,7 +45,9 @@ var _default = function _default(_ref) {
     var tmp = new Map();
     var xAxisPositions = [];
     axes.forEach(function (item) {
-      var type = item.type,
+      var _item$config$label$sh = item.config.label.showLast,
+          showLast = _item$config$label$sh === void 0 ? false : _item$config$label$sh,
+          type = item.type,
           orientation = item.orientation,
           ticks = item.ticks,
           _item$tickCount = item.tickCount,
@@ -76,7 +78,7 @@ var _default = function _default(_ref) {
 
       if (type === 'ordinal') {
         if (carousel === false) {
-          _ticks = (0, _utils2.getTicksOfAxis)(_ticks, +tickCount);
+          _ticks = (0, _utils.getTicksOfAxis)(_ticks, +tickCount, showLast);
         }
       } else {
         if (auto === false) {

package/lib/utils/index.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.band = band;
-exports.getDataWithPercent = exports.sortPie = exports.getDomPath = exports.filterChildren = exports.getChildren = exports.isValidHttpUrl = exports.getBandSeriesStepAndWidth = exports.getBandwidth = exports.getBandBackground = exports.getCurrentStack = exports.resetStacks = exports.seriesYOrZ = exports.dataYOrZ = exports.getStacks = exports.getColorList = exports.getIcon = exports.getTranslate2d = exports.getTranslate3d = exports.getMargin = exports.getFontStyle = exports.getMousePos = exports.identity = exports.getGridCoord = exports.getTickCoord = exports.getBreakWord = exports.dateFormat = void 0;
+exports.getDataWithPercent = exports.sortPie = exports.getDomPath = exports.filterChildren = exports.getChildren = exports.isValidHttpUrl = exports.getBandSeriesStepAndWidth = exports.getBandwidth = exports.getBandBackground = exports.getCurrentStack = exports.resetStacks = exports.seriesYOrZ = exports.dataYOrZ = exports.getStacks = exports.getColorList = exports.getIcon = exports.getTranslate2d = exports.getTranslate3d = exports.getMargin = exports.getFontStyle = exports.getMousePos = exports.identity = exports.getGridCoord = exports.getTickCoord = exports.getTicksOfAxis = exports.getBreakWord = exports.dateFormat = void 0;
 
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 
@@ -169,10 +169,33 @@ exports.dateFormat = dateFormat;
 var getBreakWord = function getBreakWord(str, breakNumber) {
   var re = new RegExp('([^]){1,' + breakNumber + '}', 'g');
   return str.match(re);
-};
+}; //x轴标签逻辑
+
 
 exports.getBreakWord = getBreakWord;
 
+var getTicksOfAxis = function getTicksOfAxis(domain, ticksCount, showLast) {
+  var len = domain.length;
+  if (ticksCount < 2 || ticksCount > len) return domain;
+  var step = Math.floor((len - ticksCount) / (ticksCount - 1));
+  var ticksArr = domain.filter(function (d, i) {
+    return i % (step + 1) === 0;
+  });
+  var Tlen = ticksArr.length;
+  var lastIndex = domain.findIndex(function (d) {
+    return d == ticksArr[Tlen - 1];
+  });
+
+  if (showLast) {
+    len % ticksCount == 0 || len - 1 - lastIndex >= Math.round(len / Tlen / 2) ? null : ticksArr.pop();
+    ticksArr.push(domain[len - 1]);
+  }
+
+  return ticksArr;
+};
+
+exports.getTicksOfAxis = getTicksOfAxis;
+
 var getTickCoord = function getTickCoord(_ref5) {
   var orientation = _ref5.orientation,
       coordinate = _ref5.coordinate,
@@ -768,8 +791,8 @@ exports.sortPie = sortPie;
 var getDataWithPercent = function getDataWithPercent() {
   var data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
   var precision = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
-  var digits = Math.pow(10, precision); //const targetSeats = digits * 100;
-
+  var digits = Math.pow(10, precision);
+  var targetSeats = digits * 100;
   var total = (0, _d3v.sum)(data, function (d) {
     return d.value;
   });
@@ -782,7 +805,7 @@ var getDataWithPercent = function getDataWithPercent() {
   var currentSum = (0, _d3v.sum)(votesPerQuota, function (d) {
     return d.vote;
   });
-  var remainder = 100 - currentSum;
+  var remainder = targetSeats - currentSum;
   votesPerQuota.sort(function (_ref26, _ref27) {
     var a = _ref26.value;
     var b = _ref27.value;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@easyv/charts",
-  "version": "1.0.72",
+  "version": "1.0.75",
   "description": "",
   "main": "lib/index.js",
   "scripts": {
@@ -25,7 +25,7 @@
     "load-styles": "^2.0.0"
   },
   "dependencies": {
-    "@easyv/utils": "^0.0.26",
+    "@easyv/utils": "^0.0.33",
     "d3v7": "npm:d3@^7.0.0",
     "popmotion": "^9.3.6",
     "react": "^17.0.2",

package/src/components/Band.tsx

@@ -76,7 +76,11 @@ export default memo(
       seriesIntervalWidth: paddingInner = 0,
       paddingInner: paddingOuter = 0,
       style,
+      fillType,
+      url,
+      size,
       fill,
+      opacity,
       highlight: { show: showHighlight, extent, fill: highlightFill },
     },
     bandLength = 0,
@@ -136,10 +140,17 @@ export default memo(
                   style={{
                     width: '100%',
                     height: '100%',
-                    background: getBandBackground(
-                      pattern,
-                      extent === flag ? highlightFill : fill
-                    ),
+                    opacity:opacity,
+                    background:
+                      fillType == 'pattern'
+                        ? `50% 50% / ${size.width}px ${size.height}px repeat ` +
+                          'url(' +
+                           url +
+                          ')'
+                        : getBandBackground(
+                            pattern,
+                            extent === flag ? highlightFill : fill
+                          ),
                     borderRadius:
                       style == 'square'
                         ? '0 0 0 0'

package/src/components/Line.js

@@ -17,7 +17,17 @@ const getLineData = (data, connectNulls) =>
 
 const Area = ({
   data,
-  config: { id, fill, curve, tension },
+  config,
+  config: {
+    id,
+    fill,
+    type,
+    url,
+    opacity,
+    size: { width: patternW, height: patternH },
+    curve,
+    tension
+  },
   xScaler,
   yScaler,
 }) => {
@@ -39,7 +49,13 @@ const Area = ({
     <>
       <path d={areaGen(data)} stroke='none' fill={'url(#' + id + ')'} />
       <defs>
-        <LinearGradient id={id} colors={area} rotate={0} />
+        {type && type == 'pattern' ? (
+          <pattern id={id} patternUnits="userSpaceOnUse" width={patternW} height={patternH}>
+            {url && <image opacity={opacity} width={patternW} height={patternH} xlinkHref={window.appConfig.ASSETS_URL + url} />}
+          </pattern>
+        ) : (
+          <LinearGradient id={id} colors={area} rotate={0} />
+        )}
       </defs>
     </>
   );

package/src/components/PieChart.js

@@ -572,7 +572,8 @@ const Component = memo(
                           style={{
                             ...categoryTextStyle,
                             fontWeight:categoryTextStyle.bold?"bold":"normal",
-                            fontStyle:categoryTextStyle.italic?"italic":"normal"
+                            fontStyle:categoryTextStyle.italic?"italic":"normal",
+                            pointerEvents:"none"
                           }}
                           fill={categoryTextStyle.color}
                         >
@@ -599,9 +600,11 @@ const Component = memo(
             )}
             {label && <Label config={label} arcs={_arcs} />}
             {current && (
-              <g fillOpacity={y} style={{transform:"rotate("+(-rotate_)+"deg)"}}>
+              <g fillOpacity={y} style={{ transform:"rotate("+(-rotate_)+"deg)" }}>
                 <Current
                   config={current}
+                  width={width}
+                  height={height}
                   data={_arcs}
                   currentIndex={+currentIndex}
                 />
@@ -649,6 +652,8 @@ const Current = ({
       },
     },
   },
+  width,
+  height,
   data,
   currentIndex,
 }) => {
@@ -671,13 +676,14 @@ const Current = ({
   }
   nameList.push(nameTemp)
   let foreignStyle={    //foreignObject标签样式，
-    width:"100%",
-    height:"100%",
-    transform:"translate(-50%,-50%)",
+    width,
+    height,
+    transform:`translate(-${width/2}px,-${height/2}px)`,
+    pointerEvents:"none"
   },
   boxStyle={    //弹性盒子样式，用于当前值的上下居中对齐等
-    width:"100%",
-    height:'100%',
+    width,
+    height,
     display:"flex",
     flexDirection:"column",
     justifyContent:"center",
@@ -686,59 +692,57 @@ const Current = ({
 
   return (
     show && (
-      <>
-        <foreignObject style={foreignStyle}>
-          <div style={boxStyle}>
-            { //类目名称
-              showName && <div 
-                style={{
-                  ...getFontStyle(nameFont),
-                  margin:gap/2+"px 0",
-                  display:"flex",
-                  flexDirection:"column",
-                  alignItems:"center"
-                }}>
-                {
-                  nameList.map((d,i)=>{
-                    return <span key={i}>{d}</span>
-                  })
-                }
-              </div>
-            }
-            { //真实值
-              showValue && <span 
-                style={{
-                  ...getFontStyle(valueFont),
-                  transform:"translate("+translateValueX+"px,"+translateValueY+"px)",
-                  margin:gap/2+"px 0"
-                }}>
-                {value}
-                {showSuffix && text && (
-                  <span
-                    style={{
-                      transform:"translate("+translateSuffixX+"px,"+translateSuffixY+"px)",
-                      fontSize:fontSize
-                    }}
-                  >
-                    {text}
-                  </span>
-                )}
-              </span>
-            }
-            { //百分比值
-              showPercent && <span
-                style={{
-                  transform:"translate("+translatePercentX+"px,"+translatePercentY+"px)",
-                  ...getFontStyle(percentFont),
-                  margin:gap/2+"px 0"
-                }}
-              >
-                {percent + '%'}
-              </span>
-            }
-          </div>
-        </foreignObject>
-      </>
+      <foreignObject style={foreignStyle}>
+        <div style={boxStyle}>
+          { //类目名称
+            showName && <div 
+              style={{
+                ...getFontStyle(nameFont),
+                margin:gap/2+"px 0",
+                display:"flex",
+                flexDirection:"column",
+                alignItems:"center"
+              }}>
+              {
+                nameList.map((d,i)=>{
+                  return <span key={i}>{d}</span>
+                })
+              }
+            </div>
+          }
+          { //真实值
+            showValue && <span 
+              style={{
+                ...getFontStyle(valueFont),
+                transform:"translate("+translateValueX+"px,"+translateValueY+"px)",
+                margin:gap/2+"px 0"
+              }}>
+              {value}
+              {showSuffix && text && (
+                <span
+                  style={{
+                    transform:"translate("+translateSuffixX+"px,"+translateSuffixY+"px)",
+                    fontSize:fontSize
+                  }}
+                >
+                  {text}
+                </span>
+              )}
+            </span>
+          }
+          { //百分比值
+            showPercent && <span
+              style={{
+                transform:"translate("+translatePercentX+"px,"+translatePercentY+"px)",
+                ...getFontStyle(percentFont),
+                margin:gap/2+"px 0"
+              }}
+            >
+              {percent + '%'}
+            </span>
+          }
+        </div>
+      </foreignObject>
     )
   );
 };

package/src/hooks/useAxes.js

@@ -1,10 +1,9 @@
 import { useMemo } from 'react';
 import { scaleLinear, scaleLog, scaleTime, scaleUtc } from 'd3-scale';
-import { band } from '../utils';
+import { band, getTicksOfAxis } from '../utils';
 import {
   getYTicksByStep,
   getYTicks,
-  getTicksOfAxis,
 } from '@easyv/utils/lib/common/utils';
 
 const scales = {
@@ -28,6 +27,7 @@ export default ({ axes, context: { width, height } }) => {
     const xAxisPositions = [];
     axes.forEach((item) => {
       const {
+        config: { label: { showLast = false } },
         type,
         orientation,
         ticks,
@@ -41,19 +41,20 @@ export default ({ axes, context: { width, height } }) => {
         carousel,
         config,
       } = item;
+
       const direction =
         orientation === 'top' || orientation === 'bottom'
           ? 'horizontal'
           : orientation === 'left' || orientation === 'right'
-          ? 'vertical'
-          : '';
+            ? 'vertical'
+            : '';
 
       const length =
         direction === 'horizontal'
           ? width
           : direction === 'vertical'
-          ? height
-          : 0;
+            ? height
+            : 0;
 
       const _paddingOuter = paddingOuter * length;
       const start = _paddingOuter / 2;
@@ -63,8 +64,8 @@ export default ({ axes, context: { width, height } }) => {
         direction === 'horizontal'
           ? [start, end]
           : direction === 'vertical'
-          ? [end, start]
-          : [0, 0];
+            ? [end, start]
+            : [0, 0];
 
       const scaler = scales[type]().domain(domain).range(range);
       scaler.type = type;
@@ -74,13 +75,13 @@ export default ({ axes, context: { width, height } }) => {
       const allTicks = ticks
         ? ticks
         : scaler.ticks
-        ? scaler.ticks(tickCount)
-        : scaler.domain();
+          ? scaler.ticks(tickCount)
+          : scaler.domain();
 
       let _ticks = allTicks;
       if (type === 'ordinal') {
         if (carousel === false) {
-          _ticks = getTicksOfAxis(_ticks, +tickCount);
+          _ticks = getTicksOfAxis(_ticks, +tickCount, showLast);
         }
       } else {
         if (auto === false) {

package/src/utils/index.js

@@ -86,16 +86,16 @@ const getIcon = (type, icon) => {
     case 'line':
       return icon
         ? {
-            ...defaultLineIcon,
-            ...icon,
-          }
+          ...defaultLineIcon,
+          ...icon,
+        }
         : defaultLineIcon;
     default:
       return icon
         ? {
-            ...defaultIcon,
-            ...icon,
-          }
+          ...defaultIcon,
+          ...icon,
+        }
         : defaultIcon;
   }
 };
@@ -141,6 +141,26 @@ const getBreakWord = (str, breakNumber) => {
   const re = new RegExp('([^]){1,' + breakNumber + '}', 'g');
   return str.match(re);
 };
+
+//x轴标签逻辑
+
+const getTicksOfAxis = (domain, ticksCount, showLast) => {
+
+  let len = domain.length;
+  if (ticksCount < 2 || ticksCount > len) return domain;
+  let step = Math.floor((len - ticksCount) / (ticksCount - 1));
+  const ticksArr = domain.filter(function (d, i) {
+    return i % (step + 1) === 0;
+  });
+  let Tlen = ticksArr.length;
+  let lastIndex = domain.findIndex(d => d == ticksArr[Tlen - 1])
+  if (showLast) {
+    len % ticksCount == 0 || (len-1) - lastIndex >= Math.round(len / Tlen / 2) ? null : ticksArr.pop()
+    ticksArr.push(domain[len - 1])
+  }
+  return ticksArr
+}
+
 const getTickCoord = ({
   orientation,
   coordinate,
@@ -612,7 +632,7 @@ const sortPie = (data, order) => {
 
 const getDataWithPercent = (data = [], precision = 0) => {
   const digits = Math.pow(10, precision);
-  //const targetSeats = digits * 100;
+  const targetSeats = digits * 100;
 
   const total = sum(data, (d) => d.value);
 
@@ -623,16 +643,16 @@ const getDataWithPercent = (data = [], precision = 0) => {
   }));
   const currentSum = sum(votesPerQuota, (d) => d.vote);
 
-  let remainder = 100 - currentSum;
+  let remainder = targetSeats - currentSum;
   votesPerQuota.sort(({ value: a }, { value: b }) => (a % total) - (b % total));
 
   const tmp = votesPerQuota.map(({ vote, value, ...data }, index) => {
-    let obj={
+    let obj = {
       ...data,
       value,
       percent: toFixed((vote + ((value && value != 0) ? remainder : 0)) / digits, precision),
     };
-    if(value && value!=0){
+    if (value && value != 0) {
       remainder = 0
     }
     return obj
@@ -643,6 +663,7 @@ const getDataWithPercent = (data = [], precision = 0) => {
 export {
   dateFormat,
   getBreakWord,
+  getTicksOfAxis,
   getTickCoord,
   getGridCoord,
   identity,