From 7c441011f2079978e76c558499ee1dfa766697cb Mon Sep 17 00:00:00 2001 From: Isabel Matwawana <76437239+imatwawana@users.noreply.github.com> Date: Tue, 16 Apr 2024 14:26:41 -0400 Subject: [PATCH] Docs: add panels & visualizations landing page (#86073) * Added landing page front structure * Added description and overview content and card titles * Added placeholder tile and work notes * Finalized text and updated link type * Updated panel overview tile link --- docs/sources/panels-visualizations/_index.md | 60 +++++++++++++------- 1 file changed, 40 insertions(+), 20 deletions(-) diff --git a/docs/sources/panels-visualizations/_index.md b/docs/sources/panels-visualizations/_index.md index dbb1f5d71c7..e0242f212ae 100644 --- a/docs/sources/panels-visualizations/_index.md +++ b/docs/sources/panels-visualizations/_index.md @@ -17,35 +17,55 @@ menuTitle: Panels and visualizations title: Panels and visualizations description: Learn about and configure panels and visualizations weight: 80 +hero: + title: Panels and visualizations + level: 1 + width: 110 + height: 110 + description: >- + Easily collect, correlate, and visualize data so you can make informed decisions in real time. +cards: + title_class: pt-0 lh-1 + items: + - title: Visualizations + href: ./visualizations/ + description: Learn about all the visualizations available in Grafana, including which visualizations are ideal for different datasets and how to configure their options. + height: 24 + - title: Panel overview + href: ./panel-overview/ + description: Learn about the features of the panel. + height: 24 + - title: Panel editor + href: ./panel-editor-overview/ + description: Learn about the features of the panel editor and how to begin editing a panel. + height: 24 + - title: Configure standard options + href: ./configure-standard-options/ + description: Learn about configuring standard options like units, field display names, and and colors. + height: 24 + - title: Query and transform data + href: ./query-transform-data/ + description: Learn about querying and transforming your data to refine your visualizations. + height: 24 --- -# Panels and visualizations +{{< docs/hero-simple key="hero" >}} -The _panel_ is the basic visualization building block in Grafana. -Each panel has a query editor specific to the data source selected in the panel. -The query editor allows you to build a query that returns the data you want to visualize. - -There are a wide variety of styling and formatting options for each panel. -Panels can be dragged, dropped, and resized to rearrange them on the dashboard. +--- -Before you add a panel, ensure that you have configured a data source. +## Overview -- For details about using data sources, refer to [Data sources][]. +Panels are the basic building block in Grafana dashboards, composed of a [query][] and a visualization, a graphical representation of query results. -- For more information about managing data sources as an administrator, refer to [Data source management][]. +Visualizations provide you several different ways to present your data within a panel, depending on what best suits the data and your needs. Grafana’s growing suite of visualizations, ranging from time series graphs to heatmaps to cutting-edge 3D charts, help you decode complex datasets. - {{% admonition type="note" %}} - [Data source management](https://grafana.com/docs/grafana//administration/data-source-management/) is only available in [Grafana Enterprise](https://grafana.com/docs/grafana//introduction/grafana-enterprise/) and [Grafana Cloud](https://grafana.com/docs/grafana-cloud/). - {{% /admonition %}} +Panels offer a wide variety of formatting and styling options from applying colors based on field values to custom units. Each visualization also comes with options specific to it that give you further control over how your data is displayed. With Grafana panels and visualizations, you can easily get the information you need from your data and optimize performance. -This section includes the following sub topics: +## Explore -{{< section >}} +{{< card-grid key="cards" type="simple" >}} {{% docs/reference %}} -[Data source management]: "/docs/grafana/ -> /docs/grafana//administration/data-source-management" -[Data source management]: "/docs/grafana-cloud/ -> /docs/grafana//administration/data-source-management" - -[Data sources]: "/docs/grafana/ -> /docs/grafana//datasources" -[Data sources]: "/docs/grafana-cloud/ -> /docs/grafana//datasources" +[query]: "/docs/grafana/ -> /docs/grafana//panels-visualizations/query-transform-data" +[query]: "/docs/grafana-cloud/ -> /docs/grafana-cloud/visualizations/panels-visualizations/query-transform-data" {{% /docs/reference %}}