@easyv/charts 1.0.73 → 1.1.0

package/.husky/commit-msg

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+yarn commitlint --edit $1

package/CHANGELOG.md

@@ -0,0 +1,16 @@
+# Changelog
+
+All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
+
+## 1.1.0 (2022-04-02)
+
+
+### Features
+
+* 轴标签，label支持样式传入 ([749a595](https://gitlab.prod.dtstack.cn:10022/visdev/visApplication/easyv-charts/commit/749a595a96b95917dafdc1766f63efec73398d64))
+* axis轴标签支持点击触发回调 ([1f636e1](https://gitlab.prod.dtstack.cn:10022/visdev/visApplication/easyv-charts/commit/1f636e1840f4f3b48c2b9765ce6087759d82fb17))
+
+
+### Bug Fixes
+
+* **band组件:** 修复foreignObject在Safari浏览器下的位置诡异偏离问题 ([1a65d54](https://gitlab.prod.dtstack.cn:10022/visdev/visApplication/easyv-charts/commit/1a65d54abbcf6c9e84cc85cc8b6a9d28b24fa4c4))

package/commitlint.config.js

@@ -0,0 +1 @@
+module.exports = {extends: ['@commitlint/config-conventional']}

package/lib/components/Axis.js

@@ -11,6 +11,10 @@ exports["default"] = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+
 var _react = _interopRequireWildcard(require("react"));
 
 var _utils = require("../utils");
@@ -19,9 +23,12 @@ var _context = require("../context");
 
 var _element = require("../element");
 
-/**
- * x, y, z轴
- */
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+var defaultEvent = function defaultEvent() {};
+
 var defaultAlign = {
   textAnchor: 'middle',
   dominantBaseline: 'middle'
@@ -156,8 +163,11 @@ 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$config = _ref5.config,
       show = _ref5$config.show,
+      style = _ref5$config.style,
       _ref5$config$translat = _ref5$config.translate,
       translateX = _ref5$config$translat.x,
       translateY = _ref5$config$translat.y,
@@ -182,11 +192,18 @@ var Label = function Label(_ref5) {
   var x = (isVertical ? tickSize * directionX : coordinate) + translateX * directionX;
   var y = (isVertical ? coordinate : tickSize * directionY) + translateY * directionY;
   var translateText = 'translate(' + x + ', ' + y + ')';
+
+  var _style = style && ((0, _typeof2["default"])(style) == 'object' ? style : style(_label));
+
   return /*#__PURE__*/_react["default"].createElement("text", {
     className: className,
-    style: {
-      whiteSpace: "pre"
-    },
+    style: _objectSpread(_objectSpread({}, _style), {}, {
+      whiteSpace: 'pre'
+    }),
+    onClick: onClick,
+    "data-data": JSON.stringify({
+      x: label
+    }),
     dominantBaseline: dominantBaseline,
     textAnchor: textAnchor,
     fontFamily: fontFamily,
@@ -215,6 +232,7 @@ var _default = /*#__PURE__*/(0, _react.memo)(function (_ref6) {
       ticks = _ref6.ticks,
       formatter = _ref6.formatter,
       rotate = _ref6.rotate,
+      triggerClick = _ref6.triggerClick,
       _ref6$config = _ref6.config,
       on = _ref6$config.on,
       label = _ref6$config.label,
@@ -294,7 +312,8 @@ var _default = /*#__PURE__*/(0, _react.memo)(function (_ref6) {
       label: tick,
       tickSize: _tickSize,
       formatter: formatter,
-      rotate: rotate
+      rotate: rotate,
+      onClick: triggerClick
     }), gridLine && /*#__PURE__*/_react["default"].createElement(_element.Line, (0, _extends2["default"])({
       className: "__easyv-gridLine",
       config: gridLine

package/lib/components/Band.js

@@ -156,7 +156,10 @@ var _default = /*#__PURE__*/(0, _react.memo)(function (_ref3) {
       style: {
         width: '100%',
         height: '100%',
-        opacity: opacity,
+
+        /** Safari Bug **/
+        position: 'fixed',
+        opacity: fillType == 'pattern' ? opacity : 1,
         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,

package/lib/components/CartesianChart.js

@@ -125,7 +125,9 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     config: background
   }), (0, _toConsumableArray2["default"])(axes.values()).map(function (item, index) {
     var config = item.axisType == 'x' ? axisX : item;
-    return /*#__PURE__*/_react["default"].createElement(_.Axis, (0, _extends2["default"])({}, config, {
+    return /*#__PURE__*/_react["default"].createElement(_.Axis, (0, _extends2["default"])({
+      triggerClick: onInteraction
+    }, config, {
       key: index
     }));
   }), showTooltip && /*#__PURE__*/_react["default"].createElement(_.Indicator, (0, _extends2["default"])({}, indicator, indicatorAttr)), series.map(function (_ref2, index) {
@@ -160,8 +162,12 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
   }, tooltip, {
     data: tooltipData,
     x: tooltipX,
+    marginLeft: marginLeft,
+    marginTop: marginTop,
     tickName: tickName,
-    series: series
+    series: series,
+    width: width,
+    height: height
   })), brush && /*#__PURE__*/_react["default"].createElement(_.Brush, {
     config: brush,
     width: width

package/lib/components/Lighter.js

@@ -0,0 +1,180 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _d3v = require("d3v7");
+
+var _utils = require("../utils");
+
+var _svgPathProperties = require("svg-path-properties");
+
+/**
+ * 区域图发光跟踪路径
+ */
+var _default = function _default(_ref) {
+  var d = _ref.path,
+      config = _ref.config,
+      _ref$config = _ref.config,
+      curveLength = _ref$config.length,
+      width = _ref$config.width,
+      fill = _ref$config.fill,
+      unitStep = _ref$config.unitStep;
+  var pointIndexRef = (0, _react.useRef)(0);
+  var raf = (0, _react.useRef)(null);
+
+  var _useState = (0, _react.useState)([]),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      points = _useState2[0],
+      setPoints = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(null),
+      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+      lighter = _useState4[0],
+      setLighter = _useState4[1];
+
+  var pointLength = points.length;
+  var totalLength = getLength(pointLength, curveLength);
+  var easingFunc = easing.linear;
+  var interpolateList = (0, _react.useMemo)(function () {
+    return getColorsInterpolate((0, _utils.getColorList)(fill));
+  }, [fill]);
+  var drawLigher = (0, _react.useCallback)(function () {
+    var STEP = 2;
+    var LOOP = false;
+
+    if (lighter && lighter.children) {
+      var currentPointLength = pointIndexRef.current;
+      var pointIndex = currentPointLength >= totalLength ? LOOP ? curveLength : 0 : currentPointLength + unitStep + Math.floor(easingFunc(pointIndexRef.current / totalLength) * STEP);
+      var overstep = pointIndex - pointLength;
+      var startIndex = getPointIndex(pointIndex, pointLength, curveLength);
+      var endIndex = getPointIndex(pointIndex + curveLength, pointLength, curveLength);
+      var overstepPoints = LOOP && overstep > 0 ? points.slice(0, overstep) : [];
+      drawCircle(Array.from(lighter.children), [].concat((0, _toConsumableArray2["default"])(points.slice(startIndex, endIndex)), (0, _toConsumableArray2["default"])(overstepPoints)), interpolateList);
+      pointIndexRef.current = pointIndex;
+    }
+
+    raf.current = requestAnimationFrame(drawLigher);
+  }, [lighter, totalLength, curveLength, unitStep, points, interpolateList]);
+  (0, _react.useEffect)(function () {
+    var path = new _svgPathProperties.svgPathProperties(d);
+    var totalLength = path.getTotalLength();
+    var points = [];
+
+    for (var i = 0; i < totalLength; i++) {
+      var _path$getPointAtLengt = path.getPointAtLength(i),
+          x = _path$getPointAtLengt.x,
+          y = _path$getPointAtLengt.y;
+
+      points.push({
+        index: i,
+        x: x,
+        y: y
+      });
+    }
+
+    setPoints(points);
+  }, [d, config]);
+  (0, _react.useEffect)(function () {
+    raf.current = requestAnimationFrame(drawLigher);
+    return function () {
+      cancelAnimationFrame(raf.current);
+    };
+  }, [drawLigher]);
+  return /*#__PURE__*/_react["default"].createElement("g", {
+    ref: setLighter
+  }, points.map(function (_ref2, index) {
+    var x = _ref2.x,
+        y = _ref2.y;
+    return /*#__PURE__*/_react["default"].createElement("circle", {
+      cx: x,
+      cy: y,
+      key: index,
+      r: width,
+      fill: "none"
+    });
+  }));
+};
+
+exports["default"] = _default;
+
+var drawCircle = function drawCircle(children, points, interpolateList) {
+  var pointLength = points.length; // const [startPoint] = points;
+  // const startIndex = startPoint ? startPoint.index : 0;
+
+  children.forEach(function (child, index) {
+    var pointIndex = points.findIndex(function (_ref3) {
+      var i = _ref3.index;
+      return i == index;
+    });
+    child.setAttribute('fill', pointIndex > -1 ? getColor(pointIndex / pointLength, //TODO: 颜色插值尚需完善
+    interpolateList) : 'none');
+  });
+};
+
+var getColor = function getColor(x, interpolateList) {
+  return interpolateList(x);
+};
+
+var getLength = function getLength(pointLength, length) {
+  if (length > pointLength) {
+    return pointLength * 2;
+  }
+
+  return pointLength + length;
+};
+
+var getColorsInterpolate = function getColorsInterpolate(colors) {
+  var length = colors.length;
+  if (!!(length < 2)) return (0, _d3v.scaleLinear)().domain([0, 1]).range([colors[0].color || '#000', colors[0].color || '#000']);
+  var linear = (0, _d3v.scaleLinear)().domain(colors.map(function (d) {
+    return d.offset;
+  })).range(colors.map(function (d) {
+    return d.color;
+  }));
+  return linear;
+};
+
+var easing = {
+  linear: function linear() {
+    return 0;
+  },
+  easeIn: function easeIn(k) {
+    return Math.pow(k, 3);
+  },
+  easeOut: function easeOut(k) {
+    return 1 - easing.easeIn(1 - k);
+  },
+  easeInOut: function easeInOut(k) {
+    return k < 0.5 ? easing.easeIn(k * 2) / 2 : 1 - easing.easeIn(2 - 2 * k) / 2;
+  },
+  easeOutIn: function easeOutIn(k) {
+    return k < 0.5 ? 0.5 * (1 - easing.easeIn(1 - 2 * k)) : 0.5 * easing.easeIn(k * 2 - 1) + 0.5;
+  }
+};
+
+var getPointIndex = function getPointIndex(pointIndex, pointLength, curveLength) {
+  var index = pointIndex - curveLength;
+
+  if (index < 0) {
+    return 0;
+  }
+
+  if (index >= pointLength) {
+    return pointLength - 1;
+  }
+
+  return index;
+};

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/components/Tooltip.js

@@ -20,9 +20,10 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 var _default = /*#__PURE__*/(0, _react.memo)(function (_ref) {
   var position = _ref.x,
       x = _ref.tickName,
+      marginLeft = _ref.marginLeft,
+      marginTop = _ref.marginTop,
       data = _ref.data,
       series = _ref.series,
-      config = _ref.config,
       _ref$config$tip = _ref.config.tip,
       _ref$config$tip$data = _ref$config$tip.data,
       xAxis = _ref$config$tip$data.xAxis,
@@ -40,23 +41,40 @@ var _default = /*#__PURE__*/(0, _react.memo)(function (_ref) {
       image = _ref$config$tip.image,
       margin = _ref$config$tip.margin,
       _ref$config$tip$size = _ref$config$tip.size,
-      width = _ref$config$tip$size.width,
-      height = _ref$config$tip$size.height,
+      tipWidth = _ref$config$tip$size.width,
+      tipHeight = _ref$config$tip$size.height,
       translateTip = _ref$config$tip.translate,
       formatter = _ref.formatter,
-      isVertical = _ref.isVertical;
-  var translate3d = isVertical ? _objectSpread(_objectSpread({}, translateTip), {}, {
-    y: translateTip.y + position
-  }) : _objectSpread(_objectSpread({}, translateTip), {}, {
-    x: translateTip.x + position
-  });
+      isVertical = _ref.isVertical,
+      width = _ref.width,
+      height = _ref.height;
+  var tipPosition = (0, _react.useMemo)(function () {
+    var translate3d = isVertical ? _objectSpread(_objectSpread({}, translateTip), {}, {
+      y: translateTip.y + position + marginTop
+    }) : _objectSpread(_objectSpread({}, translateTip), {}, {
+      x: translateTip.x + position + marginLeft
+    });
+
+    if (translate3d.x + tipWidth > width) {
+      var newPositon = position + marginLeft - tipWidth - translateTip.x;
+      translate3d.x = newPositon >= 0 ? newPositon : 0;
+    }
+
+    if (translate3d.y + tipHeight > height) {
+      var _newPositon = position + marginTop - tipHeight - translateTip.y;
+
+      translate3d.y = _newPositon >= 0 ? _newPositon : height - tipHeight;
+    }
+
+    return (0, _utils.getTranslate3d)(translate3d);
+  }, [width, height, marginLeft, marginTop, position, tipWidth, tipHeight, translateTip]);
   return /*#__PURE__*/React.createElement("div", {
     className: "__easyv-tooltip",
     style: _objectSpread({
       pointerEvents: 'none',
-      transform: (0, _utils.getTranslate3d)(translate3d),
-      width: width,
-      height: height,
+      transform: tipPosition,
+      width: tipWidth,
+      height: tipHeight,
       padding: (0, _utils.getMargin)(margin),
       background: image ? '50% 50% / 100% 100% no-repeat url(' + window.appConfig.ASSETS_URL + image + ')' : 'rgba(48, 55, 66, 0.85)'
     }, (0, _utils.getFontStyle)(font))

package/lib/components/index.js

@@ -71,6 +71,12 @@ Object.defineProperty(exports, "Band", {
     return _Band["default"];
   }
 });
+Object.defineProperty(exports, "Lighter", {
+  enumerable: true,
+  get: function get() {
+    return _Lighter["default"];
+  }
+});
 Object.defineProperty(exports, "Line", {
   enumerable: true,
   get: function get() {
@@ -161,6 +167,8 @@ var _Indicator = _interopRequireDefault(require("./Indicator"));
 
 var _Band = _interopRequireDefault(require("./Band"));
 
+var _Lighter = _interopRequireDefault(require("./Lighter"));
+
 var _Line = _interopRequireDefault(require("./Line"));
 
 var _Background = _interopRequireDefault(require("./Background"));

package/lib/element/ConicGradient.js

@@ -0,0 +1,73 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = ConicGradient;
+
+var d3 = _interopRequireWildcard(require("d3"));
+
+//只支持在svg中使用
+//在<clipPath>标签中绘制圆环路径，在<foreignObject>中使用conic-gradient来制作角向渐变
+//然后在foreignObject中调用clipPath来剪切dom元素，实现环形渐变效果
+function ConicGradient(props) {
+  var gradientId = props.gradientId,
+      _props$colorConfig = props.colorConfig,
+      colorConfig = _props$colorConfig === void 0 ? {} : _props$colorConfig,
+      _props$circleConfig = props.circleConfig,
+      circleConfig = _props$circleConfig === void 0 ? {} : _props$circleConfig,
+      _colorConfig$colorTyp = colorConfig.colorType,
+      colorType = _colorConfig$colorTyp === void 0 ? "linear" : _colorConfig$colorTyp,
+      _colorConfig$colors = colorConfig.colors,
+      colors = _colorConfig$colors === void 0 ? [{
+    offset: 0,
+    color: "rgba(255,0,0,0.5)"
+  }, {
+    offset: 50,
+    color: "rgba(0,255,0,0.5)"
+  }, {
+    offset: 100,
+    color: "rgba(0,0,255,0.5)"
+  }] : _colorConfig$colors,
+      _circleConfig$innerRa = circleConfig.innerRadius,
+      innerRadius = _circleConfig$innerRa === void 0 ? 80 : _circleConfig$innerRa,
+      _circleConfig$outerRa = circleConfig.outerRadius,
+      outerRadius = _circleConfig$outerRa === void 0 ? 100 : _circleConfig$outerRa,
+      _circleConfig$startAn = circleConfig.startAngle,
+      startAngle = _circleConfig$startAn === void 0 ? 0 : _circleConfig$startAn,
+      _circleConfig$endAngl = circleConfig.endAngle,
+      endAngle = _circleConfig$endAngl === void 0 ? 360 : _circleConfig$endAngl,
+      _circleConfig$cornerR = circleConfig.cornerRadius,
+      cornerRadius = _circleConfig$cornerR === void 0 ? 0 : _circleConfig$cornerR,
+      _circleConfig$padAngl = circleConfig.padAngle,
+      padAngle = _circleConfig$padAngl === void 0 ? 0 : _circleConfig$padAngl;
+  var arc = d3.arc().innerRadius(innerRadius).outerRadius(outerRadius).startAngle(startAngle * Math.PI / 180).endAngle(endAngle * Math.PI / 180).cornerRadius(cornerRadius).padAngle(padAngle);
+  return /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("clipPath", {
+    id: "" + gradientId,
+    style: {
+      transform: "translate(50%,50%)"
+    }
+  }, /*#__PURE__*/React.createElement("path", {
+    d: arc()
+  })), /*#__PURE__*/React.createElement("foreignObject", {
+    style: {
+      width: "100%",
+      height: "100%",
+      transform: "translate(-50%,-50%)",
+      background: colorType === "pure" ? colors : "conic-gradient(".concat(colorsToString(colors), ")"),
+      clipPath: "url(".concat('#' + gradientId, ")")
+    }
+  }));
+}
+
+function colorsToString(colors) {
+  var s = "";
+  colors.sort(function (a, b) {
+    return a.offset - b.offset;
+  }).map(function (d) {
+    s = s + d.color + " " + d.offset + "%,";
+  });
+  return s.slice(0, -1);
+}

package/lib/utils/index.js

@@ -791,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;
   });
@@ -805,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,10 +1,12 @@
 {
   "name": "@easyv/charts",
-  "version": "1.0.73",
+  "version": "1.1.0",
   "description": "",
   "main": "lib/index.js",
   "scripts": {
-    "make": "babel src -d lib --extensions .ts,.tsx,.js && cp -r src/css lib"
+    "release": "standard-version",
+    "make": "babel src -d lib --extensions .ts,.tsx,.js && cp -r src/css lib && standard-version",
+    "prepare": "husky install"
   },
   "keywords": [],
   "author": "",
@@ -18,17 +20,28 @@
     "@babel/preset-env": "^7.11.5",
     "@babel/preset-react": "^7.10.4",
     "@babel/preset-typescript": "^7.14.5",
+    "@commitlint/cli": "^16.2.3",
+    "@commitlint/config-conventional": "^16.2.1",
     "@types/d3": "^7.0.0",
     "@types/react": "^17.0.14",
     "babel-plugin-transform-import-styles": "0.0.11",
     "babel-preset-env": "^1.7.0",
-    "load-styles": "^2.0.0"
+    "cz-conventional-changelog": "^3.3.0",
+    "husky": "^7.0.4",
+    "load-styles": "^2.0.0",
+    "standard-version": "^9.3.2"
   },
   "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",
+    "svg-path-properties": "^1.0.11",
     "svg-points": "^6.0.1"
+  },
+  "config": {
+    "commitizen": {
+      "path": "./node_modules/cz-conventional-changelog"
+    }
   }
-}
+}