47 lines
1.8 KiB
React
47 lines
1.8 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, { WidthProvider } from 'react-grid-layout';
|
|
import Widget from '../Widget.jsx';
|
|
import { useSlotRecipe, chakra } from '@chakra-ui/react';
|
|
|
|
export default function WidgetCanvas() {
|
|
// Define widgets initial position and size
|
|
// TODO Add dynamic adding/deleting of widgets via options button
|
|
const recipe = useSlotRecipe({ key: "widget" });
|
|
const styles = recipe();
|
|
const ResponsiveGridLayout = WidthProvider(GridLayout);
|
|
|
|
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 (
|
|
<ResponsiveGridLayout
|
|
className="layout"
|
|
layout={layout}
|
|
cols={12} // Total columns in grid
|
|
rowHeight={30} //Height of a single row in px
|
|
isBounded={true} // Total width of the grid
|
|
margin={[10, 10]} // [horizontal, vertical] gap
|
|
onLayoutChange={onLayoutChange}
|
|
draggableHandle=".widget-handle" // Make only the header draggable
|
|
>
|
|
{layout.map((item) => (
|
|
<chakra.div key={item.i} css={styles.root}>
|
|
<Widget title="VDAP Widget" />
|
|
</chakra.div>
|
|
))}
|
|
</ResponsiveGridLayout>
|
|
);
|
|
}
|