Skip to content

Areas dashboard: add description #38716

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

Merged
merged 3 commits into from
Apr 24, 2025
Merged

Areas dashboard: add description #38716

merged 3 commits into from
Apr 24, 2025

Conversation

c0ffeeca7
Copy link
Contributor

@c0ffeeca7 c0ffeeca7 commented Apr 24, 2025

Proposed change

Areas dashboard: add description

  • add new description of areas dashboard
  • update section on adding a new dashboard / editing a dashboard

Type of change

  • Spelling, grammar or other readability improvements (current branch).
  • Adjusted missing or incorrect information in the current documentation (current branch).
  • Added documentation for a new integration I'm adding to Home Assistant (next branch).
  • Added documentation for a new feature I'm adding to Home Assistant (next branch).
  • Removed stale or deprecated documentation.

Additional information

  • Link to parent pull request in the codebase:
  • Link to parent pull request in the Brands repository:
  • This PR fixes or closes issue: fixes #

Checklist

  • This PR uses the correct branch, based on one of the following:
    • I made a change to the existing documentation and used the current branch.
    • I made a change that is related to an upcoming version of Home Assistant and used the next branch.
  • The documentation follows the Home Assistant documentation standards.

Summary by CodeRabbit

  • Documentation
    • Added detailed information about the new experimental "Areas" dashboard, including features, usage instructions, and screenshots.
    • Expanded and clarified instructions for creating and editing dashboards, with a dedicated section and improved step-by-step guidance.
    • Standardized references to the edit icon for consistency.
    • Included disclaimers regarding the experimental nature of the Areas dashboard.

@home-assistant home-assistant bot added the current This PR goes into the current branch label Apr 24, 2025
Copy link

netlify bot commented Apr 24, 2025

Deploy Preview for home-assistant-docs ready!

Name Link
🔨 Latest commit 1782625
🔍 Latest deploy log https://app.netlify.com/sites/home-assistant-docs/deploys/680a5813dadc7d00089cd9a9
😎 Deploy Preview https://deploy-preview-38716--home-assistant-docs.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

Copy link
Contributor

coderabbitai bot commented Apr 24, 2025

📝 Walkthrough

"""

Walkthrough

The documentation for Home Assistant dashboards was updated to introduce and describe a new experimental "Areas" dashboard. This includes details on its features, usage instructions, editing capabilities, and a disclaimer about its experimental status. The process for creating new dashboards was updated to include the Areas dashboard as a pre-populated option, with new screenshots and clearer steps for editing dashboards. All changes are limited to documentation and do not affect any code or public APIs.

Changes

File(s) Change Summary
source/dashboards/dashboards.markdown Added documentation for the new experimental "Areas" dashboard, updated instructions for dashboard creation and editing, included new screenshots, and restructured guidance for editing dashboards.

Sequence Diagram(s)

No sequence diagram generated, as the changes are limited to documentation and do not affect control flow or introduce new features in the codebase.
"""


Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share
🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Generate unit testing code for this file.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    • @coderabbitai generate unit testing code for this file.
    • @coderabbitai modularize this function.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read src/utils.ts and generate unit testing code.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
    • @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai generate docstrings to generate docstrings for this PR.
  • @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai or @coderabbitai title anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

  • You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
  • Please see the configuration documentation for more information.
  • If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

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

Actionable comments posted: 1

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 717e8b4 and dc4a791.

⛔ Files ignored due to path filters (2)
  • source/images/dashboards/areas-dashboard-overview.png is excluded by !**/*.png
  • source/images/dashboards/areas-experimental-dialog.png is excluded by !**/*.png
📒 Files selected for processing (1)
  • source/dashboards/dashboards.markdown (4 hunks)
🧰 Additional context used
🪛 markdownlint-cli2 (0.17.2)
source/dashboards/dashboards.markdown

34-34: Link fragments should be valid
null

(MD051, link-fragments)

🪛 LanguageTool
source/dashboards/dashboards.markdown

[style] ~114-~114: ‘completely empty’ might be wordy. Consider a shorter alternative.
Context: ...board. - If you want to start with a completely empty dashboard, choose **New dashboard from ...

(EN_WORDINESS_PREMIUM_COMPLETELY_EMPTY)

⏰ Context from checks skipped due to timeout of 90000ms (3)
  • GitHub Check: Redirect rules - home-assistant-docs
  • GitHub Check: Header rules - home-assistant-docs
  • GitHub Check: Pages changed - home-assistant-docs
🔇 Additional comments (4)
source/dashboards/dashboards.markdown (4)

15-18: New related links added to organizing docs look good
The frontmatter now links to both the general organizing guide and the specific areas page, which will help users find grouping documentation quickly.


44-56: Experimental Areas dashboard section content is clear and accurate
The new subsection describes the prepopulated views, automatic grouping behavior, and editing options. The screenshot and alt text are appropriate.


113-115: Updated "Create a new dashboard" options include Areas dashboard
The instructions now correctly mention the Areas dashboard as a pre-populated option, and the accompanying screenshot reflects the change.

🧰 Tools
🪛 LanguageTool

[style] ~114-~114: ‘completely empty’ might be wordy. Consider a shorter alternative.
Context: ...board. - If you want to start with a completely empty dashboard, choose **New dashboard from ...

(EN_WORDINESS_PREMIUM_COMPLETELY_EMPTY)


123-132: "Editing a new dashboard" subsection adds needed clarity
This section clearly outlines the steps to edit a freshly created or default dashboard, including taking control. The links and icon shortcodes are consistent with existing docs.

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

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

Actionable comments posted: 0

🧹 Nitpick comments (1)
source/dashboards/dashboards.markdown (1)

113-115: Improve wording and alt text for clarity.
Consider shortening “completely empty dashboard” for brevity and updating the screenshot’s alt text to describe the Areas option.

