@semcore/chart
Version:
Semrush Chart Component
196 lines (194 loc) • 8.41 kB
JavaScript
"use strict";
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.DefaultTooltipContent = void 0;
Object.defineProperty(exports, "Tooltip", {
enumerable: true,
get: function get() {
return _recharts.Tooltip;
}
});
exports.defaultFormatter = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireWildcard(require("react"));
var _recharts = require("recharts");
var _classnames = _interopRequireDefault(require("classnames"));
function isNumOrStr(value) {
return typeof value === 'number' && !isNaN(value) || typeof value === 'string';
}
var defaultFormatter = function defaultFormatter(value) {
return Array.isArray(value) && value[0] && value[1] ? value.join(' ~ ') : value;
};
exports.defaultFormatter = defaultFormatter;
/**
* @deprecated Please, use package `@semcore/ui/d3-chart` instead. Package `@semcore/chart` is deprecated.
*/
var DefaultTooltipContent = /*#__PURE__*/function (_PureComponent) {
(0, _inherits2["default"])(DefaultTooltipContent, _PureComponent);
var _super = (0, _createSuper2["default"])(DefaultTooltipContent);
function DefaultTooltipContent() {
var _this;
(0, _classCallCheck2["default"])(this, DefaultTooltipContent);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _super.call.apply(_super, [this].concat(args));
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "renderTooltipItem", function (_ref) {
var entry = _ref.entry,
name = _ref.name,
value = _ref.value,
separator = _ref.separator;
return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, name !== undefined && /*#__PURE__*/_react["default"].createElement("span", {
className: "recharts-tooltip-item-name-wrapper"
}, /*#__PURE__*/_react["default"].createElement("span", {
className: "recharts-tooltip-item-color",
style: {
backgroundColor: entry.fill || entry.stroke /* bar charts has no stroke */
}
}), /*#__PURE__*/_react["default"].createElement("span", {
className: "recharts-tooltip-item-name"
}, name), /*#__PURE__*/_react["default"].createElement("span", {
className: "recharts-tooltip-item-separator"
}, separator)), /*#__PURE__*/_react["default"].createElement("span", {
className: "recharts-tooltip-item-value-wrapper"
}, /*#__PURE__*/_react["default"].createElement("span", {
className: "recharts-tooltip-item-value"
}, value), /*#__PURE__*/_react["default"].createElement("span", {
className: "recharts-tooltip-item-unit"
}, entry.unit || '')));
});
return _this;
}
(0, _createClass2["default"])(DefaultTooltipContent, [{
key: "renderContent",
value: function renderContent() {
var _this2 = this;
var _this$props = this.props,
payload = _this$props.payload,
separator = _this$props.separator,
formatter = _this$props.formatter,
itemStyle = _this$props.itemStyle,
itemSorter = _this$props.itemSorter;
if (payload !== null && payload !== void 0 && payload.length) {
var listStyle = {
padding: 0,
margin: 0
};
var items = payload.sort(itemSorter).map(function (entry, i) {
var finalFormatter = entry.formatter || formatter || defaultFormatter;
var name = entry.name,
value = entry.value;
if (name.startsWith('_')) return;
if (finalFormatter) {
var formatted = finalFormatter(value, name, entry, i);
if (Array.isArray(formatted)) {
var _formatted = (0, _slicedToArray2["default"])(formatted, 2);
value = _formatted[0];
name = _formatted[1];
} else {
value = formatted;
}
}
return /*#__PURE__*/_react["default"].createElement("li", {
className: "recharts-tooltip-item",
key: "tooltip-item-".concat(i),
style: itemStyle
}, _this2.renderTooltipItem({
entry: entry,
name: name,
value: value,
separator: separator
}));
});
return /*#__PURE__*/_react["default"].createElement("ul", {
className: "recharts-tooltip-item-list",
style: listStyle
}, items);
}
return null;
}
}, {
key: "render",
value: function render() {
var _this$props2 = this.props,
wrapperClassName = _this$props2.wrapperClassName,
contentStyle = _this$props2.contentStyle,
labelClassName = _this$props2.labelClassName,
labelStyle = _this$props2.labelStyle,
label = _this$props2.label,
labelFormatter = _this$props2.labelFormatter,
payload = _this$props2.payload;
var hasLabel = isNumOrStr(label);
var finalLabel = hasLabel ? label : '';
var wrapperCN = (0, _classnames["default"])('recharts-default-tooltip', wrapperClassName);
var labelCN = (0, _classnames["default"])('recharts-tooltip-label', labelClassName);
if (hasLabel && labelFormatter) {
finalLabel = labelFormatter(finalLabel, payload);
}
return /*#__PURE__*/_react["default"].createElement("div", {
className: wrapperCN,
style: contentStyle
}, /*#__PURE__*/_react["default"].createElement("p", {
className: labelCN,
style: labelStyle
}, finalLabel), this.renderContent());
}
}]);
return DefaultTooltipContent;
}(_react.PureComponent);
exports.DefaultTooltipContent = DefaultTooltipContent;
(0, _defineProperty2["default"])(DefaultTooltipContent, "displayName", 'DefaultTooltipContent');
(0, _defineProperty2["default"])(DefaultTooltipContent, "defaultProps", {
separator: ' : ',
contentStyle: {},
itemStyle: {},
labelStyle: {}
});
var CustomCursor = /*#__PURE__*/function (_PureComponent2) {
(0, _inherits2["default"])(CustomCursor, _PureComponent2);
var _super2 = (0, _createSuper2["default"])(CustomCursor);
function CustomCursor() {
(0, _classCallCheck2["default"])(this, CustomCursor);
return _super2.apply(this, arguments);
}
(0, _createClass2["default"])(CustomCursor, [{
key: "render",
value: function render() {
// @ts-ignore
var _this$props3 = this.props,
points = _this$props3.points,
payload = _this$props3.payload;
// see renderCursor in chart/generateCategoricalChart.js
if (points) return /*#__PURE__*/_react["default"].createElement(_recharts.Curve, (0, _extends2["default"])({}, this.props, {
stroke: "#a6b0b3"
}));
if (payload) return /*#__PURE__*/_react["default"].createElement(_recharts.Rectangle, (0, _extends2["default"])({}, this.props, {
fill: "rgba(152, 170, 175, 0.3)"
}));
return null;
}
}]);
return CustomCursor;
}(_react.PureComponent); // @ts-ignore
_recharts.Tooltip.defaultProps.wrapperStyle = {
zIndex: 1
};
// @ts-ignore
_recharts.Tooltip.defaultProps.offset = 18;
// @ts-ignore
_recharts.Tooltip.defaultProps.separator = null;
// @ts-ignore
_recharts.Tooltip.defaultProps.content = /*#__PURE__*/_react["default"].createElement(DefaultTooltipContent, null);
// @ts-ignore
_recharts.Tooltip.defaultProps.cursor = /*#__PURE__*/_react["default"].createElement(CustomCursor, null);
//# sourceMappingURL=index.js.map