@semcore/chart
Version:
Semrush Chart Component
180 lines (179 loc) • 7.06 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
import _inherits from "@babel/runtime/helpers/inherits";
import _createSuper from "@babel/runtime/helpers/createSuper";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import React, { PureComponent } from 'react';
import { Curve, Rectangle, Tooltip } from 'recharts';
import cn from 'classnames';
function isNumOrStr(value) {
return typeof value === 'number' && !isNaN(value) || typeof value === 'string';
}
export var defaultFormatter = function defaultFormatter(value) {
return Array.isArray(value) && value[0] && value[1] ? value.join(' ~ ') : value;
};
/**
* @deprecated Please, use package `@semcore/ui/d3-chart` instead. Package `@semcore/chart` is deprecated.
*/
var DefaultTooltipContent = /*#__PURE__*/function (_PureComponent) {
_inherits(DefaultTooltipContent, _PureComponent);
var _super = _createSuper(DefaultTooltipContent);
function DefaultTooltipContent() {
var _this;
_classCallCheck(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));
_defineProperty(_assertThisInitialized(_this), "renderTooltipItem", function (_ref) {
var entry = _ref.entry,
name = _ref.name,
value = _ref.value,
separator = _ref.separator;
return /*#__PURE__*/React.createElement(React.Fragment, null, name !== undefined && /*#__PURE__*/React.createElement("span", {
className: "recharts-tooltip-item-name-wrapper"
}, /*#__PURE__*/React.createElement("span", {
className: "recharts-tooltip-item-color",
style: {
backgroundColor: entry.fill || entry.stroke /* bar charts has no stroke */
}
}), /*#__PURE__*/React.createElement("span", {
className: "recharts-tooltip-item-name"
}, name), /*#__PURE__*/React.createElement("span", {
className: "recharts-tooltip-item-separator"
}, separator)), /*#__PURE__*/React.createElement("span", {
className: "recharts-tooltip-item-value-wrapper"
}, /*#__PURE__*/React.createElement("span", {
className: "recharts-tooltip-item-value"
}, value), /*#__PURE__*/React.createElement("span", {
className: "recharts-tooltip-item-unit"
}, entry.unit || '')));
});
return _this;
}
_createClass(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 = _slicedToArray(formatted, 2);
value = _formatted[0];
name = _formatted[1];
} else {
value = formatted;
}
}
return /*#__PURE__*/React.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.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 = cn('recharts-default-tooltip', wrapperClassName);
var labelCN = cn('recharts-tooltip-label', labelClassName);
if (hasLabel && labelFormatter) {
finalLabel = labelFormatter(finalLabel, payload);
}
return /*#__PURE__*/React.createElement("div", {
className: wrapperCN,
style: contentStyle
}, /*#__PURE__*/React.createElement("p", {
className: labelCN,
style: labelStyle
}, finalLabel), this.renderContent());
}
}]);
return DefaultTooltipContent;
}(PureComponent);
_defineProperty(DefaultTooltipContent, "displayName", 'DefaultTooltipContent');
_defineProperty(DefaultTooltipContent, "defaultProps", {
separator: ' : ',
contentStyle: {},
itemStyle: {},
labelStyle: {}
});
var CustomCursor = /*#__PURE__*/function (_PureComponent2) {
_inherits(CustomCursor, _PureComponent2);
var _super2 = _createSuper(CustomCursor);
function CustomCursor() {
_classCallCheck(this, CustomCursor);
return _super2.apply(this, arguments);
}
_createClass(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.createElement(Curve, _extends({}, this.props, {
stroke: "#a6b0b3"
}));
if (payload) return /*#__PURE__*/React.createElement(Rectangle, _extends({}, this.props, {
fill: "rgba(152, 170, 175, 0.3)"
}));
return null;
}
}]);
return CustomCursor;
}(PureComponent); // @ts-ignore
Tooltip.defaultProps.wrapperStyle = {
zIndex: 1
};
// @ts-ignore
Tooltip.defaultProps.offset = 18;
// @ts-ignore
Tooltip.defaultProps.separator = null;
// @ts-ignore
Tooltip.defaultProps.content = /*#__PURE__*/React.createElement(DefaultTooltipContent, null);
// @ts-ignore
Tooltip.defaultProps.cursor = /*#__PURE__*/React.createElement(CustomCursor, null);
export { Tooltip, DefaultTooltipContent };
//# sourceMappingURL=index.js.map