@easyv/charts 1.0.70 → 1.0.74

package/lib/components/Axis.js

@@ -184,6 +184,9 @@ var Label = function Label(_ref5) {
   var translateText = 'translate(' + x + ', ' + y + ')';
   return /*#__PURE__*/_react["default"].createElement("text", {
     className: className,
+    style: {
+      whiteSpace: "pre"
+    },
     dominantBaseline: dominantBaseline,
     textAnchor: textAnchor,
     fontFamily: fontFamily,

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/Label.js

@@ -157,19 +157,29 @@ var Icon = function Icon(_ref4) {
       inner = _ref4$config.inner,
       outer = _ref4$config.outer,
       color = _ref4$config.color,
-      radius = _ref4$config.radius;
+      radius = _ref4$config.radius,
+      image = _ref4$config.image,
+      _ref4$config$size = _ref4$config.size,
+      width = _ref4$config$size.width,
+      height = _ref4$config$size.height;
   return mode == 'single' ? /*#__PURE__*/React.createElement(Circle, {
     cx: cx,
     cy: cy,
     color: color,
     radius: radius
-  }) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Circle, (0, _extends2["default"])({
+  }) : mode == 'double' ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Circle, (0, _extends2["default"])({
     cx: cx,
     cy: cy
   }, inner)), /*#__PURE__*/React.createElement(Circle, (0, _extends2["default"])({
     cx: cx,
     cy: cy
-  }, outer)));
+  }, outer))) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("image", {
+    width: width,
+    height: height,
+    x: cx - width / 2,
+    y: cy - height / 2,
+    xlinkHref: window.appConfig.ASSETS_URL + image
+  }));
 };
 
 var Circle = function Circle(_ref5) {

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/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.70",
+  "version": "1.0.74",
   "description": "",
   "main": "lib/index.js",
   "scripts": {

package/src/components/Axis.tsx

@@ -184,6 +184,9 @@ const Label: (props: LabelType) => ReactComponentElement<ComponentType> | null =
     return (
       <text
         className={className}
+        style={{
+          whiteSpace:"pre"
+        }}
         dominantBaseline={dominantBaseline}
         textAnchor={textAnchor}
         fontFamily={fontFamily}

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/Label.js

@@ -123,15 +123,25 @@ const Label = ({
     </text>
   );
 };
-const Icon = ({ cx, cy, config: { mode, inner, outer, color, radius } }) =>
+const Icon = ({ cx, cy, config: { mode, inner, outer, color, radius, image, size: { width, height } } }) =>
   mode == 'single' ? (
     <Circle cx={cx} cy={cy} color={color} radius={radius} />
-  ) : (
+  ) : mode == 'double' ? (
     <>
       <Circle cx={cx} cy={cy} {...inner} />
       <Circle cx={cx} cy={cy} {...outer} />
     </>
+  ) : (
+    <>
+      <image
+        width={width}
+        height={height}
+        x={cx - width / 2}
+        y={cy - height / 2}
+        xlinkHref={window.appConfig.ASSETS_URL + image} />
+    </>
   );
+
 const Circle = ({ cx, cy, color, radius }) => (
   <circle cx={cx} cy={cy} fill={color} r={radius} stroke='none' />
 );

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/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,