chight/Web-Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add new 'views' directory that handles what the Canvas displays. Refactor Canvas.jsx to act as a router between canvas views. Add /views/WidgetCanvas to handle default view

Browse Source
This commit is contained in:
Daniel S. Hansen
2025-07-21 14:12:32 -07:00
parent a1f2fcc9be
commit 8a34f11a46
4 changed files with 19 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/layout/Canvas/Widget.jsx
-60
View File
@@ -1,4 +1,3 @@
// Widget.jsx
export default function Widget({ title }) {
return (
<>
@@ -15,62 +14,3 @@ export default function Widget({ title }) {
);
}
// The below code has been moved to Canvas.jsx
// // 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>
// );
// }