Sparkline: Sort dataframe (#68007)

* Sort sparkline dataframe

* Sort frame only if needed

* add utils test

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

@@ -16,6 +16,6 @@ export {
 } from './matchers/nameMatcher';
 export type { RenameByRegexTransformerOptions } from './transformers/renameByRegex';
 /** @deprecated -- will be removed in future versions */
-export { joinDataFrames as outerJoinDataFrames } from './transformers/joinDataFrames';
+export { joinDataFrames as outerJoinDataFrames, isLikelyAscendingVector } from './transformers/joinDataFrames';
 export * from './transformers/histogram';
 export { ensureTimeField } from './transformers/convertFieldType';

packages/grafana-ui/src/components/Sparkline/utils.test.ts

@@ -0,0 +1,93 @@
+import { FieldSparkline, FieldType } from '@grafana/data';
+
+import { preparePlotFrame } from './utils';
+
+describe('Prepare Sparkline plot frame', () => {
+  it('should return sorted array if x-axis numeric', () => {
+    const sparkline: FieldSparkline = {
+      x: {
+        name: 'x',
+        values: [5, 4, 3, 2, 1],
+        type: FieldType.number,
+        config: {},
+      },
+      y: {
+        name: 'y',
+        values: [1, 2, 3, 4, 5],
+        type: FieldType.number,
+        config: {},
+      },
+    };
+
+    const frame = preparePlotFrame(sparkline);
+
+    expect(frame.fields[0].values).toEqual([1, 2, 3, 4, 5]);
+    expect(frame.fields[1].values).toEqual([5, 4, 3, 2, 1]);
+  });
+
+  it('should return a dataframe with unmodified fields', () => {
+    const sparkline: FieldSparkline = {
+      x: {
+        name: 'x',
+        values: [1679839200000, 1680444000000, 1681048800000, 1681653600000, 1682258400000],
+        type: FieldType.time,
+        config: {},
+      },
+      y: {
+        name: 'y',
+        values: [1, 2, 3, 4, 5],
+        type: FieldType.number,
+        config: {},
+      },
+    };
+
+    const frame = preparePlotFrame(sparkline);
+
+    expect(frame.fields[0].values).toEqual([1679839200000, 1680444000000, 1681048800000, 1681653600000, 1682258400000]);
+    expect(frame.fields[1].values).toEqual([1, 2, 3, 4, 5]);
+  });
+
+  it('should return a dataframe with sorted fields', () => {
+    const sparkline: FieldSparkline = {
+      x: {
+        name: 'x',
+        values: [1682258400000, 1681653600000, 1681048800000, 1680444000000, 1679839200000],
+        type: FieldType.time,
+        config: {},
+      },
+      y: {
+        name: 'y',
+        values: [1, 2, 3, 4, 5],
+        type: FieldType.number,
+        config: {},
+      },
+    };
+
+    const frame = preparePlotFrame(sparkline);
+
+    expect(frame.fields[0].values).toEqual([1679839200000, 1680444000000, 1681048800000, 1681653600000, 1682258400000]);
+    expect(frame.fields[1].values).toEqual([5, 4, 3, 2, 1]);
+  });
+
+  it('should return a dataframe with null thresholds applied to sorted fields', () => {
+    const sparkline: FieldSparkline = {
+      x: {
+        name: 'x',
+        values: [7, 2, 4],
+        type: FieldType.time,
+        config: { interval: 1 },
+      },
+      y: {
+        name: 'y',
+        values: [1, 2, 3],
+        type: FieldType.number,
+        config: {},
+      },
+    };
+
+    const frame = preparePlotFrame(sparkline);
+
+    expect(frame.fields[0].values).toEqual([2, 3, 4, 5, 6, 7]);
+    expect(frame.fields[1].values).toEqual([2, null, 3, null, null, 1]);
+  });
+});

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

@@ -1,4 +1,11 @@
-import { DataFrame, FieldConfig, FieldSparkline, FieldType } from '@grafana/data';
+import {
+  DataFrame,
+  FieldConfig,
+  FieldSparkline,
+  FieldType,
+  isLikelyAscendingVector,
+  sortDataFrame,
+} from '@grafana/data';
 import { GraphFieldConfig } from '@grafana/schema';
 
 import { applyNullInsertThreshold } from '../GraphNG/nullInsertThreshold';
@@ -13,22 +20,28 @@ export function preparePlotFrame(sparkline: FieldSparkline, config?: FieldConfig
     ...config,
   };
 
-  return applyNullInsertThreshold({
-    frame: {
-      refId: 'sparkline',
-      fields: [
-        sparkline.x ?? {
-          name: '',
-          values: [...Array(length).keys()],
-          type: FieldType.number,
-          config: {},
-        },
-        {
-          ...sparkline.y,
-          config: yFieldConfig,
-        },
-      ],
-      length,
-    },
-  });
+  const xField = sparkline.x ?? {
+    name: '',
+    values: [...Array(length).keys()],
+    type: FieldType.number,
+    config: {},
+  };
+
+  let frame: DataFrame = {
+    refId: 'sparkline',
+    fields: [
+      xField,
+      {
+        ...sparkline.y,
+        config: yFieldConfig,
+      },
+    ],
+    length,
+  };
+
+  if (!isLikelyAscendingVector(xField.values)) {
+    frame = sortDataFrame(frame, 0);
+  }
+
+  return applyNullInsertThreshold({ frame });
 }