Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 | 1x 1x 1x 1x 1x | import React from 'react';
import classNames from 'classnames';
import './ChartCard.css';
export interface ChartCardProps {
title: string;
description?: string;
children: React.ReactNode;
className?: string;
actions?: React.ReactNode;
loading?: boolean;
error?: string;
}
const ChartCard: React.FC<ChartCardProps> = ({
title,
description,
children,
className,
actions,
loading = false,
error,
}) => {
return (
<div className={classNames('card chart-card', className)}>
<div className="card-header">
<div className="chart-card-header-content">
<div>
<h5 className="card-title mb-0">{title}</h5>
{description && (
<p className="text-muted small mb-0 mt-1">{description}</p>
)}
</div>
{actions && <div className="chart-card-actions">{actions}</div>}
</div>
</div>
<div className="card-body">
{loading && (
<div className="chart-loading">
<div className="spinner-border text-primary" role="status">
<span className="visually-hidden">Loading chart...</span>
</div>
</div>
)}
{error && (
<div className="alert alert-danger mb-0">
<i className="ph ph-warning me-2"></i>
{error}
</div>
)}
{!loading && !error && (
<div className="chart-container">{children}</div>
)}
</div>
</div>
);
};
export default ChartCard;
|