### Install Plugin

Source: https://github.com/perses/plugins/blob/main/tracingganttchart/README.md

Install the TracingGanttChart plugin package.

```bash
npm install @perses-dev/tracing-gantt-chart-plugin
```

--------------------------------

### Install the plugin

Source: https://github.com/perses/plugins/blob/main/timeserieschart/README.md

Install the TimeSeriesChart plugin package.

```bash
npm install @perses-dev/timeseries-chart-plugin
```

--------------------------------

### Install Plugin

Source: https://github.com/perses/plugins/blob/main/tempo/README.md

Install the Tempo plugin package.

```bash
npm install @perses-dev/tempo-plugin
```

--------------------------------

### Full Table Dashboard Example

Source: https://github.com/perses/plugins/blob/main/docs/table/go-sdk.md

A complete example demonstrating how to integrate a table panel into a dashboard.

```golang
package main

import (
	"github.com/perses/perses/go-sdk/dashboard"
	"github.com/perses/perses/go-sdk/panel"
	"github.com/perses/perses/go-sdk/common"
	table "github.com/perses/plugins/table/sdk/go"
)

func main() {
	dashboard.New("Table Dashboard",
		dashboard.AddPanel("Metrics Table",
			panel.New(
				table.Chart(
					table.WithDensity(table.CompactDensity),
					table.WithColumnSettings([]table.ColumnSettings{
						{
							Name:          "instance",
							Header:        "Instance",
							Align:         table.LeftAlign,
							EnableSorting: true,
						},
						{
							Name:   "value",
							Header: "CPU Usage",
							Align:  table.RightAlign,
							Format: &common.Format{
								Unit:          &common.PercentUnit,
								DecimalPlaces: 1,
							},
						},
					}),
				),
			),
		),
	)
}
```

--------------------------------

### Full Dashboard Example

Source: https://github.com/perses/plugins/blob/main/docs/barchart/go-sdk.md

Complete example demonstrating how to integrate a BarChart into a dashboard panel group.

```golang
package main

import (
	"github.com/perses/perses/go-sdk/common"
	"github.com/perses/perses/go-sdk/dashboard"
	panelgroup "github.com/perses/perses/go-sdk/panel-group"
	bar "github.com/perses/plugins/barchart/sdk/go"
)

func main() {
	dashboard.New("Example Dashboard",
		dashboard.AddPanelGroup("Resource usage",
			panelgroup.AddPanel("Container memory",
				bar.Chart(
					bar.Calculation(common.LastCalculation),
					bar.Format(common.Format{
						Unit: common.BytesUnit,
					}),
					bar.SortingBy(bar.AscSort),
					bar.WithMode(bar.PercentageMode),
					bar.WithOrientation(bar.VerticalOrientation),
					bar.WithGroupBy([]string{"job"}),
					bar.WithStacked(true),
				),
			),
		),
	)
}
```

--------------------------------

### Example Usage

Source: https://github.com/perses/plugins/blob/main/docs/timeserieschart/go-sdk.md

A complete example demonstrating how to create a dashboard with a TimeSeriesChart panel.

```APIDOC
## Example

### Description
This example shows how to create a dashboard with a TimeSeriesChart panel, configuring its legend and tooltip.

### Code
```golang
package main

import (
	"github.com/perses/perses/go-sdk/dashboard"
	panelgroup "github.com/perses/perses/go-sdk/panel-group"
	"github.com/perses/plugins/timeserieschart/sdk/go"
)

func main() {
	dashboard.New("Example Dashboard",
		dashboard.AddPanelGroup("Resource usage",
			panelgroup.AddPanel("Container memory",
				timeseries.Chart(
					timeseries.WithLegend(timeseries.Legend{
						Position: timeseries.BottomPosition,
						Mode:     timeseries.ListMode,
						Size:     timeseries.SmallSize,
					}),
					timeseries.WithTooltip(timeseries.Tooltip{
						EnablePinning: false,
					}),
				),
			),
		),
	)
}
```
```

--------------------------------

### Thanos Query Parameter Example

Source: https://github.com/perses/plugins/blob/main/docs/prometheus/go-sdk/datasource.md

Example demonstrating the use of query parameters for a Thanos setup.

```golang
func main() {
	dashboard.New("Example Dashboard",
		dashboard.AddDatasource("thanosQuery", 
			promDs.Prometheus(
				promDs.DirectURL("https://thanos-query.example.com/"),
				promDs.QueryParams(map[string]string{
					"dedup":                 "false",
					"max_source_resolution": "0s",
					"partial_response":      "true",
				}),
			),
		),
	)
}
```

--------------------------------

### Start Development Server

Source: https://github.com/perses/plugins/blob/main/greptimedb/README.md

Starts the development server for the greptimedb plugin, enabling hot-reloading and local testing.

```bash
npm run dev
```

--------------------------------

### Full Dashboard Example

Source: https://github.com/perses/plugins/blob/main/docs/prometheus/go-sdk/query.md

A complete example showing how to integrate a Prometheus query into a dashboard panel.

```golang
package main

import (
	"time"

	"github.com/perses/perses/go-sdk/dashboard"
	"github.com/perses/perses/go-sdk/panel"
	panelgroup "github.com/perses/perses/go-sdk/panel-group"
	"github.com/perses/plugins/prometheus/sdk/go/query"
	timeseries "github.com/perses/plugins/timeserieschart/sdk/go"
)

func main() {
	dashboard.New("Example Dashboard",
		dashboard.AddPanelGroup("Resource usage",
			panelgroup.AddPanel("Container memory",
				timeseries.Chart(),
				panel.AddQuery(
					query.PromQL("max by (container) (container_memory_rss{stack=\"$stack\",prometheus=\"$prometheus\",prometheus_namespace=\"$prometheus_namespace\",namespace=\"$namespace\",pod=\"$pod\",container=\"$container\"})",
						query.MinStep(time.Minute),
					),
				),
			),
		),
	)
}
```

--------------------------------

### Example Usage

Source: https://github.com/perses/plugins/blob/main/docs/pyroscope/go-sdk/datasource.md

An example demonstrating how to create a dashboard with the Pyroscope datasource configured using a direct URL.

```APIDOC
## Example Usage

### Description
This example shows how to initialize a new dashboard and add a Pyroscope datasource using the `DirectURL` option.

### Code
```golang
package main

import (
	"github.com/perses/perses-sdk/dashboard"
	
pyroDs "github.com/perses/perses-plugins/pyroscope/sdk/go/v1/datasource"
)

