[Lens] Implement new metric grid visualization

[flash1293]

Based on the new metric visualization which will be part of the elastic-charts library, a new visualization type should be exposed in Lens.

Dimension groups and options

4 dimension groups (all taking a single dimension) :

• min
  • Same default behavior with static value like gauge min
• primary metric
  • dynamic coloring setting
  • The only mandatory dimension
• secondary metric
  • Shown above the primary metric if set
• max
  • Same default behavior with static value like gauge max
• Breakdown
  • “Collapse by” feature like for xy and table

Chart level option:

• Number of columns (default 5)
• Color display: horizontal bar, vertical bar

Mapping of dimension groups to the chart

• Single metric:
  • The title is the usual metric label
  • The subtitle, is something the user can manually configure from an input, like an advanced option right below the metric label. It should be free text.
  • The extra, can be considered as a free text input, like last 5m
• Metric with breakdown:
  • The title is the most important aspect and it should be probably replaced by the categories created by the breakdown.
  • The subtitle, in this case, could be, at this point, the metric label. Since this will be repeated on every metric, it is better to reduce the importance and push that label to the subtitle. The user can always remove it if it makes too much noise. In this case there is no space for adding an additional, real, subtitle. The extra, as for single metric can be a free text, a global computed metric, or per breakdown

Dashboard integration special cases

• enforce no panel title for the metric vis (needs changes on dashboard /
• remove border padding and add back border radius for metric visualizations

Behavior

The metrics are flattened out into a single list of metrics. This list of metrics is put into the grid with the configured number of columns (left to right, then starting a new row in the order of configuration).

If dynamic color is set without min and max, the full bar/panel is colored this way. If dynamic color is set together with min and max, it’s colored proportionally

If breakdowns are used, the maximum number of generated metrics is passed to the visualization (e.g. 5 for a “top 5 values of fieldX”). The visualization always renders this number of metrics in the grid - if not enough rows are available in the data table, empty cells are rendered. This is done to keep the layout of the metric grid consistent on a dashboard even with changing filters.

Default color palettes should be lightened like they are for bullets. Use full background for a single metric, if breakdown is used use the vertical bar - still give the user a choice.

Workspace shrinks when not using break down by

No longer have font size controls (resize your panel)

No alignment options for now

Interaction with formatters:

• Limit number of digits to 3.
• Adding prefixes always (bytes / units) when available.

Format behavior

• Read currently used formatter: bytes vs. number vs. percent vs. currency vs. duration
• For bytes, number, percent, currency use the intl API to format with 2 optional fraction digits
• Use short notation for number, currency and percent
• Look up currency from numeraljs locale
• For bytes, reimplement numeraljs algorithm to pick the right format (bytes vs kb vs mb)
• For duration, always use exact human readable output with a single optional fraction digit, split into unit and value using a regex
• Ignore everything else in terms of formatting (user supplied numeral js formats) - this is part of the specified behavior of this vis type

Old vs. new metric vis

The new metric should be implemented as a new vis type next to the existing metric vis. In the first phase, the new metric vis will be "tech preview" (this means not showing up in suggestions etc.)

Open question: How should old and new metric vis be called?
Ideas:

• Metric / Metric grid (tech preview)
• Big number

Implementation

The new metric vis can be implemented as a full new chart type with the explanation above. On the expression level it can be made part of the existing metric renderer by adding the new options.

The new formatting logic is implemented as part of the renderer (interpreting the passed field format as described above instead of initializing the field formatter)

In order to keep the number of rendered metrics stable, the datasource should optionally report an “expected count” (which is implemented for top values and filters operations) on Lens level which is passed to the expression function as an additional argument. For other operations it’s OK to fall back to dynamic cell rendering as these are an edge case anyway.

[elasticmachine]

Pinging @elastic/kibana-vis-editors @elastic/kibana-vis-editors-external (Team:VisEditors)