TimeComparison: Add tracking (#111267)

public/app/features/dashboard-scene/scene/CustomTimeRangeCompare.tsx

@@ -1,3 +1,4 @@
+import { reportInteraction } from '@grafana/runtime';
 import { SceneTimeRangeCompare, SceneComponentProps, VizPanel, sceneGraph } from '@grafana/scenes';
 import { TimeCompareOptions } from '@grafana/schema';
 
@@ -6,6 +7,8 @@ function hasTimeCompare(options: unknown): options is TimeCompareOptions {
 }
 
 export class CustomTimeRangeCompare extends SceneTimeRangeCompare {
+  private readonly parentOnCompareWithChanged: (compareWith: string) => void;
+
   constructor(state: Partial<SceneTimeRangeCompare['state']> = {}) {
     super({
       ...state,
@@ -14,6 +17,20 @@ export class CustomTimeRangeCompare extends SceneTimeRangeCompare {
       hideCheckbox: true,
     });
 
+    this.parentOnCompareWithChanged = this.onCompareWithChanged.bind(this);
+
+    this.onCompareWithChanged = (compareWith: string) => {
+      const vizPanel = sceneGraph.getAncestor(this, VizPanel);
+
+      reportInteraction('panel_time_comparison', {
+        viz_type: vizPanel?.getPlugin()?.meta.id || 'unknown',
+        select_type: 'option_selected',
+        option_type: compareWith,
+      });
+
+      this.parentOnCompareWithChanged(compareWith);
+    };
+
     this.addActivationHandler(() => this._activationHandler());
   }
 

public/app/features/dashboard/components/PanelEditor/getVisualizationOptions.tsx

@@ -11,6 +11,7 @@ import {
 } from '@grafana/data';
 import { NestedValueAccess, isNestedPanelOptions, PanelOptionsSupplier } from '@grafana/data/internal';
 import { t } from '@grafana/i18n';
+import { reportInteraction } from '@grafana/runtime';
 import { VizPanel } from '@grafana/scenes';
 import { Input } from '@grafana/ui';
 import { LibraryVizPanelInfo } from 'app/features/dashboard-scene/panel-edit/LibraryVizPanelInfo';
@@ -226,6 +227,14 @@ export function getVisualizationOptions2(props: OptionPaneRenderProps2): Options
   const access: NestedValueAccess = {
     getValue: (path) => lodashGet(currentOptions, path),
     onChange: (path, value) => {
+      if (path === 'timeCompare') {
+        reportInteraction('panel_setting_interaction', {
+          viz_type: plugin.meta.id,
+          feature_type: 'time_comparison',
+          option_type: value ? 'toggle_enabled' : 'toggle_disabled',
+        });
+      }
+
       const newOptions = setOptionImmutably(currentOptions, path, value);
       panel.onOptionsChange(newOptions);
     },