[DOC] plugin functional docs: add images & describe main customizations

docs/barchart/README.md

@@ -1,6 +1,8 @@
 # Bar Chart
 
-The Bar Chart plugin displays data as bar charts in Perses dashboards. This panel plugin is useful for comparing values across categories and showing data in a clear, categorical format.
+The Bar Chart plugin displays time series or tabular values as bars, making it easy to compare categories, rankings, and top-N views in Perses dashboards.
+
+![BarChart example](./barchart.png)
 
 See also technical docs related to this plugin:
 

docs/flamechart/README.md

@@ -2,7 +2,7 @@
 
 The Flame Chart plugin provides flame graph visualization for profiling data in Perses dashboards. This panel plugin is particularly useful for analyzing application performance and identifying performance bottlenecks.
 
-![img.png](https://github.com/perses/website/blob/main/docs/assets/images/blog/v052/flame-graph-panel.png?raw=true)
+![FlameChart example](https://github.com/perses/website/blob/main/docs/assets/images/blog/v052/flame-graph-panel.png?raw=true)
 
 See also technical docs related to this plugin:
 

docs/gaugechart/README.md

@@ -2,6 +2,8 @@
 
 The Gauge Chart plugin displays data as gauge meters in Perses dashboards. This panel plugin is useful for showing single values within a defined range, typically for performance indicators and thresholds.
 
+![GaugeChart example](https://github.com/perses/website/blob/main/docs/assets/images/blog/v052/flame-graph-panel.png?raw=true)
+
 See also technical docs related to this plugin:
 
 - [Data model](./model.md)

docs/heatmapchart/README.md

@@ -2,7 +2,7 @@
 
 The HeatMap Chart plugin displays data as a heatmap in Perses dashboards. This panel plugin is particularly useful for visualizing data density & latency distributions over time.
 
-![img.png](https://github.com/perses/website/blob/main/docs/assets/images/blog/v052/heatmap-dark.png?raw=true)
+![HistogramChart example](https://github.com/perses/website/blob/main/docs/assets/images/blog/v052/heatmap-dark.png?raw=true)
 
 !!! warning
     This panel plugin is only compatible with Prometheus native histograms data for the moment.

docs/histogramchart/README.md

@@ -4,18 +4,18 @@ The Histogram Chart plugin displays data as histograms in Perses dashboards. Thi
 
 This plugin allows you to visualize Prometheus Native Histograms, providing a clear and concise way to understand the distribution of your histogram buckets.
 
-![img.png](https://github.com/perses/website/blob/main/docs/assets/images/blog/v051/histogram-panel.png?raw=true)
+![HistogramChart example](https://github.com/perses/website/blob/main/docs/assets/images/blog/v051/histogram-panel.png?raw=true)
 
 !!! warning
     This panel plugin is only compatible with Prometheus native histograms data for the moment.
 
 This panel is supporting thresholds, which allow you to colorize the chart based on specific values, making it easier to understand your data.
 
-![img.png](https://github.com/perses/website/blob/main/docs/assets/images/blog/v051/histogram-thresholds.png?raw=true)
+![Thresholds example](https://github.com/perses/website/blob/main/docs/assets/images/blog/v051/histogram-thresholds.png?raw=true)
 
 This chart is also used in TimeSeriesTable plugin to display histogram details, allowing the Explore page to display histograms.
 
-![img.png](https://github.com/perses/website/blob/main/docs/assets/images/blog/v051/histogram-explore.png?raw=true)
+![Explore view](https://github.com/perses/website/blob/main/docs/assets/images/blog/v051/histogram-explore.png?raw=true)
 
 See also technical docs related to this plugin:
 

docs/logstable/README.md

@@ -2,7 +2,14 @@
 
 The Logs Table plugin displays log entries in a tabular format in Perses dashboards. This panel plugin provides structured viewing of log data with support for filtering and formatting.
 
-![img.png](https://github.com/perses/website/blob/main/docs/assets/images/blog/v052/logtable-panel.jpg?raw=true)
+![LogsTable example](./logstable.png)
+
+## Main customizations
+
+- **General settings**: configure table-wide behavior like legend display & thresholds.
+- **Item actions**: add row/item selection actions to trigger links or interactions from selected items.
+
+## References
 
 See also technical docs related to this plugin:
 

docs/markdown/README.md

@@ -2,6 +2,8 @@
 
 The Markdown plugin allows you to add rich text, documentation, and notes to your Perses dashboards using Markdown syntax. This panel plugin is useful for providing context, instructions, or annotations alongside your visualizations.
 
+![Markdown example](./markdown.png)
+
 See also technical docs related to this plugin:
 
 - [Data model](./model.md)

docs/piechart/README.md

@@ -2,6 +2,8 @@
 
 The Pie Chart plugin displays data as a circular pie chart in Perses dashboards. This panel plugin is useful for showing proportional data and parts of a whole.
 
+![PieChart example](./piechart.png)
+
 See also technical docs related to this plugin:
 
 - [Data model](./model.md)

docs/scatterchart/README.md

@@ -2,6 +2,8 @@
 
 The Scatter Chart plugin displays data points on a scatter plot in Perses dashboards. This panel plugin is useful for showing correlations between two variables and identifying patterns in data distribution.
 
+![ScatterChart example](./scatterchart.png)
+
 See also technical docs related to this plugin:
 
 - [Data model](./model.md)

docs/statchart/README.md

@@ -2,6 +2,15 @@
 
 The Stat Chart plugin displays single value statistics with optional sparklines in Perses dashboards. This panel plugin is ideal for showing key performance indicators (KPIs) and summary metrics.
 
+![StatChart example](./statchart.png)
+
+## Main customizations
+
+- **General settings**: configure legend, various visual settings & thresholds.
+- **Value mapping**: define conditional formatting rules to change e.g the color or the text displayed based on the value.
+
+## References
+
 See also technical docs related to this plugin:
 
 - [Data model](./model.md)

docs/statushistorychart/README.md

@@ -1,10 +1,17 @@
 # Status History Chart
 
-The Status History Chart plugin displays the status history of services or components over time in Perses dashboards. This panel plugin provides a visual representation of the status of various metrics over time. It allows users to track changes in the status of different metrics, making it easier to identify patterns, trends, and anomalies. It is then particularly useful for monitoring the health and performance of systems, as it can display status changes in a clear and concise manner.
+The Status History Chart plugin displays the status history of services or components over time. It allows users to track changes in the status of different metrics, making it easier to identify patterns, trends, and anomalies. It is then particularly useful for monitoring the health and performance of systems, as it can display status changes in a clear and concise manner.
 
 This panel can be customized to show different statuses, such as up, down, warning, or any other user-defined states, and it supports various visualization options to enhance the readability of the data.
 
-![img.png](https://raw.githubusercontent.com/perses/website/refs/heads/main/docs/assets/images/blog/v050/status-history-panel.png)
+![StatusHistoryChart example](./statushistorychart.png)
+
+## Main customizations
+
+- **General settings**: configure legend & sorting.
+- **Value mapping**: define conditional formatting rules to change e.g the color or the text displayed based on the value.
+
+## References
 
 See also technical docs related to this plugin:
 

docs/table/README.md

@@ -2,6 +2,133 @@
 
 The Table plugin displays data in a structured tabular format in Perses dashboards. This panel plugin provides flexible table visualization with support for sorting, formatting, and custom columns.
 
+![Table example](./table.png)
+
+## Main customizations
+
+- **General settings**: configure table-wide behavior like pagination and column filtering.
+- **Column settings**: customize each column independently (for example configure unit & visibility, add external link, define conditional formatting rules).
+- **Cell settings**: define conditional formatting rules that apply globally across matching cells.
+- **Item actions**: add row/item selection actions to trigger links or interactions from selected items.
+- **Transformations**: define transformations to manipulate data before rendering
+
+## Transformations
+
+Transformations let you run post-processing on data after it is retrieved from the backend and before it is rendered. They are especially useful for applying manipulations that the queried backend does not support.
+
+The Table panel supports multiple kind of transformations:
+
+### Merge columns
+
+This transformation allows to merge multiple columns into a single one.
+
+Before:
+
+| timestamp  | value #1 | value #2 | mount #1  | mount #2  |
+|------------|----------|----------|-----------|-----------|
+| 1630000000 | 1        |          | /         |           |
+| 1630000000 | 2        |          | /boot/efi |           |
+| 1630000000 |          | 3        |           | /         |
+| 1630000000 |          | 4        |           | /boot/efi |
+
+After:
+
+| timestamp  | MERGED | mount #1  | mount #2  |
+|------------|--------|-----------|-----------|
+| 1630000000 | 1      | /         |           |
+| 1630000000 | 2      | /boot/efi |           |
+| 1630000000 | 2      |           | /         |
+| 1630000000 | 3      |           | /boot/efi |
+
+### Merge series
+
+This transformation merges series that define the same labels
+
+Before:
+
+| timestamp  | value #1 | value #2 | mount #1  | mount #2  | instance #1 | instance #2 | env #1 | env #2 |
+|------------|----------|----------|-----------|-----------|-------------|-------------|--------|--------|
+| 1630000000 | 1        |          | /         |           | test:44     |             | prd    |        |
+| 1630000000 | 2        |          | /boot/efi |           | test:44     |             | prd    |        |
+| 1630000000 |          | 5        |           | /         |             | test:44     |        | prd    |
+| 1630000000 |          | 6        |           | /boot/efi |             | test:44     |        | prd    |
+
+After:
+
+| timestamp  | value #1 | value #2 | mount     | instance | env |
+|------------|----------|----------|-----------|----------|-----|
+| 1630000000 | 1        | 5        | /         | test:44  | prd |
+| 1630000000 | 2        | 6        | /boot/efi | test:44  | prd |
+
+### Merge indexed columns
+
+This transformation merges all indexed columns into a single one.
+
+Before:
+
+| timestamp #1 | timestamp #2 | value #1 | value #2 | instance #1 | instance #2 |
+|--------------|--------------|----------|----------|-------------|-------------|
+| 1630000000   |              | 55       |          | toto        |             |
+| 1630000000   |              | 33       |          | toto        |             |
+| 1630000000   |              | 45       |          | toto        |             |
+|              | 1630000000   |          | 112      |             | titi        |
+|              | 1630000000   |          | 20       |             | titi        |
+|              | 1630000000   |          | 10       |             | titi        |
+
+After merge with column="value":
+
+| timestamp #1 | timestamp #2 | value | instance #1 | instance #2 |
+|--------------|--------------|-------|-------------|-------------|
+| 1630000000   |              | 55    | toto        |             |
+| 1630000000   |              | 33    | toto        |             |
+| 1630000000   |              | 45    | toto        |             |
+|              | 1630000000   | 112   |             | titi        |
+|              | 1630000000   | 20    |             | titi        |
+|              | 1630000000   | 10    |             | titi        |
+
+### Join by column value
+
+This transformation merges rows that have equal cell value in the given column.
+If there are multiple lines with same value, next row values override the current one.
+
+Before:
+
+| timestamp #1 | timestamp #2 | value #1 | value #2 | instance |
+|--------------|--------------|----------|----------|----------|
+| 1630000000   |              | 150      |          | toto     |
+| 1630000000   |              | 10       |          | toto     |
+| 1630000000   |              | 45       |          | toto     |
+|              | 1630000000   |          | 1        | titi     |
+|              | 1630000000   |          | 99       | titi     |
+|              | 1630000000   |          | 10       | titi     |
+
+After join on column "instance":
+
+| timestamp #1 | timestamp #2 | value #1 | value #2 | instance |
+|--------------|--------------|----------|----------|----------|
+| 1630000000   |              | 45       |          | toto     |
+|              | 1630000000   |          | 10       | titi     |
+
+Other example with join on "mount":
+
+Before:
+
+| timestamp  | value #1 | value #3 | mount     |
+|------------|----------|----------|-----------|
+| 1630000000 | 1        |          | /         |
+| 1630000000 | 2        |          | /boot/efi |
+| 1630000000 |          | 3        | /         |
+| 1630000000 |          | 4        | /boot/efi |
+
+After:
+
+| timestamp  | value #1 | value #3 | mount     |
+|------------|----------|----------|-----------|
+| 1630000000 | 1        | 3        | /         |
+| 1630000000 | 2        | 4        | /boot/efi |
+
+## References
+
 See also technical docs related to this plugin:
 
 - [Data model](./model.md)

docs/timeserieschart/README.md

@@ -2,6 +2,15 @@
 
 The Time Series Chart plugin displays time series data as line charts in Perses dashboards. This panel plugin is one of the most commonly used visualization types for monitoring metrics over time.
 
+![TimeSeriesChart example](./timeserieschart.png)
+
+## Main customizations
+
+- **General settings**: configure legend, various visual settings, Y axis, thresholds..
+- **Query settings**: define per-query customizations to have e.g different styling or unit for different trends.
+
+## References
+
 See also technical docs related to this plugin:
 
 - [Data model](./model.md)

docs/timeseriestable/README.md

@@ -2,6 +2,14 @@
 
 The Time Series Table plugin displays time series data in a tabular format in Perses dashboards. This panel plugin provides a structured view of time series data with columns for timestamps and values.
 
+![TimeSeriesTable example](./timeseriestable.png)
+
+## Main customizations
+
+- **Item actions**: add row/item selection actions to trigger links or interactions from selected items.
+
+## References
+
 See also technical docs related to this plugin:
 
 - [Data model](./model.md)

docs/tracetable/README.md

@@ -2,6 +2,14 @@
 
 The Trace Table plugin displays trace data in a tabular format for Perses dashboards. This panel plugin is useful for analyzing individual traces and their properties in a structured table view.
 
+![TraceTable example](./tracetable.png)
+
+## Main customizations
+
+- **Item actions**: add row/item selection actions to trigger links or interactions from selected items.
+
+## References
+
 See also technical docs related to this plugin:
 
 - [Data model](./model.md)

docs/tracingganttchart/README.md

@@ -2,6 +2,8 @@
 
 The Tracing Gantt Chart plugin provides Gantt chart visualization for distributed tracing data in Perses dashboards. This panel plugin displays trace spans in a timeline format, making it easy to visualize trace duration and dependencies.
 
+![TracingGanttChart example](./tracingganttchart.png)
+
 See also technical docs related to this plugin:
 
 - [Data model](./model.md)