@actinc/dls
Version:
Design Language System (DLS) for ACT & Encoura front-end projects.
112 lines • 7.63 kB
JavaScript
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
if (ar || !(i in from)) {
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
ar[i] = from[i];
}
}
return to.concat(ar || Array.prototype.slice.call(from));
};
import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } 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, useThemeProps } from '@mui/material/styles';
import numeral from 'numeral';
import React, { useMemo } from 'react';
import { Bar, LabelList } from 'recharts';
import { BarChart, measureText, } from "../BarChart";
import DEFAULT_CHART_COLORS from "../../constants/DEFAULT_CHART_COLORS";
import DLS_COMPONENT_NAMES from "../../constants/DLS_COMPONENT_NAMES";
import { StyledTooltipText } from './styles';
export var StackedBarChart = function (inProps) {
var _a;
var _b = useThemeProps({
name: DLS_COMPONENT_NAMES.STACKED_BAR_CHART,
props: inProps,
}), barChartProps = _b.barChartProps, _c = _b.barKeys, barKeys = _c === void 0 ? [] : _c, barProps = _b.barProps, children = _b.children, _d = _b.colors, colors = _d === void 0 ? [] : _d, customizeBarText = _b.customizeBarText, data = _b.data, labelListProps = _b.labelListProps, setTooltipBarId = _b.setTooltipBarId, subLabelProps = _b.subLabelProps, subLabels = _b.subLabels, tooltipBarId = _b.tooltipBarId;
var _e = useTheme(), palette = _e.palette, typography = _e.typography;
var _f = React.useState(tooltipBarId), barIdHovered = _f[0], setBarIdHovered = _f[1];
var subLabelKeys = subLabels ||
barKeys.reduce(function (acc, keys) { return __spreadArray(__spreadArray([], acc, true), [keys[0]], false); }, []);
// FIXME recharts uses react-smooth under the hood and that library has a know issue that sometimes prevents the charts from rendering labels,
// when the issue is closed we can remove this workaround
// issue link: https://github.com/recharts/react-smooth/issues/44
var _g = React.useState(true), animate = _g[0], setAnimate = _g[1];
var onAnimationStart = React.useCallback(function () {
setTimeout(function () {
setAnimate(false);
}, 1500);
}, []);
var maxSubLabelWidth = useMemo(function () {
return subLabelKeys.reduce(function (acc, key) {
var _a;
// eslint-disable-next-line @typescript-eslint/restrict-template-expressions
var textWidth = measureText("".concat(((_a = subLabelProps === null || subLabelProps === void 0 ? void 0 : subLabelProps.style) === null || _a === void 0 ? void 0 : _a.fontSize) || typography.body1.fontSize, "px ").concat(typography.fontFamily), key.toLocaleString());
if (textWidth > acc) {
return textWidth;
}
return acc;
}, 0);
}, [subLabelKeys, (_a = subLabelProps === null || subLabelProps === void 0 ? void 0 : subLabelProps.style) === null || _a === void 0 ? void 0 : _a.fontSize, typography.fontFamily]);
var renderAdditionalTooltipInfo = function (barId, payload) {
var keys = barKeys.find(function (bKeys) { return bKeys.some(function (key) { return key === barId; }); });
var info = payload.find(function (el) { return el.dataKey === barId; });
if (!info || !keys) {
return null;
}
return keys.map(function (key) { return (_jsxs(StyledTooltipText, { children: [key, " Value: ", numeral(info.payload[key]).format('0,0')] }, key)); });
};
return (_jsx(BarChart, __assign({ chartProps: { barGap: 4 }, data: data, height: 108 +
(26 * (barKeys.length - 1) + 2 * (barKeys.length - 1)) +
(data.length - 1) * (38 + 26 * (barKeys.length - 1)), subLabelWidth: maxSubLabelWidth, tooltipBarId: tooltipBarId || barIdHovered }, barChartProps, { tooltipProps: __assign({ renderAdditionalInfo: renderAdditionalTooltipInfo }, barChartProps === null || barChartProps === void 0 ? void 0 : barChartProps.tooltipProps), children: _jsxs(_Fragment, { children: [barKeys.map(function (keys, index) {
return keys.map(function (key, i) {
var _a;
return (_jsxs(Bar, __assign({ dataKey: key, fill: ((_a = barChartProps === null || barChartProps === void 0 ? void 0 : barChartProps.customizeBarFillColor) === null || _a === void 0 ? void 0 : _a.call(barChartProps, i, key)) ||
colors[i] ||
DEFAULT_CHART_COLORS[i] ||
palette.grey[700], isAnimationActive: animate, onAnimationStart: onAnimationStart, onMouseLeave: function () {
if (setTooltipBarId)
setTooltipBarId(undefined);
setBarIdHovered(undefined);
}, onMouseOver: function () {
if (barIdHovered !== keys[0]) {
if (setTooltipBarId)
setTooltipBarId(keys[0]);
setBarIdHovered(keys[0]);
}
}, stackId: index }, barProps, { children: [_jsx(LabelList, __assign({ formatter: function (v) { return numeral(v).format('0,0'); }, onMouseLeave: function () {
if (setTooltipBarId)
setTooltipBarId(undefined);
setBarIdHovered(undefined);
}, onMouseOver: function () {
if (barIdHovered !== keys[0]) {
if (setTooltipBarId)
setTooltipBarId(keys[0]);
setBarIdHovered(keys[0]);
}
}, position: "insideRight", style: customizeBarText ? customizeBarText(i) : {}, valueAccessor: function (bar) { var _a; return bar.width > 25 ? (_a = bar === null || bar === void 0 ? void 0 : bar.tooltipPayload[0]) === null || _a === void 0 ? void 0 : _a.value : undefined; } }, labelListProps)), barKeys.length > 1 && i === 0 ? (_jsx(LabelList, __assign({ position: "left", valueAccessor: function (bar) {
var _a;
return subLabels
? subLabels[index]
: (_a = bar === null || bar === void 0 ? void 0 : bar.tooltipPayload[0]) === null || _a === void 0 ? void 0 : _a.name;
} }, subLabelProps))) : undefined] }), "".concat(key, "-bar")));
});
}), children] }) })));
};
export default StackedBarChart;
//# sourceMappingURL=index.js.map