New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
@easyv/charts
Advanced tools
@easyv/charts - npm Package Compare versions
Comparing version 1.0.4 to 1.0.5
| "use strict"; | ||
| var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault"); | ||
| Object.defineProperty(exports, "__esModule", { | ||
@@ -8,2 +10,4 @@ value: true | ||
| var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")); | ||
| var _default = function _default(_ref) { | ||
@@ -14,2 +18,3 @@ var _ref$axis = _ref.axis, | ||
| step = _ref$axis.step, | ||
| direction = _ref$axis.direction, | ||
| _ref$config = _ref.config, | ||
@@ -19,14 +24,21 @@ background = _ref$config.background, | ||
| paddingOuter = _ref$config.paddingInner, | ||
| height = _ref.height; | ||
| length = _ref.length; | ||
| var isVertical = direction === 'vertical'; | ||
| var bandwidth = step / Math.max(1, 1 - paddingInner + paddingOuter); | ||
| var size = isVertical ? { | ||
| width: length, | ||
| height: bandwidth | ||
| } : { | ||
| width: bandwidth, | ||
| height: length | ||
| }; | ||
| return ticks.map(function (tick, index) { | ||
| return /*#__PURE__*/React.createElement("rect", { | ||
| key: index, | ||
| width: bandwidth, | ||
| height: height, | ||
| x: scaler(tick) - bandwidth / 2, | ||
| y: "0", | ||
| return /*#__PURE__*/React.createElement("rect", (0, _extends2["default"])({ | ||
| key: index | ||
| }, size, { | ||
| x: isVertical ? 0 : scaler(tick) - bandwidth / 2, | ||
| y: isVertical ? scaler(tick) - bandwidth / 2 : 0, | ||
| fill: background, | ||
| stroke: "none" | ||
| }); | ||
| })); | ||
| }); | ||
@@ -33,0 +45,0 @@ }; |
@@ -55,26 +55,51 @@ "use strict"; | ||
| var _default = /*#__PURE__*/(0, _react.memo)(function (_ref) { | ||
| var _ref$config = _ref.config, | ||
| paddingInner = _ref$config.seriesIntervalWidth, | ||
| paddingOuter = _ref$config.paddingInner, | ||
| style = _ref$config.style, | ||
| fill = _ref$config.fill, | ||
| _ref$config$highlight = _ref$config.highlight, | ||
| showHighlight = _ref$config$highlight.show, | ||
| extent = _ref$config$highlight.extent, | ||
| highlightFill = _ref$config$highlight.fill, | ||
| _ref$config$label = _ref$config.label, | ||
| showLabel = _ref$config$label.show, | ||
| font = _ref$config$label.font, | ||
| _ref$config$label$tra = _ref$config$label.translate, | ||
| translateX = _ref$config$label$tra.x, | ||
| translateY = _ref$config$label$tra.y, | ||
| groupLength = _ref.groupLength, | ||
| data = _ref.data, | ||
| _ref$xAxis = _ref.xAxis, | ||
| xScaler = _ref$xAxis.scaler, | ||
| step = _ref$xAxis.step, | ||
| yScaler = _ref.yAxis.scaler; | ||
| var getAttr = function getAttr(_ref) { | ||
| var isVertical = _ref.isVertical, | ||
| bandwidth = _ref.bandwidth, | ||
| length = _ref.length, | ||
| x = _ref.x, | ||
| y = _ref.y; | ||
| if (isVertical) return { | ||
| width: length, | ||
| height: bandwidth, | ||
| x: y, | ||
| y: x | ||
| }; | ||
| return { | ||
| x: x, | ||
| y: y, | ||
| width: bandwidth, | ||
| height: length | ||
| }; | ||
| }; | ||
| var getBorderRadius = function getBorderRadius(_ref2) { | ||
| var isVertical = _ref2.isVertical, | ||
| positive = _ref2.positive, | ||
| bandwidth = _ref2.bandwidth; | ||
| return isVertical ? positive ? '0px ' + bandwidth + 'px ' + bandwidth + 'px 0' : bandwidth + 'px 0 0 ' + bandwidth + 'px' : positive ? bandwidth / 2 + 'px ' + bandwidth / 2 + 'px 0 0' : '0 0 ' + bandwidth / 2 + 'px ' + bandwidth / 2 + 'px'; | ||
| }; | ||
| var _default = /*#__PURE__*/(0, _react.memo)(function (_ref3) { | ||
| var _ref3$config = _ref3.config, | ||
| _ref3$config$seriesIn = _ref3$config.seriesIntervalWidth, | ||
| paddingInner = _ref3$config$seriesIn === void 0 ? 0 : _ref3$config$seriesIn, | ||
| _ref3$config$paddingI = _ref3$config.paddingInner, | ||
| paddingOuter = _ref3$config$paddingI === void 0 ? 0 : _ref3$config$paddingI, | ||
| style = _ref3$config.style, | ||
| fill = _ref3$config.fill, | ||
| _ref3$config$highligh = _ref3$config.highlight, | ||
| showHighlight = _ref3$config$highligh.show, | ||
| extent = _ref3$config$highligh.extent, | ||
| highlightFill = _ref3$config$highligh.fill, | ||
| _ref3$bandLength = _ref3.bandLength, | ||
| bandLength = _ref3$bandLength === void 0 ? 0 : _ref3$bandLength, | ||
| data = _ref3.data, | ||
| _ref3$xAxis = _ref3.xAxis, | ||
| xScaler = _ref3$xAxis.scaler, | ||
| step = _ref3$xAxis.step, | ||
| direction = _ref3$xAxis.direction, | ||
| yScaler = _ref3.yAxis.scaler; | ||
| if (!data.length) return null; | ||
| var bandStep = step / Math.max(1, groupLength - paddingInner + paddingOuter * 2); | ||
| var bandStep = step / Math.max(1, bandLength - paddingInner + paddingOuter * 2); | ||
| var bandwidth = bandStep * (1 - paddingInner); | ||
@@ -84,29 +109,31 @@ | ||
| var offset = (bandwidth + paddingInner * bandStep) * groupLength - paddingInner * bandStep; | ||
| var offset = (bandwidth + paddingInner * bandStep) * bandLength - paddingInner * bandStep; | ||
| var isVertical = direction === 'vertical'; | ||
| return /*#__PURE__*/_react["default"].createElement("g", { | ||
| className: "__easyv-band" | ||
| }, _data.map(function (_ref2, i) { | ||
| var flag = _ref2.flag, | ||
| index = _ref2.index, | ||
| _ref2$bound = (0, _slicedToArray2["default"])(_ref2.bound, 2), | ||
| start = _ref2$bound[0], | ||
| end = _ref2$bound[1], | ||
| _ref2$data = _ref2.data, | ||
| x = _ref2$data.x, | ||
| y = _ref2$data.y, | ||
| s = _ref2$data.s; | ||
| }, _data.map(function (_ref4, i) { | ||
| var flag = _ref4.flag, | ||
| index = _ref4.index, | ||
| _ref4$bound = (0, _slicedToArray2["default"])(_ref4.bound, 2), | ||
| start = _ref4$bound[0], | ||
| end = _ref4$bound[1], | ||
| _ref4$data = _ref4.data, | ||
| x = _ref4$data.x, | ||
| y = _ref4$data.y, | ||
| s = _ref4$data.s; | ||
| var y1 = yScaler(start); | ||
| var y2 = yScaler(end); | ||
| var y1 = yScaler(isVertical ? end : start); | ||
| var y2 = yScaler(isVertical ? start : end); | ||
| var positionX = xScaler(x) + bandStep * index - offset / 2; | ||
| if (isNaN(positionX)) return null; | ||
| var positionY = y < 0 ? y1 : y2; | ||
| return /*#__PURE__*/_react["default"].createElement(_react.Fragment, { | ||
| return /*#__PURE__*/_react["default"].createElement("foreignObject", (0, _extends2["default"])({ | ||
| key: i | ||
| }, /*#__PURE__*/_react["default"].createElement("foreignObject", { | ||
| }, getAttr({ | ||
| isVertical: isVertical, | ||
| x: positionX, | ||
| y: positionY, | ||
| width: bandwidth, | ||
| height: Math.abs(y1 - y2) | ||
| }, /*#__PURE__*/_react["default"].createElement("div", { | ||
| length: Math.abs(y1 - y2), | ||
| bandwidth: bandwidth | ||
| })), /*#__PURE__*/_react["default"].createElement("div", { | ||
| style: { | ||
@@ -116,11 +143,9 @@ width: '100%', | ||
| background: extent === flag ? (0, _utils.getColor)(highlightFill) : (0, _utils.getColor)(fill), | ||
| borderRadius: style === 'square' ? 'none' : y > 0 ? bandwidth / 2 + 'px ' + bandwidth / 2 + 'px 0 0' : '0 0 ' + bandwidth / 2 + 'px ' + bandwidth / 2 + 'px' | ||
| borderRadius: style === 'square' ? 'none' : getBorderRadius({ | ||
| isVertical: isVertical, | ||
| positive: y > 0, | ||
| bandwidth: bandwidth | ||
| }) | ||
| } | ||
| })), showLabel && /*#__PURE__*/_react["default"].createElement("text", (0, _extends2["default"])({ | ||
| x: positionX + bandwidth / 2, | ||
| y: y2, | ||
| textAnchor: "middle", | ||
| dominantBaseline: y > 0 ? 'text-after-edge' : 'text-before-edge', | ||
| transform: 'translate(' + translateX + ', ' + translateY * (y > 0 ? 1 : -1) + ')' | ||
| }, font), y)); | ||
| })); | ||
| })); | ||
@@ -127,0 +152,0 @@ }); |
@@ -43,7 +43,13 @@ "use strict"; | ||
| series = _ref$config.series, | ||
| _ref$config$tooltip$c = _ref$config.tooltip.config, | ||
| auto = _ref$config$tooltip$c.auto, | ||
| manual = _ref$config$tooltip$c.manual, | ||
| indicator = _ref$config$tooltip$c.indicator, | ||
| tooltip = _ref$config.tooltip, | ||
| _ref$config$tooltip = _ref$config.tooltip; | ||
| _ref$config$tooltip = _ref$config$tooltip === void 0 ? {} : _ref$config$tooltip; | ||
| var _ref$config$tooltip$c = _ref$config$tooltip.config, | ||
| tooltipConfig = _ref$config$tooltip$c === void 0 ? {} : _ref$config$tooltip$c, | ||
| _ref$config$tooltip$c2 = _ref$config$tooltip.config; | ||
| _ref$config$tooltip$c2 = _ref$config$tooltip$c2 === void 0 ? {} : _ref$config$tooltip$c2; | ||
| var auto = _ref$config$tooltip$c2.auto, | ||
| manual = _ref$config$tooltip$c2.manual, | ||
| indicator = _ref$config$tooltip$c2.indicator, | ||
| brush = _ref$config.brush, | ||
| data = _ref.data, | ||
@@ -74,3 +80,3 @@ filterData = _ref.filterData; | ||
| axisX: axisX, | ||
| config: tooltip.config | ||
| config: tooltipConfig | ||
| }), | ||
@@ -87,2 +93,14 @@ tooltipX = _useTooltip.x, | ||
| var showTooltip = !!(tooltipData && tooltipData.length && (auto || manual)); | ||
| var isVertical = axisX.direction === 'vertical'; | ||
| var indicatorWidth = indicator.width * axisX.step / 100; | ||
| var position = axisX.scaler(tickName) - indicatorWidth / 2; | ||
| var indicatorAttr = isVertical ? { | ||
| width: chartWidth, | ||
| height: indicatorWidth, | ||
| y: position | ||
| } : { | ||
| height: chartHeight, | ||
| width: indicatorWidth, | ||
| x: position | ||
| }; | ||
| return /*#__PURE__*/_react["default"].createElement(_context.chartContext.Provider, { | ||
@@ -99,3 +117,3 @@ value: context | ||
| }, background && /*#__PURE__*/_react["default"].createElement(_.Background, { | ||
| height: chartHeight, | ||
| length: isVertical ? chartWidth : chartHeight, | ||
| axis: axisX, | ||
@@ -108,7 +126,3 @@ config: background | ||
| })); | ||
| }), showTooltip && /*#__PURE__*/_react["default"].createElement(_.Indicator, (0, _extends2["default"])({}, indicator, { | ||
| height: chartHeight, | ||
| width: indicator.width * axisX.step / 100, | ||
| x: axisX.scaler(tickName) | ||
| })), series.map(function (_ref2, index) { | ||
| }), showTooltip && /*#__PURE__*/_react["default"].createElement(_.Indicator, (0, _extends2["default"])({}, indicator, indicatorAttr)), series.map(function (_ref2, index) { | ||
| var Component = _ref2.Component, | ||
@@ -118,7 +132,19 @@ yOrZ = _ref2.yOrZ, | ||
| var yAxis = axes.get(yOrZ); | ||
| return yAxis && Component && /*#__PURE__*/_react["default"].createElement(Component, (0, _extends2["default"])({}, config, { | ||
| key: index, | ||
| return yAxis && Component && /*#__PURE__*/_react["default"].createElement(Component, (0, _extends2["default"])({ | ||
| key: index | ||
| }, config, { | ||
| xAxis: axisX, | ||
| yAxis: yAxis | ||
| })); | ||
| }), series.map(function (_ref3, index) { | ||
| var Component = _ref3.Component, | ||
| yOrZ = _ref3.yOrZ, | ||
| config = (0, _objectWithoutProperties2["default"])(_ref3, ["Component", "yOrZ"]); | ||
| var yAxis = axes.get(yOrZ); | ||
| return yAxis && /*#__PURE__*/_react["default"].createElement(_.Label, (0, _extends2["default"])({ | ||
| key: index | ||
| }, config, { | ||
| xAxis: axisX, | ||
| yAxis: yAxis | ||
| })); | ||
| })), /*#__PURE__*/_react["default"].createElement(_.Legend, { | ||
@@ -128,8 +154,12 @@ filterData: filterData, | ||
| config: legend | ||
| }), showTooltip && /*#__PURE__*/_react["default"].createElement(_.Tooltip, (0, _extends2["default"])({}, tooltip, { | ||
| axisX: axisX, | ||
| }), showTooltip && /*#__PURE__*/_react["default"].createElement(_.Tooltip, (0, _extends2["default"])({ | ||
| isVertical: isVertical | ||
| }, tooltip, { | ||
| data: tooltipData, | ||
| x: tooltipX, | ||
| tickName: tickName | ||
| }))); | ||
| })), brush && /*#__PURE__*/_react["default"].createElement(_.Brush, { | ||
| config: brush, | ||
| width: width | ||
| })); | ||
| }); | ||
@@ -136,0 +166,0 @@ |
@@ -104,2 +104,14 @@ "use strict"; | ||
| }); | ||
| Object.defineProperty(exports, "Brush", { | ||
| enumerable: true, | ||
| get: function get() { | ||
| return _Brush["default"]; | ||
| } | ||
| }); | ||
| Object.defineProperty(exports, "Label", { | ||
| enumerable: true, | ||
| get: function get() { | ||
| return _Label["default"]; | ||
| } | ||
| }); | ||
| exports.Area = void 0; | ||
@@ -139,3 +151,7 @@ | ||
| var _Brush = _interopRequireDefault(require("./Brush")); | ||
| var _Label = _interopRequireDefault(require("./Label")); | ||
| var Area = _Line["default"]; | ||
| exports.Area = Area; |
@@ -12,8 +12,11 @@ "use strict"; | ||
| width = _ref.width, | ||
| x = _ref.x; | ||
| _ref$x = _ref.x, | ||
| x = _ref$x === void 0 ? 0 : _ref$x, | ||
| _ref$y = _ref.y, | ||
| y = _ref$y === void 0 ? 0 : _ref$y; | ||
| return /*#__PURE__*/React.createElement("rect", { | ||
| width: width, | ||
| height: height, | ||
| x: x - width / 2, | ||
| y: "0", | ||
| x: x, | ||
| y: y, | ||
| fill: color, | ||
@@ -20,0 +23,0 @@ stroke: "none" |
@@ -14,4 +14,2 @@ "use strict"; | ||
| var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")); | ||
| var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty")); | ||
@@ -49,69 +47,12 @@ | ||
| var Icon = function Icon(_ref2) { | ||
| var cx = _ref2.cx, | ||
| cy = _ref2.cy, | ||
| var Area = function Area(_ref2) { | ||
| var data = _ref2.data, | ||
| _ref2$config = _ref2.config, | ||
| mode = _ref2$config.mode, | ||
| inner = _ref2$config.inner, | ||
| outer = _ref2$config.outer, | ||
| color = _ref2$config.color, | ||
| radius = _ref2$config.radius; | ||
| return mode == 'single' ? /*#__PURE__*/_react["default"].createElement(Circle, { | ||
| cx: cx, | ||
| cy: cy, | ||
| color: color, | ||
| radius: radius | ||
| }) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(Circle, (0, _extends2["default"])({ | ||
| cx: cx, | ||
| cy: cy | ||
| }, inner)), /*#__PURE__*/_react["default"].createElement(Circle, (0, _extends2["default"])({ | ||
| cx: cx, | ||
| cy: cy | ||
| }, outer))); | ||
| }; | ||
| id = _ref2$config.id, | ||
| fill = _ref2$config.fill, | ||
| curve = _ref2$config.curve, | ||
| tension = _ref2$config.tension, | ||
| xScaler = _ref2.xScaler, | ||
| yScaler = _ref2.yScaler; | ||
| var Circle = function Circle(_ref3) { | ||
| var cx = _ref3.cx, | ||
| cy = _ref3.cy, | ||
| color = _ref3.color, | ||
| radius = _ref3.radius; | ||
| return /*#__PURE__*/_react["default"].createElement("circle", { | ||
| cx: cx, | ||
| cy: cy, | ||
| fill: color, | ||
| r: radius, | ||
| stroke: "none" | ||
| }); | ||
| }; | ||
| var Label = function Label(_ref4) { | ||
| var x = _ref4.x, | ||
| y = _ref4.y, | ||
| value = _ref4.value, | ||
| _ref4$config = _ref4.config, | ||
| font = _ref4$config.font, | ||
| _ref4$config$translat = _ref4$config.translate, | ||
| translateX = _ref4$config$translat.x, | ||
| translateY = _ref4$config$translat.y, | ||
| _ref4$config$textAnch = _ref4$config.textAnchor, | ||
| textAnchor = _ref4$config$textAnch === void 0 ? 'middle' : _ref4$config$textAnch; | ||
| return /*#__PURE__*/_react["default"].createElement("text", (0, _extends2["default"])({ | ||
| x: x, | ||
| y: y | ||
| }, (0, _utils.getFontStyle)(font, 'svg'), { | ||
| transform: 'translate(' + translateX + ', ' + translateY + ')', | ||
| textAnchor: textAnchor | ||
| }), value); | ||
| }; | ||
| var Area = function Area(_ref5) { | ||
| var data = _ref5.data, | ||
| _ref5$config = _ref5.config, | ||
| id = _ref5$config.id, | ||
| fill = _ref5$config.fill, | ||
| curve = _ref5$config.curve, | ||
| tension = _ref5$config.tension, | ||
| xScaler = _ref5.xScaler, | ||
| yScaler = _ref5.yScaler; | ||
| var _yScaler$range = yScaler.range(), | ||
@@ -125,7 +66,7 @@ _yScaler$range2 = (0, _slicedToArray2["default"])(_yScaler$range, 1), | ||
| var areaGen = (0, _react.useMemo)(function () { | ||
| var areaGen = (0, _d3v.area)().x(function (_ref6) { | ||
| var x = _ref6.data.x; | ||
| var areaGen = (0, _d3v.area)().x(function (_ref3) { | ||
| var x = _ref3.data.x; | ||
| return xScaler(x); | ||
| }).y1(function (_ref7) { | ||
| var y = _ref7.data.y; | ||
| }).y1(function (_ref4) { | ||
| var y = _ref4.data.y; | ||
| return yScaler(y); | ||
@@ -147,32 +88,29 @@ }).y0(height).defined(defined); | ||
| var _default = /*#__PURE__*/(0, _react.memo)(function (_ref8) { | ||
| var type = _ref8.type, | ||
| _ref8$config = _ref8.config, | ||
| _ref8$config$line = _ref8$config.line, | ||
| lineType = _ref8$config$line.type, | ||
| lineWidth = _ref8$config$line.lineWidth, | ||
| curve = _ref8$config$line.curve, | ||
| tension = _ref8$config$line.tension, | ||
| connectNulls = _ref8$config$line.connectNulls, | ||
| lighter = _ref8$config$line.lighter, | ||
| icon = _ref8$config.icon, | ||
| label = _ref8$config.label, | ||
| _ref8$line = _ref8.line, | ||
| lineId = _ref8$line.id, | ||
| stroke = _ref8$line.stroke, | ||
| area = _ref8.area, | ||
| data = _ref8.data, | ||
| _ref8$xAxis = _ref8.xAxis, | ||
| xScaler = _ref8$xAxis.scaler, | ||
| ticks = _ref8$xAxis.ticks, | ||
| yScaler = _ref8.yAxis.scaler; | ||
| var _default = /*#__PURE__*/(0, _react.memo)(function (_ref5) { | ||
| var type = _ref5.type, | ||
| _ref5$config$line = _ref5.config.line, | ||
| lineType = _ref5$config$line.type, | ||
| lineWidth = _ref5$config$line.lineWidth, | ||
| curve = _ref5$config$line.curve, | ||
| tension = _ref5$config$line.tension, | ||
| connectNulls = _ref5$config$line.connectNulls, | ||
| lighter = _ref5$config$line.lighter, | ||
| _ref5$line = _ref5.line, | ||
| lineId = _ref5$line.id, | ||
| stroke = _ref5$line.stroke, | ||
| area = _ref5.area, | ||
| data = _ref5.data, | ||
| _ref5$xAxis = _ref5.xAxis, | ||
| xScaler = _ref5$xAxis.scaler, | ||
| ticks = _ref5$xAxis.ticks, | ||
| yScaler = _ref5.yAxis.scaler; | ||
| if (!data.length) return null; | ||
| var sortData = (0, _react.useMemo)(function () { | ||
| var usefulData = data.filter(function (_ref9) { | ||
| var x = _ref9.data.x; | ||
| var usefulData = data.filter(function (_ref6) { | ||
| var x = _ref6.data.x; | ||
| return ticks.indexOf(x) > -1; | ||
| }); | ||
| return usefulData.sort(function (_ref10, _ref11) { | ||
| var a = _ref10.data.x; | ||
| var b = _ref11.data.x; | ||
| return usefulData.sort(function (_ref7, _ref8) { | ||
| var a = _ref7.data.x; | ||
| var b = _ref8.data.x; | ||
| return ticks.indexOf(a) - ticks.indexOf(b); | ||
@@ -187,7 +125,7 @@ }); | ||
| var lineGen = (0, _react.useMemo)(function () { | ||
| var lineGen = (0, _d3v.line)().x(function (_ref12) { | ||
| var x = _ref12.data.x; | ||
| var lineGen = (0, _d3v.line)().x(function (_ref9) { | ||
| var x = _ref9.data.x; | ||
| return xScaler(x); | ||
| }).y(function (_ref13) { | ||
| var y = _ref13.data.y; | ||
| }).y(function (_ref10) { | ||
| var y = _ref10.data.y; | ||
| return yScaler(y); | ||
@@ -200,4 +138,2 @@ }).defined(defined); | ||
| var showLighter = lighter && lighter.show; | ||
| var showIcon = icon && icon.show; | ||
| var showLabel = label && label.show; | ||
| return /*#__PURE__*/_react["default"].createElement("g", { | ||
@@ -222,21 +158,2 @@ className: "__easyv-line" | ||
| config: lighter | ||
| }), (showIcon || showLabel) && _data.map(function (_ref14, index) { | ||
| var _ref14$data = _ref14.data, | ||
| x = _ref14$data.x, | ||
| y = _ref14$data.y; | ||
| var cx = xScaler(x); | ||
| if (isNaN(cx)) return null; | ||
| var cy = yScaler(y); | ||
| return /*#__PURE__*/_react["default"].createElement(_react.Fragment, { | ||
| key: index | ||
| }, showIcon && /*#__PURE__*/_react["default"].createElement(Icon, { | ||
| cx: cx, | ||
| cy: cy, | ||
| config: icon | ||
| }), showLabel && /*#__PURE__*/_react["default"].createElement(Label, { | ||
| value: y, | ||
| x: cx, | ||
| y: cy, | ||
| config: label | ||
| })); | ||
| })); | ||
@@ -243,0 +160,0 @@ }); |
@@ -21,3 +21,3 @@ "use strict"; | ||
| var _default = /*#__PURE__*/(0, _react.memo)(function (_ref) { | ||
| var positionX = _ref.x, | ||
| var position = _ref.x, | ||
| x = _ref.tickName, | ||
@@ -44,3 +44,9 @@ data = _ref.data, | ||
| translateTip = _ref$config$tip.translate, | ||
| formatter = _ref.formatter; | ||
| formatter = _ref.formatter, | ||
| isVertical = _ref.isVertical; | ||
| var translate3d = isVertical ? _objectSpread(_objectSpread({}, translateTip), {}, { | ||
| y: translateTip.x + position | ||
| }) : _objectSpread(_objectSpread({}, translateTip), {}, { | ||
| x: translateTip.x + position | ||
| }); | ||
| return /*#__PURE__*/React.createElement("div", { | ||
@@ -50,5 +56,3 @@ className: "__easyv-tooltip", | ||
| pointerEvents: 'none', | ||
| transform: (0, _utils.getTranslate3d)(_objectSpread(_objectSpread({}, translateTip), {}, { | ||
| x: translateTip.x + positionX | ||
| })), | ||
| transform: (0, _utils.getTranslate3d)(translate3d), | ||
| width: width, | ||
@@ -55,0 +59,0 @@ height: height, |
@@ -51,4 +51,4 @@ "use strict"; | ||
| mode = item.mode; | ||
| var direction = orientation == 'top' || orientation == 'bottom' ? 'horizontal' : orientation == 'left' || orientation == 'right' ? 'vertical' : ''; | ||
| var length = direction == 'horizontal' ? width : direction == 'vertical' ? height : 0; | ||
| var direction = orientation === 'top' || orientation === 'bottom' ? 'horizontal' : orientation === 'left' || orientation === 'right' ? 'vertical' : ''; | ||
| var length = direction === 'horizontal' ? width : direction === 'vertical' ? height : 0; | ||
@@ -59,3 +59,3 @@ var _paddingOuter = paddingOuter * length; | ||
| var end = length - start; | ||
| var range = direction == 'horizontal' ? [start, end] : direction == 'vertical' ? [end, start] : [0, 0]; | ||
| var range = direction === 'horizontal' ? [start, end] : direction === 'vertical' ? [end, start] : [0, 0]; | ||
| var scaler = scales[type]().domain(domain).range(range); | ||
@@ -62,0 +62,0 @@ if (type !== 'ordinal') scaler.nice(); |
@@ -10,6 +10,6 @@ "use strict"; | ||
| var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty")); | ||
| var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray")); | ||
| var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty")); | ||
| var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray")); | ||
@@ -35,5 +35,17 @@ | ||
| var time = duration + interval; | ||
| var tickLength = axis.ticks.length; | ||
| var tickCount = axis.tickCount, | ||
| allTicks = axis.allTicks, | ||
| scaler = axis.scaler, | ||
| start = axis.start, | ||
| end = axis.end, | ||
| step = axis.step, | ||
| ticks = axis.ticks, | ||
| lengthWithoutPaddingOuter = axis.lengthWithoutPaddingOuter; | ||
| var tickLength = ticks.length; | ||
| var _useState = (0, _react.useState)(axis), | ||
| var _useState = (0, _react.useState)({ | ||
| scaler: scaler, | ||
| step: step, | ||
| ticks: ticks | ||
| }), | ||
| _useState2 = (0, _slicedToArray2["default"])(_useState, 2), | ||
@@ -73,13 +85,4 @@ state = _useState2[0], | ||
| }; | ||
| }, [show, time, tickLength]); //TODO: 蹩脚，待优化 | ||
| }, [show, time, tickLength]); | ||
| (0, _react.useEffect)(function () { | ||
| setStatus(function (status) { | ||
| if (status.flag === false) return status; | ||
| return _objectSpread(_objectSpread({}, status), {}, { | ||
| flag: true | ||
| }); | ||
| }); | ||
| }, [axis]); | ||
| (0, _react.useEffect)(function () { | ||
| var animation; | ||
@@ -90,18 +93,12 @@ var currentIndex = status.currentIndex, | ||
| if (currentIndex !== null) { | ||
| var _step = lengthWithoutPaddingOuter / tickCount; | ||
| if (flag) { | ||
| var tickCount = axis.tickCount, | ||
| allTicks = axis.allTicks, | ||
| scaler = axis.scaler, | ||
| start = axis.start, | ||
| end = axis.end, | ||
| lengthWithoutPaddingOuter = axis.lengthWithoutPaddingOuter; | ||
| var _ticks = allTicks.slice(currentIndex, tickCount); | ||
| var step = lengthWithoutPaddingOuter / tickCount; | ||
| setState(_objectSpread(_objectSpread({}, axis), {}, { | ||
| step: step, | ||
| setState({ | ||
| step: _step, | ||
| ticks: _ticks, | ||
| scaler: scaler.copy().domain(_ticks).range([start, end]) | ||
| })); | ||
| }); | ||
| } else { | ||
@@ -116,8 +113,3 @@ animation = (0, _popmotion.animate)({ | ||
| var ticks = axis.ticks, | ||
| allTicks = axis.allTicks, | ||
| scaler = axis.scaler, | ||
| start = axis.start, | ||
| end = axis.end, | ||
| tickCount = axis.tickCount, | ||
| step = axis.step; | ||
| scaler = axis.scaler; | ||
@@ -127,8 +119,7 @@ var _ticks2 = (0, _slicedToArray2["default"])(ticks, 1), | ||
| var _ticks = [tick].concat((0, _toConsumableArray2["default"])(getTicks(allTicks, currentIndex, tickCount))); // console.log(start, end, step); | ||
| var _ticks = [tick].concat((0, _toConsumableArray2["default"])(getTicks(allTicks, currentIndex, tickCount))); | ||
| return _objectSpread(_objectSpread({}, axis), {}, { | ||
| ticks: _ticks, | ||
| scaler: scaler.copy().range([start, end + step]).domain(_ticks) | ||
| scaler: scaler.copy().range([start, end + _step]).domain(_ticks) | ||
| }); | ||
@@ -140,6 +131,3 @@ }); | ||
| var scaler = axis.scaler, | ||
| start = axis.start, | ||
| end = axis.end, | ||
| step = axis.step; // console.log(start, end, step); | ||
| step = axis.step; | ||
| return _objectSpread(_objectSpread({}, axis), {}, { | ||
@@ -153,10 +141,6 @@ scaler: scaler.copy().range([start + step * v, end + step + step * v]) | ||
| var scaler = axis.scaler, | ||
| ticks = axis.ticks, | ||
| start = axis.start, | ||
| end = axis.end, | ||
| step = axis.step; | ||
| ticks = axis.ticks; | ||
| var _ticks = ticks.slice(1, ticks.length); // console.log(start, end, step); | ||
| var _ticks = ticks.slice(1, ticks.length); | ||
| return _objectSpread(_objectSpread({}, axis), {}, { | ||
@@ -171,10 +155,7 @@ ticks: _ticks, | ||
| } else { | ||
| var _allTicks = axis.allTicks, | ||
| _scaler = axis.scaler, | ||
| _start = axis.start, | ||
| _end = axis.end; | ||
| setState(_objectSpread(_objectSpread({}, axis), {}, { | ||
| scaler: _scaler.copy().domain(_allTicks).range([_start, _end]), | ||
| ticks: _allTicks | ||
| })); | ||
| setState({ | ||
| step: step, | ||
| scaler: scaler.copy().domain(allTicks).range([start, end]), | ||
| ticks: allTicks | ||
| }); | ||
| } | ||
@@ -185,4 +166,4 @@ | ||
| }; | ||
| }, [axis, status, duration]); | ||
| return state; | ||
| }, [tickCount, allTicks, scaler, start, end, step, ticks, lengthWithoutPaddingOuter, status, duration]); | ||
| return _objectSpread(_objectSpread({}, axis), state); | ||
| }; | ||
@@ -189,0 +170,0 @@ |
@@ -85,3 +85,3 @@ "use strict"; | ||
| currentSeries.groupLength = stacks.length; | ||
| currentSeries.bandLength = currentSeries.type === 'band' ? stacks.length : 1; | ||
| } | ||
@@ -88,0 +88,0 @@ }); |
@@ -41,15 +41,20 @@ "use strict"; | ||
| mouseY = _getMousePos.y, | ||
| boundWidth = _getMousePos.w; | ||
| boundWidth = _getMousePos.w, | ||
| boundHeight = _getMousePos.h; | ||
| var ratio = parseInt(svg.current.style.width) / boundWidth; | ||
| var resetX = mouseX * ratio; | ||
| var resetY = mouseY * ratio; | ||
| var ticks = axisX.ticks, | ||
| scaler = axisX.scaler, | ||
| direction = axisX.direction; | ||
| var ratioX = parseInt(svg.current.style.width) / boundWidth; | ||
| var ratioY = parseInt(svg.current.style.height) / boundHeight; | ||
| var resetX = mouseX * ratioX; | ||
| var resetY = mouseY * ratioY; | ||
| var x = resetX - marginLeft; | ||
| var y = resetY - marginTop; | ||
| var ticks = axisX.ticks, | ||
| scaler = axisX.scaler; | ||
| if (x > 0 && x < width && y > 0 && y < height && ticks.length) { | ||
| var position = direction === 'vertical' ? y : x; | ||
| var _name = ticks.reduce(function (prev, current) { | ||
| return Math.abs(scaler(prev) - x) > Math.abs(scaler(current) - x) ? current : prev; | ||
| return Math.abs(scaler(prev) - position) > Math.abs(scaler(current) - position) ? current : prev; | ||
| }); | ||
@@ -56,0 +61,0 @@ |
@@ -9,3 +9,3 @@ "use strict"; | ||
| exports.band = band; | ||
| exports.getCurrentStack = exports.resetStacks = exports.seriesYOrZ = exports.dataYOrZ = exports.getStacks = exports.getColorList = exports.getIcon = exports.getTranslate3d = exports.getMargin = exports.getFontStyle = exports.getMousePos = exports.identity = exports.getGridCoord = exports.getTickCoord = exports.getBreakWord = exports.dateFormat = void 0; | ||
| 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; | ||
@@ -277,2 +277,12 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray")); | ||
| var getTranslate2d = function getTranslate2d(_ref8) { | ||
| var _ref8$x = _ref8.x, | ||
| x = _ref8$x === void 0 ? 0 : _ref8$x, | ||
| _ref8$y = _ref8.y, | ||
| y = _ref8$y === void 0 ? 0 : _ref8$y; | ||
| return 'translate(' + x + ', ' + y + ')'; | ||
| }; | ||
| exports.getTranslate2d = getTranslate2d; | ||
| function band() { | ||
@@ -313,11 +323,11 @@ var scale = (0, _d3v.scaleOrdinal)().unknown(undefined), | ||
| scale.range = function (_) { | ||
| var _ref8, _ref9; | ||
| var _ref9, _ref10; | ||
| return arguments.length ? ((_ref8 = _, _ref9 = (0, _slicedToArray2["default"])(_ref8, 2), r0 = _ref9[0], r1 = _ref9[1], _ref8), r0 = +r0, r1 = +r1, rescale()) : [r0, r1]; | ||
| return arguments.length ? ((_ref9 = _, _ref10 = (0, _slicedToArray2["default"])(_ref9, 2), r0 = _ref10[0], r1 = _ref10[1], _ref9), r0 = +r0, r1 = +r1, rescale()) : [r0, r1]; | ||
| }; | ||
| scale.rangeRound = function (_) { | ||
| var _ref10, _ref11; | ||
| var _ref11, _ref12; | ||
| return (_ref10 = _, _ref11 = (0, _slicedToArray2["default"])(_ref10, 2), r0 = _ref11[0], r1 = _ref11[1], _ref10), r0 = +r0, r1 = +r1, round = true, rescale(); | ||
| return (_ref11 = _, _ref12 = (0, _slicedToArray2["default"])(_ref11, 2), r0 = _ref12[0], r1 = _ref12[1], _ref11), r0 = +r0, r1 = +r1, round = true, rescale(); | ||
| }; | ||
@@ -375,48 +385,14 @@ | ||
| return this; | ||
| } // const getStacks = (series) => { | ||
| // const tmp = []; | ||
| // let bandCount = 0; | ||
| // series.forEach(({ type, stack, yOrZ }, s) => { | ||
| // const current = tmp.find( | ||
| // ({ type: _type, stack: _stack, yOrZ: _yOrZ }) => | ||
| // _type == type && stack && _stack == stack && yOrZ == _yOrZ | ||
| // ); | ||
| // if (!current) { | ||
| // const common = { | ||
| // type, | ||
| // stack, | ||
| // positive: 0, | ||
| // negative: 0, | ||
| // yOrZ, | ||
| // s, | ||
| // }; | ||
| // if (type == 'band') { | ||
| // const index = tmp.filter((item) => item.type == 'band').length; | ||
| // tmp.push({ | ||
| // ...common, | ||
| // index, | ||
| // }); | ||
| // bandCount = index + 1; | ||
| // } else { | ||
| // tmp.push({ | ||
| // ...common, | ||
| // index: 0, | ||
| // }); | ||
| // } | ||
| // } | ||
| // }); | ||
| // return { stacks: tmp, bandCount }; | ||
| // }; | ||
| } | ||
| var getStacks = function getStacks(series) { | ||
| var tmp = []; | ||
| series.forEach(function (_ref12, fieldName) { | ||
| var type = _ref12.type, | ||
| stack = _ref12.stack, | ||
| yOrZ = _ref12.yOrZ; | ||
| var current = tmp.find(function (_ref13) { | ||
| var _type = _ref13.type, | ||
| _stack = _ref13.stack, | ||
| _yOrZ = _ref13.yOrZ; | ||
| series.forEach(function (_ref13, fieldName) { | ||
| var type = _ref13.type, | ||
| stack = _ref13.stack, | ||
| yOrZ = _ref13.yOrZ; | ||
| var current = tmp.find(function (_ref14) { | ||
| var _type = _ref14.type, | ||
| _stack = _ref14.stack, | ||
| _yOrZ = _ref14.yOrZ; | ||
| return _type == type && stack && _stack == stack && yOrZ == _yOrZ; | ||
@@ -435,5 +411,5 @@ }); | ||
| if (type == 'band') { | ||
| if (type === 'band') { | ||
| var index = tmp.filter(function (item) { | ||
| return item.type == 'band'; | ||
| return item.type === 'band'; | ||
| }).length; | ||
@@ -457,5 +433,5 @@ tmp.push(_objectSpread(_objectSpread({}, common), {}, { | ||
| var dataYOrZ = function dataYOrZ(data, _ref14) { | ||
| var seriesY = _ref14.y, | ||
| seriesZ = _ref14.z; | ||
| var dataYOrZ = function dataYOrZ(data, _ref15) { | ||
| var seriesY = _ref15.y, | ||
| seriesZ = _ref15.z; | ||
| var tmp = { | ||
@@ -488,3 +464,3 @@ y: [], | ||
| series.forEach(function (value, key) { | ||
| if (value.yOrZ == 'y') { | ||
| if (value.yOrZ === 'y') { | ||
| y.set(key, value); | ||
@@ -513,7 +489,7 @@ } else { | ||
| var getCurrentStack = function getCurrentStack(stack, stackMap) { | ||
| return stackMap.find(function (_ref15) { | ||
| var _stack = _ref15.stack, | ||
| _type = _ref15.type, | ||
| _yOrZ = _ref15.yOrZ, | ||
| _s = _ref15.s; | ||
| return stackMap.find(function (_ref16) { | ||
| var _stack = _ref16.stack, | ||
| _type = _ref16.type, | ||
| _yOrZ = _ref16.yOrZ, | ||
| _s = _ref16.s; | ||
| return _type == stack.type && _stack == stack.stack && _yOrZ == stack.yOrZ && _s.includes(stack.fieldName); | ||
@@ -520,0 +496,0 @@ }); |
| { | ||
| "name": "@easyv/charts", | ||
| "version": "1.0.4", | ||
| "version": "1.0.5", | ||
| "description": "", | ||
@@ -5,0 +5,0 @@ "main": "lib/index.js", |
| export default ({ | ||
| axis: { ticks, scaler, step }, | ||
| axis: { ticks, scaler, step, direction }, | ||
| config: { | ||
@@ -8,12 +8,22 @@ background, | ||
| }, | ||
| height, | ||
| length, | ||
| }) => { | ||
| const isVertical = direction === 'vertical'; | ||
| const bandwidth = step / Math.max(1, 1 - paddingInner + paddingOuter); | ||
| const size = isVertical | ||
| ? { | ||
| width: length, | ||
| height: bandwidth, | ||
| } | ||
| : { | ||
| width: bandwidth, | ||
| height: length, | ||
| }; | ||
| return ticks.map((tick, index) => ( | ||
| <rect | ||
| key={index} | ||
| width={bandwidth} | ||
| height={height} | ||
| x={scaler(tick) - bandwidth / 2} | ||
| y='0' | ||
| {...size} | ||
| x={isVertical ? 0 : scaler(tick) - bandwidth / 2} | ||
| y={isVertical ? scaler(tick) - bandwidth / 2 : 0} | ||
| fill={background} | ||
@@ -20,0 +30,0 @@ stroke='none' |
@@ -1,4 +0,5 @@ | ||
| import React, { memo, Fragment } from 'react'; | ||
| import React, { memo } from 'react'; | ||
| import { getColor } from '@easyv/utils'; | ||
| import { min, max } from 'd3v6'; | ||
| const getHighlightData = (data, extent) => { | ||
@@ -23,19 +24,34 @@ switch (extent) { | ||
| const getAttr = ({ isVertical, bandwidth, length, x, y }) => { | ||
| if (isVertical) return { width: length, height: bandwidth, x: y, y: x }; | ||
| return { | ||
| x, | ||
| y, | ||
| width: bandwidth, | ||
| height: length, | ||
| }; | ||
| }; | ||
| const getBorderRadius = ({ isVertical, positive, bandwidth }) => { | ||
| return isVertical | ||
| ? positive | ||
| ? '0px ' + bandwidth + 'px ' + bandwidth + 'px 0' | ||
| : bandwidth + 'px 0 0 ' + bandwidth + 'px' | ||
| : positive | ||
| ? bandwidth / 2 + 'px ' + bandwidth / 2 + 'px 0 0' | ||
| : '0 0 ' + bandwidth / 2 + 'px ' + bandwidth / 2 + 'px'; | ||
| }; | ||
| export default memo( | ||
| ({ | ||
| config: { | ||
| seriesIntervalWidth: paddingInner, | ||
| paddingInner: paddingOuter, | ||
| seriesIntervalWidth: paddingInner = 0, | ||
| paddingInner: paddingOuter = 0, | ||
| style, | ||
| fill, | ||
| highlight: { show: showHighlight, extent, fill: highlightFill }, | ||
| label: { | ||
| show: showLabel, | ||
| font, | ||
| translate: { x: translateX, y: translateY }, | ||
| }, | ||
| }, | ||
| groupLength, | ||
| bandLength = 0, | ||
| data, | ||
| xAxis: { scaler: xScaler, step }, | ||
| xAxis: { scaler: xScaler, step, direction }, | ||
| yAxis: { scaler: yScaler }, | ||
@@ -45,3 +61,3 @@ }) => { | ||
| const bandStep = | ||
| step / Math.max(1, groupLength - paddingInner + paddingOuter * 2); | ||
| step / Math.max(1, bandLength - paddingInner + paddingOuter * 2); | ||
| const bandwidth = bandStep * (1 - paddingInner); | ||
@@ -52,5 +68,6 @@ | ||
| const offset = | ||
| (bandwidth + paddingInner * bandStep) * groupLength - | ||
| (bandwidth + paddingInner * bandStep) * bandLength - | ||
| paddingInner * bandStep; | ||
| const isVertical = direction === 'vertical'; | ||
| return ( | ||
@@ -60,4 +77,4 @@ <g className='__easyv-band'> | ||
| ({ flag, index, bound: [start, end], data: { x, y, s } }, i) => { | ||
| const y1 = yScaler(start); | ||
| const y2 = yScaler(end); | ||
| const y1 = yScaler(isVertical ? end : start); | ||
| const y2 = yScaler(isVertical ? start : end); | ||
| const positionX = xScaler(x) + bandStep * index - offset / 2; | ||
@@ -67,51 +84,31 @@ if (isNaN(positionX)) return null; | ||
| return ( | ||
| <Fragment key={i}> | ||
| <foreignObject | ||
| x={positionX} | ||
| y={positionY} | ||
| width={bandwidth} | ||
| height={Math.abs(y1 - y2)} | ||
| > | ||
| <div | ||
| style={{ | ||
| width: '100%', | ||
| height: '100%', | ||
| background: | ||
| extent === flag | ||
| ? getColor(highlightFill) | ||
| : getColor(fill), | ||
| borderRadius: | ||
| style === 'square' | ||
| ? 'none' | ||
| : y > 0 | ||
| ? bandwidth / 2 + 'px ' + bandwidth / 2 + 'px 0 0' | ||
| : '0 0 ' + | ||
| bandwidth / 2 + | ||
| 'px ' + | ||
| bandwidth / 2 + | ||
| 'px', | ||
| }} | ||
| /> | ||
| </foreignObject> | ||
| {showLabel && ( | ||
| <text | ||
| x={positionX + bandwidth / 2} | ||
| y={y2} | ||
| textAnchor='middle' | ||
| dominantBaseline={ | ||
| y > 0 ? 'text-after-edge' : 'text-before-edge' | ||
| } | ||
| transform={ | ||
| 'translate(' + | ||
| translateX + | ||
| ', ' + | ||
| translateY * (y > 0 ? 1 : -1) + | ||
| ')' | ||
| } | ||
| {...font} | ||
| > | ||
| {y} | ||
| </text> | ||
| )} | ||
| </Fragment> | ||
| <foreignObject | ||
| key={i} | ||
| {...getAttr({ | ||
| isVertical, | ||
| x: positionX, | ||
| y: positionY, | ||
| length: Math.abs(y1 - y2), | ||
| bandwidth, | ||
| })} | ||
| > | ||
| <div | ||
| style={{ | ||
| width: '100%', | ||
| height: '100%', | ||
| background: | ||
| extent === flag | ||
| ? getColor(highlightFill) | ||
| : getColor(fill), | ||
| borderRadius: | ||
| style === 'square' | ||
| ? 'none' | ||
| : getBorderRadius({ | ||
| isVertical, | ||
| positive: y > 0, | ||
| bandwidth, | ||
| }), | ||
| }} | ||
| /> | ||
| </foreignObject> | ||
| ); | ||
@@ -118,0 +115,0 @@ } |
@@ -1,2 +0,2 @@ | ||
| import React, { memo, useMemo, createRef, useEffect } from 'react'; | ||
| import React, { memo, useMemo, createRef, useEffect, Fragment } from 'react'; | ||
| import { useAxes, useTooltip, useCarouselAxisX } from '../hooks'; | ||
@@ -15,2 +15,4 @@ import { chartContext } from '../context'; | ||
| ExtentData, | ||
| Brush, | ||
| Label, | ||
| } from '.'; | ||
@@ -33,6 +35,8 @@ | ||
| series, | ||
| tooltip, | ||
| tooltip: { | ||
| config: { auto, manual, indicator }, | ||
| }, | ||
| tooltip, | ||
| config: tooltipConfig = {}, | ||
| config: { auto, manual, indicator } = {}, | ||
| } = {}, | ||
| brush, | ||
| }, | ||
@@ -70,3 +74,3 @@ data, | ||
| axisX, | ||
| config: tooltip.config, | ||
| config: tooltipConfig, | ||
| }); | ||
@@ -84,2 +88,14 @@ const tooltipData = useMemo( | ||
| const isVertical = axisX.direction === 'vertical'; | ||
| const indicatorWidth = (indicator.width * axisX.step) / 100; | ||
| const position = axisX.scaler(tickName) - indicatorWidth / 2; | ||
| const indicatorAttr = isVertical | ||
| ? { width: chartWidth, height: indicatorWidth, y: position } | ||
| : { | ||
| height: chartHeight, | ||
| width: indicatorWidth, | ||
| x: position, | ||
| }; | ||
| return ( | ||
@@ -97,3 +113,7 @@ <chartContext.Provider value={context}> | ||
| {background && ( | ||
| <Background height={chartHeight} axis={axisX} config={background} /> | ||
| <Background | ||
| length={isVertical ? chartWidth : chartHeight} | ||
| axis={axisX} | ||
| config={background} | ||
| /> | ||
| )} | ||
@@ -105,10 +125,3 @@ {[...axes.values()].map((item, index) => { | ||
| {showTooltip && ( | ||
| <Indicator | ||
| {...indicator} | ||
| height={chartHeight} | ||
| width={(indicator.width * axisX.step) / 100} | ||
| x={axisX.scaler(tickName)} | ||
| /> | ||
| )} | ||
| {showTooltip && <Indicator {...indicator} {...indicatorAttr} />} | ||
| {series.map(({ Component, yOrZ, ...config }, index) => { | ||
@@ -120,4 +133,4 @@ const yAxis = axes.get(yOrZ); | ||
| <Component | ||
| key={index} | ||
| {...config} | ||
| key={index} | ||
| xAxis={axisX} | ||
@@ -129,2 +142,10 @@ yAxis={yAxis} | ||
| })} | ||
| {series.map(({ Component, yOrZ, ...config }, index) => { | ||
| const yAxis = axes.get(yOrZ); | ||
| return ( | ||
| yAxis && ( | ||
| <Label key={index} {...config} xAxis={axisX} yAxis={yAxis} /> | ||
| ) | ||
| ); | ||
| })} | ||
| </ChartContainer> | ||
@@ -134,4 +155,4 @@ <Legend filterData={filterData} series={series} config={legend} /> | ||
| <Tooltip | ||
| isVertical={isVertical} | ||
| {...tooltip} | ||
| axisX={axisX} | ||
| data={tooltipData} | ||
@@ -142,2 +163,3 @@ x={tooltipX} | ||
| )} | ||
| {brush && <Brush config={brush} width={width} />} | ||
| </chartContext.Provider> | ||
@@ -144,0 +166,0 @@ ); |
@@ -17,2 +17,4 @@ import AnimateData from './AnimateData'; | ||
| import LinearGradient from './LinearGradient'; | ||
| import Brush from './Brush'; | ||
| import Label from './Label'; | ||
@@ -38,2 +40,4 @@ const Area = Line; | ||
| LinearGradient, | ||
| Brush, | ||
| Label, | ||
| }; |
@@ -1,7 +0,7 @@ | ||
| export default ({ color, height, width, x }) => ( | ||
| export default ({ color, height, width, x = 0, y = 0 }) => ( | ||
| <rect | ||
| width={width} | ||
| height={height} | ||
| x={x - width / 2} | ||
| y='0' | ||
| x={x} | ||
| y={y} | ||
| fill={color} | ||
@@ -8,0 +8,0 @@ stroke='none' |
@@ -1,4 +0,4 @@ | ||
| import React, { memo, Fragment, useMemo } from 'react'; | ||
| import React, { memo, useMemo } from 'react'; | ||
| import { line as d3Line, area as d3Area, curveCatmullRom } from 'd3v6'; | ||
| import { getFontStyle, getColorList } from '../utils'; | ||
| import { getColorList } from '../utils'; | ||
| import { Lighter, LinearGradient } from '.'; | ||
@@ -15,36 +15,2 @@ | ||
| const Icon = ({ cx, cy, config: { mode, inner, outer, color, radius } }) => | ||
| mode == 'single' ? ( | ||
| <Circle cx={cx} cy={cy} color={color} radius={radius} /> | ||
| ) : ( | ||
| <> | ||
| <Circle cx={cx} cy={cy} {...inner} /> | ||
| <Circle cx={cx} cy={cy} {...outer} /> | ||
| </> | ||
| ); | ||
| const Circle = ({ cx, cy, color, radius }) => ( | ||
| <circle cx={cx} cy={cy} fill={color} r={radius} stroke='none' /> | ||
| ); | ||
| const Label = ({ | ||
| x, | ||
| y, | ||
| value, | ||
| config: { | ||
| font, | ||
| translate: { x: translateX, y: translateY }, | ||
| textAnchor = 'middle', | ||
| }, | ||
| }) => ( | ||
| <text | ||
| x={x} | ||
| y={y} | ||
| {...getFontStyle(font, 'svg')} | ||
| transform={'translate(' + translateX + ', ' + translateY + ')'} | ||
| textAnchor={textAnchor} | ||
| > | ||
| {value} | ||
| </text> | ||
| ); | ||
| const Area = ({ | ||
@@ -91,4 +57,4 @@ data, | ||
| }, | ||
| icon, | ||
| label, | ||
| // icon, | ||
| // label, | ||
| }, | ||
@@ -130,5 +96,2 @@ line: { id: lineId, stroke }, | ||
| const showLighter = lighter && lighter.show; | ||
| const showIcon = icon && icon.show; | ||
| const showLabel = label && label.show; | ||
| return ( | ||
@@ -152,17 +115,5 @@ <g className='__easyv-line'> | ||
| {showLighter && <Lighter path={path} config={lighter} />} | ||
| {(showIcon || showLabel) && | ||
| _data.map(({ data: { x, y } }, index) => { | ||
| const cx = xScaler(x); | ||
| if (isNaN(cx)) return null; | ||
| const cy = yScaler(y); | ||
| return ( | ||
| <Fragment key={index}> | ||
| {showIcon && <Icon cx={cx} cy={cy} config={icon} />} | ||
| {showLabel && <Label value={y} x={cx} y={cy} config={label} />} | ||
| </Fragment> | ||
| ); | ||
| })} | ||
| </g> | ||
| ); | ||
| } | ||
| ); | ||
| ); |
@@ -7,3 +7,3 @@ import { memo } from 'react'; | ||
| ({ | ||
| x: positionX, | ||
| x: position, | ||
| tickName: x, | ||
@@ -28,3 +28,13 @@ data, | ||
| formatter, | ||
| isVertical, | ||
| }) => { | ||
| const translate3d = isVertical | ||
| ? { | ||
| ...translateTip, | ||
| y: translateTip.x + position, | ||
| } | ||
| : { | ||
| ...translateTip, | ||
| x: translateTip.x + position, | ||
| }; | ||
| return ( | ||
@@ -35,6 +45,3 @@ <div | ||
| pointerEvents: 'none', | ||
| transform: getTranslate3d({ | ||
| ...translateTip, | ||
| x: translateTip.x + positionX, | ||
| }), | ||
| transform: getTranslate3d(translate3d), | ||
| width, | ||
@@ -41,0 +48,0 @@ height, |
@@ -35,5 +35,5 @@ import { useMemo } from 'react'; | ||
| const direction = | ||
| orientation == 'top' || orientation == 'bottom' | ||
| orientation === 'top' || orientation === 'bottom' | ||
| ? 'horizontal' | ||
| : orientation == 'left' || orientation == 'right' | ||
| : orientation === 'left' || orientation === 'right' | ||
| ? 'vertical' | ||
@@ -43,5 +43,5 @@ : ''; | ||
| const length = | ||
| direction == 'horizontal' | ||
| direction === 'horizontal' | ||
| ? width | ||
| : direction == 'vertical' | ||
| : direction === 'vertical' | ||
| ? height | ||
@@ -55,5 +55,5 @@ : 0; | ||
| const range = | ||
| direction == 'horizontal' | ||
| direction === 'horizontal' | ||
| ? [start, end] | ||
| : direction == 'vertical' | ||
| : direction === 'vertical' | ||
| ? [end, start] | ||
@@ -60,0 +60,0 @@ : [0, 0]; |
@@ -13,5 +13,19 @@ import { useEffect, useState } from 'react'; | ||
| const tickLength = axis.ticks.length; | ||
| const { | ||
| tickCount, | ||
| allTicks, | ||
| scaler, | ||
| start, | ||
| end, | ||
| step, | ||
| ticks, | ||
| lengthWithoutPaddingOuter, | ||
| } = axis; | ||
| const tickLength = ticks.length; | ||
| const [state, setState] = useState(axis); | ||
| const [state, setState] = useState({ | ||
| scaler, | ||
| step, | ||
| ticks, | ||
| }); | ||
| const [status, setStatus] = useState(initialState); | ||
@@ -43,30 +57,10 @@ | ||
| //TODO: 蹩脚，待优化 | ||
| useEffect(() => { | ||
| setStatus((status) => { | ||
| if (status.flag === false) return status; | ||
| return { | ||
| ...status, | ||
| flag: true, | ||
| }; | ||
| }); | ||
| }, [axis]); | ||
| useEffect(() => { | ||
| let animation; | ||
| const { currentIndex, flag } = status; | ||
| if (currentIndex !== null) { | ||
| const step = lengthWithoutPaddingOuter / tickCount; | ||
| if (flag) { | ||
| const { | ||
| tickCount, | ||
| allTicks, | ||
| scaler, | ||
| start, | ||
| end, | ||
| lengthWithoutPaddingOuter, | ||
| } = axis; | ||
| const _ticks = allTicks.slice(currentIndex, tickCount); | ||
| const step = lengthWithoutPaddingOuter / tickCount; | ||
| setState({ | ||
| ...axis, | ||
| step, | ||
@@ -84,4 +78,3 @@ ticks: _ticks, | ||
| setState((axis) => { | ||
| const { ticks, allTicks, scaler, start, end, tickCount, step } = | ||
| axis; | ||
| const { ticks, scaler } = axis; | ||
| const [tick] = ticks; | ||
@@ -92,3 +85,2 @@ const _ticks = [ | ||
| ]; | ||
| // console.log(start, end, step); | ||
| return { | ||
@@ -106,4 +98,3 @@ ...axis, | ||
| setState((axis) => { | ||
| const { scaler, start, end, step } = axis; | ||
| // console.log(start, end, step); | ||
| const { scaler, step } = axis; | ||
| return { | ||
@@ -119,5 +110,4 @@ ...axis, | ||
| setState((axis) => { | ||
| const { scaler, ticks, start, end, step } = axis; | ||
| const { scaler, ticks } = axis; | ||
| const _ticks = ticks.slice(1, ticks.length); | ||
| // console.log(start, end, step); | ||
| return { | ||
@@ -133,5 +123,4 @@ ...axis, | ||
| } else { | ||
| const { allTicks, scaler, start, end } = axis; | ||
| setState({ | ||
| ...axis, | ||
| step, | ||
| scaler: scaler.copy().domain(allTicks).range([start, end]), | ||
@@ -144,4 +133,18 @@ ticks: allTicks, | ||
| }; | ||
| }, [axis, status, duration]); | ||
| return state; | ||
| }, [ | ||
| tickCount, | ||
| allTicks, | ||
| scaler, | ||
| start, | ||
| end, | ||
| step, | ||
| ticks, | ||
| lengthWithoutPaddingOuter, | ||
| status, | ||
| duration, | ||
| ]); | ||
| return { | ||
| ...axis, | ||
| ...state, | ||
| }; | ||
| }; | ||
@@ -148,0 +151,0 @@ |
@@ -63,3 +63,5 @@ import { useMemo } from 'react'; | ||
| } | ||
| currentSeries.groupLength = stacks.length; | ||
| currentSeries.bandLength = | ||
| currentSeries.type === 'band' ? stacks.length : 1; | ||
| } | ||
@@ -66,0 +68,0 @@ }); |
@@ -16,19 +16,23 @@ import { useCallback, useState, useEffect } from 'react'; | ||
| const tickLength = axisX.ticks.length; | ||
| const setIndex = useCallback( | ||
| (e) => { | ||
| if (svg) { | ||
| const { x: mouseX, y: mouseY, w: boundWidth } = getMousePos( | ||
| e, | ||
| svg.current | ||
| ); | ||
| const ratio = parseInt(svg.current.style.width) / boundWidth; | ||
| const resetX = mouseX * ratio; | ||
| const resetY = mouseY * ratio; | ||
| const { | ||
| x: mouseX, | ||
| y: mouseY, | ||
| w: boundWidth, | ||
| h: boundHeight, | ||
| } = getMousePos(e, svg.current); | ||
| const { ticks, scaler, direction } = axisX; | ||
| const ratioX = parseInt(svg.current.style.width) / boundWidth; | ||
| const ratioY = parseInt(svg.current.style.height) / boundHeight; | ||
| const resetX = mouseX * ratioX; | ||
| const resetY = mouseY * ratioY; | ||
| const x = resetX - marginLeft; | ||
| const y = resetY - marginTop; | ||
| const { ticks, scaler } = axisX; | ||
| if (x > 0 && x < width && y > 0 && y < height && ticks.length) { | ||
| const position = direction === 'vertical' ? y : x; | ||
| const name = ticks.reduce((prev, current) => | ||
| Math.abs(scaler(prev) - x) > Math.abs(scaler(current) - x) | ||
| Math.abs(scaler(prev) - position) > | ||
| Math.abs(scaler(current) - position) | ||
| ? current | ||
@@ -35,0 +39,0 @@ : prev |
@@ -191,3 +191,3 @@ import { scaleOrdinal as ordinal, range as sequence } from 'd3v6'; | ||
| 'translate3d(' + x + 'px, ' + y + 'px, ' + z + 'px)'; | ||
| const getTranslate2d = ({ x = 0, y = 0 }) => 'translate(' + x + ', ' + y + ')'; | ||
| function band() { | ||
@@ -296,36 +296,3 @@ var scale = ordinal().unknown(undefined), | ||
| } | ||
| // const getStacks = (series) => { | ||
| // const tmp = []; | ||
| // let bandCount = 0; | ||
| // series.forEach(({ type, stack, yOrZ }, s) => { | ||
| // const current = tmp.find( | ||
| // ({ type: _type, stack: _stack, yOrZ: _yOrZ }) => | ||
| // _type == type && stack && _stack == stack && yOrZ == _yOrZ | ||
| // ); | ||
| // if (!current) { | ||
| // const common = { | ||
| // type, | ||
| // stack, | ||
| // positive: 0, | ||
| // negative: 0, | ||
| // yOrZ, | ||
| // s, | ||
| // }; | ||
| // if (type == 'band') { | ||
| // const index = tmp.filter((item) => item.type == 'band').length; | ||
| // tmp.push({ | ||
| // ...common, | ||
| // index, | ||
| // }); | ||
| // bandCount = index + 1; | ||
| // } else { | ||
| // tmp.push({ | ||
| // ...common, | ||
| // index: 0, | ||
| // }); | ||
| // } | ||
| // } | ||
| // }); | ||
| // return { stacks: tmp, bandCount }; | ||
| // }; | ||
| const getStacks = (series) => { | ||
@@ -347,4 +314,4 @@ const tmp = []; | ||
| }; | ||
| if (type == 'band') { | ||
| const index = tmp.filter((item) => item.type == 'band').length; | ||
| if (type === 'band') { | ||
| const index = tmp.filter((item) => item.type === 'band').length; | ||
| tmp.push({ | ||
@@ -389,3 +356,3 @@ ...common, | ||
| series.forEach((value, key) => { | ||
| if (value.yOrZ == 'y') { | ||
| if (value.yOrZ === 'y') { | ||
| y.set(key, value); | ||
@@ -425,2 +392,3 @@ } else { | ||
| getTranslate3d, | ||
| getTranslate2d, | ||
| band, | ||
@@ -427,0 +395,0 @@ getIcon, |
No alert changes
Improved metrics
- Total package byte prevSize
- increased by8.48%
208256
- Number of package files
- increased by4.88%
86
- Lines of code
- increased by8.63%
6292
No dependency changes