58 lines
2.5 KiB
React
58 lines
2.5 KiB
React
// This component defines a generic Widget that can be dynamically resized and
|
|
// dragged inside the canvas
|
|
// Content not included, must be populated using custom charts plots and notifications
|
|
|
|
import { useState } from 'react';
|
|
import GridLayout from 'react-grid-layout';
|
|
|
|
export default function Widget() {
|
|
// Define widgets initial position and size
|
|
// TODO Add dynamic adding/deleting of widgets via options button
|
|
const [layout, setLayout] = useState([
|
|
{ i: 'myWidget1', x: 0, y: 0, w: 3, h: 3, minH: 3, static: false },
|
|
{ i: 'myWidget2', x: 3, y: 0, w: 3, h: 3, minH: 3, static: false },
|
|
{ i: 'myWidget3', x: 6, y: 0, w: 3, h: 3, minH: 3, static: false }
|
|
]);
|
|
|
|
const onLayoutChange = (newLayout) => {
|
|
setLayout(newLayout);
|
|
console.log('Updated layout:', newLayout)
|
|
};
|
|
|
|
return (
|
|
<GridLayout
|
|
className="layout"
|
|
layout={layout}
|
|
cols={12} // Total columns in grid
|
|
rowHeight={30} //Height of a single row in px
|
|
width={1200} // Total width of the grid
|
|
margin={[10, 10]} // [horizontal, vertical] gap
|
|
onLayoutChange={onLayoutChange}
|
|
draggableHandle=".widget-handle" // Make only the header draggable
|
|
>
|
|
<div key="myWidget1" style={{ background: '#f0f0f0', borderRadius: 4 }}>
|
|
<div className="widget-handle" style={{ padding: '4px', cursor: 'move', background: '#ddd' }}>
|
|
VDAP Widget
|
|
</div>
|
|
<div style={{ padding: '8px' }}>
|
|
This is the widget content - drag or resize me!
|
|
</div>
|
|
</div><div key="myWidget2" style={{ background: '#f0f0f0', borderRadius: 4 }}>
|
|
<div className="widget-handle" style={{ padding: '4px', cursor: 'move', background: '#ddd' }}>
|
|
VDAP Widget
|
|
</div>
|
|
<div style={{ padding: '8px' }}>
|
|
This is the widget content - drag or resize me!
|
|
</div>
|
|
</div><div key="myWidget3" style={{ background: '#f0f0f0', borderRadius: 4 }}>
|
|
<div className="widget-handle" style={{ padding: '4px', cursor: 'move', background: '#ddd' }}>
|
|
VDAP Widget
|
|
</div>
|
|
<div style={{ padding: '8px' }}>
|
|
This is the widget content - drag or resize me!
|
|
</div>
|
|
</div>
|
|
</GridLayout>
|
|
);
|
|
}
|