@actinc/dls
Version:
Design Language System (DLS) for ACT & Encoura front-end projects.
38 lines • 3.39 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 { useTheme, useThemeProps } from '@mui/material/styles';
import numeral from 'numeral';
import { Line, ComposedChart, CartesianGrid, Tooltip, XAxis, YAxis, } from 'recharts';
import DEFAULT_CHART_COLORS from "../../constants/DEFAULT_CHART_COLORS";
import DLS_COMPONENT_NAMES from "../../constants/DLS_COMPONENT_NAMES";
import { StyledContainer, StyledResponsiveContainer } from './styles';
export var LineChart = function (inProps) {
var _a = useThemeProps({ name: DLS_COMPONENT_NAMES.LINE_CHART, props: inProps }), cartesianGridProps = _a.cartesianGridProps, chartProps = _a.chartProps, children = _a.children, _b = _a.colors, colors = _b === void 0 ? [] : _b, containerStyles = _a.containerStyles, data = _a.data, height = _a.height, _c = _a.lineKeys, lineKeys = _c === void 0 ? [] : _c, lineProps = _a.lineProps, maxHeight = _a.maxHeight, responsiveContainerProps = _a.responsiveContainerProps, tooltipProps = _a.tooltipProps, width = _a.width, xAxisProps = _a.xAxisProps, yAxisProps = _a.yAxisProps;
var _d = useTheme(), palette = _d.palette, spacing = _d.spacing, typography = _d.typography;
return (_jsx(StyledContainer, { height: height, maxHeight: maxHeight, style: containerStyles, width: width || '100%', children: _jsx(StyledResponsiveContainer, __assign({}, responsiveContainerProps, { children: _jsxs(ComposedChart, __assign({ data: data, margin: {
bottom: parseInt(String(spacing(0.6)), 10),
left: parseInt(String(spacing(4)), 10),
right: parseInt(String(spacing(8)), 10),
top: parseInt(String(spacing(2)), 10),
}, style: { fontFamily: typography.fontFamily } }, chartProps, { children: [_jsx(CartesianGrid, __assign({ stroke: "#f5f5f5", vertical: false }, cartesianGridProps)), _jsx(XAxis, __assign({ dataKey: "label", orientation: "bottom", tickCount: data.length, xAxisId: 0 }, xAxisProps)), _jsx(YAxis, __assign({ orientation: "left", padding: { bottom: 10, top: 10 }, tickFormatter: function (v) { return numeral(v).format('0,0'); }, tickLine: false, yAxisId: 0 }, yAxisProps)), lineKeys === null || lineKeys === void 0 ? void 0 : lineKeys.map(function (key, i) {
return (_jsx(Line, __assign({ activeDot: false, dataKey: key, dot: false, stroke: colors[i] || DEFAULT_CHART_COLORS[i] || palette.grey[700], type: "natural" }, lineProps), "".concat(key, "-line")));
}), _jsx(Tooltip, __assign({ formatter: function (v) { return numeral(v).format('0,0'); }, itemStyle: { color: palette.secondary.dark }, labelStyle: { color: palette.secondary.dark }, wrapperStyle: { outline: 'none' } }, tooltipProps)), children] })) })) }));
};
export default LineChart;
//# sourceMappingURL=index.js.map