Replace TSVB timeseries charts with elastic-charts

[sulemanof]

Resolve elastic/elastic-charts#108 .

Should be checked before merging:

• /TSVB cross issues checks elastic-charts#178

In progress replacements:

• Stacked option (Stacked/Percent);
• Line width;
• Point size;
• Hide in legend;
• Annotations;

Blocker Issues:

• /Cannot set the custom formatting function for Tooltip header / Annotation header elastic-charts#197
• /Fill color and Line width styles are not applied correctly to Bars elastic-charts#323
• /'tickFormat' property should affect only Axis for which it be declared elastic-charts#185
• /Disable tooltip on annotation line elastic-charts#324
• /Dynamic legend content size elastic-charts#311
• /The value on the legend is not displayed completely  elastic-charts#184
• /The Legend is not displayed correctly in the 'Bottom' mode elastic-charts#194
• /elasticChartsCrosshair is not positioned correctly for some intervals elastic-charts#195
• /Cannot set line width (strokeWidth) for BarSeries elastic-charts#196
• /Color Picker functionality cannot be disabled elastic-charts#198
• /Percent stacked option elastic-charts#222

Tests sample dashboards ⚠️

Tasks

• Install all 3 data sample
• check each dashboard for errors
• change size of TSVB visualizations
• compare them with master version or 7.3 version

Issues 🐛

• [eCommerce] Promotion Tracking, [Flights] Delays & Cancellations, also on visualization editor, the visualization doesn't show the crosshair line (usually red)

