Handle negative y and constant transform in Timeseries panel

packages/grafana-ui/src/components/VizLegend/VizLegend.tsx

@@ -62,7 +62,7 @@ export function VizLegend<T>({
       }
       if (onToggleSeriesVisibility) {
         onToggleSeriesVisibility(
-          item.label,
+          item.name,
           seriesVisibilityChangeBehavior === SeriesVisibilityChangeBehavior.Hide
             ? SeriesVisibilityChangeMode.AppendToSelection
             : mapMouseEventToMode(event)

packages/grafana-ui/src/components/VizLegend/types.ts

@@ -32,7 +32,8 @@ export interface LegendProps<T = any> extends VizLegendBaseProps<T>, VizLegendTa
 
 export interface VizLegendItem<T = any> {
   getItemKey?: () => string;
-  label: string;
+  name: string;
+  label: React.ReactNode;
   color?: string;
   gradient?: string;
   yAxis: number;

packages/grafana-ui/src/components/VizTooltip/SeriesTable.tsx

@@ -9,7 +9,7 @@ import { useStyles2 } from '../../themes';
  */
 export interface SeriesTableRowProps {
   color?: string;
-  label?: string;
+  label?: React.ReactNode;
   value?: string | GraphSeriesValue;
   isActive?: boolean;
 }

packages/grafana-ui/src/components/uPlot/PlotLegend.tsx

@@ -13,6 +13,7 @@ import { VizLegendOptions, AxisPlacement } from '@grafana/schema';
 import { VizLayout, VizLayoutLegendProps } from '../VizLayout/VizLayout';
 import { VizLegend } from '../VizLegend/VizLegend';
 import { useTheme2 } from '../../themes';
+import { SeriesLabel } from './plugins/SeriesLabel';
 
 const defaultFormatter = (v: any) => (v == null ? '-' : v.toFixed(1));
 
@@ -47,14 +48,17 @@ export const PlotLegend: React.FC<PlotLegendProps> = ({
         return undefined;
       }
 
-      const label = getFieldDisplayName(field, data[fieldIndex.frameIndex]!, data);
+      const fieldDisplayName = getFieldDisplayName(field, data[fieldIndex.frameIndex]!, data);
+      const transformMode = field.config?.custom?.transform;
       const scaleColor = getFieldSeriesColor(field, theme);
       const seriesColor = scaleColor.color;
+      const label = <SeriesLabel name={fieldDisplayName} transformMode={transformMode} />;
 
       return {
         disabled: !(seriesConfig.show ?? true),
         fieldIndex,
         color: seriesColor,
+        name: fieldDisplayName,
         label,
         yAxis: axisPlacement === AxisPlacement.Left ? 1 : 2,
         getDisplayValues: () => {

packages/grafana-ui/src/components/uPlot/plugins/SeriesLabel.tsx

@@ -0,0 +1,28 @@
+import React, { useMemo } from 'react';
+import { GraphTransform } from '@grafana/schema';
+import { useTheme2 } from '../../../themes';
+import { css } from '@emotion/css';
+
+interface SeriesLabelProps {
+  transformMode?: GraphTransform;
+  name: string;
+}
+
+export function SeriesLabel({ transformMode, name }: SeriesLabelProps) {
+  const theme = useTheme2();
+  const styles = useMemo(() => {
+    return css`
+      color: ${theme.colors.text.secondary};
+      font-weight: normal !important;
+    `;
+  }, [theme]);
+
+  return (
+    <>
+      {name}
+      {transformMode && (
+        <span className={styles}> ({transformMode === GraphTransform.NegativeY ? 'neg Y' : 'const'})</span>
+      )}
+    </>
+  );
+}

packages/grafana-ui/src/components/uPlot/plugins/TooltipPlugin.tsx

@@ -19,6 +19,7 @@ import { Portal } from '../../Portal/Portal';
 import { SeriesTable, SeriesTableRowProps, VizTooltipContainer } from '../../VizTooltip';
 import { UPlotConfigBuilder } from '../config/UPlotConfigBuilder';
 import { findMidPointYPosition, pluginLog } from '../utils';
+import { SeriesLabel } from './SeriesLabel';
 
 interface TooltipPluginProps {
   timeZone: TimeZone;
@@ -195,13 +196,16 @@ export const TooltipPlugin: React.FC<TooltipPluginProps> = ({
       xVal = xFieldFmt(xField!.values.get(dataIdx)).text;
       const fieldFmt = field.display || getDisplayProcessor({ field, timeZone, theme });
       const display = fieldFmt(field.values.get(dataIdx));
+      const fieldDisplayName = getFieldDisplayName(field, otherProps.data);
+      const transformMode = field.config?.custom?.transform;
 
+      const label = <SeriesLabel name={fieldDisplayName} transformMode={transformMode} />;
       tooltip = (
         <SeriesTable
           series={[
             {
               color: display.color || FALLBACK_COLOR,
-              label: getFieldDisplayName(field, otherProps.data),
+              label,
               value: display ? formattedValueToString(display) : null,
             },
           ]}
@@ -231,10 +235,15 @@ export const TooltipPlugin: React.FC<TooltipPluginProps> = ({
 
         const v = otherProps.data.fields[i].values.get(focusedPointIdxs[i]!);
         const display = field.display!(v);
+        const fieldDisplayName = getFieldDisplayName(field, frame);
+        const transformMode = field.config?.custom?.transform;
+
+        const label = <SeriesLabel name={fieldDisplayName} transformMode={transformMode} />;
+
         sortIdx.push([series.length, v]);
         series.push({
           color: display.color || FALLBACK_COLOR,
-          label: getFieldDisplayName(field, frame),
+          label,
           value: display ? formattedValueToString(display) : null,
           isActive: focusedSeriesIdx === i,
         });

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

@@ -1,5 +1,5 @@
 import { DataFrame, ensureTimeField, Field, FieldType } from '@grafana/data';
-import { StackingMode, VizLegendOptions } from '@grafana/schema';
+import { GraphFieldConfig, GraphTransform, StackingMode, VizLegendOptions } from '@grafana/schema';
 import { orderBy } from 'lodash';
 import uPlot, { AlignedData, Options, PaddingSide } from 'uplot';
 import { attachDebugger } from '../../utils';
@@ -60,7 +60,16 @@ export function preparePlotData(
     }
 
     collectStackingGroups(f, stackingGroups, seriesIndex);
-    result.push(f.values.toArray());
+    const customConfig: GraphFieldConfig = f.config.custom || {};
+
+    const values = f.values.toArray();
+    if (customConfig.transform === GraphTransform.NegativeY) {
+      result.push(values.map((v) => v * -1));
+    } else if (customConfig.transform === GraphTransform.Constant) {
+      result.push(new Array(values.length).fill(values[0]));
+    } else {
+      result.push(values);
+    }
     seriesIndex++;
   }
 

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

@@ -202,6 +202,7 @@ export function getGraphFieldConfig(cfg: GraphFieldConfig): SetFieldConfigOption
           ],
           isClearable: true,
         },
+        hideFromDefaults: true,
       });
 
       commonOptionsBuilder.addAxisConfig(builder, cfg);