StatPanel: ColorMode, GraphMode & JustifyMode changes (#20680)

* StatPanel: Options rethink

* Changed options to string based

* -Fixed tests

* Refactoring moving files

* Refactoring alignment factors

* Added alignment factors

* Added basic test

* Added unit test for layout

* Font size handling

* Font sizing works

* Progress on sizing

* Updated

* Minor update

* Updated

* Updated

* Removed line option

* updated

* Updated

* Updated

* Updated

* Highlight last point

* Fixed tests

* Code refactoring and cleanup

* updated

* Updated snapshot

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

@@ -7,7 +7,7 @@ import { FieldConfig, DataFrame, FieldType } from '../types/dataFrame';
 import { InterpolateFunction } from '../types/panel';
 import { DataFrameView } from '../dataframe/DataFrameView';
 import { GraphSeriesValue } from '../types/graph';
-import { DisplayValue } from '../types/displayValue';
+import { DisplayValue, DisplayValueAlignmentFactors } from '../types/displayValue';
 import { GrafanaTheme } from '../types/theme';
 import { ReducerID, reduceField } from '../transformations/fieldReducer';
 import { ScopedVars } from '../types/ScopedVars';
@@ -21,6 +21,7 @@ export interface FieldDisplayOptions {
   defaults: FieldConfig; // Use these values unless otherwise stated
   override: FieldConfig; // Set these values regardless of the source
 }
+
 // TODO: use built in variables, same as for data links?
 export const VAR_SERIES_NAME = '__series.name';
 export const VAR_FIELD_NAME = '__field.name';
@@ -278,3 +279,22 @@ export function getFieldProperties(...props: FieldConfig[]): FieldConfig {
   }
   return field;
 }
+
+export function getDisplayValueAlignmentFactors(values: FieldDisplay[]): DisplayValueAlignmentFactors {
+  const info: DisplayValueAlignmentFactors = {
+    title: '',
+    text: '',
+  };
+
+  for (let i = 0; i < values.length; i++) {
+    const v = values[i].display;
+    if (v.text && v.text.length > info.text.length) {
+      info.text = v.text;
+    }
+
+    if (v.title && v.title.length > info.title.length) {
+      info.title = v.title;
+    }
+  }
+  return info;
+}

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

@@ -8,6 +8,15 @@ export interface DisplayValue {
   fontSize?: string;
 }
 
+/**
+ * These represents the displau value with the longest title and text.
+ * Used to align widths and heights when displaying multiple DisplayValues
+ */
+export interface DisplayValueAlignmentFactors {
+  title: string;
+  text: string;
+}
+
 export type DecimalCount = number | null | undefined;
 
 export interface DecimalInfo {

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

@@ -1,5 +1,6 @@
 import { DisplayValue } from './displayValue';
 import { Field } from './dataFrame';
+
 export interface YAxis {
   index: number;
   min?: number;