Migrate more options to singlestat2

[ryantxu]

This takes the rest of the singlestat options and migrates them to react.

export interface SparklineOptions {
  show: boolean;
  full: boolean; // full height
  fillColor: string;
  lineColor: string;
}

// Structure copied from angular
export interface SingleStatOptions extends SingleStatBaseOptions {
  prefixFontSize?: string;
  valueFontSize?: string;
  postfixFontSize?: string;

  colorBackground?: boolean;
  colorValue?: boolean;
  colorPrefix?: boolean;
  colorPostfix?: boolean;

  sparkline: SparklineOptions;
}

It has a super ugly UI... but the values work. My goal is to have more real examples for #15938 and #15864. I don't intend to improve the UI, but it should be a good place to try some higher level way to define settings since the boilerplate gets pretty cumbersome

The styles were copied from angular version -- positions seem shifted though

[ryantxu]

@torkelo -- I updated this to have the properties we discussed in #15925

Current state looks like:

export type DisplayValueClicked = () => void;

export interface DisplayValue {
  text: string; // Show in the UI
  numeric: number; // Use isNaN to check if it is a real number
  color?: string; // color based on configs or Threshold
  fontSize?: string;
  title?: string; // An optional title for this value
  link?: string | DisplayValueClicked; // URL or callback
  linkNewWindow?: boolean; // target _blank
  tooltip?: ReactNode;
}

This adds a wrapper component that takes care of the 'link' and 'tooltip' value: <DisplayValueLink value={value}> I'm not sure where that should live, and what component should use it -- ie, should it be in the panel component? or in each vis?

Obviously the panels need to fill in what the link values are -- does not look like that is exposed yet

[torkelo]

Sorry been buried in admin & release prep yesterday & today, hope find time for this and your other PRs later this week.

[torkelo]

Argh, this is just too hard. Especially with these font size options & prefix/suffix coloring options.

Challenges:

• Eventually we want to migrate angular singlestat -> react singlestat with minimum breaking changs.
• Eventually we want to migrate angular singlestat gauges -> react gauge with minimum breaking changs.

Interesting, Angular Singlestat Gauge actually does not support font size for prefix/suffix nor the coloring options for prefix/suffix.

I would like to get the bigger DisplayValue interface, so thinking about merging this even though there is a lot of things in POC state. We can then iterate on the options UI (want to put this to our UX designers), and think about how to add auto font size handling, is there any options we can remove without major breaking behavior etc.

[ryantxu]

Argh, this is just too hard.

no joke -- it gets pretty ugly, and I'm not sure how useful all the options are.

My goal with this PR is to find all the pieces that need effort and make sure our data model/interfaces can cleanly represent the range of options in a mostly common way. The UI and details obviously still need some serious love.

Auto font sizing could be interesting, but for repeated single stats, i think we want to make sure they all have a common font size. I suspect it would look pretty weird to have a bunch of them with different computed font sizes next to each other.