PanelBuilders: Mixin function to share config (#932)

docusaurus/docs/visualizations.md

@@ -216,6 +216,17 @@ const scene = new EmbeddedScene({
 
 This built panel is now ready to be used in a scene.
 
+### Extract common visualization config to a mixin function 
+
+```ts
+function latencyGraphMixin(builder: ReturnType<typeof PanelBuilders["timeseries"]>) {
+  builder.setMin(0);
+  builder.setOption('legend', { showLegend: false: true })
+}
+
+const panel = PanelBuilders.timeseries().applyMixin(latencyGraphMixin).setData(...)
+```
+
 ## Custom visualizations
 
 If you want to determine how data is visualized in your Grafana app plugin, you can do so in two ways. You always have the option to create a custom `SceneObject`, but you won't get the `PanelChrome` with loading state and other features

packages/scenes/src/core/PanelBuilders/VizPanelBuilder.test.ts

@@ -240,6 +240,15 @@ describe('VizPanelBuilder', () => {
         }
       `);
     });
+
+    it('allows mixin function', () => {
+      const mixin = (builder: ReturnType<typeof getTestBuilder>) => {
+        builder.setOption('numeric', 2);
+      };
+
+      const p1 = getTestBuilder().applyMixin(mixin).build();
+      expect(p1.state.options.numeric).toEqual(2);
+    });
   });
 
   describe('overrides', () => {

packages/scenes/src/core/PanelBuilders/VizPanelBuilder.ts

@@ -215,6 +215,14 @@ export class VizPanelBuilder<TOptions extends {}, TFieldConfig extends {}>
     return this;
   }
 
+  /**
+   * Makes it possible to shared config between different builders
+   */
+  public applyMixin(mixin: (builder: this) => void): this {
+    mixin(this);
+    return this;
+  }
+
   /**
    * Build the panel.
    */