22 lines
960 B
React
22 lines
960 B
React
import React, { useState } from 'react';
|
|
import './ChartPanel.css';
|
|
|
|
export default function ChartPanel({ title = '图表', collapsible = true, collapsed = false, onRefresh, onExport, children }) {
|
|
const [isCollapsed, setIsCollapsed] = useState(collapsed);
|
|
return (
|
|
<div className={'aa-chartpanel' + (isCollapsed ? ' is-collapsed' : '')}>
|
|
<div className="aa-chartpanel-head">
|
|
<span className="aa-chartpanel-title">{title}</span>
|
|
<div className="aa-chartpanel-tools">
|
|
<button className="aa-chartpanel-tool" onClick={onRefresh}>刷新</button>
|
|
<button className="aa-chartpanel-tool" onClick={onExport}>导出</button>
|
|
{collapsible ? (
|
|
<button className="aa-chartpanel-tool aa-chartpanel-caret" onClick={() => setIsCollapsed(c => !c)}>▾</button>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
<div className="aa-chartpanel-body">{children || '图表区域'}</div>
|
|
</div>
|
|
);
|
|
}
|