public/grafana
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

FieldValues: Use simple array in panel visualizations (#66706)

Browse Source 
Co-authored-by: Leon Sorokin <leeoniya@gmail.com>
This commit is contained in:
Ryan McKinley
2023-04-17 14:46:29 -07:00
committed by GitHub
co-authored by Leon Sorokin
parent 50cb4f8998
commit 09f03e92bf
60 changed files with 265 additions and 320 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/grafana-ui/src/components/BigValue/BigValue.story.tsx
+2 -2
View File
@@ -1,7 +1,7 @@
import { Story, Meta } from '@storybook/react';
import React from 'react';
import { ArrayVector, FieldSparkline, FieldType } from '@grafana/data';
import { FieldSparkline, FieldType } from '@grafana/data';
import { useTheme2 } from '../../themes';
import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
@@ -74,7 +74,7 @@ export const Basic: Story<StoryProps> = ({
const sparkline: FieldSparkline = {
y: {
name: '',
values: new ArrayVector([1, 2, 3, 4, 3]),
values: [1, 2, 3, 4, 3],
type: FieldType.number,
state: { range: { min: 1, max: 4, delta: 3 } },
config: {},
packages/grafana-ui/src/components/BigValue/BigValueLayout.test.tsx
+3 -3
View File
@@ -1,4 +1,4 @@
import { ArrayVector, createTheme, FieldType } from '@grafana/data';
import { createTheme, FieldType } from '@grafana/data';
import { Props, BigValueColorMode, BigValueGraphMode, BigValueTextMode } from './BigValue';
import { buildLayout, StackedWithChartLayout, StackedWithNoChartLayout, WideWithChartLayout } from './BigValueLayout';
@@ -16,7 +16,7 @@ function getProps(propOverrides?: Partial<Props>): Props {
sparkline: {
y: {
name: '',
values: new ArrayVector([1, 2, 3, 4, 3]),
values: [1, 2, 3, 4, 3],
type: FieldType.number,
config: {},
},
@@ -68,7 +68,7 @@ describe('BigValueLayout', () => {
sparkline: {
y: {
name: '',
values: new ArrayVector([1]),
values: [1],
type: FieldType.number,
config: {},
},
packages/grafana-ui/src/components/Graph/Graph.test.tsx
+5 -5
View File
@@ -2,7 +2,7 @@ import { act, render, screen } from '@testing-library/react';
import $ from 'jquery';
import React from 'react';
import { GraphSeriesXY, FieldType, ArrayVector, dateTime, FieldColorModeId, DisplayProcessor } from '@grafana/data';
import { GraphSeriesXY, FieldType, dateTime, FieldColorModeId, DisplayProcessor } from '@grafana/data';
import { TooltipDisplayMode } from '@grafana/schema';
import { VizTooltip } from '../VizTooltip';
@@ -25,13 +25,13 @@ const series: GraphSeriesXY[] = [
timeField: {
type: FieldType.time,
name: 'time',
values: new ArrayVector([1546372800000, 1546376400000, 1546380000000]),
values: [1546372800000, 1546376400000, 1546380000000],
config: {},
},
valueField: {
type: FieldType.number,
name: 'a-series',
values: new ArrayVector([10, 20, 10]),
values: [10, 20, 10],
config: { color: { mode: FieldColorModeId.Fixed, fixedColor: 'red' } },
display,
},
@@ -53,13 +53,13 @@ const series: GraphSeriesXY[] = [
timeField: {
type: FieldType.time,
name: 'time',
values: new ArrayVector([1546372800000, 1546376400000, 1546380000000]),
values: [1546372800000, 1546376400000, 1546380000000],
config: {},
},
valueField: {
type: FieldType.number,
name: 'b-series',
values: new ArrayVector([20, 30, 40]),
values: [20, 30, 40],
config: { color: { mode: FieldColorModeId.Fixed, fixedColor: 'blue' } },
display,
},
packages/grafana-ui/src/components/Graph/GraphTooltip/MultiModeGraphTooltip.test.tsx
+5 -5
View File
@@ -1,7 +1,7 @@
import { render, screen } from '@testing-library/react';
import React from 'react';
import { createDimension, createTheme, ArrayVector, FieldType, DisplayProcessor } from '@grafana/data';
import { createDimension, createTheme, FieldType, DisplayProcessor } from '@grafana/data';
import { ActiveDimensions } from '../../VizTooltip';
@@ -20,14 +20,14 @@ describe('MultiModeGraphTooltip', () => {
xAxis: createDimension('xAxis', [
{
config: {},
values: new ArrayVector([0, 100, 200]),
values: [0, 100, 200],
name: 'A-series time',
type: FieldType.time,
display,
},
{
config: {},
values: new ArrayVector([0, 100, 200]),
values: [0, 100, 200],
name: 'B-series time',
type: FieldType.time,
display,
@@ -36,14 +36,14 @@ describe('MultiModeGraphTooltip', () => {
yAxis: createDimension('yAxis', [
{
config: {},
values: new ArrayVector([10, 20, 10]),
values: [10, 20, 10],
name: 'A-series values',
type: FieldType.number,
display,
},
{
config: {},
values: new ArrayVector([20, 30, 40]),
values: [20, 30, 40],
name: 'B-series values',
type: FieldType.number,
display,
packages/grafana-ui/src/components/Graph/GraphWithLegend.story.internal.tsx
+5 -5
View File
@@ -1,7 +1,7 @@
import { Story } from '@storybook/react';
import React from 'react';
import { GraphSeriesXY, FieldType, ArrayVector, dateTime, FieldColorModeId } from '@grafana/data';
import { GraphSeriesXY, FieldType, dateTime, FieldColorModeId } from '@grafana/data';
import { LegendDisplayMode } from '@grafana/schema';
import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
@@ -42,13 +42,13 @@ const series: GraphSeriesXY[] = [
timeField: {
type: FieldType.time,
name: 'time',
values: new ArrayVector([1546372800000, 1546376400000, 1546380000000]),
values: [1546372800000, 1546376400000, 1546380000000],
config: {},
},
valueField: {
type: FieldType.number,
name: 'a-series',
values: new ArrayVector([10, 20, 10]),
values: [10, 20, 10],
config: {
color: {
mode: FieldColorModeId.Fixed,
@@ -74,13 +74,13 @@ const series: GraphSeriesXY[] = [
timeField: {
type: FieldType.time,
name: 'time',
values: new ArrayVector([1546372800000, 1546376400000, 1546380000000]),
values: [1546372800000, 1546376400000, 1546380000000],
config: {},
},
valueField: {
type: FieldType.number,
name: 'b-series',
values: new ArrayVector([20, 30, 40]),
values: [20, 30, 40],
config: {
color: {
mode: FieldColorModeId.Fixed,
packages/grafana-ui/src/components/Graph/utils.ts
+4 -4
View File
@@ -24,7 +24,7 @@ export const findHoverIndexFromData = (xAxisDimension: Field, xPos: number) => {
return Math.max(upper, 0);
}
middle = Math.floor((lower + upper) / 2);
const xPosition = xAxisDimension.values.get(middle);
const xPosition = xAxisDimension.values[middle];
if (xPosition === xPos) {
return middle;
@@ -72,8 +72,8 @@ export const getMultiSeriesGraphHoverInfo = (
field = yAxisDimensions[i];
const time = xAxisDimensions[i];
hoverIndex = findHoverIndexFromData(time, xAxisPosition);
hoverDistance = xAxisPosition - time.values.get(hoverIndex);
pointTime = time.values.get(hoverIndex);
hoverDistance = xAxisPosition - time.values[hoverIndex];
pointTime = time.values[hoverIndex];
// Take the closest point before the cursor, or if it does not exist, the closest after
if (
minDistance === undefined ||
@@ -84,7 +84,7 @@ export const getMultiSeriesGraphHoverInfo = (
minTime = time.display ? formattedValueToString(time.display(pointTime)) : pointTime;
}
const disp = field.display!(field.values.get(hoverIndex));
const disp = field.display!(field.values[hoverIndex]);
results.push({
value: formattedValueToString(disp),
packages/grafana-ui/src/components/GraphNG/nullInsertThreshold.test.ts
+2 -2
View File
@@ -1,4 +1,4 @@
import { ArrayVector, FieldType, MutableDataFrame } from '@grafana/data';
import { FieldType, MutableDataFrame } from '@grafana/data';
import { applyNullInsertThreshold } from './nullInsertThreshold';
@@ -40,7 +40,7 @@ function genFrame() {
config: {
interval: i === 0 ? step : null,
},
values: new ArrayVector(values),
values: values,
};
}),
};
packages/grafana-ui/src/components/GraphNG/nullInsertThreshold.ts
+4 -4
View File
@@ -1,4 +1,4 @@
import { ArrayVector, DataFrame, FieldType, incrRoundDn } from '@grafana/data';
import { DataFrame, FieldType, incrRoundDn } from '@grafana/data';
type InsertMode = (prev: number, next: number, threshold: number) => number;
@@ -60,9 +60,9 @@ export function applyNullInsertThreshold(opts: NullInsertOptions): DataFrame {
return frame;
}
const refValues = refField.values.toArray();
const refValues = refField.values;
const frameValues = frame.fields.map((field) => field.values.toArray());
const frameValues = frame.fields.map((field) => field.values);
const filledFieldValues = nullInsertThreshold(
refValues,
@@ -83,7 +83,7 @@ export function applyNullInsertThreshold(opts: NullInsertOptions): DataFrame {
length: filledFieldValues[0].length,
fields: frame.fields.map((field, i) => ({
...field,
values: new ArrayVector(filledFieldValues[i]),
values: filledFieldValues[i],
})),
};
}
packages/grafana-ui/src/components/GraphNG/nullToValue.ts
+3 -3
View File
@@ -1,4 +1,4 @@
import { ArrayVector, DataFrame } from '@grafana/data';
import { DataFrame } from '@grafana/data';
export function nullToValue(frame: DataFrame) {
return {
@@ -7,7 +7,7 @@ export function nullToValue(frame: DataFrame) {
const noValue = +field.config?.noValue!;
if (!Number.isNaN(noValue)) {
const transformedVals = field.values.toArray().slice();
const transformedVals = field.values.slice();
for (let i = 0; i < transformedVals.length; i++) {
if (transformedVals[i] === null) {
@@ -17,7 +17,7 @@ export function nullToValue(frame: DataFrame) {
return {
...field,
values: new ArrayVector(transformedVals),
values: transformedVals,
};
} else {
return field;
packages/grafana-ui/src/components/GraphNG/utils.test.ts
+8 -9
View File
@@ -1,5 +1,4 @@
import {
ArrayVector,
createTheme,
DashboardCursorSync,
DataFrame,
@@ -232,7 +231,7 @@ describe('GraphNG utils', () => {
name: 'time',
type: FieldType.time,
config: {},
values: new ArrayVector([1, 2, 4, 6, 100]), // should find smallest delta === 1 from here
values: [1, 2, 4, 6, 100], // should find smallest delta === 1 from here
},
{
name: 'value',
@@ -242,7 +241,7 @@ describe('GraphNG utils', () => {
drawStyle: GraphDrawStyle.Bars,
},
},
values: new ArrayVector([1, 1, 1, 1, 1]),
values: [1, 1, 1, 1, 1],
},
],
};
@@ -255,7 +254,7 @@ describe('GraphNG utils', () => {
name: 'time',
type: FieldType.time,
config: {},
values: new ArrayVector([30, 40, 50, 90, 100]), // should be appended with two smallest-delta increments
values: [30, 40, 50, 90, 100], // should be appended with two smallest-delta increments
},
{
name: 'value',
@@ -265,7 +264,7 @@ describe('GraphNG utils', () => {
drawStyle: GraphDrawStyle.Bars,
},
},
values: new ArrayVector([2, 2, 2, 2, 2]), // bar series should be appended with nulls
values: [2, 2, 2, 2, 2], // bar series should be appended with nulls
},
{
name: 'value',
@@ -275,7 +274,7 @@ describe('GraphNG utils', () => {
drawStyle: GraphDrawStyle.Line,
},
},
values: new ArrayVector([3, 3, 3, 3, 3]), // line series should be appended with undefineds
values: [3, 3, 3, 3, 3], // line series should be appended with undefineds
},
],
};
@@ -288,7 +287,7 @@ describe('GraphNG utils', () => {
name: 'time',
type: FieldType.time,
config: {},
values: new ArrayVector([1, 1.1]), // should not trip up on smaller deltas of non-bars
values: [1, 1.1], // should not trip up on smaller deltas of non-bars
},
{
name: 'value',
@@ -298,7 +297,7 @@ describe('GraphNG utils', () => {
drawStyle: GraphDrawStyle.Line,
},
},
values: new ArrayVector([4, 4]),
values: [4, 4],
},
{
name: 'value',
@@ -311,7 +310,7 @@ describe('GraphNG utils', () => {
},
},
},
values: new ArrayVector([4, 4]),
values: [4, 4],
},
],
};
packages/grafana-ui/src/components/GraphNG/utils.ts
+5 -5
View File
@@ -1,4 +1,4 @@
import { ArrayVector, DataFrame, Field, FieldConfig, FieldType, outerJoinDataFrames, TimeRange } from '@grafana/data';
import { DataFrame, Field, FieldConfig, FieldType, outerJoinDataFrames, TimeRange } from '@grafana/data';
import {
AxisPlacement,
GraphDrawStyle,
@@ -21,7 +21,7 @@ function isVisibleBarField(f: Field) {
// will mutate the DataFrame's fields' values
function applySpanNullsThresholds(frame: DataFrame) {
let refField = frame.fields.find((field) => field.type === FieldType.time); // this doesnt need to be time, just any numeric/asc join field
let refValues = refField?.values.toArray() as any[];
let refValues = refField?.values as any[];
for (let i = 0; i < frame.fields.length; i++) {
let field = frame.fields[i];
@@ -34,7 +34,7 @@ function applySpanNullsThresholds(frame: DataFrame) {
if (typeof spanNulls === 'number') {
if (spanNulls !== -1) {
field.values = new ArrayVector(nullToUndefThreshold(refValues, field.values.toArray(), spanNulls));
field.values = nullToUndefThreshold(refValues, field.values, spanNulls);
}
}
}
@@ -84,7 +84,7 @@ export function preparePlotFrame(frames: DataFrame[], dimFields: XYFieldMatchers
return;
}
const xVals = frame.fields[0].values.toArray();
const xVals = frame.fields[0].values;
for (let i = 0; i < xVals.length; i++) {
if (i > 0) {
@@ -107,7 +107,7 @@ export function preparePlotFrame(frames: DataFrame[], dimFields: XYFieldMatchers
// append 2 null vals at minXDelta to bar series
if (minXDelta !== Infinity) {
alignedFrame.fields.forEach((f, fi) => {
let vals = f.values.toArray();
let vals = f.values;
if (fi === 0) {
let lastVal = vals[vals.length - 1];
packages/grafana-ui/src/components/Sparkline/utils.ts
+7 -2
View File
@@ -1,4 +1,4 @@
import { DataFrame, FieldConfig, FieldSparkline, IndexVector } from '@grafana/data';
import { DataFrame, FieldConfig, FieldSparkline, FieldType } from '@grafana/data';
import { GraphFieldConfig } from '@grafana/schema';
import { applyNullInsertThreshold } from '../GraphNG/nullInsertThreshold';
@@ -17,7 +17,12 @@ export function preparePlotFrame(sparkline: FieldSparkline, config?: FieldConfig
frame: {
refId: 'sparkline',
fields: [
sparkline.x ?? IndexVector.newField(length),
sparkline.x ?? {
name: '',
values: [...Array(length).keys()],
type: FieldType.number,
config: {},
},
{
...sparkline.y,
config: yFieldConfig,
packages/grafana-ui/src/components/Table/BarGaugeCell.tsx
+1 -1
View File
@@ -124,7 +124,7 @@ function getAlignmentFactor(field: Field, displayValue: DisplayValue, rowIndex:
const maxIndex = Math.min(field.values.length, rowIndex + 1000);
for (let i = rowIndex + 1; i < maxIndex; i++) {
const nextDisplayValue = field.display!(field.values.get(i));
const nextDisplayValue = field.display!(field.values[i]);
if (nextDisplayValue.text.length > alignmentFactor.text.length) {
alignmentFactor.text = displayValue.text;
}
packages/grafana-ui/src/components/Table/SparklineCell.tsx
+3 -12
View File
@@ -1,15 +1,6 @@
import { isArray } from 'lodash';
import React from 'react';
import {
ArrayVector,
FieldType,
FieldConfig,
getMinMaxAndDelta,
FieldSparkline,
isDataFrame,
Field,
} from '@grafana/data';
import { FieldType, FieldConfig, getMinMaxAndDelta, FieldSparkline, isDataFrame, Field } from '@grafana/data';
import {
BarAlignment,
GraphDrawStyle,
@@ -79,12 +70,12 @@ export const SparklineCell = (props: TableCellProps) => {
};
function getSparkline(value: unknown): FieldSparkline | undefined {
if (isArray(value)) {
if (Array.isArray(value)) {
return {
y: {
name: 'test',
type: FieldType.number,
values: new ArrayVector(value),
values: value,
config: {},
},
};
packages/grafana-ui/src/components/Table/Table.story.tsx
+1 -1
View File
@@ -155,7 +155,7 @@ function buildSubTablesData(theme: GrafanaTheme2, config: Record<string, FieldCo
}
function buildFooterData(data: DataFrame): FooterItem[] {
const values = data.fields[3].values.toArray();
const values = data.fields[3].values;
const valueSum = values.reduce((prev, curr) => {
return prev + curr;
}, 0);
packages/grafana-ui/src/components/Table/utils.test.tsx
+12 -12
View File
@@ -1,6 +1,6 @@
import { Row } from 'react-table';
import { ArrayVector, Field, FieldType, MutableDataFrame, SelectableValue } from '@grafana/data';
import { Field, FieldType, MutableDataFrame, SelectableValue } from '@grafana/data';
import {
calculateUniqueFieldValues,
@@ -92,7 +92,7 @@ describe('Table utils', () => {
describe('filterByValue', () => {
describe('happy path', () => {
const field = { values: new ArrayVector(['a', 'aa', 'ab', 'b', 'ba', 'bb', 'c']) } as unknown as Field;
const field = { values: ['a', 'aa', 'ab', 'b', 'ba', 'bb', 'c'] } as unknown as Field;
const rows = [
{ index: 0, values: { 0: 'a' } },
{ index: 1, values: { 0: 'aa' } },
@@ -116,7 +116,7 @@ describe('Table utils', () => {
describe('fast exit cases', () => {
describe('no rows', () => {
it('should return empty array', () => {
const field = { values: new ArrayVector(['a']) } as unknown as Field;
const field = { values: ['a'] } as unknown as Field;
const rows: Row[] = [];
const filterValues = [{ value: 'a' }];
@@ -128,7 +128,7 @@ describe('Table utils', () => {
describe('no filterValues', () => {
it('should return rows', () => {
const field = { values: new ArrayVector(['a']) } as unknown as Field;
const field = { values: ['a'] } as unknown as Field;
const rows = [{}] as Row[];
const filterValues = undefined;
@@ -152,7 +152,7 @@ describe('Table utils', () => {
describe('missing id in values', () => {
it('should return rows', () => {
const field = { values: new ArrayVector(['a', 'b', 'c']) } as unknown as Field;
const field = { values: ['a', 'b', 'c'] } as unknown as Field;
const rows = [
{ index: 0, values: { 0: 'a' } },
{ index: 1, values: { 0: 'b' } },
@@ -185,7 +185,7 @@ describe('Table utils', () => {
const field: Field = {
config: {},
labels: {},
values: new ArrayVector([1]),
values: [1],
name: 'value',
type: FieldType.number,
getLinks: () => [],
@@ -210,7 +210,7 @@ describe('Table utils', () => {
it('then it should return an array with unique values', () => {
const field: Field = {
config: {},
values: new ArrayVector([1, 2, 2, 1, 3, 5, 6]),
values: [1, 2, 2, 1, 3, 5, 6],
name: 'value',
type: FieldType.number,
display: jest.fn().mockImplementation((value) => ({
@@ -238,7 +238,7 @@ describe('Table utils', () => {
it('then it should return an array with unique values', () => {
const field: Field = {
config: {},
values: new ArrayVector([1, 2, 2, 1, 3, 5, 6]),
values: [1, 2, 2, 1, 3, 5, 6],
name: 'value',
type: FieldType.number,
};
@@ -257,7 +257,7 @@ describe('Table utils', () => {
it('then it should return an array with unique values and (Blanks)', () => {
const field: Field = {
config: {},
values: new ArrayVector([1, null, null, 1, 3, 5, 6]),
values: [1, null, null, 1, 3, 5, 6],
name: 'value',
type: FieldType.number,
};
@@ -282,7 +282,7 @@ describe('Table utils', () => {
name: 'value',
type: FieldType.string,
config: {},
values: new ArrayVector(['a', 'b', 'c']),
values: ['a', 'b', 'c'],
};
const row = { index: 1 };
@@ -294,7 +294,7 @@ describe('Table utils', () => {
describe('field with display processor', () => {
const field: Field = {
config: {},
values: new ArrayVector([1, 2, 2, 1, 3, 5, 6]),
values: [1, 2, 2, 1, 3, 5, 6],
name: 'value',
type: FieldType.number,
display: jest.fn().mockImplementation((value) => ({
@@ -327,7 +327,7 @@ describe('Table utils', () => {
name: 'value',
type: FieldType.string,
config: {},
values: new ArrayVector(['a', 'b', 'c']),
values: ['a', 'b', 'c'],
};
const row = undefined;
packages/grafana-ui/src/components/Table/utils.ts
+4 -5
View File
@@ -14,7 +14,6 @@ import {
getDisplayProcessor,
reduceField,
GrafanaTheme2,
ArrayVector,
isDataFrame,
isTimeSeriesFrame,
} from '@grafana/data';
@@ -133,7 +132,7 @@ export function getColumns(
field: field,
Header: getFieldDisplayName(field, data),
accessor: (_row: any, i: number) => {
return field.values.get(i);
return field.values[i];
},
sortType: selectSortType(field.type),
width: fieldTableOptions.width,
@@ -188,7 +187,7 @@ export function getCellComponent(displayMode: TableCellDisplayMode, field: Field
}
if (field.type === FieldType.frame) {
const firstValue = field.values.get(0);
const firstValue = field.values[0];
if (isDataFrame(firstValue) && isTimeSeriesFrame(firstValue)) {
return SparklineCell;
}
@@ -248,7 +247,7 @@ export function rowToFieldValue(row: any, field?: Field): string {
return '';
}
const fieldValue = field.values.get(row.index);
const fieldValue = field.values[row.index];
const displayValue = field.display ? field.display(fieldValue) : fieldValue;
const value = field.display ? formattedValueToString(displayValue) : displayValue;
@@ -359,7 +358,7 @@ export function getFooterItems(
}
let newField = clone(data.field);
newField.values = new ArrayVector(values[data.id]);
newField.values = values[data.id];
newField.state = undefined;
data.field = newField;
packages/grafana-ui/src/components/TimeSeries/utils.test.ts
+19 -19
View File
@@ -1,4 +1,4 @@
import { ArrayVector, EventBus, FieldType } from '@grafana/data';
import { EventBus, FieldType } from '@grafana/data';
import { getTheme } from '@grafana/ui';
import { preparePlotConfigBuilder } from './utils';
@@ -26,21 +26,21 @@ describe('when fill below to option is used', () => {
fields: [
{
config: {},
values: new ArrayVector([1667406900000, 1667407170000, 1667407185000]),
values: [1667406900000, 1667407170000, 1667407185000],
name: 'Time',
state: { multipleFrames: true, displayName: 'Time', origin: { fieldIndex: 0, frameIndex: 0 } },
type: FieldType.time,
},
{
config: { displayNameFromDS: 'Test1', custom: { fillBelowTo: 'Test2' }, min: 0, max: 100 },
values: new ArrayVector([1, 2, 3]),
values: [1, 2, 3],
name: 'Value',
state: { multipleFrames: true, displayName: 'Test1', origin: { fieldIndex: 1, frameIndex: 0 } },
type: FieldType.number,
},
{
config: { displayNameFromDS: 'Test2', min: 0, max: 100 },
values: new ArrayVector([4, 5, 6]),
values: [4, 5, 6],
name: 'Value',
state: { multipleFrames: true, displayName: 'Test2', origin: { fieldIndex: 1, frameIndex: 1 } },
type: FieldType.number,
@@ -55,14 +55,14 @@ describe('when fill below to option is used', () => {
fields: [
{
config: {},
values: new ArrayVector([1667406900000, 1667407170000, 1667407185000]),
values: [1667406900000, 1667407170000, 1667407185000],
name: 'Time',
state: { multipleFrames: true, displayName: 'Time', origin: { fieldIndex: 0, frameIndex: 0 } },
type: FieldType.time,
},
{
config: { displayNameFromDS: 'Test1', custom: { fillBelowTo: 'Test2' }, min: 0, max: 100 },
values: new ArrayVector([1, 2, 3]),
values: [1, 2, 3],
name: 'Value',
state: { multipleFrames: true, displayName: 'Test1', origin: { fieldIndex: 1, frameIndex: 0 } },
type: FieldType.number,
@@ -76,14 +76,14 @@ describe('when fill below to option is used', () => {
fields: [
{
config: {},
values: new ArrayVector([1667406900000, 1667407170000, 1667407185000]),
values: [1667406900000, 1667407170000, 1667407185000],
name: 'Time',
state: { multipleFrames: true, displayName: 'Time', origin: { fieldIndex: 0, frameIndex: 1 } },
type: FieldType.time,
},
{
config: { displayNameFromDS: 'Test2', min: 0, max: 100 },
values: new ArrayVector([1, 2, 3]),
values: [1, 2, 3],
name: 'Value',
state: { multipleFrames: true, displayName: 'Test2', origin: { fieldIndex: 1, frameIndex: 1 } },
type: FieldType.number,
@@ -99,35 +99,35 @@ describe('when fill below to option is used', () => {
fields: [
{
config: {},
values: new ArrayVector([1667406900000, 1667407170000, 1667407185000]),
values: [1667406900000, 1667407170000, 1667407185000],
name: 'time',
state: { multipleFrames: true, displayName: 'time', origin: { fieldIndex: 0, frameIndex: 0 } },
type: FieldType.time,
},
{
config: { custom: { fillBelowTo: 'below_value1' } },
values: new ArrayVector([1, 2, 3]),
values: [1, 2, 3],
name: 'value1',
state: { multipleFrames: true, displayName: 'value1', origin: { fieldIndex: 1, frameIndex: 0 } },
type: FieldType.number,
},
{
config: { custom: { fillBelowTo: 'below_value2' } },
values: new ArrayVector([4, 5, 6]),
values: [4, 5, 6],
name: 'value2',
state: { multipleFrames: true, displayName: 'value2', origin: { fieldIndex: 2, frameIndex: 0 } },
type: FieldType.number,
},
{
config: {},
values: new ArrayVector([4, 5, 6]),
values: [4, 5, 6],
name: 'below_value1',
state: { multipleFrames: true, displayName: 'below_value1', origin: { fieldIndex: 1, frameIndex: 1 } },
type: FieldType.number,
},
{
config: {},
values: new ArrayVector([4, 5, 6]),
values: [4, 5, 6],
name: 'below_value2',
state: { multipleFrames: true, displayName: 'below_value2', origin: { fieldIndex: 2, frameIndex: 1 } },
type: FieldType.number,
@@ -141,21 +141,21 @@ describe('when fill below to option is used', () => {
fields: [
{
config: {},
values: new ArrayVector([1667406900000, 1667407170000, 1667407185000]),
values: [1667406900000, 1667407170000, 1667407185000],
name: 'time',
state: { multipleFrames: true, displayName: 'time', origin: { fieldIndex: 0, frameIndex: 0 } },
type: FieldType.time,
},
{
config: { custom: { fillBelowTo: 'below_value1' } },
values: new ArrayVector([1, 2, 3]),
values: [1, 2, 3],
name: 'value1',
state: { multipleFrames: true, displayName: 'value1', origin: { fieldIndex: 1, frameIndex: 0 } },
type: FieldType.number,
},
{
config: { custom: { fillBelowTo: 'below_value2' } },
values: new ArrayVector([4, 5, 6]),
values: [4, 5, 6],
name: 'value2',
state: { multipleFrames: true, displayName: 'value2', origin: { fieldIndex: 2, frameIndex: 0 } },
type: FieldType.number,
@@ -168,21 +168,21 @@ describe('when fill below to option is used', () => {
fields: [
{
config: {},
values: new ArrayVector([1667406900000, 1667407170000, 1667407185000]),
values: [1667406900000, 1667407170000, 1667407185000],
name: 'time',
state: { multipleFrames: true, displayName: 'time', origin: { fieldIndex: 0, frameIndex: 1 } },
type: FieldType.time,
},
{
config: {},
values: new ArrayVector([4, 5, 6]),
values: [4, 5, 6],
name: 'below_value1',
state: { multipleFrames: true, displayName: 'below_value1', origin: { fieldIndex: 1, frameIndex: 1 } },
type: FieldType.number,
},
{
config: {},
values: new ArrayVector([4, 5, 6]),
values: [4, 5, 6],
name: 'below_value2',
state: { multipleFrames: true, displayName: 'below_value2', origin: { fieldIndex: 2, frameIndex: 1 } },
type: FieldType.number,
packages/grafana-ui/src/components/uPlot/Plot.test.tsx
+3 -3
View File
@@ -3,7 +3,7 @@ import createMockRaf from 'mock-raf';
import React from 'react';
import uPlot from 'uplot';
import { ArrayVector, dateTime, FieldConfig, FieldType, MutableDataFrame } from '@grafana/data';
import { dateTime, FieldConfig, FieldType, MutableDataFrame } from '@grafana/data';
import { GraphFieldConfig, GraphDrawStyle } from '@grafana/schema';
import { UPlotChart } from './Plot';
@@ -34,14 +34,14 @@ const mockData = () => {
data.addField({
type: FieldType.time,
name: 'Time',
values: new ArrayVector([1602630000000, 1602633600000, 1602637200000]),
values: [1602630000000, 1602633600000, 1602637200000],
config: {},
});
data.addField({
type: FieldType.number,
name: 'Value',
values: new ArrayVector([10, 20, 5]),
values: [10, 20, 5],
config: {
custom: {
drawStyle: GraphDrawStyle.Line,
packages/grafana-ui/src/components/uPlot/utils.ts
+4 -5
View File
@@ -114,9 +114,8 @@ export function getStackingGroups(frame: DataFrame) {
}
// will this be stacked up or down after any transforms applied
let vals = values.toArray();
let transform = custom.transform;
let stackDir = getStackDirection(transform, vals);
let stackDir = getStackDirection(transform, values);
let drawStyle = custom.drawStyle as GraphDrawStyle;
let drawStyle2 =
@@ -174,7 +173,7 @@ export function preparePlotData2(
return;
}
let vals = field.values.toArray();
let vals = field.values;
for (let i = 0; i < dataLen; i++) {
if (vals[i] != null) {
@@ -185,11 +184,11 @@ export function preparePlotData2(
});
frame.fields.forEach((field, i) => {
let vals = field.values.toArray();
let vals = field.values;
if (i === 0) {
if (field.type === FieldType.time) {
data[i] = ensureTimeField(field).values.toArray();
data[i] = ensureTimeField(field).values;
} else {
data[i] = vals;
}