@actinc/dls
Version:
Design Language System (DLS) for ACT & Encoura front-end projects.
48 lines • 4.47 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 } 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 { Grid } from '@mui/material';
import { useTheme, useThemeProps } from '@mui/material/styles';
import { Area, Label, Legend, AreaChart as RechartsAreaChart, ReferenceLine, ResponsiveContainer, Tooltip, XAxis, YAxis, } from 'recharts';
import DEFAULT_CHART_COLORS from "../../constants/DEFAULT_CHART_COLORS";
import DLS_COMPONENT_NAMES from "../../constants/DLS_COMPONENT_NAMES";
export var AreaChart = function (inProps) {
var _a = useThemeProps({ name: DLS_COMPONENT_NAMES.AREA_CHART, props: inProps }), areaChartProps = _a.areaChartProps, areaKeys = _a.areaKeys, areaProps = _a.areaProps, children = _a.children, _b = _a.colors, colors = _b === void 0 ? [] : _b, data = _a.data, height = _a.height, legendProps = _a.legendProps, responsiveContainerProps = _a.responsiveContainerProps, _c = _a.showLegend, showLegend = _c === void 0 ? false : _c, tooltipProps = _a.tooltipProps, width = _a.width, xAxisProps = _a.xAxisProps, xLabel = _a.xLabel, xLabelProps = _a.xLabelProps, yAxisProps = _a.yAxisProps, yLabel = _a.yLabel, yLabelProps = _a.yLabelProps, yReferenceValue = _a.yReferenceValue;
var _d = useTheme(), palette = _d.palette, spacing = _d.spacing, typography = _d.typography;
return (_jsx(Grid, { container: true, direction: "column", size: {
xs: 12,
}, spacing: 2, children: _jsx(ResponsiveContainer, __assign({ debounce: 50, height: height || 400, width: width || '100%' }, responsiveContainerProps, { children: _jsxs(RechartsAreaChart, __assign({ data: data, margin: {
bottom: parseInt(String(spacing(1)), 10),
left: parseInt(String(spacing(1)), 10),
right: parseInt(String(spacing(1)), 10),
top: parseInt(String(spacing(1)), 10),
}, style: { fontFamily: typography.fontFamily, position: 'absolute' } }, areaChartProps, { children: [_jsx(XAxis, __assign({ axisLine: false, dataKey: "name", height: 50, orientation: "bottom", padding: { left: 40, right: 30 }, tickLine: false, xAxisId: 0 }, xAxisProps, { children: xLabel && (_jsx(Label, __assign({ position: "insideBottom", style: {
fill: palette.secondary.dark,
fontSize: typography.h4.fontSize,
paddingTop: '10px',
userSelect: 'none',
} }, xLabelProps, { children: xLabel }))) })), _jsx(YAxis, __assign({ axisLine: false, padding: { bottom: 20, top: 20 }, tickCount: 5, tickLine: false, type: "number", yAxisId: 0 }, yAxisProps, { children: yLabel && (_jsx(Label, __assign({ angle: -90, offset: 15, position: "insideLeft", style: {
fill: palette.secondary.dark,
fontSize: typography.h4.fontSize,
userSelect: 'none',
} }, yLabelProps, { children: yLabel }))) })), (yReferenceValue || yReferenceValue === 0) && (_jsx(ReferenceLine, { stroke: palette.grey[400], y: yReferenceValue })), areaKeys.map(function (key, i) {
return (_jsx(Area, __assign({ dataKey: key, fill: colors[i] || DEFAULT_CHART_COLORS[i] || palette.grey[700], fillOpacity: 1, stroke: "none", style: (areaProps === null || areaProps === void 0 ? void 0 : areaProps.style) || {} }, areaProps), "".concat(key, "-area")));
}), showLegend && (_jsx(Legend, __assign({ align: data.length > 4 ? 'right' : 'center', layout: "vertical", verticalAlign: data.length > 6 ? 'top' : 'middle' }, legendProps))), _jsx(Tooltip, __assign({ itemStyle: { color: palette.secondary.dark }, labelStyle: { color: palette.secondary.dark }, wrapperStyle: { outline: 'none' } }, tooltipProps)), children] })) })) }));
};
export default AreaChart;
//# sourceMappingURL=index.js.map