Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Dashboard Grid Layout #1586

Closed
wants to merge 6 commits into from
Closed

Dashboard Grid Layout #1586

wants to merge 6 commits into from

Conversation

andrewmurraydavid
Copy link
Member

@andrewmurraydavid andrewmurraydavid commented Sep 12, 2024

In this change we're adding the ability for configurable widgets and a My Dashboard page.

The Dashboard grid uses a CSS Grid layout (defaults to 12 columns and rows). My hope is that this can also be a foundation for customizable (drag and drop and/or resizable widgets)

Monday Task

Copy link
Contributor

@willdch willdch left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this looks good. Just noticed the two small nit picks I commented on.

src/components/Widgets/TableWidget.tsx Outdated Show resolved Hide resolved
src/components/Widgets/BaseWidget.tsx Outdated Show resolved Hide resolved
@andrewmurraydavid andrewmurraydavid marked this pull request as ready for review September 16, 2024 15:18
Copy link
Member

@CarsonF CarsonF left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great start guys

src/components/Grid/useDataGridSource.tsx Outdated Show resolved Hide resolved
src/components/DashboardLayout/DashboardLayout.tsx Outdated Show resolved Hide resolved
src/components/DashboardLayout/DashboardLayout.tsx Outdated Show resolved Hide resolved
src/components/DashboardLayout/DashboardLayout.tsx Outdated Show resolved Hide resolved
src/scenes/MyDashboard/MyDashboard.tsx Outdated Show resolved Hide resolved
src/components/Widgets/GenericWidget.tsx Outdated Show resolved Hide resolved
src/components/Widgets/GenericWidget.tsx Outdated Show resolved Hide resolved
sx={{
'--unstable_DataGrid-radius': '0px',
border: 'none',
maxHeight,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Instead of using JS to find element height, you can use a container query.

<Box sx={{ containerType: 'size' }}>
  <DataGridPro sx={{ height: '100cqh' }} />
</Box>

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The DataGrid implementation is being moved to the specific Widget (ie: TeamNewsWidget) and will be addressed there.

@rdonigian rdonigian force-pushed the dashboard-grid branch 2 times, most recently from 6148b35 to bf5a83b Compare September 20, 2024 20:53
@CarsonF
Copy link
Member

CarsonF commented Oct 1, 2024

Thanks guys! Let's just merge this into #1587 to track in one PR

@CarsonF CarsonF closed this Oct 1, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants