GraphNG: remove graph2 panel (keep the parts needed for explore) (#30124)

public/app/features/explore/flotgraph/getGraphSeriesModel.ts

@@ -0,0 +1,147 @@
+import { colors } from '@grafana/ui';
+import {
+  getFlotPairs,
+  getDisplayProcessor,
+  NullValueMode,
+  reduceField,
+  FieldType,
+  DisplayValue,
+  GraphSeriesXY,
+  getTimeField,
+  DataFrame,
+  getSeriesTimeStep,
+  TimeZone,
+  hasMsResolution,
+  systemDateFormats,
+  FieldColor,
+  FieldColorModeId,
+  FieldConfigSource,
+  getFieldDisplayName,
+} from '@grafana/data';
+
+import { config } from 'app/core/config';
+import { SeriesOptions, GraphOptions, GraphLegendEditorLegendOptions } from './types';
+
+export const getGraphSeriesModel = (
+  dataFrames: DataFrame[],
+  timeZone: TimeZone,
+  seriesOptions: SeriesOptions,
+  graphOptions: GraphOptions,
+  legendOptions: GraphLegendEditorLegendOptions,
+  fieldOptions?: FieldConfigSource
+) => {
+  const graphs: GraphSeriesXY[] = [];
+
+  const displayProcessor = getDisplayProcessor({
+    field: {
+      config: {
+        unit: fieldOptions?.defaults?.unit,
+        decimals: legendOptions.decimals,
+      },
+    },
+    theme: config.theme,
+    timeZone,
+  });
+
+  let fieldColumnIndex = -1;
+  for (const series of dataFrames) {
+    const { timeField } = getTimeField(series);
+
+    if (!timeField) {
+      continue;
+    }
+
+    for (const field of series.fields) {
+      if (field.type !== FieldType.number) {
+        continue;
+      }
+      // Storing index of series field for future inspection
+      fieldColumnIndex++;
+
+      // Use external calculator just to make sure it works :)
+      const points = getFlotPairs({
+        xField: timeField,
+        yField: field,
+        nullValueMode: NullValueMode.Null,
+      });
+
+      if (points.length > 0) {
+        const seriesStats = reduceField({ field, reducers: legendOptions.stats || [] });
+        let statsDisplayValues: DisplayValue[] = [];
+
+        if (legendOptions.stats) {
+          statsDisplayValues = legendOptions.stats.map<DisplayValue>(stat => {
+            const statDisplayValue = displayProcessor(seriesStats[stat]);
+
+            return {
+              ...statDisplayValue,
+              title: stat,
+            };
+          });
+        }
+
+        let color: FieldColor;
+        if (seriesOptions[field.name] && seriesOptions[field.name].color) {
+          // Case when panel has settings provided via SeriesOptions, i.e. graph panel
+          color = {
+            mode: FieldColorModeId.Fixed,
+            fixedColor: seriesOptions[field.name].color,
+          };
+        } else if (field.config && field.config.color) {
+          // Case when color settings are set on field, i.e. Explore logs histogram (see makeSeriesForLogs)
+          color = field.config.color;
+        } else {
+          color = {
+            mode: FieldColorModeId.Fixed,
+            fixedColor: colors[graphs.length % colors.length],
+          };
+        }
+
+        field.config = fieldOptions
+          ? {
+              ...field.config,
+              unit: fieldOptions.defaults.unit,
+              decimals: fieldOptions.defaults.decimals,
+              color,
+            }
+          : { ...field.config, color };
+
+        field.display = getDisplayProcessor({ field, timeZone, theme: config.theme });
+
+        // Time step is used to determine bars width when graph is rendered as bar chart
+        const timeStep = getSeriesTimeStep(timeField);
+        const useMsDateFormat = hasMsResolution(timeField);
+
+        timeField.display = getDisplayProcessor({
+          timeZone,
+          field: {
+            ...timeField,
+            type: timeField.type,
+            config: {
+              unit: systemDateFormats.getTimeFieldUnit(useMsDateFormat),
+            },
+          },
+          theme: config.theme,
+        });
+
+        graphs.push({
+          label: getFieldDisplayName(field, series, dataFrames),
+          data: points,
+          color: field.config.color?.fixedColor,
+          info: statsDisplayValues,
+          isVisible: true,
+          yAxis: {
+            index: (seriesOptions[field.name] && seriesOptions[field.name].yAxis) || 1,
+          },
+          // This index is used later on to retrieve appropriate series/time for X and Y axes
+          seriesIndex: fieldColumnIndex,
+          timeField: { ...timeField },
+          valueField: { ...field },
+          timeStep,
+        });
+      }
+    }
+  }
+
+  return graphs;
+};

public/app/features/explore/flotgraph/types.ts

@@ -0,0 +1,43 @@
+import { LegendOptions, GraphTooltipOptions, LegendDisplayMode } from '@grafana/ui';
+import { YAxis } from '@grafana/data';
+
+export interface SeriesOptions {
+  color?: string;
+  yAxis?: YAxis;
+  [key: string]: any;
+}
+export interface GraphOptions {
+  showBars: boolean;
+  showLines: boolean;
+  showPoints: boolean;
+}
+
+export interface Options {
+  graph: GraphOptions;
+  legend: LegendOptions & GraphLegendEditorLegendOptions;
+  series: {
+    [alias: string]: SeriesOptions;
+  };
+  tooltipOptions: GraphTooltipOptions;
+}
+
+export const defaults: Options = {
+  graph: {
+    showBars: false,
+    showLines: true,
+    showPoints: false,
+  },
+  legend: {
+    displayMode: LegendDisplayMode.List,
+    placement: 'bottom',
+  },
+  series: {},
+  tooltipOptions: { mode: 'single' },
+};
+
+export interface GraphLegendEditorLegendOptions extends LegendOptions {
+  stats?: string[];
+  decimals?: number;
+  sortBy?: string;
+  sortDesc?: boolean;
+}

public/app/features/explore/utils/decorators.ts

@@ -13,7 +13,7 @@ import { config } from '@grafana/runtime';
 import { groupBy } from 'lodash';
 
 import { ExplorePanelData } from '../../../types';
-import { getGraphSeriesModel } from '../../../plugins/panel/graph2/getGraphSeriesModel';
+import { getGraphSeriesModel } from '../flotgraph/getGraphSeriesModel';
 import { dataFrameToLogsModel } from '../../../core/logs_model';
 import { refreshIntervalToSortOrder } from '../../../core/utils/explore';
 import { LegendDisplayMode } from '@grafana/ui';

public/app/features/plugins/built_in_plugins.ts

@@ -39,7 +39,6 @@ const tempoPlugin = async () =>
   await import(/* webpackChunkName: "tempoPlugin" */ 'app/plugins/datasource/tempo/module');
 
 import * as textPanel from 'app/plugins/panel/text/module';
-import * as graph2Panel from 'app/plugins/panel/graph2/module';
 import * as graph3Panel from 'app/plugins/panel/graph3/module';
 import * as graphPanel from 'app/plugins/panel/graph/module';
 import * as dashListPanel from 'app/plugins/panel/dashlist/module';
@@ -82,7 +81,6 @@ const builtInPlugins: any = {
   'app/plugins/datasource/tempo/module': tempoPlugin,
 
   'app/plugins/panel/text/module': textPanel,
-  'app/plugins/panel/graph2/module': graph2Panel,
   'app/plugins/panel/graph3/module': graph3Panel,
   'app/plugins/panel/graph/module': graphPanel,
   'app/plugins/panel/dashlist/module': dashListPanel,