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>
This commit is contained in:
Leon Sorokin 2024-03-22 10:44:37 -05:00 committed by GitHub
parent 7df8d6e8cb
commit d7fa99e2df
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
33 changed files with 2456 additions and 10 deletions

View File

@ -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"]
],

View File

@ -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,

View File

@ -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 |

View File

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

View File

@ -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);

View File

@ -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';

View File

@ -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 */

View File

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

View File

@ -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 thats 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: [],
};

View File

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

View File

@ -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"

View File

@ -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"

View File

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

View File

@ -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.",

View File

@ -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

1 Name Stage Owner requiresDevMode RequiresRestart FrontendOnly
19 autoMigratePiechartPanel preview @grafana/dataviz-squad false false true
20 autoMigrateWorldmapPanel preview @grafana/dataviz-squad false false true
21 autoMigrateStatPanel preview @grafana/dataviz-squad false false true
22 autoMigrateXYChartPanel preview @grafana/dataviz-squad false false true
23 disableAngular preview @grafana/dataviz-squad false false true
24 canvasPanelNesting experimental @grafana/dataviz-squad false false true
25 newVizTooltips preview @grafana/dataviz-squad false false true

View File

@ -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"

View File

@ -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
}
}
]
}

View File

@ -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,

View File

@ -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,

View File

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

View File

@ -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}`,
},
}),
});

View File

@ -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',
},
}),
});

View File

@ -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>
);
};

View File

@ -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);
},
};
}

View File

@ -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',
},
},
});
});
*/
});

View File

@ -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;
}

View File

@ -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);
});

View File

@ -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 thats 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: []
}
}

View File

@ -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 thats 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: [],
};

View File

@ -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"
}
}
}

View File

@ -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
];
}),
];
}

View File

@ -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
// }

View File

@ -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,
};
}