@actinc/dls
Version:
Design Language System (DLS) for ACT & Encoura front-end projects.
26 lines • 1.5 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/**
* Copyright (c) ACT, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
import { useTheme } from '@mui/material/styles';
import { calculateRadius } from '../processing';
var OPACITY_NOT_HIGHLIGHTED = 0.2;
var CustomizedCell = function (_a) {
var color = _a.color, cx = _a.cx, cy = _a.cy, groupSize = _a.groupSize, height = _a.height, label = _a.label, members = _a.members, selectedPoint = _a.selectedPoint, width = _a.width;
var palette = useTheme().palette;
function getIsSelected() {
if (selectedPoint) {
if (selectedPoint.label === label) {
return true;
}
return !!(members === null || members === void 0 ? void 0 : members.find(function (el) { return el.label === selectedPoint.label; }));
}
return false;
}
return (_jsxs("g", { cursor: "pointer", "data-chart-x": cx, "data-chart-y": cy, opacity: !selectedPoint || getIsSelected() ? 1 : OPACITY_NOT_HIGHLIGHTED, children: [_jsx("circle", { cx: cx, cy: cy, fill: color || palette.grey[500], height: height, r: calculateRadius(groupSize), stroke: palette.common.black, width: width }), (groupSize || 0) > 1 && (_jsx("text", { fill: "white", fontSize: 16, x: cx - 4, y: cy + 4, children: groupSize }))] }));
};
export default CustomizedCell;
//# sourceMappingURL=index.js.map