@actinc/dls
Version:
Design Language System (DLS) for ACT & Encoura front-end projects.
68 lines • 4.31 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);
};
import { jsx as _jsx, jsxs as _jsxs, 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.
*/
/* eslint-disable react/no-array-index-key */
import { useTheme, useThemeProps } from '@mui/material/styles';
import * as React from 'react';
import { Bar, Cell, LabelList, XAxis, } from 'recharts';
import { BarChart } from "../BarChart";
import DEFAULT_CHART_COLORS from "../../constants/DEFAULT_CHART_COLORS";
import DLS_COMPONENT_NAMES from "../../constants/DLS_COMPONENT_NAMES";
import OverlappedLabel from './OverlappedLabel';
export var OverlappedBarChart = function (inProps) {
var _a = useThemeProps({
name: DLS_COMPONENT_NAMES.OVERLAPPED_BAR_CHART,
props: inProps,
}), barChartProps = _a.barChartProps, barKeys = _a.barKeys, barProps = _a.barProps, barTextColors = _a.barTextColors, children = _a.children, _b = _a.colors, colors = _b === void 0 ? [] : _b, data = _a.data, _c = _a.initialBarSize, initialBarSize = _c === void 0 ? 320 : _c, innerBarTextColor = _a.innerBarTextColor, labelProps = _a.labelProps, xAxisProps = _a.xAxisProps;
var _d = useTheme(), palette = _d.palette, spacing = _d.spacing;
return (_jsx(BarChart, __assign({ cartesianGridProps: { stroke: palette.common.white }, chartProps: {
layout: 'horizontal',
margin: { top: parseInt(String(spacing(5)), 10) },
}, data: data, tooltipProps: {
contentStyle: {
backgroundColor: palette.common.white,
},
wrapperStyle: {
textTransform: 'capitalize',
},
}, xAxisProps: {
dataKey: 'name',
hide: true,
orientation: 'bottom',
type: 'category',
}, yAxisProps: { dataKey: undefined, dx: 0, hide: true, type: 'number' } }, barChartProps, { children: _jsxs(_Fragment, { children: [barKeys.map(function (key, index) {
var commonLabelProps = {
data: data,
index: index,
label: key,
outsideBarDataKey: barKeys[0],
};
if (index === 0) {
return (_jsxs(Bar, __assign({ barSize: initialBarSize, dataKey: key, xAxisId: index }, barProps, { children: [data.map(function (_a, i) {
var color = _a.color;
return (_jsx(Cell, { fill: color ||
colors[i] ||
DEFAULT_CHART_COLORS[i] ||
palette.grey[800] }, "cell-".concat(i)));
}), _jsx(LabelList, __assign({ content: _jsx(OverlappedLabel, __assign({ isOutsideBar: true, textColor: barTextColors === null || barTextColors === void 0 ? void 0 : barTextColors[index] }, commonLabelProps)), dataKey: key }, labelProps))] }), "".concat(key, "-bar")));
}
return (_jsxs(React.Fragment, { children: [_jsx(XAxis, __assign({ dataKey: "name", hide: true, xAxisId: index }, xAxisProps)), _jsx(Bar, __assign({ barSize: initialBarSize - initialBarSize * (index * 0.15), dataKey: key, fill: palette.common.white, fillOpacity: 1 - index * 0.3, xAxisId: index }, barProps, { children: _jsx(LabelList, __assign({ content: _jsx(OverlappedLabel, __assign({ barTextColors: barTextColors, innerBarTextColor: innerBarTextColor, textColor: barTextColors === null || barTextColors === void 0 ? void 0 : barTextColors[index] }, commonLabelProps)), dataKey: key }, labelProps)) }))] }, "".concat(key, "-bar")));
}), children] }) })));
};
export default OverlappedBarChart;
//# sourceMappingURL=index.js.map