@semcore/chart
Version:
Semrush Chart Component
179 lines (176 loc) • 6.82 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _objectSpread from "@babel/runtime/helpers/objectSpread2";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
import { sstyled as _sstyled } from "@semcore/core";
var _excluded = ["payload", "align", "layout", "verticalAlign", "formatter"],
_excluded2 = ["forwardedRef", "children", "width", "height", "wrapperStyle", "paylodUniqBy", "payload", "style", "align", "layout", "verticalAlign", "formatter"],
_excluded3 = ["forwardedRef"];
import React, { useContext, createContext } from 'react';
import { sstyled } from '@semcore/core';
import { Legend as LegendRecharts } from 'recharts';
import Checkbox from '@semcore/checkbox';
import propsForElement from '@semcore/utils/lib/propsForElement';
import setRef from '@semcore/utils/lib/setRef';
import copyComponent from '../copy';
/*__reshadow-styles__:"./style/legend.shadow.css"*/
var styles = ( /*__reshadow_css_start__*/_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 _toConsumableArray(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;
};
};
export var LegendContext = /*#__PURE__*/createContext({});
function ControlsInner(props) {
var _ref;
var payload = props.payload,
align = props.align,
layout = props.layout,
verticalAlign = props.verticalAlign,
formatter = props.formatter,
other = _objectWithoutProperties(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;
return _ref = sstyled(styles), /*#__PURE__*/React.createElement(SList, _ref.cn("SList", _objectSpread({
"style": style.list
}, propsForElement(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 _objectSpread(_objectSpread({}, acc), {}, _defineProperty({}, item, getEventHandlerOfChild(propsItem[item], entry, i)));
}, {});
if (entry.type === 'none') {
return null;
}
return /*#__PURE__*/React.createElement(SItem, _extends({
key: "legend-item-".concat(i),
style: style.item
// @ts-ignore
,
opacity: opacity && opacity < 1
}, handlers), /*#__PURE__*/React.createElement(SControl, {
theme: entry.color
}, /*#__PURE__*/React.createElement(Checkbox.Value, {
checked: !entry.inactive
}), /*#__PURE__*/React.createElement(Checkbox.Text, {
pr: 3
}, finalFormatter ? finalFormatter(entry.value, entry, i) : entry.value)));
}));
}
var Controls = function Controls(props) {
var context = useContext(LegendContext);
// @ts-ignore
return /*#__PURE__*/React.createElement(ControlsInner, _extends({}, context, props));
};
//@ts-ignore
LegendRecharts.defaultProps.height = 50;
//@ts-ignore
LegendRecharts.defaultProps.align = 'left';
//@ts-ignore
LegendRecharts.defaultProps.content = null;
LegendRecharts.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 = _objectWithoutProperties(_this$props, _excluded2);
var outerStyle = _objectSpread(_objectSpread(_objectSpread({
width: width || 'auto',
height: height
}, this.getDefaultPosition(wrapperStyle)), wrapperStyle), style);
var SLegend = 'div';
return _ref2 = sstyled(styles), /*#__PURE__*/React.createElement(LegendContext.Provider, {
value: {
payload: getUniqPayload(paylodUniqBy, payload),
align: align,
layout: layout,
verticalAlign: verticalAlign,
formatter: formatter
}
}, /*#__PURE__*/React.createElement(SLegend, _ref2.cn("SLegend", _objectSpread({
"ref": function ref(node) {
_this.wrapperNode = node;
setRef(forwardedRef, node);
},
"style": outerStyle
}, propsForElement(other, 'div'))), children));
};
/**
* @deprecated Please, use package `@semcore/ui/d3-chart` instead. Package `@semcore/chart` is deprecated.
*/
var Legend = copyComponent(LegendRecharts, {
render: function render() {
var _this$props2 = this.props,
forwardedRef = _this$props2.forwardedRef,
other = _objectWithoutProperties(_this$props2, _excluded3);
return /*#__PURE__*/React.createElement(LegendRecharts, _extends({
ref: forwardedRef
}, other));
}
});
Legend.Controls = Controls;
export { Legend };
//# sourceMappingURL=Legend.js.map