func main() {
	dashboard.New("Pyroscope Dashboard",
		dashboard.AddDatasource("pyroscopeMain", pyroDs.Pyroscope(pyroDs.DirectURL("http://pyroscope.example.com:4040"))),
	)
}
```
```

--------------------------------

### Configure VictoriaLogsDatasource examples

Source: https://github.com/perses/plugins/blob/main/docs/victorialogs/model.md

Examples of simple and complex VictoriaLogsDatasource configurations.

```yaml
kind: "Datasource"
metadata:
  name: "VictoriaLogsMain"
  project: "logging"
spec:
  default: true
  plugin:
    kind: "VictoriaLogsDatasource"
    spec:
      directUrl: "http://victorialogs.example.com:9428"
```

```yaml
kind: "Datasource"
metadata:
  name: "VictoriaLogsMain"
  project: "logging"
spec:
  default: true
  plugin:
    kind: "VictoriaLogsDatasource"
    spec:
      proxy:
        kind: "HTTPProxy"
        spec:
          url: "http://victorialogs.example.com:9428"
          allowedEndpoints:
            - endpointPattern: "/select/logsql/query"
              method: "GET"
            - endpointPattern: "/select/logsql/field_names"
              method: "GET"
            - endpointPattern: "/select/logsql/field_values"
              method: "GET"
          secret: "victorialogs_secret_config"
```

--------------------------------

### Example: Create Tempo Dashboard

Source: https://github.com/perses/plugins/blob/main/docs/tempo/go-sdk/datasource.md

A complete example demonstrating how to create a new dashboard and add a Tempo datasource using the DirectURL option.

```go
package main

import (
	"github.com/perses/perses-sdk/dashboard"
	tempoDs "github.com/perses/perses-plugins/tempo/sdk/go/v1/datasource"
)

func main() {
	dashboard.New("Tempo Dashboard",
		dashboard.AddDatasource("tempoMain", tempoDs.Tempo(tempoDs.DirectURL("http://tempo.example.com:3200"))),
	)
}
```

--------------------------------

### Install Plugin

Source: https://github.com/perses/plugins/blob/main/piechart/README.md

Install the PieChart plugin package.

```bash
npm install @perses-dev/pie-chart-plugin
```

--------------------------------

### Install Plugin

Source: https://github.com/perses/plugins/blob/main/scatterchart/README.md

Install the ScatterChart plugin package.

```bash
npm install @perses-dev/scatter-chart-plugin
```

--------------------------------

### Install Development Dependencies

Source: https://github.com/perses/plugins/blob/main/greptimedb/README.md

Installs all necessary dependencies for developing the greptimedb plugin.

```bash
npm install
```

--------------------------------

### Install GreptimeDB Plugin

Source: https://github.com/perses/plugins/blob/main/greptimedb/README.md

Installs the @perses-dev/greptimedb-plugin package.

```bash
npm install @perses-dev/greptimedb-plugin
```

--------------------------------

### Complete Example

Source: https://github.com/perses/plugins/blob/main/docs/flamechart/go-sdk.md

A comprehensive example demonstrating how to use the FlameChart SDK to create a dashboard panel with various configuration options.

```APIDOC
## Complete Example

### Description
This example shows how to construct a dashboard panel using the FlameChart SDK, incorporating multiple configuration options for a detailed flame graph visualization.

### Code
```golang
package main

import (
    "github.com/perses/perses/go-sdk/dashboard"
    "github.com/perses/perses/go-sdk/panel"
    flamechart "github.com/perses/plugins/flamechart/sdk/go"
)

dashboard.New("My Dashboard",
    dashboard.AddPanel("Flame Graph Analysis",
        panel.New(
            flamechart.Chart(
                flamechart.DefinePalette(flamechart.ValuePaletteMode),
                flamechart.ShowSettings(),
                flamechart.ShowSeries(),
                flamechart.ShowTable(),
                flamechart.ShowFlameGraph(),
            ),
        ),
    ),
)
```
```

--------------------------------

### Install Dependencies

Source: https://github.com/perses/plugins/blob/main/datasourcevariable/README.md

Run this command in your terminal to install all necessary project dependencies.

```bash
npm install
```

--------------------------------

### Full PieChart Dashboard Example

Source: https://github.com/perses/plugins/blob/main/docs/piechart/go-sdk.md

An example demonstrating how to create a dashboard with a pie chart panel, including configurations for legend, visuals, and formatting.

```go
package main

import (
	"github.com/perses/perses/go-sdk/dashboard"
	"github.com/perses/perses/go-sdk/panel"
	"github.com/perses/perses/go-sdk/common"
	pie "github.com/perses/plugins/piechart/sdk/go"
)

func main() {
	dashboard.New("Pie Chart Dashboard",
		dashboard.AddPanel("Resource Usage Distribution",
			panel.New(
				pie.Chart(
					pie.WithLegend(pie.Legend{
						Position: pie.RightPosition,
						Mode:     pie.ListMode,
						Size:     pie.MediumSize,
					}),
					pie.WithVisual(pie.Visual{
						Palette: pie.Palette{Mode: pie.CategoricalMode},
					}),
					pie.WithFormat(&common.Format{
						Unit:          &common.BytesUnit,
						DecimalPlaces: 1,
					}),
				),
			),
		),
	)
}
```

--------------------------------

### Install plugin

Source: https://github.com/perses/plugins/blob/main/statchart/README.md

Install the StatChart plugin package.

```bash
npm install @perses-dev/stat-chart-plugin
```

--------------------------------

### Full GaugeChart Dashboard Example

Source: https://github.com/perses/plugins/blob/main/docs/gaugechart/go-sdk.md

Complete example demonstrating how to integrate a gauge chart into a dashboard panel group.

```golang
package main

import (
	"github.com/perses/perses/go-sdk/common"
	"github.com/perses/perses/go-sdk/dashboard"
	panelgroup "github.com/perses/perses/go-sdk/panel-group"
	"github.com/perses/plugins/gaugechart/sdk/go"
)

func main() {
	dashboard.New("Example Dashboard",
		dashboard.AddPanelGroup("Resource usage",
			panelgroup.AddPanel("Container memory",
				gauge.Chart(
					gauge.Calculation(common.LastCalculation),
					gauge.Format(common.Format{
						Unit: common.BytesUnit,
					}),
					gauge.Max(20),
				),
			),
		),
	)
}
```

--------------------------------

### Full Dashboard Integration Example

Source: https://github.com/perses/plugins/blob/main/docs/clickhouse/go-sdk/datasource.md

