@easyv/charts 1.2.1 → 1.2.2

package/lib/components/Label.js

@@ -1,279 +1,279 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
-var _react = require("react");
-
-var _utils = require("../utils");
-
-var _context = require("../context");
-
-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 _default = /*#__PURE__*/(0, _react.memo)(function (_ref) {
-  var _ref$config = _ref.config,
-      _ref$config$seriesInt = _ref$config.seriesIntervalWidth,
-      paddingInner = _ref$config$seriesInt === void 0 ? 0 : _ref$config$seriesInt,
-      _ref$config$paddingIn = _ref$config.paddingInner,
-      paddingOuter = _ref$config$paddingIn === void 0 ? 0 : _ref$config$paddingIn,
-      label = _ref$config.label,
-      icon = _ref$config.icon,
-      config = _ref.config,
-      _ref$bandLength = _ref.bandLength,
-      bandLength = _ref$bandLength === void 0 ? 0 : _ref$bandLength,
-      data = _ref.data,
-      _ref$xAxis = _ref.xAxis,
-      xScaler = _ref$xAxis.scaler,
-      step = _ref$xAxis.step,
-      direction = _ref$xAxis.direction,
-      yScaler = _ref.yAxis.scaler,
-      triggerClick = _ref.triggerClick;
-  var lineType = config.hasOwnProperty('line'); //堆叠处理
-
-  var showIcon = icon && icon.show;
-  var showLabel = label && label.show;
-  if (!(data.length && (showIcon || showLabel))) return null;
-
-  var _useContext = (0, _react.useContext)(_context.chartContext),
-      width = _useContext.width,
-      height = _useContext.height;
-
-  var bandwidth = (0, _utils.getBandwidth)(step, paddingOuter);
-
-  var _getBandSeriesStepAnd = (0, _utils.getBandSeriesStepAndWidth)({
-    width: bandwidth,
-    paddingInner: paddingInner,
-    bandLength: bandLength
-  }),
-      seriesStep = _getBandSeriesStepAnd.seriesStep,
-      seriesWidth = _getBandSeriesStepAnd.seriesWidth;
-
-  var offset = (seriesWidth + paddingInner * seriesStep) * bandLength - paddingInner * seriesStep;
-  var isVertical = direction === 'vertical';
-  var _position = label.position;
-  return /*#__PURE__*/React.createElement("g", {
-    className: "__easyv-label"
-  }, data.map(function (_ref2, i) {
-    var index = _ref2.index,
-        _ref2$bound = (0, _slicedToArray2["default"])(_ref2.bound, 2),
-        start = _ref2$bound[0],
-        end = _ref2$bound[1],
-        data = _ref2.data,
-        _ref2$data = _ref2.data,
-        x = _ref2$data.x,
-        y = _ref2$data.y,
-        showY = _ref2$data.showY,
-        s = _ref2$data.s;
-
-    var y1 = yScaler(isVertical ? end : start); //处理z型折线图和堆叠柱图的逻辑冲突
-
-    var y2 = lineType ? start ? yScaler(isVertical ? start : end - start) : yScaler(isVertical ? start : end) : yScaler(isVertical ? start : end); // const y2 =  yScaler(isVertical ? start : end);
-
-    var positionX = xScaler(x) + seriesStep * index - offset / 2;
-    if (isNaN(positionX)) return null;
-    var position = positionX + seriesWidth / 2;
-    var labelPosition = isVertical ? getVerticalLabel({
-      position: _position,
-      y: y,
-      y1: y1,
-      y2: y2,
-      width: width
-    }) : getHorizontalLabel({
-      position: _position,
-      y: y,
-      y1: y1,
-      y2: y2,
-      height: height
-    });
-    var attr = isVertical ? _objectSpread(_objectSpread({}, labelPosition), {}, {
-      y: position,
-      dominantBaseline: 'middle'
-    }) : _objectSpread(_objectSpread({}, labelPosition), {}, {
-      x: position,
-      textAnchor: 'middle'
-    });
-    return /*#__PURE__*/React.createElement("g", {
-      key: i,
-      onClick: triggerClick,
-      "data-data": JSON.stringify(data)
-    }, showIcon && /*#__PURE__*/React.createElement(Icon, {
-      cx: attr.x,
-      cy: attr.y,
-      config: icon
-    }), showLabel && /*#__PURE__*/React.createElement(Label, (0, _extends2["default"])({
-      value: showY,
-      config: label
-    }, attr)));
-  }));
-});
-
-exports["default"] = _default;
-
-var Label = function Label(_ref3) {
-  var x = _ref3.x,
-      y = _ref3.y,
-      value = _ref3.value,
-      _ref3$config = _ref3.config,
-      font = _ref3$config.font,
-      _ref3$config$translat = _ref3$config.translate,
-      _ref3$config$translat2 = _ref3$config$translat.x,
-      translateX = _ref3$config$translat2 === void 0 ? 0 : _ref3$config$translat2,
-      _ref3$config$translat3 = _ref3$config$translat.y,
-      translateY = _ref3$config$translat3 === void 0 ? 0 : _ref3$config$translat3,
-      _ref3$textAnchor = _ref3.textAnchor,
-      textAnchor = _ref3$textAnchor === void 0 ? 'middle' : _ref3$textAnchor,
-      _ref3$dominantBaselin = _ref3.dominantBaseline,
-      dominantBaseline = _ref3$dominantBaselin === void 0 ? 'middle' : _ref3$dominantBaselin;
-  return /*#__PURE__*/React.createElement("text", (0, _extends2["default"])({
-    x: x,
-    y: y,
-    transform: (0, _utils.getTranslate2d)({
-      x: translateX,
-      y: translateY * (value >= 0 ? 1 : -1)
-    }),
-    textAnchor: textAnchor,
-    dominantBaseline: dominantBaseline
-  }, font), value);
-};
-
-var Icon = function Icon(_ref4) {
-  var cx = _ref4.cx,
-      cy = _ref4.cy,
-      _ref4$config = _ref4.config,
-      mode = _ref4$config.mode,
-      inner = _ref4$config.inner,
-      outer = _ref4$config.outer,
-      color = _ref4$config.color,
-      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
-  }) : 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))) : /*#__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) {
-  var cx = _ref5.cx,
-      cy = _ref5.cy,
-      color = _ref5.color,
-      radius = _ref5.radius;
-  return /*#__PURE__*/React.createElement("circle", {
-    cx: cx,
-    cy: cy,
-    fill: color,
-    r: radius,
-    stroke: "none"
-  });
-};
-
-var getVerticalLabel = function getVerticalLabel(_ref6) {
-  var _ref6$position = _ref6.position,
-      position = _ref6$position === void 0 ? 'outerStart' : _ref6$position,
-      width = _ref6.width,
-      y = _ref6.y,
-      y1 = _ref6.y1,
-      y2 = _ref6.y2;
-
-  switch (position) {
-    case 'start':
-      return {
-        x: y > 0 ? y2 : y1,
-        textAnchor: 'start'
-      };
-
-    case 'middle':
-      return {
-        x: (y1 + y2) / 2,
-        textAnchor: 'middle'
-      };
-
-    case 'end':
-      return {
-        x: y > 0 ? y1 : y2,
-        textAnchor: 'end'
-      };
-
-    case 'outerStart':
-      return {
-        x: y1,
-        textAnchor: y > 0 ? 'start' : 'end'
-      };
-
-    case 'chartStart':
-      return {
-        x: y > 0 ? width : 0,
-        textAnchor: y > 0 ? 'start' : 'end'
-      };
-  }
-};
-
-var getHorizontalLabel = function getHorizontalLabel(_ref7) {
-  var _ref7$position = _ref7.position,
-      position = _ref7$position === void 0 ? 'outerStart' : _ref7$position,
-      height = _ref7.height,
-      y = _ref7.y,
-      y1 = _ref7.y1,
-      y2 = _ref7.y2;
-
-  switch (position) {
-    case 'start':
-      return {
-        y: y > 0 ? y1 : y2,
-        dominantBaseline: 'text-after-edge'
-      };
-
-    case 'middle':
-      return {
-        y: (y1 + y2) / 2,
-        dominantBaseline: 'middle'
-      };
-
-    case 'end':
-      return {
-        y: y > 0 ? y2 : y1,
-        dominantBaseline: 'text-before-edge'
-      };
-
-    case 'outerStart':
-      return {
-        y: y2,
-        dominantBaseline: y >= 0 ? 'text-after-edge' : 'text-before-edge'
-      };
-
-    case 'chartStart':
-      return {
-        y: y > 0 ? 0 : height,
-        dominantBaseline: y > 0 ? 'text-after-edge' : 'text-before-edge'
-      };
-  }
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = require("react");
+
+var _utils = require("../utils");
+
+var _context = require("../context");
+
+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 _default = /*#__PURE__*/(0, _react.memo)(function (_ref) {
+  var _ref$config = _ref.config,
+      _ref$config$seriesInt = _ref$config.seriesIntervalWidth,
+      paddingInner = _ref$config$seriesInt === void 0 ? 0 : _ref$config$seriesInt,
+      _ref$config$paddingIn = _ref$config.paddingInner,
+      paddingOuter = _ref$config$paddingIn === void 0 ? 0 : _ref$config$paddingIn,
+      label = _ref$config.label,
+      icon = _ref$config.icon,
+      config = _ref.config,
+      _ref$bandLength = _ref.bandLength,
+      bandLength = _ref$bandLength === void 0 ? 0 : _ref$bandLength,
+      data = _ref.data,
+      _ref$xAxis = _ref.xAxis,
+      xScaler = _ref$xAxis.scaler,
+      step = _ref$xAxis.step,
+      direction = _ref$xAxis.direction,
+      yScaler = _ref.yAxis.scaler,
+      triggerClick = _ref.triggerClick;
+  var lineType = config.hasOwnProperty('line'); //堆叠处理
+
+  var showIcon = icon && icon.show;
+  var showLabel = label && label.show;
+  if (!(data.length && (showIcon || showLabel))) return null;
+
+  var _useContext = (0, _react.useContext)(_context.chartContext),
+      width = _useContext.width,
+      height = _useContext.height;
+
+  var bandwidth = (0, _utils.getBandwidth)(step, paddingOuter);
+
+  var _getBandSeriesStepAnd = (0, _utils.getBandSeriesStepAndWidth)({
+    width: bandwidth,
+    paddingInner: paddingInner,
+    bandLength: bandLength
+  }),
+      seriesStep = _getBandSeriesStepAnd.seriesStep,
+      seriesWidth = _getBandSeriesStepAnd.seriesWidth;
+
+  var offset = (seriesWidth + paddingInner * seriesStep) * bandLength - paddingInner * seriesStep;
+  var isVertical = direction === 'vertical';
+  var _position = label.position;
+  return /*#__PURE__*/React.createElement("g", {
+    className: "__easyv-label"
+  }, data.map(function (_ref2, i) {
+    var index = _ref2.index,
+        _ref2$bound = (0, _slicedToArray2["default"])(_ref2.bound, 2),
+        start = _ref2$bound[0],
+        end = _ref2$bound[1],
+        data = _ref2.data,
+        _ref2$data = _ref2.data,
+        x = _ref2$data.x,
+        y = _ref2$data.y,
+        showY = _ref2$data.showY,
+        s = _ref2$data.s;
+
+    var y1 = yScaler(isVertical ? end : start); //处理z型折线图和堆叠柱图的逻辑冲突
+
+    var y2 = lineType ? start ? yScaler(isVertical ? start : end - start) : yScaler(isVertical ? start : end) : yScaler(isVertical ? start : end); // const y2 =  yScaler(isVertical ? start : end);
+
+    var positionX = xScaler(x) + seriesStep * index - offset / 2;
+    if (isNaN(positionX)) return null;
+    var position = positionX + seriesWidth / 2;
+    var labelPosition = isVertical ? getVerticalLabel({
+      position: _position,
+      y: y,
+      y1: y1,
+      y2: y2,
+      width: width
+    }) : getHorizontalLabel({
+      position: _position,
+      y: y,
+      y1: y1,
+      y2: y2,
+      height: height
+    });
+    var attr = isVertical ? _objectSpread(_objectSpread({}, labelPosition), {}, {
+      y: position,
+      dominantBaseline: 'middle'
+    }) : _objectSpread(_objectSpread({}, labelPosition), {}, {
+      x: position,
+      textAnchor: 'middle'
+    });
+    return /*#__PURE__*/React.createElement("g", {
+      key: i,
+      onClick: triggerClick,
+      "data-data": JSON.stringify(data)
+    }, showIcon && /*#__PURE__*/React.createElement(Icon, {
+      cx: attr.x,
+      cy: attr.y,
+      config: icon
+    }), showLabel && /*#__PURE__*/React.createElement(Label, (0, _extends2["default"])({
+      value: showY,
+      config: label
+    }, attr)));
+  }));
+});
+
+exports["default"] = _default;
+
+var Label = function Label(_ref3) {
+  var x = _ref3.x,
+      y = _ref3.y,
+      value = _ref3.value,
+      _ref3$config = _ref3.config,
+      font = _ref3$config.font,
+      _ref3$config$translat = _ref3$config.translate,
+      _ref3$config$translat2 = _ref3$config$translat.x,
+      translateX = _ref3$config$translat2 === void 0 ? 0 : _ref3$config$translat2,
+      _ref3$config$translat3 = _ref3$config$translat.y,
+      translateY = _ref3$config$translat3 === void 0 ? 0 : _ref3$config$translat3,
+      _ref3$textAnchor = _ref3.textAnchor,
+      textAnchor = _ref3$textAnchor === void 0 ? 'middle' : _ref3$textAnchor,
+      _ref3$dominantBaselin = _ref3.dominantBaseline,
+      dominantBaseline = _ref3$dominantBaselin === void 0 ? 'middle' : _ref3$dominantBaselin;
+  return /*#__PURE__*/React.createElement("text", (0, _extends2["default"])({
+    x: x,
+    y: y,
+    transform: (0, _utils.getTranslate2d)({
+      x: translateX,
+      y: translateY * (value >= 0 ? 1 : -1)
+    }),
+    textAnchor: textAnchor,
+    dominantBaseline: dominantBaseline
+  }, font), value);
+};
+
+var Icon = function Icon(_ref4) {
+  var cx = _ref4.cx,
+      cy = _ref4.cy,
+      _ref4$config = _ref4.config,
+      mode = _ref4$config.mode,
+      inner = _ref4$config.inner,
+      outer = _ref4$config.outer,
+      color = _ref4$config.color,
+      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
+  }) : 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))) : /*#__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) {
+  var cx = _ref5.cx,
+      cy = _ref5.cy,
+      color = _ref5.color,
+      radius = _ref5.radius;
+  return /*#__PURE__*/React.createElement("circle", {
+    cx: cx,
+    cy: cy,
+    fill: color,
+    r: radius,
+    stroke: "none"
+  });
+};
+
+var getVerticalLabel = function getVerticalLabel(_ref6) {
+  var _ref6$position = _ref6.position,
+      position = _ref6$position === void 0 ? 'outerStart' : _ref6$position,
+      width = _ref6.width,
+      y = _ref6.y,
+      y1 = _ref6.y1,
+      y2 = _ref6.y2;
+
+  switch (position) {
+    case 'start':
+      return {
+        x: y > 0 ? y2 : y1,
+        textAnchor: 'start'
+      };
+
+    case 'middle':
+      return {
+        x: (y1 + y2) / 2,
+        textAnchor: 'middle'
+      };
+
+    case 'end':
+      return {
+        x: y > 0 ? y1 : y2,
+        textAnchor: 'end'
+      };
+
+    case 'outerStart':
+      return {
+        x: y1,
+        textAnchor: y > 0 ? 'start' : 'end'
+      };
+
+    case 'chartStart':
+      return {
+        x: y > 0 ? width : 0,
+        textAnchor: y > 0 ? 'start' : 'end'
+      };
+  }
+};
+
+var getHorizontalLabel = function getHorizontalLabel(_ref7) {
+  var _ref7$position = _ref7.position,
+      position = _ref7$position === void 0 ? 'outerStart' : _ref7$position,
+      height = _ref7.height,
+      y = _ref7.y,
+      y1 = _ref7.y1,
+      y2 = _ref7.y2;
+
+  switch (position) {
+    case 'start':
+      return {
+        y: y > 0 ? y1 : y2,
+        dominantBaseline: 'text-after-edge'
+      };
+
+    case 'middle':
+      return {
+        y: (y1 + y2) / 2,
+        dominantBaseline: 'middle'
+      };
+
+    case 'end':
+      return {
+        y: y > 0 ? y2 : y1,
+        dominantBaseline: 'text-before-edge'
+      };
+
+    case 'outerStart':
+      return {
+        y: y2,
+        dominantBaseline: y >= 0 ? 'text-after-edge' : 'text-before-edge'
+      };
+
+    case 'chartStart':
+      return {
+        y: y > 0 ? 0 : height,
+        dominantBaseline: y > 0 ? 'text-after-edge' : 'text-before-edge'
+      };
+  }
 };