docs: document the dashboard grid system with sizing recommendations (#5449)#6668
Open
florent-leborgne wants to merge 9 commits into
Open
docs: document the dashboard grid system with sizing recommendations (#5449)#6668florent-leborgne wants to merge 9 commits into
florent-leborgne wants to merge 9 commits into
Conversation
Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
Adds an H3 Best practices subsection inside the new Dashboard grid layout H2, covering: - Match panel height to content type - Keep heights consistent within a row - Use width to signal importance (refers to the column reference table above) - Separate primary from secondary content with collapsible sections Cross-references back to Best practices for dashboard design in `create-dashboard.md` (added in PR #6330). Originally drafted in #6330, moved here so all panel sizing / arranging guidance lives in a single section with the grid mechanics. Co-authored-by: Cursor <cursoragent@cursor.com>
The link from `arrange-panels.md` Best practices to `create-dashboard.md#create-dashboard-best-practices` pointed at an anchor that only exists in #6330. Removing it lets this PR merge independently. The reverse direction (`create-dashboard.md` → `arrange-panels.md` Best practices) is kept in #6330 and will resolve once this PR lands. Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: Florent LB <florent.leborgne@elastic.co>
Co-authored-by: Cursor <cursoragent@cursor.com>
…ks (#5449) - Add per-chart-type sizing table (width + height rows) to the grid section - Add above-the-fold guidance (20–24 rows on 1080p screens) - Restore panel limits as a subsection under the grid section - Restore panel limits cross-reference in create-dashboards-programmatically.md - Add layout guidance pointer from 13 Lens chart pages to arrange-panels#dashboard-grid-layout - Replace outdated EUI external link in line-charts with internal arrange-panels link - Add sizing reference link from the Kibana tutorial arrange-and-save step Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
#5449) Co-authored-by: Cursor <cursoragent@cursor.com>
florent-leborgne
force-pushed
the
docs-issue-5449-dashboard-grid
branch
from
35be06f to
d5036ed
Compare
Contributor
Elastic Docs AI PR menuCheck the box to run an AI review for this pull request.
Powered by GitHub Agentic Workflows and docs-actions. For more information, reach out to the docs team. |
Contributor
Contributor
✅ Vale Linting ResultsNo issues found on modified lines! The Vale linter checks documentation changes against the Elastic Docs style guide. To use Vale locally or report issues, refer to Elastic style guide for Vale. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
This PR addresses #5449 with the following changes:
explore-analyze/dashboards/arrange-panels.md: Adds a Dashboard grid layout and best practices section (replacing a previous placeholder) with the 48-column grid reference, a sizing table by chart type (KPI metrics: 4–6 rows / quarter width; bar, gauge, pie: 8–12 rows / half width; time series: 12–15 rows / full width; heat maps and tables with their own recommendations), four lightweight best practices bullets, an above-the-fold guidance note (20–24 rows on 1080p), and a pointer for API authors. Restores the Panel limits subsection (stack: ga 9.4) that was accidentally dropped.explore-analyze/dashboards/create-dashboards-programmatically.md: Restores the panel limits cross-reference and adds a grid layout pointer for authors who set panel coordinates by hand.area,bar,gauge,heat-map,line,metric,mosaic,pie,region-map,tables,tag-cloud,treemap,waffle): Adds a one-line pointer to the grid layout section at the end of the Customize the chart best-practices step. Also replaces the outdated external EUI link inline-charts.mdwith the internal pointer.explore-analyze/kibana-data-exploration-learning-tutorial.md: Adds a cross-reference to the sizing table from the arrange-and-save step, which already mentions grid rows inline.Verifies
DASHBOARD_GRID_COLUMN_COUNT = 48—src/platform/plugins/shared/dashboard/common/page_bundle_constants.ts(confirmed at HEAD)DEFAULT_PANEL_WIDTH = DASHBOARD_GRID_COLUMN_COUNT / 2= 24 —src/platform/plugins/shared/dashboard/common/constants.ts(confirmed at HEAD)kibana-dashboardsagent skill (elastic/agent-skills-sandbox), reframed as opinionated starting pointsResolves
Closes #5449