Complete example demonstrating how to add a ClickHouse datasource to a dashboard definition.

```golang
package main

import (
	"github.com/perses/perses/go-sdk/dashboard"
	
	chDs "github.com/perses/perses-plugins/clickhouse/sdk/go/v1/datasource"
)

func main() {
	dashboard.New("ClickHouse Dashboard",
		dashboard.AddDatasource("clickhouseMain", chDs.ClickHouse(chDs.DirectURL("http://clickhouse.example.com:8123"))),
	)
}
```

--------------------------------

### Create Heatmap Dashboard Example

Source: https://github.com/perses/plugins/blob/main/docs/heatmapchart/go-sdk.md

An example demonstrating how to create a dashboard with a heatmap panel, configuring Y-axis format, count format, and visual map visibility.

```go
package main

import (
	"github.com/perses/perses/go-sdk/dashboard"
	"github.com/perses/perses/go-sdk/panel"
	"github.com/perses/perses/go-sdk/common"
	heatmap "github.com/perses/plugins/heatmapchart/sdk/go"
)

func main() {
	dashboard.New("Heatmap Dashboard",
		dashboard.AddPanel("Request Latency Heatmap",
			panel.New(
				heatmap.Chart(
					heatmap.YAxisFormat(common.Format{Unit: &common.TimeUnit, DecimalPlaces: 2}),
					heatmap.CountFormat(common.Format{Unit: &common.DecimalUnit, DecimalPlaces: 0}),
					heatmap.ShowVisualMap(true),
				),
			),
		),
	)
}
```

--------------------------------

### Complete LogsTable Dashboard Example

Source: https://github.com/perses/plugins/blob/main/docs/logstable/go-sdk.md

A comprehensive example demonstrating the creation of a dashboard with a LogsTable panel, configuring text wrapping, detailed view, and timestamps.

```go
package main

import (
	"github.com/perses/perses/go-sdk/dashboard"
	"github.com/perses/perses/go-sdk/panel"
	logstable "github.com/perses/plugins/logstable/sdk/go"
)

func main() {
	dashboard.New("Logs Dashboard",
		dashboard.AddPanel("Application Logs",
			panel.New(
				logstable.LogsTable(
					logstable.AllowWrap(true),
					logstable.EnableDetails(true),
					logstable.ShowTime(true),
				),
			),
		),
	)
}
```

--------------------------------

### Install Click-House Plugin

Source: https://github.com/perses/plugins/blob/main/clickhouse/README.md

Install the @my-org/click-house plugin after its peer dependencies are met.

```bash
npm install @my-org/click-house
```

--------------------------------

### Full Example Usage

Source: https://github.com/perses/plugins/blob/main/docs/staticlistvariable/go-sdk.md

An example demonstrating how to use the StaticListVariable SDK within a Perses dashboard configuration.

```APIDOC
## Example Usage

### Description
This example shows how to create a Perses dashboard and add a variable of type StaticListVariable.

### Method
`dashboard.New(...)` and `dashboard.AddVariable(...)`

### Endpoint
N/A (Client-side SDK usage)

### Parameters
None directly for this snippet, refers to SDK functions.

### Request Example
```golang
package main

import (
	"github.com/perses/perses/go-sdk/dashboard"
	"github.com/perses/perses/go-sdk/variable"
	staticlist "github.com/perses/plugins/staticlistvariable/sdk/go"
)

func main() {
	dashboard.New("Environment Dashboard",
		dashboard.AddVariable("environment",
			variable.List(
				staticlist.StaticList(
					staticlist.Values("production", "staging", "development"),
					staticlist.AddValue("testing"),
				),
			),
		),
	)
}
```

### Response
None (This is client-side code generation)
```

--------------------------------

### Install TraceTable Panel Plugin

Source: https://github.com/perses/plugins/blob/main/tracetable/README.md

Install the TraceTable Panel Plugin using npm.

```bash
npm install @perses-dev/trace-table-plugin
```

--------------------------------

### Start Development Server

Source: https://github.com/perses/plugins/blob/main/datasourcevariable/README.md

Use this command to launch the development server for active plugin development.

```bash
npm run dev
```

--------------------------------

### Dashboard Datasource Example

Source: https://github.com/perses/plugins/blob/main/docs/prometheus/go-sdk/datasource.md

Full example of adding a Prometheus datasource to a dashboard.

```golang
package main

import (
	"github.com/perses/perses/go-sdk/dashboard"
	
	promDs "github.com/perses/plugins/prometheus/sdk/go/datasource"
)

func main() {
	dashboard.New("Example Dashboard",
		dashboard.AddDatasource("prometheusDemo", 
			promDs.Prometheus(
				promDs.DirectURL("https://prometheus.demo.do.prometheus.io/"),
			),
		),
	)
}
```

--------------------------------

### Install victorialogs Plugin

Source: https://github.com/perses/plugins/blob/main/victorialogs/README.md

Install the victorialogs plugin using npm.

```bash
npm install @perses-dev/victorialogs
```

--------------------------------

### Example: Create Dashboard with Static List Variable

Source: https://github.com/perses/plugins/blob/main/docs/staticlistvariable/go-sdk.md

An example demonstrating how to create a dashboard and add a static list variable named 'environment' using the SDK. It configures the variable with both a complete list and an added value.

```go
package main

import (
	"github.com/perses/perses/go-sdk/dashboard"
	"github.com/perses/perses/go-sdk/variable"
	staticlist "github.com/perses/plugins/staticlistvariable/sdk/go"
)

func main() {
	dashboard.New("Environment Dashboard",
		dashboard.AddVariable("environment",
			variable.List(
				staticlist.StaticList(
					staticlist.Values("production", "staging", "development"),
					staticlist.AddValue("testing"),
				),
			),
		),
	)
}
```

--------------------------------

### Full Dashboard Variable Example

Source: https://github.com/perses/plugins/blob/main/docs/prometheus/go-sdk/variable/promql.md

An example demonstrating how to create a dashboard with a dynamic PromQL variable for namespaces, allowing multiple selections and specifying the datasource.

```go
package main

import (
	"github.com/perses/perses/go-sdk/dashboard"
	listvariable "github.com/perses/perses/go-sdk/variable/list-variable"
	"github.com/perses/plugins/prometheus/sdk/go/variable/promql"
)

func main() {
	dashboard.New("Example Dashboard",
		dashboard.AddVariable("namespace", listvariable.List(
			promql.PrometheusPromQL("group by (namespace) (kube_namespace_labels{stack=\"$stack\",prometheus=\"$prometheus\",prometheus_namespace=\"$prometheus_namespace\"})",
				promql.LabelName("namespace"),
				promql.Datasource("promDemo"),
			),
			listvariable.AllowMultiple(true),
		)),
	)
}
```

