@totalsoft/rocket-ui
Version:
A set of reusable and composable React components built on top of Material UI core for developing fast and friendly web applications interfaces.
65 lines • 2.67 kB
JavaScript
import React from 'react';
import PropTypes from 'prop-types';
import { StyledCard, CardActions, CardCategory, CardContent, StyledCardHeader, CardStatContainer, CardTitle, statIconStyle, StatAction } from './StatsChartStyles';
import Divider from '@mui/material/Divider';
import Chart from './Chart';
/**
* The StatsChart component provides a customizable and rich card component that combines
* multiple elements to display different chart types with their corresponding statistical information
*/
const StatsChart = ({ chartColor = 'info', iconColor = 'grey', title, text, statText, StatIcon, statAction, chart }) => {
return (React.createElement(StyledCard, { disablePadding: true },
React.createElement(StyledCardHeader, { color: chartColor, subheader: React.createElement(Chart, { ...chart }) }),
React.createElement(CardContent, null,
React.createElement(CardTitle, { variant: "subtitle1" }, title),
text && React.createElement(CardCategory, { variant: "subtitle2" }, text)),
StatIcon || statText ? (React.createElement(React.Fragment, null,
React.createElement(Divider, null),
React.createElement(CardActions, null,
React.createElement(CardStatContainer, null,
StatIcon && React.createElement(StatIcon, { style: statIconStyle, color: iconColor }),
statText),
React.createElement(StatAction, null, statAction)))) : null));
};
StatsChart.propTypes = {
/**
* Chart properties. For more information about chart properties see https://mui.com/x/react-charts/, because they depend on the specified type.
*/
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
chart: PropTypes.object.isRequired,
/**
* @default 'info'
* Chart color
*/
chartColor: PropTypes.oneOf(['primary', 'secondary', 'info', 'success', 'warning', 'error', 'rose', 'dark']),
/**
* @default 'grey'
* Chart icon color
*/
iconColor: PropTypes.oneOf(['primary', 'secondary', 'info', 'success', 'warning', 'error']),
/**
* Chart status text
*/
statText: PropTypes.string,
/**
* Chart icon
*/
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
StatIcon: PropTypes.object,
/**
* Actions to be displayed in the right corner of the card
*/
statAction: PropTypes.node,
/**
* Chart title
*/
title: PropTypes.string,
/**
* The text content of chart
*/
text: PropTypes.string
};
export default StatsChart;
//# sourceMappingURL=StatsChart.js.map