• [Flights] Delays & Cancellations disable tooltip on annotation line (/Disable tooltip on annotation line elastic-charts#324)
• [Logs] Response Codes Over Time + Annotations the order of the series is inverted, meaning that you have to reorder the way you are adding the series into the Chart component. It's reproducible when using stacked mode on a single visualization with a group by split
  @AlonaNadler please have a look.
  this PR

on 7.3

• [Logs] Response Codes Over Time + Annotations the annotation header seems always showing the same timestamp. Also reproducible during tests on Annotations
  
• [Logs] Response Codes Over Time + Annotations I think you are not checking the formatter for null values as in a case you can see the NaN text here

---

Test visualization editor ⚠️

Tasks

Build a single series visualization

On Panel options

• specify kibana_sample_data_flights and choose timestamp as Timestamp
• check if Drop last bucket shows and hide the last bucket on the series
• choose last 24h on time window, change interval to 1h, 1d, 1m, 2h.
• choose last 24h on time window, change interval to 1h, 1d, 1m, 2h using bar chart

On Data -> Options tab of a single series:

• check formatting of tooltip/y axis values
• check Chart type line, bar
• Chart type styles: fill, line width, point size, steps
• Check the offset series, hide in legend , split color theme (only when multi series), separate axis, override index pattern using kibana_sample_data_logs
• check for timezone change (change timezone in kibana from Advanced Settings)

On Data -> Metrics tab of a single series and with multiple series:

• Test Average aggregation on AvgTicketPrice
• Test Group by: Terms by: Origin
• Check the above Data -> options options
• Check stacked mode: percent, stacked, stacked within series: with a single series, with 2 series, with a single series splitted, with one series splitted and one not.

On Annotations tab

• add a kibana_sample_data_flights index pattern ,use Dest : "Verona Villafranca Airport" and Cancelled :true as KQL query, select an Icon, use Dest as Fields and {{Dest}} as row template.
• check the rendering of the annotation, positioning, colors, icons, rendered text

Issues 🐛

• the timepicker window changed its position from the original top right position:

• Line width option with value 0 doesn't hide/reduce the line width size to 0. Still to 1. Works fine for point size 0:

• [x] The point size works fine until the value of 10, after that, 11 or more there is no more fill:
  this is not an issue, but a feature existing on 7.3 also :(

point size: 10

point size: 11 or above

• Fill and Line width styles are not applied to Bars
• Hide in legend seems not working with a single series
• Split within series doesn't seem to work.
• ask @elastic/kibana-design about the status of the Exclamation in circle icon Exclamation mark in circle icon eui#2121

---

Test PDF rendering ✅

Enable trial mode Start a 30-day trial from Settings -> Licence Manager

• Create a set of TSVB visualization
• Click on Share -> PNG report -> Generate PNG
• Click on Share -> PDF report -> Generate PDF
• Create a dashboard with 10 TSVB visualization
• Click on Share -> PNG report -> Generate PNG
• Click on Share -> PDF report -> Generate PDF

---

New issues fixed by this PR 🎉

• When using step line, the current points shows the right value, not showing a tooltip on the same x value with two different y values

before:

now:

• When we have no value on a bucket the legend now doesn't display a wrong 0 value:
  on PR

on master/7.3

• when using stacked in percentage mode, it automatically apply the % sign to the data format

• when using a different timezone than the one in the browser, on the previous version each ticks where rounded to the UTC timezone, losing the nice rounding of the hours/days 00:00, 12:00, 00:00, 12:00

This PR fix that keeping the same rouding

---

Notes for testing

Compere the visualizations against master branch or at least against 7.3.
Using docker with 7.3 is a bit more easy: these are the steps for that:
Write a docker-compose.yaml file and run it with docker-compose up:

version: "3"
services:
  elasticsearch:
    environment:
      - reindex.remote.whitelist=docker.for.mac.host.internal:9200
      - discovery.type=single-node
    image: docker.elastic.co/elasticsearch/elasticsearch:7.3.0
    container_name: elasticsearch_7_3_0
    ports:
      - 9273:9200
  kibana:
    image: docker.elastic.co/kibana/kibana:7.3.0
    container_name: kibana_7_3_0
    ports:
      - 5673:5601

To use exactly the same dataset (that will allows you to compare also the visualization output use the following from kibana dev tools) this will reindex all the data from the testing elasticsearch into the dockerized ES

# DELETE ALL SAMPLE DOCUMENTS

POST kibana_sample_data_logs/_delete_by_query
{
  "query": {
    "match_all": {}
  }
}

POST kibana_sample_data_ecommerce/_delete_by_query
{
  "query": {
    "match_all": {}
  }
}

POST kibana_sample_data_flights/_delete_by_query
{
  "query": {
    "match_all": {}
  }
}

# REINDEX ALL SAMPLE DOCUMENTS FROM TESTING ES
POST _reindex
{
  "source": {
    "remote": {
      "host": "http://docker.for.mac.host.internal:9200",
      "username": "elastic",
      "password": "changeme"
    },
    "index": "kibana_sample_data_logs"
  },
  "dest": {
    "index": "kibana_sample_data_logs"
  }
}
POST _reindex
{
  "source": {
    "remote": {
      "host": "http://docker.for.mac.host.internal:9200",
      "username": "elastic",
      "password": "changeme"
    },
    "index": "kibana_sample_data_ecommerce"
  },
  "dest": {
    "index": "kibana_sample_data_ecommerce"
  }
}
POST _reindex
{
  "source": {
    "remote": {
      "host": "http://docker.for.mac.host.internal:9200",
      "username": "elastic",
      "password": "changeme"
    },
    "index": "kibana_sample_data_flights"
  },
  "dest": {
    "index": "kibana_sample_data_flights"
  }
}

---

Notes for Elastic-Charts 🐛

• check the NaN case. The chart doesn't display an interruption of data between the values, but it just connect the available points with a line: this is an issue with the fieldFormatter used in TSVB

• change the order of rendering also for areas: PR merged fix(rendering): area, line and point rendered on the same layer for each series elastic-charts#290:
  on 7.3

**on this PR**

• fix truncated x axis labels PR: fix(axis): limit chart dimensions to avoid axis labels overflow elastic-charts#314

• check the missing ticks (probably just update the ech lib to latest)

• 'tickFormat' property should affect only Axis for which it be declared elastic-charts#185 needs to be addressed when using two data series with different formatting (not conceptually correct if you are using a single axis)

[elasticmachine]

💔 Build Failed

• continuous-integration/kibana-ci/pull-request

[sulemanof]

retest

[elasticmachine]

💔 Build Failed

• continuous-integration/kibana-ci/pull-request

[elasticmachine]

💔 Build Failed

• continuous-integration/kibana-ci/pull-request

[elasticmachine]

💔 Build Failed

• continuous-integration/kibana-ci/pull-request

[elasticmachine]

💔 Build Failed

• continuous-integration/kibana-ci/pull-request

[elasticmachine]

💔 Build Failed

• continuous-integration/kibana-ci/pull-request

[elasticmachine]

💔 Build Failed

• continuous-integration/kibana-ci/pull-request

[elasticmachine]

💔 Build Failed

• continuous-integration/kibana-ci/pull-request

[elasticmachine]

💔 Build Failed

• continuous-integration/kibana-ci/pull-request

[PhilippBaranovskiy]

hey @sulemanof, I guess you might leave conflict marks in the code

[elasticmachine]

💔 Build Failed

• continuous-integration/kibana-ci/pull-request

[elasticmachine]

💔 Build Failed

• continuous-integration/kibana-ci/pull-request

[elasticmachine]

💔 Build Failed

• continuous-integration/kibana-ci/pull-request

[elasticmachine]

💔 Build Failed

• continuous-integration/kibana-ci/pull-request

[elasticmachine]

💚 Build Succeeded

• continuous-integration/kibana-ci/pull-request

[elasticmachine]

💚 Build Succeeded

• continuous-integration/kibana-ci/pull-request

[elasticmachine]

Pinging @elastic/kibana-app

[elasticmachine]

💚 Build Succeeded

• continuous-integration/kibana-ci/pull-request

requested change made in 6c17fb8

[elasticmachine]

💚 Build Succeeded

• continuous-integration/kibana-ci/pull-request

[elasticmachine]

💚 Build Succeeded

• continuous-integration/kibana-ci/pull-request

[elasticmachine]

💚 Build Succeeded

• continuous-integration/kibana-ci/pull-request