--------------------------------

### Full Dashboard Example with Tempo Trace Query

Source: https://github.com/perses/plugins/blob/main/docs/tempo/go-sdk/query.md

An example demonstrating how to build a dashboard panel that includes a Tempo trace query. This shows integration with Perses dashboard components.

```go
package main

import (
	"github.com/perses/perses-sdk/dashboard"
	"github.com/perses/perses-sdk/panel"
	panelgroup "github.com/perses/perses-sdk/panel-group"
	"github.com/perses/perses-plugins/tempo/sdk/go/v1/query"
	tracetable "github.com/perses/plugins/tracetable/sdk/go"
)

func main() {
	dashboard.New("Tempo Dashboard",
		dashboard.AddPanelGroup("Trace Analysis",
			panelgroup.AddPanel("Trace Details",
				tracetable.Chart(),
				panel.AddQuery(
					query.TraceQuery("abc123def456789"),
				),
			),
		),
	)
}
```

--------------------------------

### Example Usage

Source: https://github.com/perses/plugins/blob/main/docs/prometheus/go-sdk/variable/label-values.md

An example demonstrating how to use the Prometheus Label Values SDK within a dashboard.

```APIDOC
## Example Usage

### Description
An example demonstrating how to use the Prometheus Label Values SDK within a dashboard.

### Method
N/A (SDK Usage Example)

### Endpoint
N/A (SDK Usage Example)

### Parameters
None

### Request Example
```golang
package main

import (
	"github.com/perses/perses/go-sdk/dashboard"
	listvariable "github.com/perses/perses/go-sdk/variable/list-variable"
	labelvalues "github.com/perses/plugins/prometheus/sdk/go/variable/label-values"
)

func main() {
	dashboard.New("Example Dashboard",
		dashboard.AddVariable("stack",
			listvariable.List(
				labelvalues.PrometheusLabelValues("stack",
					labelvalues.Matchers("thanos_build_info{}"),
					labelvalues.Datasource("prometheusDemo"),
				),
				listvariable.DisplayName("PaaS"),
			),
		),
	)
}
```

### Response
#### Success Response (200)
N/A (SDK Usage Example)

#### Response Example
N/A (SDK Usage Example)
```

--------------------------------

### Simple Pyroscope Datasource Example

Source: https://github.com/perses/plugins/blob/main/docs/pyroscope/model.md

A basic example of a Pyroscope datasource configuration using `directUrl`.

```yaml
kind: "Datasource"
metadata:
  name: "PyroscopeMain"
  project: "profiling"
spec:
  default: true
  plugin:
    kind: "PyroscopeDatasource"
    spec:
      directUrl: "http://pyroscope.example.com:4040"
```

--------------------------------

### Install Prometheus Plugin

Source: https://github.com/perses/plugins/blob/main/prometheus/README.md

Install the Prometheus plugin package using npm.

```bash
npm install @perses-dev/prometheus-plugin
```

--------------------------------

### Tempo Datasource Example

Source: https://github.com/perses/plugins/blob/main/docs/tempo/go-sdk/datasource.md

A complete example demonstrating how to create a dashboard with a Tempo datasource configured using the Direct URL option.

```APIDOC
## Tempo Datasource Example

### Description
This example shows how to create a new dashboard and add a Tempo datasource configured with a direct URL.

### Method
`dashboard.New(...)` and `dashboard.AddDatasource(...)`

### Endpoint
N/A (This is a Go SDK usage example)

### Parameters
None

### Request Example
```golang
package main

import (
	"github.com/perses/perses-go-sdk/dashboard"
	tempoDs "github.com/perses/perses-plugins/tempo/sdk/go/v1/datasource"
)

func main() {
	dashboard.New("Tempo Dashboard",
		dashboard.AddDatasource("tempoMain", tempoDs.Tempo(tempoDs.DirectURL("http://tempo.example.com:3200"))),
	)
}
```

### Response
#### Success Response (200)
None (This is a Go SDK example)

#### Response Example
None
```

--------------------------------

### Install Loki Plugin

Source: https://github.com/perses/plugins/blob/main/loki/README.md

Install the @perses-dev/loki plugin using npm.

```bash
npm install @perses-dev/loki
```

--------------------------------

### Example: Create ClickHouse Logs Dashboard Panel

Source: https://github.com/perses/plugins/blob/main/docs/clickhouse/go-sdk/log-query.md

This example demonstrates how to create a dashboard panel for displaying ClickHouse logs using the SDK. It includes setting up the panel, adding a query with specific filtering and ordering, and integrating with other SDK components.

```go
package main

import (
	"github.com/perses/perses/go-sdk/dashboard"
	"github.com/perses/perses/go-sdk/panel"
	panelgroup "github.com/perses/perses/go-sdk/panel-group"
	"github.com/perses/perses-plugins/clickhouse/sdk/go/v1/query"
	logstable "github.com/perses/perses-plugins/logstable/sdk/go"
)

func main() {
	dashboard.New("ClickHouse Logs Dashboard",
		dashboard.AddPanelGroup("Application Logs",
			panelgroup.AddPanel("Error Logs",
				logstable.Panel(),
				panel.AddQuery(
					query.LogQuery(`
						SELECT 
							timestamp,
							level,
							message,
							service
						FROM application_logs 
						WHERE level = 'ERROR'
						AND timestamp >= now() - INTERVAL 1 HOUR
						ORDER BY timestamp DESC
						LIMIT 1000
						`),
				),
			),
		),
	)
}
```

--------------------------------

### Install StatusHistoryChart Plugin

Source: https://github.com/perses/plugins/blob/main/statushistorychart/README.md

Install the StatusHistoryChart plugin package using npm.

```bash
npm install @perses-dev/status-history-chart-plugin
```

--------------------------------

### Example Usage

Source: https://github.com/perses/plugins/blob/main/docs/prometheus/go-sdk/datasource.md

Demonstrates how to create a dashboard with a Prometheus datasource using direct URL.

```APIDOC
## Example Usage (Direct URL)

### Description
Demonstrates how to create a dashboard with a Prometheus datasource using a direct URL.

### Request Example
```golang
package main

import (
	"github.com/perses/perses/go-sdk/dashboard"
	
promDs "github.com/perses/plugins/prometheus/sdk/go/datasource"
)

