Skip to content

Commit

Permalink
[Lens] Add custom formatter within the Lens editor (elastic#158468)
Browse files Browse the repository at this point in the history
## Summary

Fixes elastic#157900

Goal of this PR:
* simplify Metric formatting logic (only duration formats are now
"enhanced")
* add a new `Compact` option for the existing Lens formatters (Bytes and
Bits excluded as they compact already)
<img width="323" alt="Screenshot 2023-05-25 at 15 54 05"
src="https://github.com/elastic/kibana/assets/924948/3da299fe-e770-4a84-a0b4-6f935f06fe16">

* provide a full custom formatter based on numeral.js

<img width="1223" alt="Screenshot 2023-05-25 at 17 06 23"
src="https://github.com/elastic/kibana/assets/924948/5ce578c3-ef84-4176-9700-fecf6b55738e">
<img width="1215" alt="Screenshot 2023-05-25 at 17 06 15"
src="https://github.com/elastic/kibana/assets/924948/b93385ec-28b3-46cd-b9fd-2090abd6f233">
<img width="1224" alt="Screenshot 2023-05-25 at 17 06 08"
src="https://github.com/elastic/kibana/assets/924948/8c731a11-dc74-4b96-91f2-b2db7ca2fa2b">
<img width="1221" alt="Screenshot 2023-05-25 at 16 05 49"
src="https://github.com/elastic/kibana/assets/924948/a8786bd7-a2ab-4e04-8952-dc3d31e4afc2">
<img width="1223" alt="Screenshot 2023-05-25 at 16 05 40"
src="https://github.com/elastic/kibana/assets/924948/b6b5af8e-4109-48b6-b5a3-c8526ad628df">
<img width="1219" alt="Screenshot 2023-05-25 at 16 05 30"
src="https://github.com/elastic/kibana/assets/924948/405bbb01-359c-4981-84b0-8c68c0b59e8e">
<img width="1220" alt="Screenshot 2023-05-25 at 16 05 16"
src="https://github.com/elastic/kibana/assets/924948/d8350036-30c4-41db-8421-55874f0278b7">

<details>
  <summary>Previous migration changes - removed now</summary>
## Migration changes

The tricky part here comes with the format migration for the new metric,
as there's no easy way to detect what `"Default"` means, not having
access to field formatters during migrations.
There are two possibilities, as far as I can see, on the topic:
1. when `default` format is detected, assume it's a `number` format with
the `compact` feature turned on
2. when `default` format is detected, assume nothing and let the Kibana
default format go on (no compact)

In this PR I've implemented the 2nd migration strategy.
Here's a visual example of the problem.

#### Original dashboard
<img width="964" alt="Screenshot 2023-05-26 at 15 51 01"
src="https://github.com/elastic/kibana/assets/924948/703936b7-6232-46fc-a8cc-88a483ec1d01">

#### Option 1

<img width="1113" alt="Screenshot 2023-05-26 at 15 52 08"
src="https://github.com/elastic/kibana/assets/924948/d7ffe317-7d9c-49e3-ba86-849e2128df97">

#### Option 2 (implemented)

<img width="1113" alt="Screenshot 2023-05-26 at 15 53 48"
src="https://github.com/elastic/kibana/assets/924948/0c248b0a-3a4d-4fce-9d09-3ddffc1b5527">
</details>


### Release notes

Default format in Lens will apply dataView field format as usual now in
new Metric visualization.

### Checklist

Delete any items that are not applicable to this PR.

- [x] Any text added follows [EUI's writing
guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses
sentence case text and includes [i18n
support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)
- [x]
[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)
was added for features that require explanation or tutorials
- [x] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios
- [x] Any UI touched in this PR is usable by keyboard only (learn more
about [keyboard accessibility](https://webaim.org/techniques/keyboard/))
- [x] This renders correctly on smaller devices using a responsive
layout. (You can test this [in your
browser](https://www.browserstack.com/guide/responsive-testing-on-local-server))
- [x] This was checked for [cross-browser
compatibility](https://www.elastic.co/support/matrix#matrix_browsers)

### For maintainers

- [x] This was checked for breaking API changes and was [labeled
appropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)

---------

Co-authored-by: Stratoula Kalafateli <efstratia.kalafateli@elastic.co>
  • Loading branch information
2 people authored and saarikabhasi committed Jun 13, 2023
1 parent 4daa101 commit 7f80e15
Show file tree
Hide file tree
Showing 31 changed files with 848 additions and 671 deletions.
4 changes: 3 additions & 1 deletion packages/kbn-test-jest-helpers/src/enzyme_helpers.tsx
Expand Up @@ -15,7 +15,7 @@

import { I18nProvider, InjectedIntl, intlShape, __IntlProvider } from '@kbn/i18n-react';
import { mount, ReactWrapper, render, shallow } from 'enzyme';
import React, { ReactElement, ValidationMap } from 'react';
import React, { ComponentType, ReactElement, ValidationMap } from 'react';
import { act as reactAct } from 'react-dom/test-utils';

// Use fake component to extract `intl` property to use in tests.
Expand Down Expand Up @@ -94,6 +94,8 @@ export function mountWithIntl<T>(
attachTo?: HTMLElement;
context?: any;
childContextTypes?: ValidationMap<any>;
wrappingComponent?: ComponentType<any> | undefined;
wrappingComponentProps?: {} | undefined;
} = {}
) {
const options = getOptions(context, childContextTypes, props);
Expand Down

This file was deleted.

This file was deleted.

0 comments on commit 7f80e15

Please sign in to comment.