diff --git a/docs/barchart/README.md b/docs/barchart/README.md index f193ac7a0..e80170bc4 100644 --- a/docs/barchart/README.md +++ b/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: diff --git a/docs/barchart/barchart.png b/docs/barchart/barchart.png new file mode 100644 index 000000000..4982d7354 Binary files /dev/null and b/docs/barchart/barchart.png differ diff --git a/docs/flamechart/README.md b/docs/flamechart/README.md index 0f8c7a1bc..ef3b7c706 100644 --- a/docs/flamechart/README.md +++ b/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: diff --git a/docs/gaugechart/README.md b/docs/gaugechart/README.md index ba8b5c4b6..9e1e4f1cd 100644 --- a/docs/gaugechart/README.md +++ b/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) diff --git a/docs/gaugechart/gaugechart.png b/docs/gaugechart/gaugechart.png new file mode 100644 index 000000000..eae55578c Binary files /dev/null and b/docs/gaugechart/gaugechart.png differ diff --git a/docs/heatmapchart/README.md b/docs/heatmapchart/README.md index e59ac9bae..f9b2ac026 100644 --- a/docs/heatmapchart/README.md +++ b/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. diff --git a/docs/histogramchart/README.md b/docs/histogramchart/README.md index 6fd5298c9..7f16ba123 100644 --- a/docs/histogramchart/README.md +++ b/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: diff --git a/docs/logstable/README.md b/docs/logstable/README.md index f3db6661c..886335e6e 100644 --- a/docs/logstable/README.md +++ b/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: diff --git a/docs/logstable/logstable.png b/docs/logstable/logstable.png new file mode 100644 index 000000000..d9899b2fc Binary files /dev/null and b/docs/logstable/logstable.png differ diff --git a/docs/markdown/README.md b/docs/markdown/README.md index 2ef4a2632..d658e2e92 100644 --- a/docs/markdown/README.md +++ b/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) diff --git a/docs/markdown/markdown.png b/docs/markdown/markdown.png new file mode 100644 index 000000000..9bf772809 Binary files /dev/null and b/docs/markdown/markdown.png differ diff --git a/docs/piechart/README.md b/docs/piechart/README.md index 12e65c4cd..202f06c4b 100644 --- a/docs/piechart/README.md +++ b/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) diff --git a/docs/piechart/piechart.png b/docs/piechart/piechart.png new file mode 100644 index 000000000..d0221fcab Binary files /dev/null and b/docs/piechart/piechart.png differ diff --git a/docs/scatterchart/README.md b/docs/scatterchart/README.md index f5e9830c8..6299a897e 100644 --- a/docs/scatterchart/README.md +++ b/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) diff --git a/docs/scatterchart/scatterchart.png b/docs/scatterchart/scatterchart.png new file mode 100644 index 000000000..0643942e0 Binary files /dev/null and b/docs/scatterchart/scatterchart.png differ diff --git a/docs/statchart/README.md b/docs/statchart/README.md index 18f264338..0f049402b 100644 --- a/docs/statchart/README.md +++ b/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) diff --git a/docs/statchart/statchart.png b/docs/statchart/statchart.png new file mode 100644 index 000000000..64a38e19d Binary files /dev/null and b/docs/statchart/statchart.png differ diff --git a/docs/statushistorychart/README.md b/docs/statushistorychart/README.md index 9598c4ce1..16c51063b 100644 --- a/docs/statushistorychart/README.md +++ b/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: diff --git a/docs/statushistorychart/statushistorychart.png b/docs/statushistorychart/statushistorychart.png new file mode 100644 index 000000000..034258c38 Binary files /dev/null and b/docs/statushistorychart/statushistorychart.png differ diff --git a/docs/table/README.md b/docs/table/README.md index 44f1a62b8..e972a1a53 100644 --- a/docs/table/README.md +++ b/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) diff --git a/docs/table/table.png b/docs/table/table.png new file mode 100644 index 000000000..8a60d5b2f Binary files /dev/null and b/docs/table/table.png differ diff --git a/docs/timeserieschart/README.md b/docs/timeserieschart/README.md index 5ce533b8a..fb8d2c209 100644 --- a/docs/timeserieschart/README.md +++ b/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) diff --git a/docs/timeserieschart/timeserieschart.png b/docs/timeserieschart/timeserieschart.png new file mode 100644 index 000000000..3960d9c58 Binary files /dev/null and b/docs/timeserieschart/timeserieschart.png differ diff --git a/docs/timeseriestable/README.md b/docs/timeseriestable/README.md index e69194ea5..f938b5a75 100644 --- a/docs/timeseriestable/README.md +++ b/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) diff --git a/docs/timeseriestable/timeseriestable.png b/docs/timeseriestable/timeseriestable.png new file mode 100644 index 000000000..54d4e942a Binary files /dev/null and b/docs/timeseriestable/timeseriestable.png differ diff --git a/docs/tracetable/README.md b/docs/tracetable/README.md index c5e38b9a2..cadb1643c 100644 --- a/docs/tracetable/README.md +++ b/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) diff --git a/docs/tracetable/tracetable.png b/docs/tracetable/tracetable.png new file mode 100644 index 000000000..a42fc9ba5 Binary files /dev/null and b/docs/tracetable/tracetable.png differ diff --git a/docs/tracingganttchart/README.md b/docs/tracingganttchart/README.md index 5251fc7fc..92a8d5766 100644 --- a/docs/tracingganttchart/README.md +++ b/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) diff --git a/docs/tracingganttchart/tracingganttchart.png b/docs/tracingganttchart/tracingganttchart.png new file mode 100644 index 000000000..3df46c6a3 Binary files /dev/null and b/docs/tracingganttchart/tracingganttchart.png differ