Untitled
unknown
plain_text
16 days ago
3.5 kB
4
Indexable
Never
import React, { memo, useMemo, useState, useCallback, RefObject, useEffect } from 'react'; import { Box, Divider, Drawer, Popover, Typography } from '@mui/material'; import { useTheme, alpha } from '@mui/material/styles'; import { useWidgetSidebar } from 'contexts/WidgetSidebarContext'; import AvgWinLossChartCard from 'ui-component/cards/dashboard/AvgWinLossChartCard'; import WinrateChartCard from 'ui-component/cards/dashboard/WinrateChartCard'; import ProfitChartCard from 'ui-component/cards/dashboard/ProfitChartCard'; import BalancesChartCard from 'ui-component/cards/dashboard/BalancesChartCard'; import { useDashboard } from 'components/widget/DashboardContext'; import { GridItemHTMLElement, GridStack, GridStackNode } from 'gridstack'; interface Widget { id: string; component: JSX.Element; h?: number; w?: number; } interface WidgetSidebarProps { grid: GridStack | null; } const WidgetSidebar: React.FC<WidgetSidebarProps> = ({ grid }) => { const theme = useTheme(); const { isWidgetSidebarOpen, toggleSidebar } = useWidgetSidebar(); const { accountId, dateRange } = useDashboard(); const [isDragging, setIsDragging] = useState(false); const handleDragStart = useCallback(() => { setIsDragging(true); }, []); const handleDragStop = useCallback(() => { setIsDragging(false); }, []); useEffect(() => { if (grid) { grid.on('added', (event: Event, items: GridStackNode[]) => { toggleSidebar(); console.log(grid.getGridItems()[0].gridstackNode); }); } }, [grid]); // if (grid) { // grid.on('added', (event: Event, items: GridStackNode[]) => { // console.log(items); // }); // } const widgetsAvailable = useMemo<Widget[]>( () => [ { w: 2, h: 2, id: 'avgWinLoss', component: <AvgWinLossChartCard accountId={accountId} dateRange={dateRange} /> }, { w: 2, h: 2, id: 'winrate1', component: <WinrateChartCard accountId={accountId} dateRange={dateRange} /> }, { id: 'balances', component: <BalancesChartCard accountId={accountId} dateRange={dateRange} fromSidebar={true} /> }, { id: 'profit', component: <ProfitChartCard accountId={accountId} dateRange={dateRange} fromSidebar={true} /> } ], [accountId, dateRange] ); return ( <Drawer className="widget-sidebar" variant="persistent" anchor="right" open={isWidgetSidebarOpen} onClose={toggleSidebar} sx={{ width: '300px', // Control the width of the Drawer flexShrink: 0, '& .MuiDrawer-paper': { backgroundColor: alpha(theme.palette.background.default, 0.9), width: '300px', boxSizing: 'border-box' } }} > <div className="flex flex-col gap-2 p-2 h-full"> <div className="flex flex-col justify-center mb-4"> <Typography align="center" variant="h3"> Dashboard Widgets </Typography> <Typography align="center" variant="h6" color="GrayText"> Drag and drop widgets to the dashboard </Typography> </div> <Divider orientation="horizontal" variant="fullWidth" /> <div className="space-y-4"> {widgetsAvailable.map((widget) => ( <div key={widget.id} className="grid-stack-item" gs-h={widget.h} gs-w={widget.w}> <div className="grid-stack-item-content">{widget.component}</div> </div> ))} </div> </div> </Drawer> ); }; export default memo(WidgetSidebar);
Leave a Comment