kibana/x-pack/plugins/lens
Dima Arnautov 0793753b9d
[Lens] Heatmap / Swim lane integration (#97978)
* heatmap wip

* format values on X axis

* format values for cells

* show labels

* support legend configuration

* render preview

* add icon

* [ML] update visualization

* [ML] init suggestions

* [ML] fix preview

* [ML] fix groupPosition for the legend control

* [ML] add formatter for Y-axis

* [ML] filterOperations for cell value

* [ML] fill all available height

* [ML] delete unused file

* [ML] fix suggestion state

* [ML] update suggestion, add hiding logic

* [ML] suggestions unit tests

* [ML] rename legend interface

* [ML] unit tests for visualization, add error messages

* [ML] fix typos in xy visualization tests

* [ML] support click event

* [ML] add xDomain for time series data

* [ML] support empty Y axis

* [ML] change legend default position

* [ML] getTimeZone util

* [ML] hide suggestions for reorder

* [ML] support brush event

* [ML] update unit tests

* [ML] render grid lines in preview

* [ML] don't display errors on init

* [ML] utilize chartsThemeService

* [ML] support histogram for the vertical axis

* [ML] fix clearLayer

* [ML] show empty placeholder on no data

* [ML] fix X domain min

* [ML] reject suggestions for 3 or more  buckets

* [ML] suggestions for histograms and histogram for Y-axis

* [ML] fix unit tests

* [ML] update suggestions for active heatmap

* [ML] chart data test for heatmap

* [ML] test for transitioning from heatmap to barchart

* [ML] disable xDomain

* [ML] support intervals in axes configurations

* [ML] hide label on the vertical axis when there is only a horizontal dimension

* [ML] set min cell height for better suggestions preview rendering

* [ML] fix tooltip for empty vertical axis config

* [ML] fix click and brushing for empty Y axis

* [ML] update functional test

* [ML] show beta label

* [ML] fix legend control

* [ML] dataIndex sort by default for the X axis

* [ML] use euiPaletteForTemperature with quantize color scale

* [ML] hide all suggestions

* [ML] fix chart data extension issue

* [ML] fix the caret symbol positioning

* [ML] update unit tests for the heatmap suggestions

* [ML] replace EuiBetaBadge with EuiBadge

* [ML] update functional test

* [ML] fix chart switch styles

* [ML] fix functional test

* [ML] return null instead of expression with a missing value accessor

* [ML] use table id as a chart id

* [ML] fix scale type for a single row of data

* [ML] filter out undefined values

* [ML] fix isXAxisLabelVisible

* [ML] update chart_switch styles

* show warning message for the array values

* remove unused code

* replace ts-ignore with manual type casting

* add unit tests for error and warning messages

* add css class for append, conditional flex group
2021-06-04 15:28:43 -04:00
..
common [Lens] Open lens in new tab via state transfer (#96723) 2021-04-15 14:49:55 +02:00
public [Lens] Heatmap / Swim lane integration (#97978) 2021-06-04 15:28:43 -04:00
server make sure migrations stay in sync (#101362) 2021-06-04 13:16:31 +02:00
config.ts Elastic License 2.0 (#90099) 2021-02-03 18:12:39 -08:00
jest.config.js [npm] upgrade all jest related dependencies (#96367) 2021-04-21 15:32:10 -04:00
kibana.json [API DOCS] Usage Collection (#98656) 2021-05-04 12:32:11 +01:00
layout.png
readme.md [Lens] Export nested types (#89868) 2021-02-03 12:03:55 +01:00
tsconfig.json Revert "TS Incremental build exclude test files (#95610)" (#96223) 2021-04-05 11:59:26 -07:00

Lens

Visualization editor allowing to quickly and easily configure compelling visualizations to use on dashboards and canvas workpads.

Embedding

It's possible to embed Lens visualizations in other apps using EmbeddableComponent and navigateToPrefilledEditor exposed via contract. For more information check out the example in x-pack/examples/embedded_lens_example.

Testing

Run all tests from the x-pack root directory

  • Unit tests: yarn test:jest x-pack/plugins/lens
  • Functional tests:
    • Run node scripts/functional_tests_server
    • Run node ../scripts/functional_test_runner.js --config ./test/functional/config.js --grep="lens app"
    • You may want to comment out all imports except for Lens in the config file.
  • API Functional tests:
    • Run node scripts/functional_tests_server
    • Run node ../scripts/functional_test_runner.js --config ./test/api_integration/config.ts --grep=Lens

UI Terminology

Lens has a lot of UI elements to make it easier to refer to them in issues or bugs, this is a hopefully complete list:

  • Top nav Navigation menu on top of the app (contains Save button)
    • Query bar Input to enter KQL or Lucene query below the top nav
    • Filter bar Row of filter pills below the query bar
    • Time picker Global time range configurator right to the query bar
  • Data panel Panel to the left showing the field list
    • Field list List of fields separated by available and empty fields in the data panel
    • Index pattern chooser Select element switching between index patterns
    • Field filter Search and dropdown to filter down the field list
    • Field information popover Popover showing data distribution; opening when clicking a field in the field list
  • Config panel Panel to the right showing configuration of the current chart, separated by layers
    • Layer panel One of multiple panels in the config panel, holding configuration for separate layers
      • Dimension trigger Chart dimension like "X axis", "Break down by" or "Slice by" in the config panel
      • Dimension container Container shown when clicking a dimension trigger and contains the dimension settints
      • Layer settings popover Popover shown when clicking the button in the top left of a layer panel
  • Workspace panel Center panel containing the chart preview, title and toolbar
    • Chart preview Full-sized rendered chart in the center of the screen
    • Toolbar Bar on top of the chart preview, containing the chart switcher to the left with chart specific settings right to it
      • Chart switch Select to change the chart type in the top left above the chart preview
      • Chart settings popover Popover shown when clicking the "Settings" button above the chart preview
  • Suggestion panel Panel to the bottom showing previews for suggestions on how to change the current chart

Layout