-   - If you want to start with a completely empty dashboard, choose **New dashboard from scratch**.
+   - If you want to start with a blank dashboard, choose **New dashboard from scratch**.

-   ![Screenshot of the dashboard list](/images/dashboards/areas-experimental-dialog.png)
+   ![Screenshot of the Add Dashboard dialog showing the Areas dashboard option](/images/dashboards/areas-experimental-dialog.png)
🧰 Tools
🪛 LanguageTool

[style] ~114-~114: ‘completely empty’ might be wordy. Consider a shorter alternative.
Context: ...board. - If you want to start with a completely empty dashboard, choose **New dashboard from ...

(EN_WORDINESS_PREMIUM_COMPLETELY_EMPTY)

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between dc4a791 and 51844c9.

📒 Files selected for processing (1)
  • source/dashboards/dashboards.markdown (4 hunks)
🧰 Additional context used
🪛 LanguageTool
source/dashboards/dashboards.markdown

[style] ~114-~114: ‘completely empty’ might be wordy. Consider a shorter alternative.
Context: ...board. - If you want to start with a completely empty dashboard, choose **New dashboard from ...

(EN_WORDINESS_PREMIUM_COMPLETELY_EMPTY)

⏰ Context from checks skipped due to timeout of 90000ms (3)
  • GitHub Check: Redirect rules - home-assistant-docs
  • GitHub Check: Header rules - home-assistant-docs
  • GitHub Check: Pages changed - home-assistant-docs
🔇 Additional comments (4)
source/dashboards/dashboards.markdown (4)

15-18: Add cross-references for organizing docs — good addition.
The new related links to “Grouping your assets” and “Grouping by areas” help orient readers to the organizing guide and maintain consistency with other integration docs.


34-34: Fixed anchor link — matches the heading.
The list entry now correctly uses #areas-dashboard-experimental, aligning with “### Areas dashboard (experimental)”.


44-57: Introduce Areas dashboard section — clear and informative.
The new section clearly describes the experimental Areas dashboard, its views, grouping behavior, and includes a useful screenshot.


123-132: Add dedicated editing instructions — great clarity.
The new “Editing a new dashboard” section cleanly separates the take-control steps and how to add cards or views.

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

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

Actionable comments posted: 1

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 51844c9 and 1782625.

📒 Files selected for processing (1)
  • source/dashboards/dashboards.markdown (4 hunks)
🧰 Additional context used
🪛 LanguageTool
source/dashboards/dashboards.markdown

[style] ~114-~114: ‘completely empty’ might be wordy. Consider a shorter alternative.
Context: ...board. - If you want to start with a completely empty dashboard, choose **New dashboard from ...

(EN_WORDINESS_PREMIUM_COMPLETELY_EMPTY)

⏰ Context from checks skipped due to timeout of 90000ms (3)
  • GitHub Check: Redirect rules - home-assistant-docs
  • GitHub Check: Header rules - home-assistant-docs
  • GitHub Check: Pages changed - home-assistant-docs
🔇 Additional comments (9)
source/dashboards/dashboards.markdown (9)

15-18: Related links: Asset and area grouping added
The new related entries for grouping your assets and grouping by areas are consistent with the existing documentation hierarchy and link format.


34-34: Include Areas dashboard in default dashboards list
The anchor #areas-dashboard-experimental correctly matches the heading slug, and listing the Areas dashboard here aligns with its new documentation section.


44-44: Add "### Areas dashboard (experimental)" section heading
The new section clearly introduces the experimental Areas dashboard, following the existing structure for dashboard documentation.


46-46: Describe default behavior of the Areas dashboard
The explanation of how the Areas dashboard is prepopulated and displays entities grouped by area is clear and accurate.


113-113: Update dashboard creation instructions
Including the Areas dashboard as a pre-populated option enhances discoverability and aligns with the new section.


123-123: Add "Editing a new dashboard" subsection
The new subsection for editing freshly created dashboards improves clarity and maintains consistency with other sections.


125-125: Add step for opening the edit mode
Step 1 clearly instructs users how to enter edit mode, matching the UI pattern used elsewhere.


126-126: Add step for taking control of a Default dashboard
Step 2 accurately describes the take-control process, ensuring users understand the implications.


132-132: Add step for adding cards and views
Step 3 correctly links to the card and view addition documentation, enabling users to extend their dashboard.

- If you want to start with a completely empty dashboard, choose **New dashboard from scratch**.
![Screenshot of the Add Dashboard dialog showing the Areas dashboard option](/images/dashboards/areas-experimental-dialog.png)
Copy link
Contributor

Choose a reason for hiding this comment

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

💡 Verification agent

🧩 Analysis chain

Verify screenshot path and alt text
Please confirm that the image file areas-experimental-dialog.png exists at the specified location and that the alt text follows the style guide.


🏁 Script executed:

#!/bin/bash
# Verify the screenshot file exists in the repository
fd areas-experimental-dialog.png

Length of output: 146


Verify screenshot path and update alt text

  • The file areas-experimental-dialog.png exists at source/images/dashboards/areas-experimental-dialog.png.
  • Per our alt-text style guide, drop the “Screenshot of” prefix. For example:
    ![Add Dashboard dialog showing the Areas dashboard option](/images/dashboards/areas-experimental-dialog.png)

Copy link
Member

@frenck frenck left a comment

Choose a reason for hiding this comment

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

Thanks, @c0ffeeca7 👍

../Frenck

@frenck frenck merged commit e7ef358 into current Apr 24, 2025
9 checks passed
@frenck frenck deleted the areas-dashboard branch April 24, 2025 21:48
@github-actions github-actions bot locked and limited conversation to collaborators Apr 25, 2025
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
current This PR goes into the current branch
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants