Add panels and queries

A dashboard without panels is an empty page. Each panel has a visualization type (stat, time series, table) and one or more data queries that fetch the data to display.

You add panels using WithPanel, passing in a type-specific panel builder. Each panel needs a data source reference and at least one query target.

To add panels to your dashboard, complete the following steps:

Go

1. Update your main.go to import the panel and query packages, define a data source reference, and add panels to the builder:

   Go Copy

   package main
   
   import (
     "encoding/json"
     "log"
     "os"
   
     "github.com/grafana/grafana-foundation-sdk/go/cog"
     "github.com/grafana/grafana-foundation-sdk/go/common"
     "github.com/grafana/grafana-foundation-sdk/go/dashboard"
     "github.com/grafana/grafana-foundation-sdk/go/stat"
     "github.com/grafana/grafana-foundation-sdk/go/testdata"
     "github.com/grafana/grafana-foundation-sdk/go/timeseries"
   )
   
   func main() {
     testdataRef := dashboard.DataSourceRef{
       Type: cog.ToPtr("grafana-testdata-datasource"),
       Uid:  cog.ToPtr("testdata"),
     }
   
     builder := dashboard.NewDashboardBuilder("My SDK Dashboard").
       Uid("my-sdk-dashboard").
       Tags([]string{"generated", "foundation-sdk"}).
       Refresh("5m").
       Time("now-1h", "now").
       Timezone(common.TimeZoneBrowser).
       WithPanel(
         stat.NewPanelBuilder().
           Title("Version").
           Datasource(testdataRef).
           ReduceOptions(common.NewReduceDataOptionsBuilder().
             Calcs([]string{"lastNotNull"}).
             Fields("/.*/")).
           WithTarget(
             testdata.NewDataqueryBuilder().
               ScenarioId("csv_content").
               CsvContent("version\nv1.0.0"),
           ),
       ).
       WithPanel(
         timeseries.NewPanelBuilder().
           Title("Request Rate").
           Datasource(testdataRef).
           WithTarget(
             testdata.NewDataqueryBuilder().
               ScenarioId("random_walk"),
           ),
       )
   }

TypeScript

1. Update your index.ts with panel and query imports, a data source reference, and panels:

   typescript Copy

   import { DashboardBuilder, DataSourceRef } from '@grafana/grafana-foundation-sdk/dashboard';
   import { PanelBuilder as StatPanelBuilder } from '@grafana/grafana-foundation-sdk/stat';
   import { PanelBuilder as TimeseriesPanelBuilder } from '@grafana/grafana-foundation-sdk/timeseries';
   import { DataqueryBuilder } from '@grafana/grafana-foundation-sdk/testdata';
   import { ReduceDataOptionsBuilder } from '@grafana/grafana-foundation-sdk/common';
   
   const testdataRef: DataSourceRef = {
     type: 'grafana-testdata-datasource',
     uid: 'testdata',
   };
   
   const builder = new DashboardBuilder('My SDK Dashboard')
     .uid('my-sdk-dashboard')
     .tags(['generated', 'foundation-sdk'])
     .refresh('5m')
     .time({ from: 'now-1h', to: 'now' })
     .timezone('browser')
     .withPanel(
       new StatPanelBuilder()
         .title('Version')
         .datasource(testdataRef)
         .reduceOptions(
           new ReduceDataOptionsBuilder().calcs(['lastNotNull']).fields('/.*/')
         )
         .withTarget(
           new DataqueryBuilder().scenarioId('csv_content').csvContent('version\nv1.0.0')
         )
     )
     .withPanel(
       new TimeseriesPanelBuilder()
         .title('Request Rate')
         .datasource(testdataRef)
         .withTarget(
           new DataqueryBuilder().scenarioId('random_walk')
         )
     );

Key concepts

The testdata data source is built into every Grafana instance, making it ideal for testing without external dependencies.

In the next milestone, you build the dashboard object and export it as JSON.