func main() {
	dashboard.New("Example Dashboard",
		dashboard.AddDatasource("prometheusDemo", 
			promDs.Prometheus(
				promDs.DirectURL("https://prometheus.demo.do.prometheus.io/")
			),
		),
	)
}
```
```

--------------------------------

### TempoDatasource Example

Source: https://github.com/perses/plugins/blob/main/docs/tempo/model.md

An example of a TempoDatasource configuration, specifying the kind, metadata, and plugin details including the direct URL.

```yaml
apiVersion: v1
kind: Datasource
metadata:
  name: tempo-production
  project: observability
spec:
  default: false
  plugin:
    kind: TempoDatasource
    spec:
      directUrl: "http://tempo.example.com:3200"
```

--------------------------------

### Full Dashboard Integration Example

Source: https://github.com/perses/plugins/blob/main/docs/pyroscope/go-sdk/datasource.md

Demonstrates adding a Pyroscope datasource to a dashboard definition.

```golang
package main

import (
	"github.com/perses/perses/go-sdk/dashboard"
	
	pyroDs "github.com/perses/perses-plugins/pyroscope/sdk/go/v1/datasource"
)

func main() {
	dashboard.New("Pyroscope Dashboard",
		dashboard.AddDatasource("pyroscopeMain", pyroDs.Pyroscope(pyroDs.DirectURL("http://pyroscope.example.com:4040"))),
	)
}
```

--------------------------------

### Install Markdown Panel Plugin

Source: https://github.com/perses/plugins/blob/main/markdown/README.md

Install the Perses Markdown Panel Plugin using npm.

```bash
npm install @perses-dev/markdown-plugin
```

--------------------------------

### Install BarChart Plugin

Source: https://github.com/perses/plugins/blob/main/barchart/README.md

Install the Perses BarChart Panel Plugin using npm.

```bash
npm install @perses-dev/bar-chart-plugin
```

--------------------------------

### Install Perses Table Panel Plugin

Source: https://github.com/perses/plugins/blob/main/table/README.md

Install the Perses Table Panel Plugin using npm.

```bash
npm install @perses-dev/table-plugin
```

--------------------------------

### Full Example: Creating a Dashboard with Prometheus Query

Source: https://github.com/perses/plugins/blob/main/docs/prometheus/go-sdk/query.md

An example demonstrating how to create a dashboard with a time series chart panel that uses a Prometheus query.

```APIDOC
## Example: Dashboard with Prometheus Query

This example shows how to build a dashboard using the Perses Go SDK, including a panel that fetches data from Prometheus using a PromQL query.

### Code Example
```golang
package main

import (
	t"time"

	"github.com/perses/perses/go-sdk/dashboard"
	"github.com/perses/perses/go-sdk/panel"
	panelgroup "github.com/perses/perses/go-sdk/panel-group"
	"github.com/perses/plugins/prometheus/sdk/go/query"
	timeseries "github.com/perses/plugins/timeserieschart/sdk/go"
)

