diff --git a/contents/patterns/dashboards.md b/contents/patterns/dashboards.md new file mode 100644 index 0000000000000000000000000000000000000000..dfdcc4fc0c7346d063d847a9a6cd6265c5bf0614 --- /dev/null +++ b/contents/patterns/dashboards.md @@ -0,0 +1,61 @@ +--- +name: Dashboards +description: A dashboard is a root level container that has multiple panels, and is analysis focused. +--- + +## Layout + +- **Grid** Rows and columns used to align and snap elements based on sequence and position. +- **Panel**: The basic building block of a dashboard. Each panel is composed of a title, description, and visualization which can be configured or modified through options. Panels can be moved and resized to arrange them within a dashboard. + +<todo>Add visual examples for dashboard and panel content and concepts.</todo> + +## Guidelines + +### When to use + +- Display panels of content and data for analysis-oriented tasks. + +### When not to use + +- If content is action-oriented and presented in a list, table, or board, then a general [landing page](/patterns/navigation#landing-page) may be more appropriate. + +### Behavior + +The following interactions are available: + +- **Alerting**: Enable a panel to notify a user, so they can act on data from their existing data sources. +- **Archive**: Remove something from a current view to be organized and managed in a separate view. This change is recorded in the versioning area. +- **Duplicate**: Create an identical copy of any dashboard or panel. +- **Embed**: Insert panels into different mediums. +- **Export**: Make data available as CSV file, static image of a chart being shown, or static PDF of chart/dashboard (important for data analysis and accessibility). +- **Lock**: One or more elements are temporarily unavailable for changes to be made. +- **Remove**: Delete a dashboard or panel. +- **Share**: Share a dashboard or panel through different channels. + +### Content and configuration + +#### Dashboard + +- **[Accordion](/components/accordion)**: Show and hide content. +- **Configuration menu**: Open and modify dashboard settings and utilize dashboard actions. +- **Date range**: An interval of dates defined relative to the current date or a custom range. +- **Description**: Explains the purpose of the dashboard. +- **Filter**: A selection of one or more ways to reduce the data shown to meet a specific set of criteria across all panels. +- **Title**: Concisely describes the group of panels. +- **Unique ID** (required): An internal value to uniquely identify the dashboard. +- **Variable**: A placeholder for a value that could propagate through the panels. For example, a team name that could be rendered in charts or titles. +- **Version history**: Listing of historical changes that were done to the dashboard that shows dates and author. Could have the option to revert back to any point of a past change if able. +- **Grid attributes**: The number of rows and columns, margin around panels, and other grid functionality that should be applied to the whole grid. + +#### Panel + +- **Configuration menu**: Open and modify panel settings and utilize panel actions. +- **Data source**: The type of database you want to query or integrate with. +- **Description**: Explain what the panel contains or how to use the data presented. +- **Filter**: A selection of one or more ways to reduce the data shown to meet a specific set of criteria of a panel. +- **Grid attributes** (required): The width, height, and x/y coordinates for the panel on a specific dashboard. +- **Title**: Concisely describe the panel. +- **Unique ID** (required): An internal value to uniquely identify the panel. +- **Version history**: Listing of historical changes that were done to the dashboard that shows dates and author. Could have the option to revert back to any point of a past change if able. +- **Visualization** (required): A graphical representation of query results. diff --git a/contents/patterns/navigation.md b/contents/patterns/navigation.md index a26048da200983c85bc2527f175c37d0b0de4d40..a92b162e0555b0f03c120cc2d061bdef37cbaf9f 100644 --- a/contents/patterns/navigation.md +++ b/contents/patterns/navigation.md @@ -18,9 +18,13 @@ The top bar navigation items are replaced by exit links during scenarios that ha <todo>Add top bar example</todo> -### Dashboard +### Homepage -The dashboard is the page users see at the top level of GitLab.com or their instance, and it's where users are directed after logging in. This page is considered navigation, as it is meant to help users orient themselves upon logging in. Currently this page is [configurable in User Settings](https://docs.gitlab.com/ee/user/profile/preferences.html#default-dashboard). +The homepage is the first page a user sees at the top level of GitLab.com or their instance after logging in. It's also where a user is directed after clicking the GitLab or instance logo in the navigation. This page is meant to help the user orient themself upon logging in. Currently this page is [configurable in User Settings](https://docs.gitlab.com/ee/user/profile/preferences.html#default-dashboard). + +### Landing page + +A landing page is the page directly tied to a link in the navigation. Typically, a landing page is action-oriented and contains overview and/or summary content, but it can also be a [dashboard](/patterns/dashboards) for analysis-oriented tasks. ### User settings menu The user settings menu is the rightmost menu which contains items related to the logged-in user. diff --git a/nav.json b/nav.json index 69edaeb1d561aefec1cd8a484c6c5fbe98118941..e44f08bbfda0460750f254e560f1b04ff4770798 100644 --- a/nav.json +++ b/nav.json @@ -332,6 +332,10 @@ "title": "Patterns", "path": "patterns", "items": [ + { + "title": "Dashboards", + "path": "dashboards" + }, { "title": "Empty States", "path": "empty-states"