@actinc/dls
Version:
Design Language System (DLS) for ACT & Encoura front-end projects.
30 lines • 2.95 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.
*/
/* eslint-disable react/no-array-index-key */
import numeral from 'numeral';
import { StyledListItem, StyledListItemIcon, StyledListItemText, StyledPaper, StyledUl, } from './styles';
export var PieLegend = function (props) {
var CustomLegendIcon = props.CustomLegendIcon, chartHeight = props.chartHeight, chartLegendTextFontSize = props.chartLegendTextFontSize, chartLegendTextFontSizeSmall = props.chartLegendTextFontSizeSmall, chartWidth = props.chartWidth, formatValue = props.formatValue, onMouseEnter = props.onMouseEnter, onMouseLeave = props.onMouseLeave, payload = props.payload, pieTotalValue = props.pieTotalValue, showAsSquare = props.showAsSquare;
var handleMouseEnter = function (element, index, e) {
onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter(element, index, e);
};
return (_jsx(StyledUl, { numberOfItems: (payload === null || payload === void 0 ? void 0 : payload.length) || 0, children: payload === null || payload === void 0 ? void 0 : payload.map(function (element, i) {
var value = element.value, color = element.color, entryPayload = element.payload;
return (_jsxs(StyledListItem, { chartWidth: chartWidth, onMouseEnter: onMouseEnter
? function (e) { return handleMouseEnter(element, i, e); }
: undefined, onMouseLeave: onMouseLeave
? function (e) { return onMouseLeave(element, i, e); }
: undefined, children: [_jsx(StyledListItemIcon, { children: CustomLegendIcon ? (_jsx(CustomLegendIcon, { chartWidth: chartWidth, color: color, index: i, optionsLength: payload === null || payload === void 0 ? void 0 : payload.length, payload: entryPayload, showAsSquare: showAsSquare })) : (_jsx(StyledPaper, { chartWidth: chartWidth, elevation: 0, index: i, optionsLength: payload === null || payload === void 0 ? void 0 : payload.length, showAsSquare: showAsSquare, style: color ? { backgroundColor: color } : undefined })) }), entryPayload && (_jsx(StyledListItemText, { chartHeight: chartHeight, chartLegendTextFontSize: chartLegendTextFontSize, chartLegendTextFontSizeSmall: chartLegendTextFontSizeSmall, chartWidth: chartWidth, primary: value, secondary: formatValue
? formatValue(entryPayload.value, pieTotalValue)
: "".concat(numeral(entryPayload.value).format('0,0'), " [").concat((Number.isNaN(entryPayload.value / pieTotalValue)
? 0
: (entryPayload.value / pieTotalValue) * 100).toFixed(1), "%]") }))] }, "item-".concat(i)));
}) }));
};
export default PieLegend;
//# sourceMappingURL=index.js.map