Doc templates - Panel

packages/create-plugin/templates/panel/docs/_index.md

@@ -0,0 +1,20 @@
+---
+title: Get started with the [plugin name] plugin" # Page title (required)
+description: "Introduction to ..." # SEO description (required)
+sidebar_position: 1 # Navigation order (required)
+---
+
+# Get started with the [plugin name] plugin
+
+This doc 
+
+## Next steps
+
+To start using [plugin name], follow these docs:
+
+- [Install plugin_name](./install.md)
+- [Understand the compatible data formats](./data-format.md)
+- [Configure plugin_name](./configuration.md)
+- [Troubleshooting](./troubleshooting.md)
+
+

packages/create-plugin/templates/panel/docs/configuration.md

@@ -0,0 +1,141 @@
+---
+title: Configure the [plugin name] plugin" # Page title (required)
+description: "How to configure..." # SEO description (required)
+sidebar_position: 4 # Navigation order (required)
+---
+
+# Configuration options
+
+This guide explains how to configure [plugin name], and the available settings and configuration options.
+
+## Prerequisites
+
+Before you configure the plugin, ensure you have:
+
+- [Plugin name] installed in Grafana
+- A dashboard where you want to add the panel
+- A data source configured and accessible
+
+## Add the panel to a dashboard
+
+{{include @grafana/snippets/panel-add.md}}
+
+## Configure panel options
+
+Panel options let you customize the panel's title, description, and links.
+
+### Panel options
+
+| Option | Description |
+| ------ | ----------- |
+| **Title** | Set the panel title. |
+| **Description** | Add a description for the panel. The description appears in a tooltip when you hover over the info icon in the panel header. |
+| **Transparent background** | Make the panel background transparent. |
+| **Panel links** | Add links to other dashboards or external resources. |
+
+## Configure visualization options
+
+[Plugin name] provides the following configuration options.
+
+### [Option category 1]
+
+[Brief description of the option category.]
+
+| Option | Description |
+| ------ | ----------- |
+| **[Option name]** | [Description of what the option does and available values.] |
+| **[Option name]** | [Description of what the option does and available values.] |
+
+### [Option category 2]
+
+[Brief description of the option category.]
+
+| Option | Description |
+| ------ | ----------- |
+| **[Option name]** | [Description of what the option does and available values.] |
+| **[Option name]** | [Description of what the option does and available values.] |
+
+### Value options
+
+Use the following options to refine how the visualization displays values:
+
+| Option | Description |
+| ------ | ----------- |
+| **Show** | Choose how to display data. Options:<ul><li>**Calculate** - Show a calculated value based on all rows.</li><li>**All values** - Show a separate stat for every row.</li></ul> |
+| **Calculation** | Select a reducer function to calculate a single value from multiple rows. Available when **Show** is set to **Calculate**. |
+| **Limit** | Set the maximum number of rows to display. Available when **Show** is set to **All values**. |
+| **Fields** | Select which fields to display in the panel. |
+
+## Configure standard options
+
+Standard options are available for all visualizations and allow you to customize how field values are displayed.
+
+### Common standard options
+
+| Option | Description |
+| ------ | ----------- |
+| **Unit** | Choose the unit for field values. |
+| **Min** | Set the minimum value for the axis or gauge. |
+| **Max** | Set the maximum value for the axis or gauge. |
+| **Decimals** | Specify the number of decimal places to display. |
+| **Display name** | Set a custom display name for the field. |
+| **Color scheme** | Choose a color scheme for the visualization. |
+| **No value** | Define what to display when there's no data. |
+
+For a complete list of standard options, refer to [Configure standard options](https://grafana.com/docs/grafana/latest/panels-visualizations/configure-standard-options/).
+
+## Configure value mappings
+
+Value mappings allow you to translate field values into text or colors.
+
+To add a value mapping:
+
+1. In the panel editor, navigate to the **Value mappings** section.
+1. Click **Add value mapping**.
+1. Choose a mapping type:
+   - **Value** - Map a specific value to text and color.
+   - **Range** - Map a range of values to text and color.
+   - **Regex** - Map values matching a regex pattern to text and color.
+   - **Special** - Map special values like null or NaN.
+
+For more information, refer to [Configure value mappings](https://grafana.com/docs/grafana/latest/panels-visualizations/configure-value-mappings/).
+
+## Configure thresholds
+
+Thresholds allow you to change the color of field values based on their value.
+
+To configure thresholds:
+
+1. In the panel editor, navigate to the **Thresholds** section.
+1. Choose a threshold mode:
+   - **Absolute** - Define thresholds using absolute values.
+   - **Percentage** - Define thresholds using percentage values.
+1. Click **Add threshold** to add additional thresholds.
+1. Set values and colors for each threshold.
+
+For more information, refer to [Configure thresholds](https://grafana.com/docs/grafana/latest/panels-visualizations/configure-thresholds/).
+
+## Configure overrides
+
+Field overrides allow you to customize the visualization for specific fields or series.
+
+To add a field override:
+
+1. In the panel editor, navigate to the **Overrides** section.
+1. Click **Add field override**.
+1. Select fields to override:
+   - Fields with name
+   - Fields with name matching regex
+   - Fields with type
+   - Fields returned by query
+1. Click **Add override property** and select the properties to override.
+
+For more information, refer to [Configure overrides](https://grafana.com/docs/grafana/latest/panels-visualizations/configure-overrides/).
+
+## Save the dashboard
+
+{{include @grafana/snippets/panel-save.md}}
+
+## Next steps
+
+{{include @grafana/snippets/panel-next.md}}

packages/create-plugin/templates/panel/docs/data-format.md

@@ -0,0 +1,173 @@
+---
+title: "Configuration Guide" # Page title (required)
+description: "How to configure..." # SEO description (required)
+sidebar_position: 3 # Navigation order (required)
+---
+
+# Data formats
+
+This guide explains the supported data formats for [plugin name].
+
+## Overview
+
+[Plugin name] requires [description of the general data format, e.g., "time-series data with at least one numeric field" or "a dataset with one string field and at least one numeric field"].
+
+## Required data format
+
+To create a [plugin name] visualization, your dataset must contain:
+
+- [Requirement 1, e.g., "At least one time field or string field"]
+- [Requirement 2, e.g., "One or more numeric fields"]
+- [Optional requirement or constraint]
+
+## Supported data formats
+
+The following sections show examples of supported data formats.
+
+### Example 1: [Brief description]
+
+[Explanation of this data format.]
+
+| [Column 1] | [Column 2] | [Column 3] |
+| ---------- | ---------- | ---------- |
+| [value]    | [value]    | [value]    |
+| [value]    | [value]    | [value]    |
+| [value]    | [value]    | [value]    |
+
+[Explain how this data is visualized, with reference to a screenshot if available.]
+
+![Example 1 visualization](/path/to/example1.png)
+
+### Example 2: [Brief description]
+
+[Explanation of this data format.]
+
+| [Column 1] | [Column 2] | [Column 3] | [Column 4] |
+| ---------- | ---------- | ---------- | ---------- |
+| [value]    | [value]    | [value]    | [value]    |
+| [value]    | [value]    | [value]    | [value]    |
+| [value]    | [value]    | [value]    | [value]    |
+
+[Explain how this data is visualized.]
+
+![Example 2 visualization](/path/to/example2.png)
+
+### Example 3: [Brief description]
+
+[Explanation of this data format and any special considerations.]
+
+| [Column 1] | [Column 2] | [Column 3] |
+| ---------- | ---------- | ---------- |
+| [value]    | [value]    | [value]    |
+| [value]    | [value]    | [value]    |
+| [value]    | [value]    | [value]    |
+
+[Explain how this data is visualized.]
+
+![Example 3 visualization](/path/to/example3.png)
+
+## Data frame structure
+
+[If applicable, explain the data frame structure expected by the panel.]
+
+A data frame resembles a table, where data is stored by columns (fields) instead of rows. Each value in a field shares the same data type, such as string, number, or time.
+
+### Example data frame
+
+| Time                | [Field name] | [Field name] |
+| ------------------- | ------------ | ------------ |
+| 2024-01-01 10:00:00 | [value]      | [value]      |
+| 2024-01-01 11:00:00 | [value]      | [value]      |
+| 2024-01-01 12:00:00 | [value]      | [value]      |
+
+[Explain how the panel uses this data.]
+
+## Field types
+
+[Plugin name] supports the following field types:
+
+| Field type | Description | Usage |
+| ---------- | ----------- | ----- |
+| **Time** | Timestamp field | [How it's used in the visualization] |
+| **Number** | Numeric values | [How it's used in the visualization] |
+| **String** | Text values | [How it's used in the visualization] |
+| **Boolean** | True/false values | [How it's used in the visualization] |
+
+## Multiple series
+
+[Plugin name] [supports/does not support] multiple series in a single panel.
+
+[If supported, explain how multiple series are displayed and any considerations.]
+
+### Example with multiple series
+
+[Show an example with multiple series if applicable.]
+
+#### Query 1
+
+| Time                | value1 | value2 |
+| ------------------- | ------ | ------ |
+| 2024-01-01 10:00:00 | [val]  | [val]  |
+| 2024-01-01 11:00:00 | [val]  | [val]  |
+
+#### Query 2
+
+| Time                | value1 | value2 |
+| ------------------- | ------ | ------ |
+| 2024-01-01 10:00:00 | [val]  | [val]  |
+| 2024-01-01 11:00:00 | [val]  | [val]  |
+
+[Explain how multiple series are visualized.]
+
+## Data transformations
+
+You can use Grafana's data transformations to reshape your data before visualization.
+
+Useful transformations for [plugin name] include:
+
+- **[Transformation name]** - [When to use it]
+- **[Transformation name]** - [When to use it]
+- **[Transformation name]** - [When to use it]
+
+For more information about data transformations, refer to [Transform data](https://grafana.com/docs/grafana/latest/panels-visualizations/query-transform-data/transform-data/).
+
+## Data source compatibility
+
+[Plugin name] works with any Grafana data source that returns [description of compatible data format].
+
+### Tested data sources
+
+The plugin has been tested with:
+
+- [Data source 1]
+- [Data source 2]
+- [Data source 3]
+- TestData DB (for development and testing)
+
+## Limitations
+
+[Plugin name] has the following data limitations:
+
+- [Limitation 1]
+- [Limitation 2]
+- [Limitation 3]
+
+## Testing with sample data
+
+You can test [plugin name] using the TestData DB data source:
+
+1. Add a new panel to your dashboard.
+1. Select **TestData DB** as the data source.
+1. Choose a scenario that matches your data requirements.
+1. Configure the panel using the sample data.
+
+Recommended TestData DB scenarios:
+
+- **[Scenario name]** - [Why it's useful]
+- **[Scenario name]** - [Why it's useful]
+
+## Next steps
+
+- [Configure the panel](CONFIGURATION.md)
+- [View configuration examples](README.md#quick-start)
+- [Troubleshoot data issues](TROUBLESHOOTING.md)