func main() {
	dashboard.New("Example Dashboard",
		dashboard.AddPanelGroup("Resource usage",
			panelgroup.AddPanel("Container memory",
				timeseries.Chart(),
				panel.AddQuery(
					query.PromQL("max by (container) (container_memory_rss{stack=\"$stack\",prometheus=\"$prometheus\",prometheus_namespace=\"$prometheus_namespace\",namespace=\"$namespace\",pod=\"$pod\",container=\"$container\"})",
						query.MinStep(time.Minute),
					),
				),
		),
	)
}
```
```

--------------------------------

### Full Dashboard Integration Example

Source: https://github.com/perses/plugins/blob/main/docs/markdown/go-sdk.md

Demonstrates how to integrate a markdown panel with multiple new lines into a Perses dashboard structure.

```golang
package main

import (
	"github.com/perses/perses/go-sdk/dashboard"
	panelgroup "github.com/perses/perses/go-sdk/panel-group"
	"github.com/perses/plugins/markdown/sdk/go"
)

func main() {
	dashboard.New("Example Dashboard",
		dashboard.AddPanelGroup("Resource usage",
			panelgroup.AddPanel("Container memory",
				markdown.Markdown("This is a markdown panel",
					markdown.NewLine("This is a new line"),
					markdown.NewLine("This is a new line"),
					markdown.NewLine("This is a new line"),
					markdown.NewLine("This is a new line"),
					markdown.NewLine("This is a new line"),
					markdown.NewLine("This is a new line"),
				),
			),
		),
	)
}
```

--------------------------------

### Example Loki Dashboard Creation

Source: https://github.com/perses/plugins/blob/main/docs/loki/go-sdk/datasource.md

Demonstrates creating a Perses dashboard with a Loki datasource configured using a direct URL.

```go
package main

import (
	"github.com/perses/perses-sdk/dashboard"
	
lokiDs "github.com/perses/perses-plugins/loki/sdk/go/v1/datasource"
)

func main() {
	dashboard.New("Loki Dashboard",
		dashboard.AddDatasource("lokiMain", lokiDs.Loki(lokiDs.DirectURL("http://loki.example.com:3100"))),
	)
}
```

--------------------------------

### Simple Pyroscope Profile Query Example

Source: https://github.com/perses/plugins/blob/main/docs/pyroscope/model.md

An example of a simple profile query for CPU data, specifying service and environment labels.

```yaml
kind: "ProfileQuery"
spec:
  plugin:
    kind: "PyroscopeProfileQuery"
    spec:
      profileType: "cpu"
      query: '{service_name="api", environment="production"}'
```

--------------------------------

### Example Usage with Query Parameters

Source: https://github.com/perses/plugins/blob/main/docs/prometheus/go-sdk/datasource.md

Demonstrates how to create a dashboard with a Prometheus datasource using direct URL and query parameters for Thanos.

```APIDOC
## Example Usage (Thanos with Query Parameters)

### Description
Demonstrates how to create a dashboard with a Prometheus datasource using a direct URL and query parameters for a Thanos setup.

### Request Example
```golang
func main() {
	dashboard.New("Example Dashboard",
		dashboard.AddDatasource("thanosQuery", 
			promDs.Prometheus(
				promDs.DirectURL("https://thanos-query.example.com/"),
				promDs.QueryParams(map[string]string{
					"dedup":                 "false",
					"max_source_resolution": "0s",
					"partial_response":      "true",
				}),
			),
		),
	)
}
```
```

--------------------------------

### Install LogsTable Plugin

Source: https://github.com/perses/plugins/blob/main/logstable/README.md

Install the Perses LogsTable plugin package using npm.

```bash
npm install @perses-dev/logs-table-plugin
```

--------------------------------

### Full Dashboard Integration Example

Source: https://github.com/perses/plugins/blob/main/docs/pyroscope/go-sdk/query.md

Demonstrates how to integrate a Pyroscope query into a Perses dashboard panel.

```golang
package main

import (
	"github.com/perses/perses/go-sdk/dashboard"
	"github.com/perses/perses/go-sdk/panel"
	panelgroup "github.com/perses/perses/go-sdk/panel-group"
	"github.com/perses/perses-plugins/pyroscope/sdk/go/v1/query"
	flamechart "github.com/perses/perses-plugins/flamechart/sdk/go"
)

func main() {
	dashboard.New("Pyroscope Dashboard",
		dashboard.AddPanelGroup("CPU Profiling",
			panelgroup.AddPanel("API CPU Profile",
				flamechart.Panel(),
				panel.AddQuery(
					query.ProfileQuery("cpu", `{service_name="api", environment="production"}`),
				),
			),
		),
	)
}
```

--------------------------------

### Example VictoriaLogsFieldValuesVariable configurations

Source: https://github.com/perses/plugins/blob/main/docs/victorialogs/model.md

Examples of simple and complex field values variable configurations.

```yaml
kind: "Variable"
metadata:
  name: "job"
  project: "logging"
spec:
  kind: "ListVariable"
  spec:
    plugin:
      kind: "VictoriaLogsFieldValuesVariable"
      spec:
        fieldName: "job"
```

```yaml
kind: "Variable"
metadata:
  name: "service"
  project: "logging"
spec:
  kind: "ListVariable"
  spec:
    allowMultiple: false
    allowAllValue: false
    plugin:
      kind: "VictoriaLogsFieldValuesVariable"
      spec:
        datasource:
          kind: "VictoriaLogsDatasource"
          name: "VictoriaLogsMain"
        fieldName: "service"
        query: '_stream:{environment="production"}'
```

--------------------------------

### Example Usage in Dashboard

Source: https://github.com/perses/plugins/blob/main/docs/datasourcevariable/go-sdk.md

This example shows how to integrate the DatasourceVariable into a Perses dashboard using the Go SDK.

```APIDOC
## Example Dashboard Integration

This example demonstrates how to add a datasource variable to a Perses dashboard.

### Code

```golang
package main

import (
	"github.com/perses/perses/go-sdk/dashboard"
	"github.com/perses/perses/go-sdk/variable"
	datasourcevariable "github.com/perses/plugins/datasourcevariable/sdk/go"
)

func main() {
	dashboard.New("Example Dashboard",
		dashboard.AddVariable("datasource",
			variable.List(
				datasourcevariable.Datasource("PrometheusDatasource"),
			),
		),
	)
}
```
```

--------------------------------

### Example Usage

Source: https://github.com/perses/plugins/blob/main/docs/victorialogs/go-sdk/variable/field-values.md

An example demonstrating how to use the VictoriaLogs Field Values Variable Go SDK within a Perses dashboard.

```APIDOC
## Example Usage

### Description
This example shows how to create a Perses dashboard and add a variable that fetches 'job' field values from VictoriaLogs.

### Code
```golang
package main

import (
	"github.com/perses/perses-sdk/dashboard"
	"github.com/perses-plugins/victorialogs/sdk/go/v1/variable"
)

func main() {
	dashboard.New("VictoriaLogs Dashboard",
		dashboard.AddVariable("job", variable.FieldValues("job")),
	)
}
```
```

--------------------------------

### Full Dashboard Example

Source: https://github.com/perses/plugins/blob/main/docs/victorialogs/go-sdk/variable/field-names.md

Demonstrates integrating the field names variable into a new dashboard definition.

```golang
package main

import (
	"github.com/perses/perses/go-sdk/dashboard"
	"github.com/perses/perses-plugins/victorialogs/sdk/go/v1/variable"
)

func main() {
	dashboard.New("VictoriaLogs Dashboard",
		dashboard.AddVariable("available_fields", variable.FieldNames()),
	)
}
```

--------------------------------

### Example StatChart Dashboard Panel

Source: https://github.com/perses/plugins/blob/main/docs/statchart/go-sdk.md

Demonstrates creating a dashboard panel with a StatChart, including a sparkline configuration.

```go
package main

import (
	"github.com/perses/perses/go-sdk/dashboard"
	panelgroup "github.com/perses/perses/go-sdk/panel-group"
	"github.com/perses/plugins/statchart/sdk/go"
)

func main() {
	dashboard.New("Example Dashboard",
		dashboard.AddPanelGroup("Resource usage",
			panelgroup.AddPanel("Container memory",
				stat.Chart(
					stat.WithSparkline(stat.Sparkline{
						Color: "#e65013",
						Width: 1,
					}),
				),
			),
		),
	)
}
```

--------------------------------

### HistogramChart Example

Source: https://github.com/perses/plugins/blob/main/docs/histogramchart/go-sdk.md

A complete example demonstrating how to use the HistogramChart SDK to create a dashboard panel.

```APIDOC
## Example

This example shows how to create a dashboard with a histogram chart panel, configuring its format, min/max values, and thresholds.

### Code

```golang
package main

import (
	"github.com/perses/perses/go-sdk/dashboard"
	"github.com/perses/perses/go-sdk/panel"
	"github.com/perses/perses/go-sdk/common"
	histogram "github.com/perses/plugins/histogramchart/sdk/go"
)

func main() {
	dashboard.New("Histogram Dashboard",
		dashboard.AddPanel("Response Time Distribution",
			panel.New(
				histogram.Chart(
					histogram.Format(common.Format{Unit: &common.TimeUnit, DecimalPlaces: 2}),
					histogram.Min(0.0),
					histogram.Max(5.0),
					histogram.Thresholds(common.Thresholds{
						Steps: []common.ThresholdStep{
							{Value: 1.0, Color: "#00FF00"},
							{Value: 3.0, Color: "#FFFF00"},
							{Value: 5.0, Color: "#FF0000"},
						},
					}),
				),
			),
		),
	)
}
```
```

--------------------------------

### Example Dashboard with Prometheus Label Names Variable

Source: https://github.com/perses/plugins/blob/main/docs/prometheus/go-sdk/variable/label-names.md

An example demonstrating how to create a dashboard and add a variable that fetches Prometheus label names. It showcases the usage of Matchers and Datasource options.

```go
package main

import (
	"github.com/perses/perses/go-sdk/dashboard"
	listvariable "github.com/perses/perses/go-sdk/variable/list-variable"
	labelnames "github.com/perses/plugins/prometheus/sdk/go/variable/label-names"
)

func main() {
	dashboard.New("Example Dashboard",
		dashboard.AddVariable("namespaceLabels", listvariable.List(
			labelnames.PrometheusLabelNames(
				labelnames.Matchers("kube_namespace_labels{stack=\"$stack\",prometheus=\"$prometheus\",prometheus_namespace=\"$prometheus_namespace\",namespace=\"$namespace\"}"),
				labelnames.Datasource("prometheusDemo"),
			),
		)),
	)
}
```

--------------------------------

### Full Dashboard Integration Example

Source: https://github.com/perses/plugins/blob/main/docs/clickhouse/go-sdk/timeseries-query.md

Demonstrates how to integrate a ClickHouse time series query into a Perses dashboard panel.

```golang
package main

import (
	"github.com/perses/perses/go-sdk/dashboard"
	"github.com/perses/perses/go-sdk/panel"
	panelgroup "github.com/perses/perses/go-sdk/panel-group"
	"github.com/perses/perses-plugins/clickhouse/sdk/go/v1/query"
	timeseries "github.com/perses/perses-plugins/timeserieschart/sdk/go"
)

func main() {
	dashboard.New("ClickHouse Dashboard",
		dashboard.AddPanelGroup("Metrics",
			panelgroup.AddPanel("Request Rate",
				timeseries.Chart(),
				panel.AddQuery(
					query.TimeSeriesQuery(`
						SELECT 
							toStartOfMinute(timestamp) as time,
							count() as requests
						FROM http_logs 
						WHERE timestamp >= now() - INTERVAL 1 HOUR
						GROUP BY time
						ORDER BY time
					`),
				),
			),
		),
	)
}
```

--------------------------------

### TempoTraceQuery Example

Source: https://github.com/perses/plugins/blob/main/docs/tempo/model.md

An example of a TempoTraceQuery, demonstrating a TraceQL expression to find traces from the 'frontend' service with a duration greater than 100ms, and specifying the datasource.

```yaml
kind: TempoTraceQuery
spec:
  query: '{service.name="frontend"} | duration > 100ms'
  datasource:
    kind: TempoDatasource
    name: tempo-production
```

--------------------------------

### Example Histogram Chart Creation Go SDK

Source: https://github.com/perses/plugins/blob/main/docs/histogramchart/go-sdk.md

Demonstrates how to create a histogram chart within a dashboard panel using various configuration options. This includes setting format, min/max values, and thresholds.

```go
package main

import (
	"github.com/perses/perses/go-sdk/dashboard"
	"github.com/perses/perses/go-sdk/panel"
	"github.com/perses/perses/go-sdk/common"
	histogram "github.com/perses/plugins/histogramchart/sdk/go"
)

func main() {
	dashboard.New("Histogram Dashboard",
		dashboard.AddPanel("Response Time Distribution",
			panel.New(
				histogram.Chart(
					histogram.Format(common.Format{Unit: &common.TimeUnit, DecimalPlaces: 2}),
					histogram.Min(0.0),
					histogram.Max(5.0),
					histogram.Thresholds(common.Thresholds{
						Steps: []common.ThresholdStep{
							{Value: 1.0, Color: "#00FF00"},
							{Value: 3.0, Color: "#FFFF00"},
							{Value: 5.0, Color: "#FF0000"},
						},
					}),
				),
			),
		),
	)
}
```

--------------------------------

### Dynamic Cell Link URL Example

Source: https://github.com/perses/plugins/blob/main/docs/table/README.md

Example of a URL string that uses variables for project and dashboard, along with time range and refresh rate.

```text
http://example.com/projects/$__project/dashboards/$__dashboard?var-job=avalanche&start=$__range&refresh=0s
```

--------------------------------

### Execute Loki queries

Source: https://github.com/perses/plugins/blob/main/docs/loki/model.md

Examples of LogQuery and TimeSeriesQuery implementations.

```yaml
kind: "LogQuery"
spec:
  plugin:
    kind: "LokiLogQuery"
    spec:
      query: '{job="nginx"} |= "error"'
```

```yaml
kind: "TimeSeriesQuery"
spec:
  plugin:
    kind: "LokiTimeSeriesQuery"
    spec:
      query: 'rate({job="nginx"}[5m])'
```

--------------------------------

### Example Simple ClickHouse Log Query

Source: https://github.com/perses/plugins/blob/main/docs/clickhouse/model.md

A basic example of a log query for ClickHouse, demonstrating the 'ClickHouseLogQuery' plugin with a sample SQL query for error logs.

```yaml
kind: "LogQuery"
spec:
  plugin:
    kind: "ClickHouseLogQuery"
    spec:
      query: "SELECT timestamp, level, message, service FROM application_logs WHERE level = 'ERROR' AND timestamp >= now() - INTERVAL 1 HOUR ORDER BY timestamp DESC LIMIT 1000"
```

--------------------------------

### ScatterChart Example Usage in Go Dashboard

Source: https://github.com/perses/plugins/blob/main/docs/scatterchart/go-sdk.md

This example demonstrates how to add a ScatterChart panel to a dashboard using the Go SDK. Ensure all necessary SDK packages are imported.

```go
package main

import (
	"github.com/perses/perses/go-sdk/dashboard"
	"github.com/perses/perses/go-sdk/panel"
	scatter "github.com/perses/plugins/scatterchart/sdk/go"
)

func main() {
	dashboard.New("Scatter Plot Dashboard",
		dashboard.AddPanel("Data Correlation Analysis",
			panel.New(
				scatter.Chart(),
			),
		),
	)
}
```

--------------------------------

### Initialize Prometheus Filter Builder

Source: https://github.com/perses/plugins/blob/main/docs/prometheus/cue-sdk/filter.md

Import and initialize the Prometheus filter builder. This is the basic setup required before defining input parameters.

```cue
package myDaC

import (
	promFilterBuilder "github.com/perses/plugins/prometheus/sdk/cue/filter"
)

promFilterBuilder & {} // input parameters expected
```

--------------------------------

### Simple Prometheus TimeSeriesQuery Example

Source: https://github.com/perses/plugins/blob/main/docs/prometheus/model.md

An example of a TimeSeriesQuery using the Prometheus plugin, with a basic PromQL query for Caddy HTTP response durations.

```yaml
kind: "TimeSeriesQuery"
spec:
  plugin:
    kind: "PrometheusTimeSeriesQuery"
    spec:
      query: "rate(caddy_http_response_duration_seconds_sum[$interval])"
```

--------------------------------

### Example Loki Time Series Dashboard Panel

Source: https://github.com/perses/plugins/blob/main/docs/loki/go-sdk/timeseries-query.md

Demonstrates creating a dashboard panel with a Loki time series query using the Go SDK.

```go
package main

import (
	"github.com/perses/perses-sdk/dashboard"
	"github.com/perses/perses-sdk/panel"
	panelgroup "github.com/perses/perses-sdk/panel-group"
	"github.com/perses/perses-plugins/loki/sdk/go/v1/query"
	timeseries "github.com/perses/perses-plugins/timeserieschart/sdk/go"
)

func main() {
	dashboard.New("Loki Metrics Dashboard",
		dashboard.AddPanelGroup("Log Metrics",
			panelgroup.AddPanel("Request Rate",
				timeseries.Chart(),
				panel.AddQuery(
					query.TimeSeriesQuery(`rate({job="nginx"}[5m])`),
				),
			),
		),
	)
}
```

--------------------------------

### Create VictoriaLogs Dashboard with Time Series Panel

Source: https://github.com/perses/plugins/blob/main/docs/victorialogs/go-sdk/timeseries-query.md

Example demonstrating how to create a dashboard with a time series panel that queries data from VictoriaLogs.

```go
package main

import (
	"github.com/perses/perses-sdk/dashboard"
	"github.com/perses/perses-sdk/panel"
	panelgroup "github.com/perses/perses-sdk/panel-group"
	"github.com/perses/perses-plugins/victorialogs/sdk/go/v1/query"
	timeseries "github.com/perses/perses-plugins/timeserieschart/sdk/go"
)

func main() {
	dashboard.New("VictoriaLogs Dashboard",
		dashboard.AddPanelGroup("Log Metrics",
			panelgroup.AddPanel("Request Rate",
				timeseries.Chart(),
				panel.AddQuery(
					query.TimeSeriesQuery(`_stream:{job="nginx"} | stats count() by (_time:1m)`),
				),
			),
		),
	)
}
```

--------------------------------

### Create a Prometheus Datasource Variable

Source: https://github.com/perses/plugins/blob/main/docs/datasourcevariable/cue-sdk.md

Example demonstrating how to configure a datasource variable for Prometheus. It includes setting the name, plugin kind, and display properties.

```cue
package myDaC

import (
	datasourceVarBuilder "github.com/perses/plugins/datasourcevariable/sdk/cue"
)

{datasourceVarBuilder & {
	#name:                  "datasource"
	#datasourcePluginKind:  "PrometheusDatasource"
	#display: {
		name: "Prometheus Instance"
		description: "Select the Prometheus datasource to use"
	}
}}.variable
```

--------------------------------

### Simple Prometheus Datasource Example

Source: https://github.com/perses/plugins/blob/main/docs/prometheus/model.md

A basic configuration for a Prometheus datasource, specifying its kind and direct URL for UI access.

```yaml
kind: "Datasource"
metadata:
  name: "PrometheusDemo"
  project: "perses"
spec:
  default: true
  plugin:
    kind: "PrometheusDatasource"
    spec:
      directUrl: "https://prometheus.demo.do.prometheus.io"
```

--------------------------------

### Example Simple ClickHouse Time Series Query

Source: https://github.com/perses/plugins/blob/main/docs/clickhouse/model.md

A basic example of a time series query for ClickHouse, demonstrating the 'ClickHouseTimeSeriesQuery' plugin with a sample SQL query.

```yaml
kind: "TimeSeriesQuery"
spec:
  plugin:
    kind: "ClickHouseTimeSeriesQuery"
    spec:
      query: "SELECT toStartOfMinute(timestamp) as time, count() as requests FROM http_logs WHERE timestamp >= now() - INTERVAL 1 HOUR GROUP BY time ORDER BY time"
```

--------------------------------

### Configure LokiDatasource instances

Source: https://github.com/perses/plugins/blob/main/docs/loki/model.md

Examples of simple and complex LokiDatasource configurations using direct URLs or HTTP proxies.

```yaml
kind: "Datasource"
metadata:
  name: "LokiMain"
  project: "logging"
spec:
  default: true
  plugin:
    kind: "LokiDatasource"
    spec:
      directUrl: "http://loki.example.com:3100"
```

```yaml
kind: "Datasource"
metadata:
  name: "LokiMain"
  project: "logging"
spec:
  default: true
  plugin:
    kind: "LokiDatasource"
    spec:
      proxy:
        kind: "HTTPProxy"
        spec:
          url: "http://loki.example.com:3100"
          allowedEndpoints:
            - endpointPattern: "/loki/api/v1/query"
              method: "GET"
            - endpointPattern: "/loki/api/v1/query_range"
              method: "GET"
            - endpointPattern: "/loki/api/v1/labels"
              method: "GET"
            - endpointPattern: "/loki/api/v1/label/([a-zA-Z0-9_-]+)/values"
              method: "GET"
          secret: "loki_secret_config"
```

--------------------------------

### TimeSeriesChart Dashboard Integration

Source: https://github.com/perses/plugins/blob/main/docs/timeserieschart/go-sdk.md

Complete example demonstrating how to add a TimeSeriesChart to a dashboard panel group.

```golang
package main

import (
	"github.com/perses/perses/go-sdk/dashboard"
	panelgroup "github.com/perses/perses/go-sdk/panel-group"
	"github.com/perses/plugins/timeserieschart/sdk/go"
)

func main() {
	dashboard.New("Example Dashboard",
		dashboard.AddPanelGroup("Resource usage",
			panelgroup.AddPanel("Container memory",
				timeseries.Chart(
					timeseries.WithLegend(timeseries.Legend{
						Position: timeseries.BottomPosition,
						Mode:     timeseries.ListMode,
						Size:     timeseries.SmallSize,
					}),
					timeseries.WithTooltip(timeseries.Tooltip{
						EnablePinning: false,
					}),
				),
			),
		),
	)
}
```

--------------------------------

### Example Simple ClickHouse Datasource

Source: https://github.com/perses/plugins/blob/main/docs/clickhouse/model.md

A basic ClickHouse datasource configuration using the 'ClickHouseDatasource' plugin kind with a specified direct URL.

```yaml
kind: "Datasource"
metadata:
  name: "ClickHouseMain"
  project: "analytics"
spec:
  default: true
  plugin:
    kind: "ClickHouseDatasource"
    spec:
      directUrl: "http://clickhouse.example.com:8123"
```