@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.
79 lines • 3.29 kB
JavaScript
import React from 'react';
import PropTypes, { number } from 'prop-types';
import { StyledCard, CardActions, CardCategory, CardContent, StyledCardHeader, CardStatContainer, CardTitle, statIconStyle, StatAction } from './StatsChartStyles';
import { Chart } from 'react-chartjs-2';
import { Chart as ChartJS, CategoryScale, LinearScale, LineController, PointElement, LineElement, BarElement, BarController, Tooltip } from 'chart.js';
import Divider from '@mui/material/Divider';
ChartJS.register(CategoryScale, LinearScale, LineController, PointElement, LineElement, BarElement, BarController, Tooltip);
/**
* The StatsChart component provides a set of frequently and customizable used chart types (`line` and `bar`).
*/
const StatsChart = ({ chartColor = 'info', iconColor = 'grey', title, text, statText, StatIcon, type = 'line', data, statAction, ...rest }) => {
return (React.createElement(StyledCard, { disablePadding: true },
React.createElement(StyledCardHeader, { color: chartColor, subheader: React.createElement(Chart, { type: type, data: data, ...rest }) }),
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 = {
/**
* @default 'line'
* Chart type.
*/
type: PropTypes.oneOf(['line', 'bar']),
/**
* Chart title.
*/
title: PropTypes.string,
/**
* The text content of chart.
*/
text: PropTypes.string,
/**
* Chart icon.
*/
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
StatIcon: PropTypes.object,
/**
* @default 'grey'
* Chart icon color.
*/
iconColor: PropTypes.oneOf(['primary', 'secondary', 'info', 'success', 'warning', 'error']),
/**
* @default 'info'
* Chart color.
*/
chartColor: PropTypes.oneOf(['primary', 'secondary', 'info', 'success', 'warning', 'error', 'rose', 'dark']),
/**
* Chart status text.
*/
statText: PropTypes.node,
/**
* Chart data.
*/
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
//@ts-ignore
data: PropTypes.shape({
labels: PropTypes.arrayOf(PropTypes.string).isRequired,
datasets: PropTypes.arrayOf(PropTypes.shape({
data: PropTypes.arrayOf(number).isRequired,
label: PropTypes.string.isRequired,
backgroundColor: PropTypes.string.isRequired,
borderColor: PropTypes.string.isRequired
}).isRequired).isRequired
}).isRequired,
/**
* Actions to be displayed in the right corner of the card.
*/
statAction: PropTypes.node
};
export default StatsChart;
//# sourceMappingURL=StatsChart.js.map