@semcore/chart
Version:
Semrush Chart Component
188 lines (183 loc) • 7.57 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _recharts = require("recharts");
var _isNil = _interopRequireDefault(require("lodash/isNil"));
var _classnames = _interopRequireDefault(require("classnames"));
var _ReactUtils = require("recharts/lib/util/ReactUtils");
var _colors = require("../../utils/colors");
var _utils = require("../../utils");
var _react = _interopRequireDefault(require("react"));
// @ts-ignore
_recharts.Area.prototype.renderAreaStatically = function (points, baseLine, needClip, clipPathId) {
var _this$props = this.props,
layout = _this$props.layout,
type = _this$props.type,
stroke = _this$props.stroke,
connectNulls = _this$props.connectNulls,
isRange = _this$props.isRange,
height = _this$props.height,
top = _this$props.top,
bottom = _this$props.bottom,
dataKey = _this$props.dataKey,
stackId = _this$props.stackId;
var drawClipPath = true;
var normalizedPoints = (0, _utils.normalizeCurvePoints)(points, dataKey);
var patchedClipPathId = "".concat(this.id, "-null-points");
if (stackId) {
normalizedPoints = connectNulls ? (0, _utils.deleteNullCurvePoints)(normalizedPoints, dataKey) : points;
drawClipPath = connectNulls;
}
return /*#__PURE__*/_react["default"].createElement(_recharts.Layer, {
clipPath: needClip ? "url(#clipPath-".concat(clipPathId, ")") : null
}, drawClipPath && /*#__PURE__*/_react["default"].createElement("defs", null, /*#__PURE__*/_react["default"].createElement("clipPath", {
id: patchedClipPathId
}, (0, _utils.computeDefinedSegments)(points, dataKey).map(function (segment, idx) {
var x = segment[0].x;
var width = segment[segment.length - 1].x - segment[0].x;
var cpHeight = height + top + bottom;
return /*#__PURE__*/_react["default"].createElement(_recharts.Rectangle, {
width: width,
height: cpHeight,
x: x,
y: 0,
key: idx
});
}))), /*#__PURE__*/_react["default"].createElement(_recharts.Curve, (0, _extends2["default"])({}, this.props, {
connectNulls: true,
points: points,
baseLine: baseLine,
stroke: "none",
className: "recharts-area-area",
clipPath: "url(#".concat(patchedClipPathId, ")")
})), stroke !== 'none' && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, connectNulls && /*#__PURE__*/_react["default"].createElement(_recharts.Curve, (0, _extends2["default"])({}, (0, _ReactUtils.getPresentationAttributes)(this.props), {
className: "recharts-area-curve",
layout: layout,
type: type,
connectNulls: true,
fill: "none",
stroke: _colors.colors['gray-blue'],
strokeWidth: 3,
strokeDasharray: "6",
points: normalizedPoints
})), /*#__PURE__*/_react["default"].createElement(_recharts.Curve, (0, _extends2["default"])({}, (0, _ReactUtils.getPresentationAttributes)(this.props), {
className: "recharts-area-curve",
layout: layout,
type: type,
connectNulls: true,
fill: "none",
points: normalizedPoints,
clipPath: "url(#".concat(patchedClipPathId, ")")
}))), stroke !== 'none' && isRange && /*#__PURE__*/_react["default"].createElement(_recharts.Curve, (0, _extends2["default"])({}, (0, _ReactUtils.getPresentationAttributes)(this.props), {
className: "recharts-area-curve",
layout: layout,
type: type,
connectNulls: connectNulls,
fill: "none",
points: baseLine
})));
};
// @ts-ignore
_recharts.Area.prototype.renderDots = function (needClip, clipPathId) {
var _this = this;
var isAnimationActive = this.props.isAnimationActive;
var isAnimationFinished = this.state.isAnimationFinished;
if (isAnimationActive && !isAnimationFinished) {
return null;
}
var _this$props2 = this.props,
dot = _this$props2.dot,
points = _this$props2.points,
dataKey = _this$props2.dataKey;
var areaProps = (0, _ReactUtils.getPresentationAttributes)(this.props);
var customDotProps = (0, _ReactUtils.getPresentationAttributes)(dot);
var dotEvents = (0, _ReactUtils.filterEventAttributes)(dot);
if (!dot) {
points = points.length > 1 ? points.filter((0, _utils.filterDotPoints)(dataKey)) : points;
}
var dots = points.map(function (entry, i) {
var dotProps = (0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])({
key: "dot-".concat(i),
r: 6
}, areaProps), {}, {
stroke: _colors.colors['white'],
strokeWidth: 2
}, customDotProps), dotEvents), {}, {
dataKey: dataKey,
cx: entry.x,
cy: entry.y,
index: i,
value: entry.value,
payload: entry.payload
});
return _this.constructor.renderDotItem(dot, dotProps);
});
var dotsProps = {
clipPath: needClip ? "url(#clipPath-".concat(clipPathId, ")") : null
};
return /*#__PURE__*/_react["default"].createElement(_recharts.Layer, (0, _extends2["default"])({
className: "recharts-area-dots"
}, dotsProps), dots);
};
// @ts-ignore
_recharts.Area.prototype.render = function () {
var _this$props3 = this.props,
hide = _this$props3.hide,
points = _this$props3.points,
className = _this$props3.className,
top = _this$props3.top,
left = _this$props3.left,
xAxis = _this$props3.xAxis,
yAxis = _this$props3.yAxis,
width = _this$props3.width,
height = _this$props3.height,
isAnimationActive = _this$props3.isAnimationActive,
id = _this$props3.id;
if (hide || !points || !points.length) {
return null;
}
var isAnimationFinished = this.state.isAnimationFinished;
var hasSinglePoint = points.length === 1;
var layerClass = (0, _classnames["default"])('recharts-area', className);
var needClip = (xAxis === null || xAxis === void 0 ? void 0 : xAxis.allowDataOverflow) || (yAxis === null || yAxis === void 0 ? void 0 : yAxis.allowDataOverflow);
var clipPathId = (0, _isNil["default"])(id) ? this.id : id;
return /*#__PURE__*/_react["default"].createElement(_recharts.Layer, {
className: layerClass
}, needClip ? /*#__PURE__*/_react["default"].createElement("defs", null, /*#__PURE__*/_react["default"].createElement("clipPath", {
id: "clipPath-".concat(clipPathId)
}, /*#__PURE__*/_react["default"].createElement("rect", {
x: left,
y: top,
width: width,
height: parseInt(height, 10)
}))) : null, !hasSinglePoint ? this.renderArea(needClip, clipPathId) : null, this.renderDots(needClip, clipPathId), (!isAnimationActive || isAnimationFinished) &&
// @ts-ignore
_recharts.LabelList.renderCallByParent(this.props, points));
};
// @ts-ignore
_recharts.Area.defaultProps.stroke = _colors.colors['blue-01'];
// @ts-ignore
_recharts.Area.defaultProps.fill = _colors.colors['blue-01'];
// @ts-ignore
_recharts.Area.defaultProps.strokeWidth = 3;
// @ts-ignore
_recharts.Area.defaultProps.fillOpacity = '0.2';
// @ts-ignore
_recharts.Area.defaultProps.dot = false;
// @ts-ignore
_recharts.Area.defaultProps.activeDot = {
r: 8,
strokeWidth: 2,
stroke: _colors.colors['white']
};
/**
* @deprecated Please, use package `@semcore/ui/d3-chart` instead. Package `@semcore/chart` is deprecated.
*/
var _default = _recharts.Area;
exports["default"] = _default;
//# sourceMappingURL=Area.js.map