@semcore/chart
Version:
Semrush Chart Component
187 lines (183 loc) • 7.85 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.LegendContext = exports.Legend = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _objectSpread3 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _core = require("@semcore/core");
var _react = _interopRequireWildcard(require("react"));
var _recharts = require("recharts");
var _checkbox = _interopRequireDefault(require("@semcore/checkbox"));
var _propsForElement = _interopRequireDefault(require("@semcore/utils/lib/propsForElement"));
var _setRef = _interopRequireDefault(require("@semcore/utils/lib/setRef"));
var _copy = _interopRequireDefault(require("../copy"));
var _excluded = ["payload", "align", "layout", "verticalAlign", "formatter"],
_excluded2 = ["forwardedRef", "children", "width", "height", "wrapperStyle", "paylodUniqBy", "payload", "style", "align", "layout", "verticalAlign", "formatter"],
_excluded3 = ["forwardedRef"];
/*__reshadow-styles__:"./style/legend.shadow.css"*/
var styles = ( /*__reshadow_css_start__*/_core.sstyled.insert( /*__inner_css_start__*/".___SLegend_r8y9r_gg_{position:absolute;display:flex;justify-content:space-between}.___SList_r8y9r_gg_{padding:0;margin:0}.___SItem_r8y9r_gg_{opacity:1}.___SItem_r8y9r_gg_.__opacity_r8y9r_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3)}.___SControl_r8y9r_gg_{cursor:pointer}" /*__inner_css_end__*/, "r8y9r_gg_") /*__reshadow_css_end__*/, {
"__SLegend": "___SLegend_r8y9r_gg_",
"__SList": "___SList_r8y9r_gg_",
"__SItem": "___SItem_r8y9r_gg_",
"_opacity": "__opacity_r8y9r_gg_",
"__SControl": "___SControl_r8y9r_gg_"
});
var uniqBy = function uniqBy(arr, predicate) {
var cb = typeof predicate === 'function' ? predicate : function (o) {
return o[predicate];
};
return (0, _toConsumableArray2["default"])(arr.reduce(function (map, item) {
var key = item === null || item === undefined ? item : cb(item);
map.has(key) || map.set(key, item);
return map;
}, new Map()).values());
};
var defaultUniqBy = function defaultUniqBy(entry) {
return entry.value;
};
var getUniqPayload = function getUniqPayload(option, payload) {
if (option === true) {
return uniqBy(payload, defaultUniqBy);
}
if (typeof option === 'function') {
return uniqBy(payload, option);
}
return payload;
};
var getEventHandlerOfChild = function getEventHandlerOfChild(originalHandler, data, index) {
return function (e) {
originalHandler(data, index, e);
return null;
};
};
var LegendContext = /*#__PURE__*/(0, _react.createContext)({});
exports.LegendContext = LegendContext;
function ControlsInner(props) {
var _ref;
var payload = props.payload,
align = props.align,
layout = props.layout,
verticalAlign = props.verticalAlign,
formatter = props.formatter,
other = (0, _objectWithoutProperties2["default"])(props, _excluded);
var propsList = {};
var propsItem = {};
Object.keys(other).forEach(function (propName) {
if (propName.startsWith('on')) {
propsItem[propName] = other[propName];
} else {
propsList[propName] = other[propName];
}
});
var style = {
list: {
textAlign: layout === 'horizontal' ? align : 'left',
verticalAlign: verticalAlign
},
item: {
display: layout === 'horizontal' ? 'inline-block' : 'block'
}
};
if (!payload || !payload.length) {
return null;
}
var SList = 'ul';
var SItem = 'li';
var SControl = _checkbox["default"];
return _ref = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SList, _ref.cn("SList", (0, _objectSpread3["default"])({
"style": style.list
}, (0, _propsForElement["default"])(propsList))), payload.map(function (entry, i) {
var opacity = entry.payload.opacity;
var finalFormatter = entry.formatter || formatter;
var handlers = Object.keys(propsItem).reduce(function (acc, item) {
return (0, _objectSpread3["default"])((0, _objectSpread3["default"])({}, acc), {}, (0, _defineProperty2["default"])({}, item, getEventHandlerOfChild(propsItem[item], entry, i)));
}, {});
if (entry.type === 'none') {
return null;
}
return /*#__PURE__*/_react["default"].createElement(SItem, (0, _extends2["default"])({
key: "legend-item-".concat(i),
style: style.item
// @ts-ignore
,
opacity: opacity && opacity < 1
}, handlers), /*#__PURE__*/_react["default"].createElement(SControl, {
theme: entry.color
}, /*#__PURE__*/_react["default"].createElement(_checkbox["default"].Value, {
checked: !entry.inactive
}), /*#__PURE__*/_react["default"].createElement(_checkbox["default"].Text, {
pr: 3
}, finalFormatter ? finalFormatter(entry.value, entry, i) : entry.value)));
}));
}
var Controls = function Controls(props) {
var context = (0, _react.useContext)(LegendContext);
// @ts-ignore
return /*#__PURE__*/_react["default"].createElement(ControlsInner, (0, _extends2["default"])({}, context, props));
};
//@ts-ignore
_recharts.Legend.defaultProps.height = 50;
//@ts-ignore
_recharts.Legend.defaultProps.align = 'left';
//@ts-ignore
_recharts.Legend.defaultProps.content = null;
_recharts.Legend.prototype.render = function () {
var _ref2,
_this = this;
var _this$props = this.props,
forwardedRef = _this$props.forwardedRef,
children = _this$props.children,
width = _this$props.width,
height = _this$props.height,
wrapperStyle = _this$props.wrapperStyle,
paylodUniqBy = _this$props.paylodUniqBy,
payload = _this$props.payload,
style = _this$props.style,
align = _this$props.align,
layout = _this$props.layout,
verticalAlign = _this$props.verticalAlign,
formatter = _this$props.formatter,
other = (0, _objectWithoutProperties2["default"])(_this$props, _excluded2);
var outerStyle = (0, _objectSpread3["default"])((0, _objectSpread3["default"])((0, _objectSpread3["default"])({
width: width || 'auto',
height: height
}, this.getDefaultPosition(wrapperStyle)), wrapperStyle), style);
var SLegend = 'div';
return _ref2 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(LegendContext.Provider, {
value: {
payload: getUniqPayload(paylodUniqBy, payload),
align: align,
layout: layout,
verticalAlign: verticalAlign,
formatter: formatter
}
}, /*#__PURE__*/_react["default"].createElement(SLegend, _ref2.cn("SLegend", (0, _objectSpread3["default"])({
"ref": function ref(node) {
_this.wrapperNode = node;
(0, _setRef["default"])(forwardedRef, node);
},
"style": outerStyle
}, (0, _propsForElement["default"])(other, 'div'))), children));
};
/**
* @deprecated Please, use package `@semcore/ui/d3-chart` instead. Package `@semcore/chart` is deprecated.
*/
var Legend = (0, _copy["default"])(_recharts.Legend, {
render: function render() {
var _this$props2 = this.props,
forwardedRef = _this$props2.forwardedRef,
other = (0, _objectWithoutProperties2["default"])(_this$props2, _excluded3);
return /*#__PURE__*/_react["default"].createElement(_recharts.Legend, (0, _extends2["default"])({
ref: forwardedRef
}, other));
}
});
exports.Legend = Legend;
Legend.Controls = Controls;
//# sourceMappingURL=Legend.js.map