grafana/u: Move stacking config to common options builder (#34106)

* Move stacking config to options builder

* Extract stacking interface

packages/grafana-ui/src/components/uPlot/config.ts

@@ -193,6 +193,13 @@ export interface StackingConfig {
   group?: string;
 }
 
+/**
+ * @alpha
+ */
+export interface StackableFieldConfig {
+  stacking?: StackingConfig;
+}
+
 /**
  * @alpha
  */
@@ -220,10 +227,10 @@ export interface GraphFieldConfig
     PointsConfig,
     AxisConfig,
     BarConfig,
+    StackableFieldConfig,
     HideableFieldConfig {
   drawStyle?: DrawStyle;
   gradientMode?: GraphGradientMode;
-  stacking?: StackingConfig;
   thresholdsStyle?: GraphThresholdsStyleConfig;
 }
 

packages/grafana-ui/src/options/builder/index.ts

@@ -2,3 +2,4 @@ export * from './axis';
 export * from './hideSeries';
 export * from './legend';
 export * from './tooltip';
+export * from './stacking';

packages/grafana-ui/src/options/builder/stacking.tsx

@@ -1,6 +1,12 @@
+import {
+  FieldConfigEditorBuilder,
+  FieldOverrideEditorProps,
+  FieldType,
+  identityOverrideProcessor,
+} from '@grafana/data';
 import React from 'react';
-import { FieldOverrideEditorProps } from '@grafana/data';
 import {
+  graphFieldOptions,
   HorizontalGroup,
   IconButton,
   Input,
@@ -8,7 +14,7 @@ import {
   StackingConfig,
   StackingMode,
   Tooltip,
-} from '@grafana/ui';
+} from '../..';
 
 export const StackingEditor: React.FC<FieldOverrideEditorProps<StackingConfig, any>> = ({
   value,
@@ -49,3 +55,24 @@ export const StackingEditor: React.FC<FieldOverrideEditorProps<StackingConfig, a
     </HorizontalGroup>
   );
 };
+
+export function addStackingConfig(
+  builder: FieldConfigEditorBuilder<{ stacking: StackingConfig }>,
+  defaultConfig?: StackingConfig,
+  category = ['Graph styles']
+) {
+  builder.addCustomEditor({
+    id: 'stacking',
+    path: 'stacking',
+    name: 'Stack series',
+    category: category,
+    defaultValue: defaultConfig,
+    editor: StackingEditor,
+    override: StackingEditor,
+    settings: {
+      options: graphFieldOptions.stacking,
+    },
+    process: identityOverrideProcessor,
+    shouldApply: (f) => f.type === FieldType.number,
+  });
+}

public/app/plugins/panel/timeseries/config.ts

@@ -1,6 +1,5 @@
 import {
   FieldColorModeId,
-  FieldConfigEditorBuilder,
   FieldConfigProperty,
   FieldType,
   identityOverrideProcessor,
@@ -16,14 +15,12 @@ import {
   LineInterpolation,
   LineStyle,
   PointVisibility,
-  StackingConfig,
   StackingMode,
   commonOptionsBuilder,
 } from '@grafana/ui';
 import { LineStyleEditor } from './LineStyleEditor';
 import { FillBellowToEditor } from './FillBelowToEditor';
 import { SpanNullsEditor } from './SpanNullsEditor';
-import { StackingEditor } from './StackingEditor';
 
 export const defaultGraphConfig: GraphFieldConfig = {
   drawStyle: DrawStyle.Line,
@@ -176,7 +173,7 @@ export function getGraphFieldConfig(cfg: GraphFieldConfig): SetFieldConfigOption
           showIf: (c) => c.showPoints !== PointVisibility.Never || c.drawStyle === DrawStyle.Points,
         });
 
-      addStackingConfig(builder, cfg.stacking);
+      commonOptionsBuilder.addStackingConfig(builder, cfg.stacking, categoryStyles);
       commonOptionsBuilder.addAxisConfig(builder, cfg);
       commonOptionsBuilder.addHideFrom(builder);
 
@@ -192,23 +189,3 @@ export function getGraphFieldConfig(cfg: GraphFieldConfig): SetFieldConfigOption
     },
   };
 }
-
-export function addStackingConfig(
-  builder: FieldConfigEditorBuilder<{ stacking: StackingConfig }>,
-  defaultConfig?: StackingConfig
-) {
-  builder.addCustomEditor({
-    id: 'stacking',
-    path: 'stacking',
-    name: 'Stack series',
-    category: categoryStyles,
-    defaultValue: defaultConfig,
-    editor: StackingEditor,
-    override: StackingEditor,
-    settings: {
-      options: graphFieldOptions.stacking,
-    },
-    process: identityOverrideProcessor,
-    shouldApply: (f) => f.type === FieldType.number,
-  });
-}