XYChart: Refactor to new model (behind feature toggle) (#82499)

Co-authored-by: drew08t <drew08@gmail.com>
Co-authored-by: Ihor Yeromin <yeryomin.igor@gmail.com>

.betterer.results

@@ -129,6 +129,9 @@ exports[`better eslint`] = {
       [0, 0, 0, "Do not use any type assertions.", "1"],
       [0, 0, 0, "Do not use any type assertions.", "2"]
     ],
+    "packages/grafana-data/src/field/fieldState.ts:5381": [
+      [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
+    ],
     "packages/grafana-data/src/field/overrides/processors.ts:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "1"],
@@ -5943,6 +5946,32 @@ exports[`better eslint`] = {
       [0, 0, 0, "Unexpected any. Specify a different type.", "9"],
       [0, 0, 0, "Do not use any type assertions.", "10"]
     ],
+    "public/app/plugins/panel/xychart/v2/SeriesEditor.tsx:5381": [
+      [0, 0, 0, "Do not use any type assertions.", "0"],
+      [0, 0, 0, "Do not use any type assertions.", "1"],
+      [0, 0, 0, "Do not use any type assertions.", "2"],
+      [0, 0, 0, "Do not use any type assertions.", "3"],
+      [0, 0, 0, "Do not use any type assertions.", "4"]
+    ],
+    "public/app/plugins/panel/xychart/v2/migrations.ts:5381": [
+      [0, 0, 0, "Do not use any type assertions.", "0"],
+      [0, 0, 0, "Do not use any type assertions.", "1"]
+    ],
+    "public/app/plugins/panel/xychart/v2/scatter.ts:5381": [
+      [0, 0, 0, "Do not use any type assertions.", "0"],
+      [0, 0, 0, "Do not use any type assertions.", "1"],
+      [0, 0, 0, "Do not use any type assertions.", "2"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "3"],
+      [0, 0, 0, "Do not use any type assertions.", "4"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "5"],
+      [0, 0, 0, "Do not use any type assertions.", "6"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "7"],
+      [0, 0, 0, "Do not use any type assertions.", "8"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "9"]
+    ],
+    "public/app/plugins/panel/xychart/v2/utils.ts:5381": [
+      [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
+    ],
     "public/app/store/configureStore.ts:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
     ],

devenv/dev-dashboards/panel-xychart/xychart-example.json

@@ -206,7 +206,7 @@
           {
             "name": "Male",
             "pointColor": {
-              "fixed": "#5795f200"
+              "fixed": "#5795f2"
             },
             "pointSize": {
               "fixed": 5,
@@ -219,7 +219,7 @@
           {
             "name": "Female",
             "pointColor": {
-              "fixed": "#ff983000"
+              "fixed": "#ff9830"
             },
             "pointSize": {
               "fixed": 5,

docs/sources/setup-grafana/configure-grafana/feature-toggles/index.md

@@ -72,6 +72,7 @@ Some features are enabled by default. You can disable these feature by setting t
 | `autoMigratePiechartPanel`             | Migrate old piechart panel to supported piechart panel - broken out from autoMigrateOldPanels to enable granular tracking                                                                    |
 | `autoMigrateWorldmapPanel`             | Migrate old worldmap panel to supported geomap panel - broken out from autoMigrateOldPanels to enable granular tracking                                                                      |
 | `autoMigrateStatPanel`                 | Migrate old stat panel to supported stat panel - broken out from autoMigrateOldPanels to enable granular tracking                                                                            |
+| `autoMigrateXYChartPanel`              | Migrate old XYChart panel to new XYChart2 model                                                                                                                                              |
 | `disableAngular`                       | Dynamic flag to disable angular at runtime. The preferred method is to set `angular_support_enabled` to `false` in the [security] settings, which allows you to change the state at runtime. |
 | `newVizTooltips`                       | New visualizations tooltips UX                                                                                                                                                               |
 | `returnToPrevious`                     | Enables the return to previous context functionality                                                                                                                                         |

packages/grafana-data/src/dataframe/index.ts

@@ -1,6 +1,5 @@
 export * from './DataFrameView';
 export * from './FieldCache';
-export * from './CircularDataFrame';
 export * from './MutableDataFrame';
 export * from './processDataFrame';
 export * from './dimensions';

packages/grafana-data/src/field/fieldState.ts

@@ -1,4 +1,12 @@
-import { DataFrame, Field, TIME_SERIES_VALUE_FIELD_NAME, FieldType, TIME_SERIES_TIME_FIELD_NAME } from '../types';
+import { getFieldMatcher } from '../transformations';
+import {
+  DataFrame,
+  Field,
+  TIME_SERIES_VALUE_FIELD_NAME,
+  FieldType,
+  TIME_SERIES_TIME_FIELD_NAME,
+  FieldConfigSource,
+} from '../types';
 import { formatLabels } from '../utils/labels';
 
 /**
@@ -51,6 +59,53 @@ export function cacheFieldDisplayNames(frames: DataFrame[]) {
   });
 }
 
+/**
+ *
+ * moves each field's config.custom.hideFrom to field.state.hideFrom
+ * and mutates orgiginal field.config.custom.hideFrom to one with explicit overrides only, (without the ad-hoc stateful __system override from legend toggle)
+ */
+export function decoupleHideFromState(frames: DataFrame[], fieldConfig: FieldConfigSource<any>) {
+  frames.forEach((frame) => {
+    frame.fields.forEach((field) => {
+      const hideFrom = {
+        legend: false,
+        tooltip: false,
+        viz: false,
+        ...fieldConfig.defaults.custom?.hideFrom,
+      };
+
+      // with ad hoc __system override applied
+      const hideFromState = field.config.custom?.hideFrom;
+
+      fieldConfig.overrides.forEach((o) => {
+        if ('__systemRef' in o) {
+          return;
+        }
+
+        const m = getFieldMatcher(o.matcher);
+
+        if (m(field, frame, frames)) {
+          for (const p of o.properties) {
+            if (p.id === 'custom.hideFrom') {
+              Object.assign(hideFrom, p.value);
+            }
+          }
+        }
+      });
+
+      field.state = {
+        ...field.state,
+        hideFrom: {
+          ...hideFromState,
+        },
+      };
+
+      // original with perm overrides
+      field.config.custom.hideFrom = hideFrom;
+    });
+  });
+}
+
 export function getFieldDisplayName(field: Field, frame?: DataFrame, allFrames?: DataFrame[]): string {
   const existingTitle = field.state?.displayName;
   const multipleFrames = Boolean(allFrames && allFrames.length > 1);

packages/grafana-data/src/index.ts

@@ -48,3 +48,4 @@ export { getLinksSupplier } from './field/fieldOverrides';
 export { CircularVector } from './vector/CircularVector';
 export { vectorator } from './vector/FunctionalVector';
 export { ArrayVector } from './vector/ArrayVector';
+export * from './dataframe/CircularDataFrame';

packages/grafana-data/src/types/dataFrame.ts

@@ -1,3 +1,5 @@
+import { HideSeriesConfig } from '@grafana/schema';
+
 import { ScopedVars } from './ScopedVars';
 import { QueryResultBase, Labels, NullValueMode } from './data';
 import { DataLink, LinkModel } from './dataLink';
@@ -231,6 +233,15 @@ export interface FieldState {
    * It's up to each visualization to calculate and set this.
    */
   alignmentFactors?: DisplayValueAlignmentFactors;
+
+  /**
+   * This is the current ad-hoc state of whether this series is hidden in viz, tooltip, and legend.
+   *
+   * Currently this will match field.config.custom.hideFrom because fieldOverrides applies the special __system
+   * override to the actual config during toggle via legend. This should go away once we have a unified system
+   * for layering ad hoc field overrides and options but still being able to get the stateless fieldConfig and panel options
+   */
+  hideFrom?: HideSeriesConfig;
 }
 
 /** @public */

packages/grafana-data/src/types/featureToggles.gen.ts

@@ -38,6 +38,7 @@ export interface FeatureToggles {
   autoMigratePiechartPanel?: boolean;
   autoMigrateWorldmapPanel?: boolean;
   autoMigrateStatPanel?: boolean;
+  autoMigrateXYChartPanel?: boolean;
   disableAngular?: boolean;
   canvasPanelNesting?: boolean;
   newVizTooltips?: boolean;

packages/grafana-schema/src/raw/composable/xychart2/panelcfg/x/XYChartPanelCfg_types.gen.ts

@@ -0,0 +1,95 @@
+// Code generated - EDITING IS FUTILE. DO NOT EDIT.
+//
+// Generated by:
+//     public/app/plugins/gen.go
+// Using jennies:
+//     TSTypesJenny
+//     PluginTsTypesJenny
+//
+// Run 'make gen-cue' from repository root to regenerate.
+
+import * as common from '@grafana/schema';
+
+export const pluginVersion = "11.0.0-pre";
+
+/**
+ * Auto is "table" in the UI
+ */
+export enum SeriesMapping {
+  Auto = 'auto',
+  Manual = 'manual',
+}
+
+export enum XYShowMode {
+  Lines = 'lines',
+  Points = 'points',
+  PointsAndLines = 'points+lines',
+}
+
+/**
+ * NOTE: (copied from dashboard_kind.cue, since not exported)
+ * Matcher is a predicate configuration. Based on the config a set of field(s) or values is filtered in order to apply override / transformation.
+ * It comes with in id ( to resolve implementation from registry) and a configuration that’s specific to a particular matcher type.
+ */
+export interface MatcherConfig {
+  /**
+   * The matcher id. This is used to find the matcher implementation from registry.
+   */
+  id: string;
+  /**
+   * The matcher options. This is specific to the matcher implementation.
+   */
+  options?: unknown;
+}
+
+export const defaultMatcherConfig: Partial<MatcherConfig> = {
+  id: '',
+};
+
+export interface FieldConfig extends common.HideableFieldConfig, common.AxisConfig {
+  lineStyle?: common.LineStyle;
+  /**
+   * lineColor?: common.ColorDimensionConfig
+   */
+  lineWidth?: number;
+  pointSize?: {
+    fixed?: number;
+    min?: number;
+    max?: number;
+  };
+  show?: XYShowMode;
+}
+
+export const defaultFieldConfig: Partial<FieldConfig> = {
+  show: XYShowMode.Points,
+};
+
+export interface XYSeriesConfig {
+  color?: {
+    matcher: MatcherConfig;
+  };
+  frame?: {
+    matcher: MatcherConfig;
+  };
+  name?: {
+    fixed?: string;
+  };
+  size?: {
+    matcher: MatcherConfig;
+  };
+  x?: {
+    matcher: MatcherConfig;
+  };
+  y?: {
+    matcher: MatcherConfig;
+  };
+}
+
+export interface Options extends common.OptionsWithLegend, common.OptionsWithTooltip {
+  mapping: SeriesMapping;
+  series: Array<XYSeriesConfig>;
+}
+
+export const defaultOptions: Partial<Options> = {
+  series: [],
+};

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

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

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

@@ -70,7 +70,12 @@ export const VizLegendListItem = <T = unknown,>({
       className={cx(styles.itemWrapper, item.disabled && styles.itemDisabled, className)}
       data-testid={selectors.components.VizLegend.seriesName(item.label)}
     >
-      <VizLegendSeriesIcon seriesName={item.label} color={item.color} gradient={item.gradient} readonly={readonly} />
+      <VizLegendSeriesIcon
+        seriesName={item.fieldName ?? item.label}
+        color={item.color}
+        gradient={item.gradient}
+        readonly={readonly}
+      />
       <button
         disabled={readonly}
         type="button"

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

@@ -69,7 +69,7 @@ export const LegendTableItem = ({
     <tr className={cx(styles.row, className)}>
       <td>
         <span className={styles.itemWrapper}>
-          <VizLegendSeriesIcon color={item.color} seriesName={item.label} readonly={readonly} />
+          <VizLegendSeriesIcon color={item.color} seriesName={item.fieldName ?? item.label} readonly={readonly} />
           <button
             disabled={readonly}
             type="button"

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

@@ -47,5 +47,6 @@ export interface VizLegendItem<T = any> {
   // displayValues?: DisplayValue[];
   getDisplayValues?: () => DisplayValue[];
   fieldIndex?: DataFrameFieldIndex;
+  fieldName?: string;
   data?: T;
 }

pkg/services/featuremgmt/registry.go

@@ -159,6 +159,13 @@ var (
 			FrontendOnly: true,
 			Owner:        grafanaDatavizSquad,
 		},
+		{
+			Name:         "autoMigrateXYChartPanel",
+			Description:  "Migrate old XYChart panel to new XYChart2 model",
+			Stage:        FeatureStagePublicPreview,
+			FrontendOnly: true,
+			Owner:        grafanaDatavizSquad,
+		},
 		{
 			Name:              "disableAngular",
 			Description:       "Dynamic flag to disable angular at runtime. The preferred method is to set `angular_support_enabled` to `false` in the [security] settings, which allows you to change the state at runtime.",

pkg/services/featuremgmt/toggles_gen.csv

@@ -19,6 +19,7 @@ autoMigrateTablePanel,preview,@grafana/dataviz-squad,false,false,true
 autoMigratePiechartPanel,preview,@grafana/dataviz-squad,false,false,true
 autoMigrateWorldmapPanel,preview,@grafana/dataviz-squad,false,false,true
 autoMigrateStatPanel,preview,@grafana/dataviz-squad,false,false,true
+autoMigrateXYChartPanel,preview,@grafana/dataviz-squad,false,false,true
 disableAngular,preview,@grafana/dataviz-squad,false,false,true
 canvasPanelNesting,experimental,@grafana/dataviz-squad,false,false,true
 newVizTooltips,preview,@grafana/dataviz-squad,false,false,true

pkg/services/featuremgmt/toggles_gen.go

@@ -87,6 +87,10 @@ const (
 	// Migrate old stat panel to supported stat panel - broken out from autoMigrateOldPanels to enable granular tracking
 	FlagAutoMigrateStatPanel = "autoMigrateStatPanel"
 
+	// FlagAutoMigrateXYChartPanel
+	// Migrate old XYChart panel to new XYChart2 model
+	FlagAutoMigrateXYChartPanel = "autoMigrateXYChartPanel"
+
 	// FlagDisableAngular
 	// Dynamic flag to disable angular at runtime. The preferred method is to set `angular_support_enabled` to `false` in the [security] settings, which allows you to change the state at runtime.
 	FlagDisableAngular = "disableAngular"

pkg/services/featuremgmt/toggles_gen.json

@@ -2177,6 +2177,19 @@
         "codeowner": "@grafana/sharing-squad",
         "frontend": true
       }
+    },
+    {
+      "metadata": {
+        "name": "autoMigrateXYChartPanel",
+        "resourceVersion": "1711119444221",
+        "creationTimestamp": "2024-03-22T14:57:24Z"
+      },
+      "spec": {
+        "description": "Migrate old XYChart panel to new XYChart2 model",
+        "stage": "preview",
+        "codeowner": "@grafana/dataviz-squad",
+        "frontend": true
+      }
     }
   ]
 }

public/app/features/dashboard/state/DashboardMigrator.ts

@@ -1403,7 +1403,7 @@ function upgradeValueMappings(oldMappings: any, thresholds?: ThresholdsConfig):
 }
 
 function migrateTooltipOptions(panel: PanelModel) {
-  if (panel.type === 'timeseries' || panel.type === 'xychart') {
+  if (panel.type === 'timeseries' || panel.type === 'xychart' || panel.type === 'xychart2') {
     if (panel.options.tooltipOptions) {
       panel.options = {
         ...panel.options,

public/app/features/plugins/built_in_plugins.ts

@@ -26,6 +26,7 @@ const mssqlPlugin = async () =>
 const alertmanagerPlugin = async () =>
   await import(/* webpackChunkName: "alertmanagerPlugin" */ 'app/plugins/datasource/alertmanager/module');
 
+import { config } from '@grafana/runtime';
 import * as alertListPanel from 'app/plugins/panel/alertlist/module';
 import * as annoListPanel from 'app/plugins/panel/annolist/module';
 import * as barChartPanel from 'app/plugins/panel/barchart/module';
@@ -51,12 +52,18 @@ import * as timeseriesPanel from 'app/plugins/panel/timeseries/module';
 import * as tracesPanel from 'app/plugins/panel/traces/module';
 import * as trendPanel from 'app/plugins/panel/trend/module';
 import * as welcomeBanner from 'app/plugins/panel/welcome/module';
-import * as xyChartPanel from 'app/plugins/panel/xychart/module';
 
 // Async loaded panels
 const geomapPanel = async () => await import(/* webpackChunkName: "geomapPanel" */ 'app/plugins/panel/geomap/module');
 const canvasPanel = async () => await import(/* webpackChunkName: "canvasPanel" */ 'app/plugins/panel/canvas/module');
 const graphPanel = async () => await import(/* webpackChunkName: "graphPlugin" */ 'app/plugins/panel/graph/module');
+const xychartPanel = async () => {
+  if (config.featureToggles.autoMigrateXYChartPanel) {
+    return await import(/* webpackChunkName: "xychart2" */ 'app/plugins/panel/xychart/v2/module');
+  } else {
+    return await import(/* webpackChunkName: "xychart" */ 'app/plugins/panel/xychart/module');
+  }
+};
 const heatmapPanel = async () =>
   await import(/* webpackChunkName: "heatmapPanel" */ 'app/plugins/panel/heatmap/module');
 const tableOldPanel = async () =>
@@ -89,7 +96,7 @@ const builtInPlugins: Record<string, System.Module | (() => Promise<System.Modul
   'core:plugin/status-history': statusHistoryPanel,
   'core:plugin/candlestick': candlestickPanel,
   'core:plugin/graph': graphPanel,
-  'core:plugin/xychart': xyChartPanel,
+  'core:plugin/xychart': xychartPanel,
   'core:plugin/geomap': geomapPanel,
   'core:plugin/canvas': canvasPanel,
   'core:plugin/dashlist': dashListPanel,

public/app/plugins/panel/xychart/v2/README.md

@@ -0,0 +1,3 @@
+# XY Chart - Native Plugin
+
+Support arbitrary X vs Y in graph

public/app/plugins/panel/xychart/v2/SeriesEditor.tsx

@@ -0,0 +1,326 @@
+import { css, cx } from '@emotion/css';
+import React, { Fragment, useState } from 'react';
+import { usePrevious } from 'react-use';
+
+import {
+  getFrameDisplayName,
+  StandardEditorProps,
+  // getFieldDisplayName,
+  FrameMatcherID,
+  FieldMatcherID,
+  FieldNamePickerBaseNameMode,
+  FieldType,
+  GrafanaTheme2,
+} from '@grafana/data';
+import { Button, Field, IconButton, Select, useStyles2 } from '@grafana/ui';
+import { FieldNamePicker } from '@grafana/ui/src/components/MatchersUI/FieldNamePicker';
+import { LayerName } from 'app/core/components/Layers/LayerName';
+
+import { Options, SeriesMapping, XYSeriesConfig } from './panelcfg.gen';
+
+export const SeriesEditor = ({
+  value: seriesCfg,
+  onChange,
+  context,
+}: StandardEditorProps<XYSeriesConfig[], unknown, Options>) => {
+  const style = useStyles2(getStyles);
+
+  // reset opts when mapping changes (no way to do this in panel opts builder?)
+  const mapping = context.options?.mapping as SeriesMapping;
+  const prevMapping = usePrevious(mapping);
+  const mappingChanged = prevMapping != null && mapping !== prevMapping;
+
+  if (mappingChanged || seriesCfg == null || seriesCfg.length === 0) {
+    seriesCfg = [{}];
+    onChange([...seriesCfg]);
+  }
+
+  const [selectedIdx, setSelectedIdx] = useState(0);
+
+  const addSeries = () => {
+    seriesCfg = seriesCfg.concat({});
+    setSelectedIdx(seriesCfg.length - 1);
+    onChange([...seriesCfg]);
+  };
+
+  const deleteSeries = (index: number) => {
+    seriesCfg = seriesCfg.filter((s, i) => i !== index);
+    setSelectedIdx(0);
+    onChange([...seriesCfg]);
+  };
+
+  const series = seriesCfg[selectedIdx];
+
+  const formKey = `${mapping}${selectedIdx}`;
+
+  const baseNameMode =
+    mapping === SeriesMapping.Manual
+      ? FieldNamePickerBaseNameMode.ExcludeBaseNames
+      : context.data.length === 1
+        ? FieldNamePickerBaseNameMode.IncludeAll
+        : FieldNamePickerBaseNameMode.OnlyBaseNames;
+
+  context.data.forEach((frame, frameIndex) => {
+    frame.fields.forEach((field, fieldIndex) => {
+      field.state = {
+        ...field.state,
+        origin: {
+          frameIndex,
+          fieldIndex,
+        },
+      };
+    });
+  });
+
+  return (
+    <>
+      {mapping === SeriesMapping.Manual && (
+        <>
+          <Button icon="plus" size="sm" variant="secondary" onClick={addSeries} className={style.marginBot}>
+            Add series
+          </Button>
+
+          <div className={style.marginBot}>
+            {seriesCfg.map((series, index) => {
+              return (
+                <div
+                  key={`series/${index}`}
+                  className={index === selectedIdx ? `${style.row} ${style.sel}` : style.row}
+                  onClick={() => setSelectedIdx(index)}
+                  role="button"
+                  aria-label={`Select series ${index + 1}`}
+                  tabIndex={0}
+                  onKeyPress={(e) => {
+                    if (e.key === 'Enter') {
+                      setSelectedIdx(index);
+                    }
+                  }}
+                >
+                  <LayerName
+                    name={series.name?.fixed ?? `Series ${index + 1}`}
+                    onChange={(v) => {
+                      series.name = {
+                        fixed: v === '' || v === `Series ${index + 1}` ? undefined : v,
+                      };
+                      onChange([...seriesCfg]);
+                    }}
+                  />
+                  <IconButton
+                    name="trash-alt"
+                    title={'remove'}
+                    className={cx(style.actionIcon)}
+                    onClick={() => deleteSeries(index)}
+                    tooltip="Delete series"
+                  />
+                </div>
+              );
+            })}
+          </div>
+        </>
+      )}
+
+      <Fragment key={formKey}>
+        <Field label="Frame">
+          <Select
+            placeholder={mapping === SeriesMapping.Auto ? 'All frames' : 'Select frame'}
+            isClearable={true}
+            options={context.data.map((frame, index) => ({
+              value: index,
+              label: `${getFrameDisplayName(frame, index)} (index: ${index}, rows: ${frame.length})`,
+            }))}
+            value={series.frame?.matcher.options}
+            onChange={(opt) => {
+              if (opt == null) {
+                delete series.frame;
+              } else {
+                series.frame = {
+                  matcher: {
+                    id: FrameMatcherID.byIndex,
+                    options: Number(opt.value),
+                  },
+                };
+              }
+
+              onChange([...seriesCfg]);
+            }}
+          />
+        </Field>
+        <Field label="X field">
+          <FieldNamePicker
+            value={series.x?.matcher.options as string}
+            context={context}
+            onChange={(fieldName) => {
+              if (fieldName == null) {
+                delete series.x;
+              } else {
+                // TODO: reset any other dim that was set to fieldName
+                series.x = {
+                  matcher: {
+                    id: FieldMatcherID.byName,
+                    options: fieldName,
+                  },
+                };
+              }
+
+              onChange([...seriesCfg]);
+            }}
+            item={{
+              id: 'x',
+              name: 'x',
+              settings: {
+                filter: (field) =>
+                  (mapping === SeriesMapping.Auto ||
+                    field.state?.origin?.frameIndex === series.frame?.matcher.options) &&
+                  field.type === FieldType.number &&
+                  !field.config.custom?.hideFrom?.viz,
+                baseNameMode,
+                placeholderText: mapping === SeriesMapping.Auto ? 'First number field in each frame' : undefined,
+              },
+            }}
+          />
+        </Field>
+        <Field label="Y field">
+          <FieldNamePicker
+            value={series.y?.matcher?.options as string}
+            context={context}
+            onChange={(fieldName) => {
+              if (fieldName == null) {
+                delete series.y;
+              } else {
+                // TODO: reset any other dim that was set to fieldName
+                series.y = {
+                  matcher: {
+                    id: FieldMatcherID.byName,
+                    options: fieldName,
+                  },
+                };
+              }
+
+              onChange([...seriesCfg]);
+            }}
+            item={{
+              id: 'y',
+              name: 'y',
+              settings: {
+                // TODO: filter out series.y?.exclude.options, series.size.matcher.options, series.color.matcher.options
+                filter: (field) =>
+                  (mapping === SeriesMapping.Auto ||
+                    field.state?.origin?.frameIndex === series.frame?.matcher.options) &&
+                  field.type === FieldType.number &&
+                  !field.config.custom?.hideFrom?.viz,
+                baseNameMode,
+                placeholderText: mapping === SeriesMapping.Auto ? 'Remaining number fields in each frame' : undefined,
+              },
+            }}
+          />
+        </Field>
+        <Field label="Size field">
+          <FieldNamePicker
+            value={series.size?.matcher?.options as string}
+            context={context}
+            onChange={(fieldName) => {
+              if (fieldName == null) {
+                delete series.size;
+              } else {
+                // TODO: reset any other dim that was set to fieldName
+                series.size = {
+                  matcher: {
+                    id: FieldMatcherID.byName,
+                    options: fieldName,
+                  },
+                };
+              }
+
+              onChange([...seriesCfg]);
+            }}
+            item={{
+              id: 'size',
+              name: 'size',
+              settings: {
+                // TODO: filter out series.y?.exclude.options, series.size.matcher.options, series.color.matcher.options
+                filter: (field) =>
+                  field.name !== series.x?.matcher.options &&
+                  (mapping === SeriesMapping.Auto ||
+                    field.state?.origin?.frameIndex === series.frame?.matcher.options) &&
+                  field.type === FieldType.number &&
+                  !field.config.custom?.hideFrom?.viz,
+                baseNameMode,
+                placeholderText: '',
+              },
+            }}
+          />
+        </Field>
+        <Field label="Color field">
+          <FieldNamePicker
+            value={series.color?.matcher?.options as string}
+            context={context}
+            onChange={(fieldName) => {
+              if (fieldName == null) {
+                delete series.color;
+              } else {
+                // TODO: reset any other dim that was set to fieldName
+                series.color = {
+                  matcher: {
+                    id: FieldMatcherID.byName,
+                    options: fieldName,
+                  },
+                };
+              }
+
+              onChange([...seriesCfg]);
+            }}
+            item={{
+              id: 'color',
+              name: 'color',
+              settings: {
+                // TODO: filter out series.y?.exclude.options, series.size.matcher.options, series.color.matcher.options
+                filter: (field) =>
+                  field.name !== series.x?.matcher.options &&
+                  (mapping === SeriesMapping.Auto ||
+                    field.state?.origin?.frameIndex === series.frame?.matcher.options) &&
+                  field.type === FieldType.number &&
+                  !field.config.custom?.hideFrom?.viz,
+                baseNameMode,
+                placeholderText: '',
+              },
+            }}
+          />
+        </Field>
+      </Fragment>
+    </>
+  );
+};
+
+const getStyles = (theme: GrafanaTheme2) => ({
+  marginBot: css({
+    marginBottom: '20px',
+  }),
+  row: css({
+    padding: `${theme.spacing(0.5, 1)}`,
+    borderRadius: `${theme.shape.radius.default}`,
+    background: `${theme.colors.background.secondary}`,
+    minHeight: `${theme.spacing(4)}`,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    marginBottom: '3px',
+    cursor: 'pointer',
+
+    border: `1px solid ${theme.components.input.borderColor}`,
+    '&:hover': {
+      border: `1px solid ${theme.components.input.borderHover}`,
+    },
+  }),
+  sel: css({
+    border: `1px solid ${theme.colors.primary.border}`,
+    '&:hover': {
+      border: `1px solid ${theme.colors.primary.border}`,
+    },
+  }),
+  actionIcon: css({
+    color: `${theme.colors.text.secondary}`,
+    '&:hover': {
+      color: `${theme.colors.text}`,
+    },
+  }),
+});

public/app/plugins/panel/xychart/v2/XYChartPanel.tsx

@@ -0,0 +1,130 @@
+import { css } from '@emotion/css';
+import React, { useMemo } from 'react';
+
+import { PanelProps } from '@grafana/data';
+import { alpha } from '@grafana/data/src/themes/colorManipulator';
+import { config } from '@grafana/runtime';
+import {
+  TooltipDisplayMode,
+  TooltipPlugin2,
+  UPlotChart,
+  VizLayout,
+  VizLegend,
+  VizLegendItem,
+  useStyles2,
+} from '@grafana/ui';
+import { TooltipHoverMode } from '@grafana/ui/src/components/uPlot/plugins/TooltipPlugin2';
+
+import { XYChartTooltip } from './XYChartTooltip';
+import { Options } from './panelcfg.gen';
+import { prepConfig } from './scatter';
+import { prepSeries } from './utils';
+
+type Props2 = PanelProps<Options>;
+
+export const XYChartPanel2 = (props: Props2) => {
+  const styles = useStyles2(getStyles);
+
+  let { mapping, series: mappedSeries } = props.options;
+
+  // regenerate series schema when mappings or data changes
+  let series = useMemo(
+    () => prepSeries(mapping, mappedSeries, props.data.series, props.fieldConfig),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [mapping, mappedSeries, props.data.series, props.fieldConfig]
+  );
+
+  // if series changed due to mappings or data structure, re-init config & renderers
+  let { builder, prepData } = useMemo(
+    () => prepConfig(series, config.theme2),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [mapping, mappedSeries, props.data.structureRev, props.fieldConfig]
+  );
+
+  // generate data struct for uPlot mode: 2
+  let data = useMemo(
+    () => prepData(series),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [series]
+  );
+
+  // todo: handle errors
+  let error = builder == null || data.length === 0 ? 'Err' : '';
+
+  // TODO: React.memo()
+  const renderLegend = () => {
+    const items: VizLegendItem[] = [];
+
+    series.forEach((s, idx) => {
+      let yField = s.y.field;
+      let config = yField.config;
+      let custom = config.custom;
+
+      if (!custom.hideFrom?.legend) {
+        items.push({
+          yAxis: 1, // TODO: pull from y field
+          label: s.name.value,
+          color: alpha(s.color.fixed!, 1),
+          getItemKey: () => `${idx}-${s.name.value}`,
+          fieldName: yField.state?.displayName ?? yField.name,
+          disabled: yField.state?.hideFrom?.viz ?? false,
+        });
+      }
+    });
+
+    // sort series by calcs? table mode?
+
+    const { placement, displayMode, width } = props.options.legend;
+
+    return (
+      <VizLayout.Legend placement={placement} width={width}>
+        <VizLegend className={styles.legend} placement={placement} items={items} displayMode={displayMode} />
+      </VizLayout.Legend>
+    );
+  };
+
+  if (error) {
+    return (
+      <div className="panel-empty">
+        <p>{error}</p>
+      </div>
+    );
+  }
+
+  return (
+    <VizLayout width={props.width} height={props.height} legend={renderLegend()}>
+      {(vizWidth: number, vizHeight: number) => (
+        <UPlotChart config={builder!} data={data} width={vizWidth} height={vizHeight}>
+          {props.options.tooltip.mode !== TooltipDisplayMode.None && (
+            <TooltipPlugin2
+              config={builder!}
+              hoverMode={TooltipHoverMode.xyOne}
+              render={(u, dataIdxs, seriesIdx, isPinned, dismiss) => {
+                return (
+                  <XYChartTooltip
+                    data={props.data.series}
+                    dataIdxs={dataIdxs}
+                    xySeries={series}
+                    dismiss={dismiss}
+                    isPinned={isPinned}
+                    seriesIdx={seriesIdx!}
+                  />
+                );
+              }}
+              maxWidth={props.options.tooltip.maxWidth}
+              maxHeight={props.options.tooltip.maxHeight}
+            />
+          )}
+        </UPlotChart>
+      )}
+    </VizLayout>
+  );
+};
+
+const getStyles = () => ({
+  legend: css({
+    div: {
+      justifyContent: 'flex-start',
+    },
+  }),
+});

public/app/plugins/panel/xychart/v2/XYChartTooltip.tsx

@@ -0,0 +1,85 @@
+import React, { ReactNode } from 'react';
+
+import { DataFrame } from '@grafana/data';
+import { alpha } from '@grafana/data/src/themes/colorManipulator';
+import { useStyles2 } from '@grafana/ui';
+import { VizTooltipContent } from '@grafana/ui/src/components/VizTooltip/VizTooltipContent';
+import { VizTooltipFooter } from '@grafana/ui/src/components/VizTooltip/VizTooltipFooter';
+import { VizTooltipHeader } from '@grafana/ui/src/components/VizTooltip/VizTooltipHeader';
+import { ColorIndicator, VizTooltipItem } from '@grafana/ui/src/components/VizTooltip/types';
+
+import { getDataLinks } from '../../status-history/utils';
+import { getStyles } from '../../timeseries/TimeSeriesTooltip';
+
+import { XYSeries } from './types2';
+import { fmt } from './utils';
+
+export interface Props {
+  dataIdxs: Array<number | null>;
+  seriesIdx: number | null | undefined;
+  isPinned: boolean;
+  dismiss: () => void;
+  data: DataFrame[];
+  xySeries: XYSeries[];
+}
+
+export const XYChartTooltip = ({ dataIdxs, seriesIdx, data, xySeries, dismiss, isPinned }: Props) => {
+  const styles = useStyles2(getStyles);
+
+  const rowIndex = dataIdxs.find((idx) => idx !== null)!;
+
+  const series = xySeries[seriesIdx! - 1];
+  const xField = series.x.field;
+  const yField = series.y.field;
+
+  let label = series.name.value;
+
+  let seriesColor = series.color.fixed;
+  // let colorField = series.color.field;
+  // let pointColor: string;
+
+  // if (colorField != null) {
+  //   pointColor = colorField.display?.(colorField.values[rowIndex]).color!;
+  // }
+
+  const headerItem: VizTooltipItem = {
+    label,
+    value: '',
+    color: alpha(seriesColor!, 0.5),
+    colorIndicator: ColorIndicator.marker_md,
+  };
+
+  const contentItems: VizTooltipItem[] = [
+    {
+      label: xField.state?.displayName ?? xField.name,
+      value: fmt(xField, xField.values[rowIndex]),
+    },
+    {
+      label: yField.state?.displayName ?? yField.name,
+      value: fmt(yField, yField.values[rowIndex]),
+    },
+  ];
+
+  series._rest.forEach((field) => {
+    contentItems.push({
+      label: field.state?.displayName ?? field.name,
+      value: fmt(field, field.values[rowIndex]),
+    });
+  });
+
+  let footer: ReactNode;
+
+  if (isPinned && seriesIdx != null) {
+    const links = getDataLinks(yField, rowIndex);
+
+    footer = <VizTooltipFooter dataLinks={links} />;
+  }
+
+  return (
+    <div className={styles.wrapper}>
+      <VizTooltipHeader item={headerItem} isPinned={isPinned} />
+      <VizTooltipContent items={contentItems} isPinned={isPinned} />
+      {footer}
+    </div>
+  );
+};

public/app/plugins/panel/xychart/v2/config.ts

@@ -0,0 +1,151 @@
+import {
+  FieldColorModeId,
+  FieldConfigProperty,
+  FieldType,
+  identityOverrideProcessor,
+  SetFieldConfigOptionsArgs,
+} from '@grafana/data';
+import { LineStyle } from '@grafana/schema';
+import { commonOptionsBuilder } from '@grafana/ui';
+
+import { LineStyleEditor } from '../../timeseries/LineStyleEditor';
+
+import { FieldConfig, XYShowMode } from './panelcfg.gen';
+
+export const DEFAULT_POINT_SIZE = 5;
+
+export function getScatterFieldConfig(cfg: FieldConfig): SetFieldConfigOptionsArgs<FieldConfig> {
+  return {
+    standardOptions: {
+      [FieldConfigProperty.Min]: {
+        hideFromDefaults: true,
+      },
+      [FieldConfigProperty.Max]: {
+        hideFromDefaults: true,
+      },
+      [FieldConfigProperty.Unit]: {
+        hideFromDefaults: true,
+      },
+      [FieldConfigProperty.Decimals]: {
+        hideFromDefaults: true,
+      },
+      [FieldConfigProperty.NoValue]: {
+        hideFromDefaults: true,
+      },
+      [FieldConfigProperty.DisplayName]: {
+        hideFromDefaults: true,
+      },
+
+      [FieldConfigProperty.Thresholds]: {
+        hideFromDefaults: true,
+      },
+      [FieldConfigProperty.Mappings]: {
+        hideFromDefaults: true,
+      },
+
+      // TODO: this still leaves Color series by: [ Last | Min | Max ]
+      // because item.settings?.bySeriesSupport && colorMode.isByValue
+      [FieldConfigProperty.Color]: {
+        settings: {
+          byValueSupport: true,
+          bySeriesSupport: true,
+          preferThresholdsMode: false,
+        },
+        defaultValue: {
+          mode: FieldColorModeId.PaletteClassic,
+        },
+      },
+    },
+
+    useCustomConfig: (builder) => {
+      builder
+        .addRadio({
+          path: 'show',
+          name: 'Show',
+          defaultValue: cfg.show,
+          settings: {
+            options: [
+              { label: 'Points', value: XYShowMode.Points },
+              { label: 'Lines', value: XYShowMode.Lines },
+              { label: 'Both', value: XYShowMode.PointsAndLines },
+            ],
+          },
+        })
+        // .addGenericEditor(
+        //   {
+        //     path: 'pointSymbol',
+        //     name: 'Point symbol',
+        //     defaultValue: defaultFieldConfig.pointSymbol ?? {
+        //       mode: 'fixed',
+        //       fixed: 'img/icons/marker/circle.svg',
+        //     },
+        //     settings: {
+        //       resourceType: MediaType.Icon,
+        //       folderName: ResourceFolderName.Marker,
+        //       placeholderText: 'Select a symbol',
+        //       placeholderValue: 'img/icons/marker/circle.svg',
+        //       showSourceRadio: false,
+        //     },
+        //     showIf: (c) => c.show !== ScatterShow.Lines,
+        //   },
+        //   SymbolEditor // ResourceDimensionEditor
+        // )
+        .addSliderInput({
+          path: 'pointSize.fixed',
+          name: 'Point size',
+          defaultValue: cfg.pointSize?.fixed ?? DEFAULT_POINT_SIZE,
+          settings: {
+            min: 1,
+            max: 100,
+            step: 1,
+          },
+          showIf: (c) => c.show !== XYShowMode.Lines,
+        })
+        .addNumberInput({
+          path: 'pointSize.min',
+          name: 'Min point size',
+          showIf: (c) => c.show !== XYShowMode.Lines,
+        })
+        .addNumberInput({
+          path: 'pointSize.max',
+          name: 'Max point size',
+          showIf: (c) => c.show !== XYShowMode.Lines,
+        })
+        // .addSliderInput({
+        //   path: 'fillOpacity',
+        //   name: 'Fill opacity',
+        //   defaultValue: 0.4, // defaultFieldConfig.fillOpacity,
+        //   settings: {
+        //     min: 0, // hidden?  or just outlines?
+        //     max: 1,
+        //     step: 0.05,
+        //   },
+        //   showIf: (c) => c.show !== ScatterShow.Lines,
+        // })
+        .addCustomEditor<void, LineStyle>({
+          id: 'lineStyle',
+          path: 'lineStyle',
+          name: 'Line style',
+          showIf: (c) => c.show !== XYShowMode.Points,
+          editor: LineStyleEditor,
+          override: LineStyleEditor,
+          process: identityOverrideProcessor,
+          shouldApply: (f) => f.type === FieldType.number,
+        })
+        .addSliderInput({
+          path: 'lineWidth',
+          name: 'Line width',
+          defaultValue: cfg.lineWidth,
+          settings: {
+            min: 0,
+            max: 10,
+            step: 1,
+          },
+          showIf: (c) => c.show !== XYShowMode.Points,
+        });
+
+      commonOptionsBuilder.addAxisConfig(builder, cfg);
+      commonOptionsBuilder.addHideFrom(builder);
+    },
+  };
+}

public/app/plugins/panel/xychart/v2/migrations.test.ts

@@ -0,0 +1,149 @@
+import { PanelModel } from '@grafana/data';
+
+import { xyChartMigrationHandler } from './migrations';
+import { Options } from './panelcfg.gen';
+
+describe('XYChart migrations', () => {
+  it('keep import', () => {
+    let input = { series: [] } as unknown as Options;
+    const options = xyChartMigrationHandler({
+      pluginVersion: 'x.y.z', // when defined
+      options: input,
+    } as PanelModel);
+
+    // no changes
+    expect(options).toBe(input);
+  });
+
+  /*
+  it('should migrate to new format for GA 10.4 release', () => {
+    const panel = {
+      options: {
+        series: [
+          {
+            x: 'x',
+            y: 'y',
+            size: {
+              fixed: 10,
+            },
+            color: {
+              fixed: 'red',
+            },
+          },
+        ],
+      },
+    } as PanelModel;
+
+    const options = xyChartMigrationHandler(panel);
+    expect(options.series![0].x).toEqual({
+      field: {
+        matcher: {
+          id: 'byName',
+          options: 'x',
+        },
+      },
+    });
+
+    expect(options.series![0].y).toEqual({
+      field: {
+        matcher: {
+          id: 'byName',
+          options: 'y',
+        },
+      },
+    });
+
+    // Update these `as any` when types are settled
+    expect((options.series![0] as any).size).toEqual({
+      fixed: 10,
+    });
+    expect((options.series![0] as any).color).toEqual({
+      fixed: 'red',
+    });
+  });
+
+  // test to make sure that migration does not run if the plugin version is not empty
+  it('should not run migration if plugin version is not empty', () => {
+    const panel = {
+      pluginVersion: '10.4.0',
+      // Old options
+      options: {
+        series: [
+          {
+            x: 'x',
+            y: 'y',
+            size: {
+              fixed: 10,
+            },
+            color: {
+              fixed: 'red',
+            },
+          },
+        ],
+      },
+    } as PanelModel;
+
+    const options = xyChartMigrationHandler(panel);
+    expect(options).toEqual(panel.options);
+  });
+
+  // Include y exclude fields as well as field matchers for size and color
+  it('should include y exclude fields as well as field matchers for size and color', () => {
+    const panel = {
+      options: {
+        series: [
+          {
+            x: 'x',
+            y: 'y',
+            size: {
+              fixed: 10,
+              field: 'size',
+            },
+            color: {
+              fixed: 'red',
+              field: 'color',
+            },
+            dims: {
+              exclude: ['y1', 'y2'],
+            },
+          },
+        ],
+      },
+    } as PanelModel;
+
+    const options = xyChartMigrationHandler(panel);
+    expect(options.series![0].y).toEqual({
+      field: {
+        matcher: {
+          id: 'byName',
+          options: 'y',
+        },
+        exclude: {
+          id: 'byNames',
+          options: ['y1', 'y2'],
+        },
+      },
+    });
+
+    // Update these `as any` when types are settled
+    expect((options.series![0] as any).size).toEqual({
+      fixed: 10,
+      field: {
+        matcher: {
+          id: 'byName',
+          options: 'size',
+        },
+      },
+    });
+    expect((options.series![0] as any).color).toEqual({
+      fixed: 'red',
+      field: {
+        matcher: {
+          id: 'byName',
+          options: 'color',
+        },
+      },
+    });
+  });
+  */
+});

public/app/plugins/panel/xychart/v2/migrations.ts

@@ -0,0 +1,258 @@
+import { FieldMatcherID, FrameMatcherID, MatcherConfig, PanelModel } from '@grafana/data';
+
+import { ScatterSeriesConfig, SeriesMapping, XYDimensionConfig, Options as PrevOptions } from '../panelcfg.gen';
+
+import { XYSeriesConfig, Options } from './panelcfg.gen';
+
+// export const xyChartChangeHandler: PanelTypeChangedHandler = (
+//   panel,
+//   prevPluginId,
+//   prevOptions,
+//   prevFieldConfig
+// ): Options => {
+//   if (prevPluginId === 'xychart') {
+//     return migrateOptions({
+//       options: prevOptions,
+//       fieldConfig: prevFieldConfig,
+//     } as PanelModel);
+//   }
+
+//   return prevOptions as Options;
+// };
+
+export const xyChartMigrationHandler = (panel: PanelModel): Options => {
+  const pluginVersion = panel?.pluginVersion ?? '';
+
+  if (pluginVersion === '') {
+    return migrateOptions(panel);
+  }
+
+  return panel.options as Options;
+};
+
+function migrateOptions(panel: PanelModel): Options {
+  const { dims, seriesMapping, series: oldSeries, ...cleanedOpts } = panel.options as PrevOptions;
+  const { exclude = [], frame: frameShared, x: xShared }: XYDimensionConfig = dims ?? {};
+
+  const custDefaults = panel.fieldConfig.defaults.custom;
+
+  let oldSeries2 = oldSeries;
+
+  if (seriesMapping === SeriesMapping.Auto) {
+    oldSeries2 = [
+      {
+        x: undefined,
+        y: undefined,
+      },
+    ];
+  }
+
+  /*
+  // old manual mode example
+  "series": [
+    {
+      "pointColor": {
+        "fixed": "purple"       // this becomes override for y field.config.custom.pointColor.fixed, (or config.color?)
+        "field": "BMI Male",    // ...unless another field is mapped, then ignore
+      },
+      "pointSize": {
+        "field": "Weight Male",
+        "max": 40,              // this becomes override for y field.config.custom.pointSize.max
+        "min": 1,               // ...and .min
+        "fixed": 50.5
+      },
+      "frame": 0,               // byIndex frame matcher
+      "x": "Height Male",       // byName field matcher, falls back to byType/number field matcher
+      "y": "Weight Male"        // byName field matcher, falls back to byType/number field matcher
+    }
+  ],
+*/
+  let i = 0;
+
+  const newSeries: XYSeriesConfig[] = oldSeries2.map(({ x, y, pointColor, pointSize, frame }: ScatterSeriesConfig) => {
+    const { fixed: colorFixed, field: colorField } = pointColor ?? {};
+    const { fixed: sizeFixed, field: sizeField, min: sizeMin, max: sizeMax } = pointSize ?? {};
+
+    let xMatcherConfig: MatcherConfig;
+    let yMatcherConfig: MatcherConfig;
+
+    // old auto mode did not require x field defined
+    if (x == null && xShared == null) {
+      // TODO: this should just be the internal default. no need to store on save model
+      xMatcherConfig = {
+        id: FieldMatcherID.byType,
+        options: 'number',
+      };
+    } else {
+      xMatcherConfig = {
+        id: FieldMatcherID.byName,
+        options: x ?? xShared,
+      };
+    }
+
+    if (y == null) {
+      // TODO: this should just be the internal default. no need to store on save model
+      yMatcherConfig = {
+        id: FieldMatcherID.byType,
+        options: 'number',
+      };
+    } else {
+      yMatcherConfig = {
+        id: FieldMatcherID.byName,
+        options: y,
+      };
+    }
+
+    if (colorField == null && colorFixed && custDefaults.pointColor?.fixed !== colorFixed) {
+      // NOTE: intentionally not using custom.pointColor.fixed
+      let hasOverride = panel.fieldConfig.overrides.some(
+        (o) =>
+          o.matcher.id === yMatcherConfig.id &&
+          o.matcher.options === yMatcherConfig.options &&
+          o.properties.some((p) => p.id === 'color')
+      );
+
+      if (!hasOverride) {
+        panel.fieldConfig.overrides.push({
+          matcher: yMatcherConfig,
+          properties: [
+            {
+              id: 'color',
+              value: {
+                mode: 'fixed',
+                fixedColor: colorFixed,
+              },
+            },
+          ],
+        });
+      }
+    }
+
+    // add field overrides for custom pointSize.fixed
+    if (sizeField == null && sizeFixed && custDefaults.pointSize?.fixed !== sizeFixed) {
+      let hasOverride = panel.fieldConfig.overrides.some(
+        (o) =>
+          o.matcher.id === yMatcherConfig.id &&
+          o.matcher.options === yMatcherConfig.options &&
+          o.properties.some((p) => p.id === 'custom.pointSize.fixed')
+      );
+
+      if (!hasOverride) {
+        panel.fieldConfig.overrides.push({
+          matcher: yMatcherConfig,
+          properties: [
+            {
+              id: 'custom.pointSize.fixed',
+              value: sizeFixed,
+            },
+          ],
+        });
+      }
+    }
+
+    if (sizeField != null) {
+      // add field overrides for custom pointSize.min
+      if (sizeMin && custDefaults.pointSize?.min !== sizeMin) {
+        let hasOverride = panel.fieldConfig.overrides.some(
+          (o) =>
+            o.matcher.id === yMatcherConfig.id &&
+            o.matcher.options === yMatcherConfig.options &&
+            o.properties.some((p) => p.id === 'custom.pointSize.min')
+        );
+
+        if (!hasOverride) {
+          panel.fieldConfig.overrides.push({
+            matcher: {
+              id: FieldMatcherID.byName,
+              options: sizeField,
+            },
+            properties: [
+              {
+                id: 'custom.pointSize.min',
+                value: sizeMin,
+              },
+            ],
+          });
+        }
+      }
+      // add field overrides for custom pointSize.min
+      if (sizeMax && custDefaults.pointSize?.max !== sizeMax) {
+        let hasOverride = panel.fieldConfig.overrides.some(
+          (o) =>
+            o.matcher.id === yMatcherConfig.id &&
+            o.matcher.options === yMatcherConfig.options &&
+            o.properties.some((p) => p.id === 'custom.pointSize.max')
+        );
+
+        if (!hasOverride) {
+          panel.fieldConfig.overrides.push({
+            matcher: {
+              id: FieldMatcherID.byName,
+              options: sizeField,
+            },
+            properties: [
+              {
+                id: 'custom.pointSize.max',
+                value: sizeMax,
+              },
+            ],
+          });
+        }
+      }
+    }
+
+    return {
+      frame: {
+        matcher: {
+          id: FrameMatcherID.byIndex,
+          options: frame ?? (seriesMapping === SeriesMapping.Manual ? i++ : frameShared ?? 0),
+        },
+      },
+      x: {
+        matcher: xMatcherConfig,
+      },
+      y: {
+        matcher: yMatcherConfig,
+        ...(exclude.length && {
+          exclude: {
+            id: FieldMatcherID.byNames,
+            options: exclude,
+          },
+        }),
+      },
+      ...(colorField && {
+        color: {
+          matcher: {
+            id: FieldMatcherID.byName,
+            options: colorField,
+          },
+        },
+      }),
+      ...(sizeField && {
+        size: {
+          matcher: {
+            id: FieldMatcherID.byName,
+            options: sizeField,
+          },
+        },
+      }),
+    };
+  });
+
+  const newOptions: Options = {
+    ...cleanedOpts,
+    mapping: seriesMapping === SeriesMapping.Auto ? SeriesMapping.Auto : SeriesMapping.Manual,
+    series: newSeries,
+  };
+
+  custDefaults.pointSize = custDefaults.pointSize.fixed;
+
+  // panel.fieldConfig = {
+  //   defaults,
+  //   overrides,
+  // };
+
+  // console.log('xyChartMigrationHandler', panel.options, newOptions);
+
+  return newOptions;
+}

public/app/plugins/panel/xychart/v2/module.tsx

@@ -0,0 +1,37 @@
+import { PanelPlugin } from '@grafana/data';
+import { commonOptionsBuilder } from '@grafana/ui';
+
+import { SeriesEditor } from './SeriesEditor';
+import { XYChartPanel2 } from './XYChartPanel';
+import { getScatterFieldConfig } from './config';
+import { xyChartMigrationHandler } from './migrations';
+import { FieldConfig, defaultFieldConfig, Options } from './panelcfg.gen';
+
+export const plugin = new PanelPlugin<Options, FieldConfig>(XYChartPanel2)
+  // .setPanelChangeHandler(xyChartChangeHandler)
+  .setMigrationHandler(xyChartMigrationHandler)
+  .useFieldConfig(getScatterFieldConfig(defaultFieldConfig))
+  .setPanelOptions((builder) => {
+    builder
+      .addRadio({
+        path: 'mapping',
+        name: 'Series mapping',
+        defaultValue: 'auto',
+        settings: {
+          options: [
+            { value: 'auto', label: 'Auto' },
+            { value: 'manual', label: 'Manual' },
+          ],
+        },
+      })
+      .addCustomEditor({
+        id: 'series',
+        path: 'series',
+        name: '',
+        editor: SeriesEditor,
+        defaultValue: [{}],
+      });
+
+    commonOptionsBuilder.addTooltipOptions(builder, true);
+    commonOptionsBuilder.addLegendOptions(builder);
+  });

public/app/plugins/panel/xychart/v2/panelcfg.cue

@@ -0,0 +1,82 @@
+// Copyright 2023 Grafana Labs
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+package grafanaplugin
+
+import (
+	"github.com/grafana/grafana/packages/grafana-schema/src/common"
+)
+
+composableKinds: PanelCfg: {
+	maturity: "experimental"
+
+	lineage: {
+		schemas: [{
+			version: [0, 0]
+			schema: {
+				SeriesMapping: "auto" | "manual"                   @cuetsy(kind="enum")
+				XYShowMode:    "points" | "lines" | "points+lines" @cuetsy(kind="enum", memberNames="Points|Lines|PointsAndLines")
+
+				// NOTE: (copied from dashboard_kind.cue, since not exported)
+				// Matcher is a predicate configuration. Based on the config a set of field(s) or values is filtered in order to apply override / transformation.
+				// It comes with in id ( to resolve implementation from registry) and a configuration that’s specific to a particular matcher type.
+				#MatcherConfig: {
+					// The matcher id. This is used to find the matcher implementation from registry.
+					id: string | *"" @grafanamaturity(NeedsExpertReview)
+					// The matcher options. This is specific to the matcher implementation.
+					options?: _ @grafanamaturity(NeedsExpertReview)
+				} @cuetsy(kind="interface") @grafana(TSVeneer="type")
+
+				FieldConfig: {
+					common.HideableFieldConfig
+					common.AxisConfig
+
+					show?: XYShowMode & (*"points" | _)
+
+					pointSize?:  {
+						fixed?: int32 & >=0
+						min?:   int32 & >=0
+						max?:   int32 & >=0
+					}
+
+					// pointSymbol?: common.ResourceDimensionConfig
+					// fillOpacity?: number & >=0 & <=1 | *0.5
+					// lineColor?: common.ColorDimensionConfig
+
+					lineWidth?: int32 & >=0
+					lineStyle?: common.LineStyle
+				} @cuetsy(kind="interface",TSVeneer="type")
+
+				XYSeriesConfig: {
+					name?:   { fixed?: string }
+					frame?:  { matcher: #MatcherConfig }
+					x?:      { matcher: #MatcherConfig }
+					y?:      { matcher: #MatcherConfig }
+					color?:  { matcher: #MatcherConfig }
+					size?:   { matcher: #MatcherConfig }
+				} @cuetsy(kind="interface")
+
+				Options: {
+					common.OptionsWithLegend
+					common.OptionsWithTooltip
+
+					mapping: SeriesMapping
+
+					series: [...XYSeriesConfig]
+				} @cuetsy(kind="interface")
+			}
+		}]
+		lenses: []
+	}
+}

public/app/plugins/panel/xychart/v2/panelcfg.gen.ts

@@ -0,0 +1,87 @@
+// Code generated - EDITING IS FUTILE. DO NOT EDIT.
+//
+// Generated by:
+//     public/app/plugins/gen.go
+// Using jennies:
+//     TSTypesJenny
+//     PluginTsTypesJenny
+//
+// Run 'make gen-cue' from repository root to regenerate.
+
+import * as common from '@grafana/schema';
+
+export enum SeriesMapping {
+  Auto = 'auto',
+  Manual = 'manual',
+}
+
+export enum XYShowMode {
+  Lines = 'lines',
+  Points = 'points',
+  PointsAndLines = 'points+lines',
+}
+
+/**
+ * NOTE: (copied from dashboard_kind.cue, since not exported)
+ * Matcher is a predicate configuration. Based on the config a set of field(s) or values is filtered in order to apply override / transformation.
+ * It comes with in id ( to resolve implementation from registry) and a configuration that’s specific to a particular matcher type.
+ */
+export interface MatcherConfig {
+  /**
+   * The matcher id. This is used to find the matcher implementation from registry.
+   */
+  id: string;
+  /**
+   * The matcher options. This is specific to the matcher implementation.
+   */
+  options?: unknown;
+}
+
+export const defaultMatcherConfig: Partial<MatcherConfig> = {
+  id: '',
+};
+
+export interface FieldConfig extends common.HideableFieldConfig, common.AxisConfig {
+  lineStyle?: common.LineStyle;
+  lineWidth?: number;
+  pointSize?: {
+    fixed?: number;
+    min?: number;
+    max?: number;
+  };
+  show?: XYShowMode;
+}
+
+export const defaultFieldConfig: Partial<FieldConfig> = {
+  show: XYShowMode.Points,
+};
+
+export interface XYSeriesConfig {
+  color?: {
+    matcher: MatcherConfig;
+  };
+  frame?: {
+    matcher: MatcherConfig;
+  };
+  name?: {
+    fixed?: string;
+  };
+  size?: {
+    matcher: MatcherConfig;
+  };
+  x?: {
+    matcher: MatcherConfig;
+  };
+  y?: {
+    matcher: MatcherConfig;
+  };
+}
+
+export interface Options extends common.OptionsWithLegend, common.OptionsWithTooltip {
+  mapping: SeriesMapping;
+  series: Array<XYSeriesConfig>;
+}
+
+export const defaultOptions: Partial<Options> = {
+  series: [],
+};

public/app/plugins/panel/xychart/v2/plugin.json

@@ -0,0 +1,19 @@
+{
+  "type": "panel",
+  "name": "XY Chart",
+  "id": "xychart",
+  "state": "beta",
+
+  "info": {
+    "description": "Supports arbitrary X vs Y in a graph to visualize the relationship between two variables.",
+    "keywords": ["scatter", "plot"],
+    "author": {
+      "name": "Grafana Labs",
+      "url": "https://grafana.com"
+    },
+    "logos": {
+      "small": "img/icn-xychart.svg",
+      "large": "img/icn-xychart.svg"
+    }
+  }
+}

public/app/plugins/panel/xychart/v2/scatter.ts

@@ -0,0 +1,482 @@
+import uPlot from 'uplot';
+
+import { formattedValueToString, GrafanaTheme2 } from '@grafana/data';
+import { alpha } from '@grafana/data/src/themes/colorManipulator';
+import { AxisPlacement, ScaleDirection, ScaleOrientation, VisibilityMode } from '@grafana/schema';
+import { UPlotConfigBuilder } from '@grafana/ui';
+import { FacetedData, FacetSeries } from '@grafana/ui/src/components/uPlot/types';
+
+import { pointWithin, Quadtree, Rect } from '../../barchart/quadtree';
+
+import { XYSeries } from './types2';
+import { getCommonPrefixSuffix } from './utils';
+
+interface DrawBubblesOpts {
+  each: (u: uPlot, seriesIdx: number, dataIdx: number, lft: number, top: number, wid: number, hgt: number) => void;
+  disp: {
+    //unit: 3,
+    size: {
+      values: (u: uPlot, seriesIdx: number) => number[];
+    };
+    color: {
+      values: (u: uPlot, seriesIdx: number) => string[];
+      alpha: number;
+    };
+  };
+}
+
+export const prepConfig = (xySeries: XYSeries[], theme: GrafanaTheme2) => {
+  if (xySeries.length === 0) {
+    return { builder: null, prepData: () => [] };
+  }
+
+  let qt: Quadtree;
+  let hRect: Rect | null;
+
+  function drawBubblesFactory(opts: DrawBubblesOpts) {
+    const drawBubbles: uPlot.Series.PathBuilder = (u, seriesIdx, idx0, idx1) => {
+      uPlot.orient(
+        u,
+        seriesIdx,
+        (
+          series,
+          dataX,
+          dataY,
+          scaleX,
+          scaleY,
+          valToPosX,
+          valToPosY,
+          xOff,
+          yOff,
+          xDim,
+          yDim,
+          moveTo,
+          lineTo,
+          rect,
+          arc
+        ) => {
+          const pxRatio = uPlot.pxRatio;
+          const scatterInfo = xySeries[seriesIdx - 1];
+          let d = u.data[seriesIdx] as unknown as FacetSeries;
+
+          // showLine: boolean;
+          // lineStyle: common.LineStyle;
+          // showPoints: common.VisibilityMode;
+
+          let showLine = scatterInfo.showLine;
+          let showPoints = scatterInfo.showPoints === VisibilityMode.Always;
+
+          let strokeWidth = 1;
+
+          u.ctx.save();
+
+          u.ctx.rect(u.bbox.left, u.bbox.top, u.bbox.width, u.bbox.height);
+          u.ctx.clip();
+
+          u.ctx.fillStyle = (series.fill as any)(); // assumes constant
+          u.ctx.strokeStyle = (series.stroke as any)();
+          u.ctx.lineWidth = strokeWidth;
+
+          let deg360 = 2 * Math.PI;
+
+          let xKey = scaleX.key!;
+          let yKey = scaleY.key!;
+
+          // let pointHints = scatterInfo.hints.pointSize;
+          // const colorByValue = scatterInfo.hints.pointColor.mode.isByValue;
+          const pointHints = { max: undefined, fixed: 5 };
+          const colorByValue = false;
+
+          let maxSize = (pointHints.max ?? pointHints.fixed) * pxRatio;
+
+          // todo: this depends on direction & orientation
+          // todo: calc once per redraw, not per path
+          let filtLft = u.posToVal(-maxSize / 2, xKey);
+          let filtRgt = u.posToVal(u.bbox.width / pxRatio + maxSize / 2, xKey);
+          let filtBtm = u.posToVal(u.bbox.height / pxRatio + maxSize / 2, yKey);
+          let filtTop = u.posToVal(-maxSize / 2, yKey);
+
+          let sizes = opts.disp.size.values(u, seriesIdx);
+          let pointColors = opts.disp.color.values(u, seriesIdx);
+          let pointAlpha = opts.disp.color.alpha;
+
+          let linePath: Path2D | null = showLine ? new Path2D() : null;
+
+          let curColor: CanvasRenderingContext2D['fillStyle'] | null = null;
+
+          for (let i = 0; i < d[0].length; i++) {
+            let xVal = d[0][i];
+            let yVal = d[1][i];
+            let size = sizes[i] * pxRatio;
+
+            if (xVal >= filtLft && xVal <= filtRgt && yVal >= filtBtm && yVal <= filtTop) {
+              let cx = valToPosX(xVal, scaleX, xDim, xOff);
+              let cy = valToPosY(yVal, scaleY, yDim, yOff);
+
+              if (showLine) {
+                linePath!.lineTo(cx, cy);
+              }
+
+              if (showPoints) {
+                // if pointHints.fixed? don't recalc size
+                // if pointColor has 0 opacity, draw as single path (assuming all strokes are alpha 1)
+
+                u.ctx.moveTo(cx + size / 2, cy);
+                u.ctx.beginPath();
+                u.ctx.arc(cx, cy, size / 2, 0, deg360);
+
+                if (colorByValue) {
+                  if (pointColors[i] !== curColor) {
+                    curColor = pointColors[i];
+                    u.ctx.fillStyle = alpha(curColor, pointAlpha);
+                    u.ctx.strokeStyle = curColor;
+                  }
+                }
+
+                u.ctx.fill();
+                u.ctx.stroke();
+                opts.each(
+                  u,
+                  seriesIdx,
+                  i,
+                  cx - size / 2 - strokeWidth / 2,
+                  cy - size / 2 - strokeWidth / 2,
+                  size + strokeWidth,
+                  size + strokeWidth
+                );
+              }
+            }
+          }
+
+          if (showLine) {
+            u.ctx.strokeStyle = scatterInfo.color.fixed!;
+            u.ctx.lineWidth = scatterInfo.lineWidth * pxRatio;
+
+            const { lineStyle } = scatterInfo;
+            if (lineStyle && lineStyle.fill !== 'solid') {
+              if (lineStyle.fill === 'dot') {
+                u.ctx.lineCap = 'round';
+              }
+              u.ctx.setLineDash(lineStyle.dash ?? [10, 10]);
+            }
+
+            u.ctx.stroke(linePath!);
+          }
+
+          u.ctx.restore();
+        }
+      );
+
+      return null;
+    };
+
+    return drawBubbles;
+  }
+
+  let drawBubbles = drawBubblesFactory({
+    disp: {
+      size: {
+        //unit: 3, // raw CSS pixels
+        values: (u, seriesIdx) => {
+          return u.data[seriesIdx][2] as any; // already contains final pixel geometry
+          //let [minValue, maxValue] = getSizeMinMax(u);
+          //return u.data[seriesIdx][2].map(v => getSize(v, minValue, maxValue));
+        },
+      },
+      color: {
+        // string values
+        values: (u, seriesIdx) => {
+          return u.data[seriesIdx][3] as any;
+        },
+        alpha: 0.5,
+      },
+    },
+    each: (u, seriesIdx, dataIdx, lft, top, wid, hgt) => {
+      // we get back raw canvas coords (included axes & padding). translate to the plotting area origin
+      lft -= u.bbox.left;
+      top -= u.bbox.top;
+      qt.add({ x: lft, y: top, w: wid, h: hgt, sidx: seriesIdx, didx: dataIdx });
+    },
+  });
+
+  const builder = new UPlotConfigBuilder();
+
+  builder.setCursor({
+    drag: { setScale: true },
+    dataIdx: (u, seriesIdx) => {
+      if (seriesIdx === 1) {
+        const pxRatio = uPlot.pxRatio;
+
+        hRect = null;
+
+        let dist = Infinity;
+        let cx = u.cursor.left! * pxRatio;
+        let cy = u.cursor.top! * pxRatio;
+
+        qt.get(cx, cy, 1, 1, (o) => {
+          if (pointWithin(cx, cy, o.x, o.y, o.x + o.w, o.y + o.h)) {
+            let ocx = o.x + o.w / 2;
+            let ocy = o.y + o.h / 2;
+
+            let dx = ocx - cx;
+            let dy = ocy - cy;
+
+            let d = Math.sqrt(dx ** 2 + dy ** 2);
+
+            // test against radius for actual hover
+            if (d <= o.w / 2) {
+              // only hover bbox with closest distance
+              if (d <= dist) {
+                dist = d;
+                hRect = o;
+              }
+            }
+          }
+        });
+      }
+
+      return hRect && seriesIdx === hRect.sidx ? hRect.didx : null;
+    },
+    points: {
+      size: (u, seriesIdx) => {
+        return hRect && seriesIdx === hRect.sidx ? hRect.w / uPlot.pxRatio : 0;
+      },
+      fill: (u, seriesIdx) => 'rgba(255,255,255,0.4)',
+    },
+  });
+
+  // clip hover points/bubbles to plotting area
+  builder.addHook('init', (u, r) => {
+    // TODO: re-enable once we global portal again
+    u.over.style.overflow = 'hidden';
+  });
+
+  builder.addHook('drawClear', (u) => {
+    qt = qt || new Quadtree(0, 0, u.bbox.width, u.bbox.height);
+
+    qt.clear();
+
+    // force-clear the path cache to cause drawBars() to rebuild new quadtree
+    u.series.forEach((s, i) => {
+      if (i > 0) {
+        // @ts-ignore
+        s._paths = null;
+      }
+    });
+  });
+
+  builder.setMode(2);
+
+  let xField = xySeries[0].x.field;
+
+  let fieldConfig = xField.config;
+  let customConfig = fieldConfig.custom;
+  let scaleDistr = customConfig?.scaleDistribution;
+
+  builder.addScale({
+    scaleKey: 'x',
+    isTime: false,
+    orientation: ScaleOrientation.Horizontal,
+    direction: ScaleDirection.Right,
+    distribution: scaleDistr?.type,
+    log: scaleDistr?.log,
+    linearThreshold: scaleDistr?.linearThreshold,
+    min: fieldConfig.min,
+    max: fieldConfig.max,
+    softMin: customConfig?.axisSoftMin,
+    softMax: customConfig?.axisSoftMax,
+    centeredZero: customConfig?.axisCenteredZero,
+    decimals: fieldConfig.decimals,
+  });
+
+  // why does this fall back to '' instead of null or undef?
+  let xAxisLabel = customConfig.axisLabel;
+
+  if (xAxisLabel == null || xAxisLabel === '') {
+    let dispNames = xySeries.map((s) => s.x.field.state?.displayName ?? '');
+
+    let xAxisAutoLabel =
+      xySeries.length === 1
+        ? xField.state?.displayName ?? xField.name
+        : new Set(dispNames).size === 1
+          ? dispNames[0]
+          : getCommonPrefixSuffix(dispNames);
+
+    if (xAxisAutoLabel !== '') {
+      xAxisLabel = xAxisAutoLabel;
+    }
+  }
+
+  builder.addAxis({
+    scaleKey: 'x',
+    placement: customConfig?.axisPlacement !== AxisPlacement.Hidden ? AxisPlacement.Bottom : AxisPlacement.Hidden,
+    show: customConfig?.axisPlacement !== AxisPlacement.Hidden,
+    grid: { show: customConfig?.axisGridShow },
+    border: { show: customConfig?.axisBorderShow },
+    theme,
+    label: xAxisLabel,
+    formatValue: (v, decimals) => formattedValueToString(xField.display!(v, decimals)),
+  });
+
+  xySeries.forEach((s, si) => {
+    let field = s.y.field;
+
+    const lineColor = s.color.fixed;
+    const pointColor = s.color.fixed;
+    //const lineColor = s.lineColor(frame);
+    //const lineWidth = s.lineWidth;
+
+    let scaleKey = field.config.unit ?? 'y';
+    let config = field.config;
+    let customConfig = config.custom;
+    let scaleDistr = customConfig?.scaleDistribution;
+
+    builder.addScale({
+      scaleKey,
+      orientation: ScaleOrientation.Vertical,
+      direction: ScaleDirection.Up,
+      distribution: scaleDistr?.type,
+      log: scaleDistr?.log,
+      linearThreshold: scaleDistr?.linearThreshold,
+      min: config.min,
+      max: config.max,
+      softMin: customConfig?.axisSoftMin,
+      softMax: customConfig?.axisSoftMax,
+      centeredZero: customConfig?.axisCenteredZero,
+      decimals: config.decimals,
+    });
+
+    // why does this fall back to '' instead of null or undef?
+    let yAxisLabel = customConfig.axisLabel;
+
+    if (yAxisLabel == null || yAxisLabel === '') {
+      let dispNames = xySeries.map((s) => s.y.field.state?.displayName ?? '');
+
+      let yAxisAutoLabel =
+        xySeries.length === 1
+          ? field.state?.displayName ?? field.name
+          : new Set(dispNames).size === 1
+            ? dispNames[0]
+            : getCommonPrefixSuffix(dispNames);
+
+      if (yAxisAutoLabel !== '') {
+        yAxisLabel = yAxisAutoLabel;
+      }
+    }
+
+    builder.addAxis({
+      scaleKey,
+      theme,
+      placement: customConfig?.axisPlacement === AxisPlacement.Auto ? AxisPlacement.Left : customConfig?.axisPlacement,
+      show: customConfig?.axisPlacement !== AxisPlacement.Hidden,
+      grid: { show: customConfig?.axisGridShow },
+      border: { show: customConfig?.axisBorderShow },
+      size: customConfig?.axisWidth,
+      // label: yAxisLabel == null || yAxisLabel === '' ? fieldDisplayName : yAxisLabel,
+      label: yAxisLabel,
+      formatValue: (v, decimals) => formattedValueToString(field.display!(v, decimals)),
+    });
+
+    builder.addSeries({
+      facets: [
+        {
+          scale: 'x',
+          auto: true,
+        },
+        {
+          scale: scaleKey,
+          auto: true,
+        },
+      ],
+      pathBuilder: drawBubbles, // drawBubbles({disp: {size: {values: () => }}})
+      theme,
+      scaleKey: '', // facets' scales used (above)
+      lineColor: alpha('' + lineColor, 1),
+      fillColor: alpha(pointColor ?? '#ffff', 0.5),
+      show: !field.state?.hideFrom?.viz,
+    });
+  });
+
+  /*
+  builder.setPrepData((frames) => {
+    let seriesData = lookup.fieldMaps.flatMap((f, i) => {
+      let { fields } = frames[i];
+
+      return f.y.map((yIndex, frameSeriesIndex) => {
+        let xValues = fields[f.x[frameSeriesIndex]].values;
+        let yValues = fields[f.y[frameSeriesIndex]].values;
+        let sizeValues = f.size![frameSeriesIndex](frames[i]);
+
+        if (!Array.isArray(sizeValues)) {
+          sizeValues = Array(xValues.length).fill(sizeValues);
+        }
+
+        return [xValues, yValues, sizeValues];
+      });
+    });
+
+    return [null, ...seriesData];
+  });
+  */
+
+  return { builder, prepData };
+};
+
+export type PrepData = (xySeries: XYSeries[]) => FacetedData;
+
+/**
+ * This is called everytime the data changes
+ *
+ * from?  is this where we would support that?  -- need the previous values
+ */
+export function prepData(xySeries: XYSeries[]): FacetedData {
+  // if (info.error || !data.length) {
+  //   return [null];
+  // }
+
+  return [
+    null,
+    ...xySeries.map((s, idx) => {
+      let len = s.x.field.values.length;
+
+      let diams: number[];
+
+      if (s.size.field != null) {
+        let { min, max } = s.size;
+
+        // todo: this scaling should be in renderer from raw values (not by passing css pixel diams via data)
+        let minPx = min! ** 2;
+        let maxPx = max! ** 2;
+        // use quadratic size scaling in byValue modes
+        let pxRange = maxPx - minPx;
+
+        // todo: add shared, local, or key-group min/max option?
+        // todo: better min/max with ignoring non-finite values
+        // todo: allow this to come from fieldConfig min/max ? or field.state.min/max (shared)
+        let vals = s.size.field.values;
+        let minVal = Math.min(...vals);
+        let maxVal = Math.max(...vals);
+        let valRange = maxVal - minVal;
+
+        diams = Array(len);
+
+        for (let i = 0; i < vals.length; i++) {
+          let val = vals[i];
+
+          let valPct = (val - minVal) / valRange;
+          let pxArea = minPx + valPct * pxRange;
+          diams[i] = pxArea ** 0.5;
+        }
+      } else {
+        diams = Array(len).fill(s.size.fixed!);
+      }
+
+      return [
+        s.x.field.values, // X
+        s.y.field.values, // Y
+        diams, // TODO: fails for by value
+        Array(len).fill(s.color.fixed!), // TODO: fails for by value
+      ];
+    }),
+  ];
+}

public/app/plugins/panel/xychart/v2/types2.ts

@@ -0,0 +1,88 @@
+import { Field } from '@grafana/data';
+import * as common from '@grafana/schema';
+
+// import { SeriesMapping, XYSeriesConfig } from './panelcfg.gen';
+
+// // panel save model
+// export interface XYSeriesConfig {
+//   name?: {
+//     fixed?: string; // (if explicitly defined in manual mode)
+
+//   /*
+//     replace?: {
+//       // default: 'field'
+//       source: 'field' | 'frame';
+//       // default: whatever is matched for y field
+//       matcher: common.MatcherConfig;
+//       // default: 'displayName'
+//       prop: 'displayName' | 'name' | 'query' | 'target';
+
+//       // similar to renameByRegex & RenameByRegexTransformerOptions
+//       // default: '(.*)'
+//       regex: string;
+//       // default: '$1'
+//       rename: string;
+//     }
+//   */
+//   }
+
+//   // required in manual mode (can match same frame multiple times)
+//   frame?: {
+//     matcher: common.MatcherConfig;
+//   };
+//   x?: {
+//     matcher: common.MatcherConfig;
+//   };
+//   y?: {
+//     matcher: common.MatcherConfig;
+//   };
+//   color?: {
+//     matcher: common.MatcherConfig;
+//   };
+//   size?: {
+//     matcher: common.MatcherConfig;
+//   };
+// }
+
+// materialized series (internal)
+export interface XYSeries {
+  showPoints: common.VisibilityMode;
+
+  showLine: boolean;
+  lineWidth: number;
+  lineStyle: common.LineStyle;
+
+  name: {
+    // extracted from fieldConfig + overrides of y field
+    value: string;
+  };
+  x: {
+    field: Field;
+  };
+  y: {
+    field: Field;
+  };
+  color: {
+    field?: Field;
+
+    // fixed value extracted from fieldConfig + overrides of y field
+    fixed?: string;
+  };
+  size: {
+    field?: Field;
+    // extracted from fieldConfig + overrides of size field
+    min?: number;
+    max?: number;
+
+    // fixed value extracted from fieldConfig + overrides of y field
+    fixed?: number;
+  };
+  // remaining unmapped fields in this frame (for showing remaining fields in tooltip)
+  _rest: Field[];
+}
+
+// export interface Options extends common.OptionsWithLegend, common.OptionsWithTooltip {
+//   // source: 'annotations' | 'series', // maybe render directly from annotations (exemplars)
+//   mapping: SeriesMapping;
+//   series: XYSeriesConfig[]; // uses series[0] in auto mode to generate
+// }

public/app/plugins/panel/xychart/v2/utils.ts

@@ -0,0 +1,319 @@
+import {
+  Field,
+  formattedValueToString,
+  getFieldMatcher,
+  FieldType,
+  getFieldDisplayName,
+  DataFrame,
+  FrameMatcherID,
+  MatcherConfig,
+  FieldColorModeId,
+  cacheFieldDisplayNames,
+  FieldMatcherID,
+  FieldConfigSource,
+} from '@grafana/data';
+import { decoupleHideFromState } from '@grafana/data/src/field/fieldState';
+import { config } from '@grafana/runtime';
+import { VisibilityMode } from '@grafana/schema';
+
+import { XYShowMode, SeriesMapping, XYSeriesConfig } from './panelcfg.gen';
+import { XYSeries } from './types2';
+
+export function fmt(field: Field, val: number): string {
+  if (field.display) {
+    return formattedValueToString(field.display(val));
+  }
+
+  return `${val}`;
+}
+
+// cause we dont have a proper matcher for this currently
+function getFrameMatcher2(config: MatcherConfig) {
+  if (config.id === FrameMatcherID.byIndex) {
+    return (frame: DataFrame, index: number) => index === config.options;
+  }
+
+  return () => false;
+}
+
+export function prepSeries(
+  mapping: SeriesMapping,
+  mappedSeries: XYSeriesConfig[],
+  frames: DataFrame[],
+  fieldConfig: FieldConfigSource<any>
+) {
+  cacheFieldDisplayNames(frames);
+  decoupleHideFromState(frames, fieldConfig);
+
+  let series: XYSeries[] = [];
+
+  if (mappedSeries.length === 0) {
+    mappedSeries = [{}];
+  }
+
+  const { palette, getColorByName } = config.theme2.visualization;
+
+  mappedSeries.forEach((seriesCfg, seriesIdx) => {
+    if (mapping === SeriesMapping.Manual) {
+      if (seriesCfg.frame?.matcher == null || seriesCfg.x?.matcher == null || seriesCfg.y?.matcher == null) {
+        return;
+      }
+    }
+
+    let xMatcher = getFieldMatcher(
+      seriesCfg.x?.matcher ?? {
+        id: FieldMatcherID.byType,
+        options: 'number',
+      }
+    );
+    let yMatcher = getFieldMatcher(
+      seriesCfg.y?.matcher ?? {
+        id: FieldMatcherID.byType,
+        options: 'number',
+      }
+    );
+    let colorMatcher = seriesCfg.color ? getFieldMatcher(seriesCfg.color.matcher) : null;
+    let sizeMatcher = seriesCfg.size ? getFieldMatcher(seriesCfg.size.matcher) : null;
+    // let frameMatcher = seriesCfg.frame ? getFrameMatchers(seriesCfg.frame) : null;
+    let frameMatcher = seriesCfg.frame ? getFrameMatcher2(seriesCfg.frame.matcher) : null;
+
+    // loop over all frames and fields, adding a new series for each y dim
+    frames.forEach((frame, frameIdx) => {
+      // must match frame in manual mode
+      if (frameMatcher != null && !frameMatcher(frame, frameIdx)) {
+        return;
+      }
+
+      // shared across each series in this frame
+      let restFields: Field[] = [];
+
+      let frameSeries: XYSeries[] = [];
+
+      // only grabbing number fields (exclude time, string, enum, other)
+      let onlyNumFields = frame.fields.filter((field) => field.type === FieldType.number);
+
+      // only one of these per frame
+      let x = onlyNumFields.find((field) => xMatcher(field, frame, frames));
+      let color =
+        colorMatcher != null
+          ? onlyNumFields.find((field) => field !== x && colorMatcher!(field, frame, frames))
+          : undefined;
+      let size =
+        sizeMatcher != null
+          ? onlyNumFields.find((field) => field !== x && field !== color && sizeMatcher!(field, frame, frames))
+          : undefined;
+
+      // x field is required
+      if (x != null) {
+        // match y fields and create series
+        onlyNumFields.forEach((field) => {
+          // don't reuse already-mapped fields
+          if (field === x || field === color || field === size) {
+            return;
+          }
+
+          // in manual mode only add single series for this config
+          if (mapping === SeriesMapping.Manual && frameSeries.length > 0) {
+            return;
+          }
+
+          // if we match non-excluded y, create series
+          if (yMatcher(field, frame, frames) && !field.config.custom?.hideFrom?.viz) {
+            let y = field;
+            let name = seriesCfg.name?.fixed ?? getFieldDisplayName(y, frame, frames);
+
+            let ser: XYSeries = {
+              // these typically come from y field
+              name: {
+                value: name,
+              },
+
+              showPoints: y.config.custom.show === XYShowMode.Lines ? VisibilityMode.Never : VisibilityMode.Always,
+
+              showLine: y.config.custom.show !== XYShowMode.Points,
+              lineWidth: y.config.custom.lineWidth ?? 2,
+              lineStyle: y.config.custom.lineStyle,
+              // lineColor: () => seriesColor,
+              x: {
+                field: x!,
+              },
+              y: {
+                field: y,
+              },
+              color: {},
+              size: {},
+              _rest: restFields,
+            };
+
+            if (color != null) {
+              ser.color.field = color;
+            }
+
+            if (size != null) {
+              ser.size.field = size;
+              ser.size.min = size.config.custom.pointSize?.min ?? 5;
+              ser.size.max = size.config.custom.pointSize?.max ?? 100;
+              // ser.size.mode =
+            }
+
+            frameSeries.push(ser);
+          }
+        });
+
+        if (frameSeries.length === 0) {
+          // TODO: could not create series, skip & show error?
+        }
+
+        // populate rest fields
+        frame.fields.forEach((field) => {
+          let isUsedField = frameSeries.some(
+            ({ x, y, color, size }) =>
+              x.field === field || y.field === field || color.field === field || size.field === field
+          );
+
+          if (!isUsedField) {
+            restFields.push(field);
+          }
+        });
+
+        series.push(...frameSeries);
+      } else {
+        // x is missing in this frame!
+      }
+    });
+  });
+
+  if (series.length === 0) {
+    // TODO: could not create series, skip & show error?
+  } else {
+    // assign classic palette colors by index, as fallbacks for all series
+
+    let paletteIdx = 0;
+
+    // todo: populate min, max, mode from field + hints
+    series.forEach((s, i) => {
+      if (s.color.field == null) {
+        // derive fixed color from y field config
+        let colorCfg = s.y.field.config.color ?? { mode: FieldColorModeId.PaletteClassic };
+
+        let value = '';
+
+        if (colorCfg.mode === FieldColorModeId.PaletteClassic) {
+          value = getColorByName(palette[paletteIdx++ % palette.length]); // todo: do this via state.seriesIdx and re-init displayProcessor
+        } else if (colorCfg.mode === FieldColorModeId.Fixed) {
+          value = getColorByName(colorCfg.fixedColor!);
+        }
+
+        s.color.fixed = value;
+      }
+
+      if (s.size.field == null) {
+        // derive fixed size from y field config
+        s.size.fixed = s.y.field.config.custom.pointSize?.fixed ?? 5;
+        // ser.size.mode =
+      }
+    });
+
+    autoNameSeries(series);
+
+    // TODO: re-assign y display names?
+    // y.state = {
+    //   ...y.state,
+    //   seriesIndex: series.length + ,
+    // };
+    // y.display = getDisplayProcessor({ field, theme });
+  }
+
+  return series;
+}
+
+// strip common prefixes and suffixes from y field names
+function autoNameSeries(series: XYSeries[]) {
+  let names = series.map((s) => s.name.value.split(/\s+/g));
+
+  const { prefix, suffix } = findCommonPrefixSuffixLengths(names);
+
+  if (prefix < Infinity || suffix < Infinity) {
+    series.forEach((s, i) => {
+      s.name.value = names[i].slice(prefix, names[i].length - suffix).join(' ');
+    });
+  }
+}
+
+export function getCommonPrefixSuffix(strs: string[]) {
+  let names = strs.map((s) => s.split(/\s+/g));
+
+  let { prefix, suffix } = findCommonPrefixSuffixLengths(names);
+
+  let n = names[0];
+
+  if (n.length === 1 && prefix === 1 && suffix === 1) {
+    return '';
+  }
+
+  let parts = [];
+
+  if (prefix > 0) {
+    parts.push(...n.slice(0, prefix));
+  }
+
+  if (suffix > 0) {
+    parts.push(...n.slice(-suffix));
+  }
+
+  return parts.join(' ');
+}
+
+// lengths are in number of tokens (segments) in a phrase
+function findCommonPrefixSuffixLengths(names: string[][]) {
+  let commonPrefixLen = Infinity;
+  let commonSuffixLen = Infinity;
+
+  // if auto naming strategy, rename fields by stripping common prefixes and suffixes
+  let segs0: string[] = names[0];
+
+  for (let i = 1; i < names.length; i++) {
+    if (names[i].length < segs0.length) {
+      segs0 = names[i];
+    }
+  }
+
+  for (let i = 1; i < names.length; i++) {
+    let segs = names[i];
+
+    if (segs !== segs0) {
+      // prefixes
+      let preLen = 0;
+      for (let j = 0; j < segs0.length; j++) {
+        if (segs[j] === segs0[j]) {
+          preLen++;
+        } else {
+          break;
+        }
+      }
+
+      if (preLen < commonPrefixLen) {
+        commonPrefixLen = preLen;
+      }
+
+      // suffixes
+      let sufLen = 0;
+      for (let j = segs0.length - 1; j >= 0; j--) {
+        if (segs[j] === segs0[j]) {
+          sufLen++;
+        } else {
+          break;
+        }
+      }
+
+      if (sufLen < commonSuffixLen) {
+        commonSuffixLen = sufLen;
+      }
+    }
+  }
+
+  return {
+    prefix: commonPrefixLen,
+    suffix: commonSuffixLen,
+  };
+}