From a71cebbcb14b3026fe465ce8b43c41a512c03028 Mon Sep 17 00:00:00 2001
From: Oscar Kilhed <oscar.kilhed@grafana.com>
Date: Fri, 14 May 2021 12:01:40 +0200
Subject: [PATCH] grafana/u: Move stacking config to common options builder
 (#34106)

* Move stacking config to options builder

* Extract stacking interface
---
 .../grafana-ui/src/components/uPlot/config.ts |  9 ++++-
 .../grafana-ui/src/options/builder/index.ts   |  1 +
 .../src/options/builder/stacking.tsx          | 33 +++++++++++++++++--
 public/app/plugins/panel/timeseries/config.ts | 25 +-------------
 4 files changed, 40 insertions(+), 28 deletions(-)
 rename public/app/plugins/panel/timeseries/StackingEditor.tsx => packages/grafana-ui/src/options/builder/stacking.tsx (61%)

diff --git a/packages/grafana-ui/src/components/uPlot/config.ts b/packages/grafana-ui/src/components/uPlot/config.ts
index 045d6e79cbf..aade4903d82 100644
--- a/packages/grafana-ui/src/components/uPlot/config.ts
+++ b/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;
 }
 
diff --git a/packages/grafana-ui/src/options/builder/index.ts b/packages/grafana-ui/src/options/builder/index.ts
index f4ee91f24d6..b86da47ddb6 100644
--- a/packages/grafana-ui/src/options/builder/index.ts
+++ b/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';
diff --git a/public/app/plugins/panel/timeseries/StackingEditor.tsx b/packages/grafana-ui/src/options/builder/stacking.tsx
similarity index 61%
rename from public/app/plugins/panel/timeseries/StackingEditor.tsx
rename to packages/grafana-ui/src/options/builder/stacking.tsx
index 57c3a8d4452..f69db522c4b 100644
--- a/public/app/plugins/panel/timeseries/StackingEditor.tsx
+++ b/packages/grafana-ui/src/options/builder/stacking.tsx
@@ -1,6 +1,12 @@
-import React from 'react';
-import { FieldOverrideEditorProps } from '@grafana/data';
 import {
+  FieldConfigEditorBuilder,
+  FieldOverrideEditorProps,
+  FieldType,
+  identityOverrideProcessor,
+} from '@grafana/data';
+import React from 'react';
+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,
+  });
+}
diff --git a/public/app/plugins/panel/timeseries/config.ts b/public/app/plugins/panel/timeseries/config.ts
index 0f6af271d7f..2ec74203b67 100644
--- a/public/app/plugins/panel/timeseries/config.ts
+++ b/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,
-  });
-}