@actinc/dls
Version:
Design Language System (DLS) for ACT & Encoura front-end projects.
42 lines • 2.86 kB
JavaScript
import { jsx as _jsx, Fragment as _Fragment, 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 isNumber from 'lodash/isNumber';
import { StyledText } from './styles';
export var OverlappedLabel = function (_a) {
var _b;
var barTextColors = _a.barTextColors, color = _a.color, data = _a.data, height = _a.height, index = _a.index, innerBarTextColor = _a.innerBarTextColor, isOutsideBar = _a.isOutsideBar, label = _a.label, outsideBarDataKey = _a.outsideBarDataKey, textColor = _a.textColor, value = _a.value, width = _a.width, x = _a.x, y = _a.y;
var _c = useTheme(), palette = _c.palette, spacing = _c.spacing;
if (!value && isOutsideBar)
return (_jsx("g", { children: _jsx(StyledText, { dominantBaseline: "middle", fill: palette.text.primary, textAnchor: "middle", x: x + width / 2, y: y - parseInt(spacing(1), 10), children: "No data found" }) }));
var baselineY = Number(y);
var outsideBarValue = Number((_b = data === null || data === void 0 ? void 0 : data[index]) === null || _b === void 0 ? void 0 : _b[outsideBarDataKey]);
var outsideBarHeight = (outsideBarValue / Number(value)) * Number(height || 0);
// isInsideInnerBar means whether the label should be inside the bars, that themselves are inside the outside bar
var isInsideInnerBar = !isOutsideBar && Number(height) >= parseInt(spacing(6.5), 10);
if (!isOutsideBar &&
(Number.isNaN(outsideBarHeight) ||
(Number(height) < 50 &&
outsideBarHeight - Number(height) < parseInt(spacing(4.5), 10)) ||
!outsideBarValue)) {
// eslint-disable-next-line react/jsx-no-useless-fragment
return _jsx(_Fragment, {});
}
if (!isInsideInnerBar) {
baselineY = Number(y) - parseInt(spacing(1), 10);
}
else {
baselineY = Number(y) + parseInt(spacing(6), 10);
}
var textFill = isInsideInnerBar
? innerBarTextColor || (barTextColors === null || barTextColors === void 0 ? void 0 : barTextColors[0]) || palette.text.primary
: textColor || color || palette.text.primary;
return (_jsxs("g", { children: [_jsx(StyledText, { dominantBaseline: "middle", fill: textFill, textAnchor: "middle", x: x + width / 2, y: baselineY - parseInt(spacing(2), 10), children: ((label === null || label === void 0 ? void 0 : label[0]) || '').toUpperCase() + label.substring(1) }), _jsx(StyledText, { dominantBaseline: "middle", fill: textFill, textAnchor: "middle", x: x + width / 2, y: baselineY, children: isNumber(value) ? value.toLocaleString('en-US') : value })] }));
};
export default OverlappedLabel;
//# sourceMappingURL=index.js.map