perf: reduce charts initialization time up to ~2x

[vursen]

Description

This PR reduces the initialization time of charts up to ~2x by replacing a redraw call in a loop (by series) with a single redraw at the end of the loop.

This PR also is assumed to improve the situation described in the vaadin/flow-components#937 issue.

Part of #227

Benchmarks

Machine: Mac Mini M1 16gb.

Browser: Chrome 92.

Screen size: 700x700.

1. Basic case (10 series)

• Each series represents 20 values

<div id="chart"></div>

<script type="module">
  import { render, html } from 'lit';
  import '@vaadin/vaadin-charts';

  const series = [...new Array(10)].map((_, i) => {
    return {
      values: [...new Array(20)].map(() => i)
    }
  });

  render(html`
    <vaadin-chart>
      ${series.map((series) =>
        html`
          <vaadin-chart-series .values="${series.values}"></vaadin-chart-series>
        `
      )}
    </vaadin-chart>
  `, document.querySelector('#chart'))
</script>

Master branch: 465 ms (screenshot)

Current branch: 145 ms (screenshot)

Total: up to ~3.2x

2. More advanced case (10 series)

• Each series represents 20 values
• Each series has a unit
• Each series has a title

<div id="chart"></div>

<script type="module">
  import { render, html } from 'lit';
  import '@vaadin/vaadin-charts';

  const series = [...new Array(10)].map((_, i) => {
    return {
      unit: `Unit ${i}`,
      title: `Title ${i}`,
      values: [...new Array(20)].map(() => i)
    }
  });

  render(html`
    <vaadin-chart>
      ${series.map((series) =>
        html`
          <vaadin-chart-series
            .unit="${series.unit}"
            .title="${series.title}"
            .values="${series.values}"
          ></vaadin-chart-series>
        `
      )}
    </vaadin-chart>
  `, document.querySelector('#chart'))
</script>

Master branch: 4.53 s (screenshot)

Current branch: 2.84 s (screenshot)

Total: up to ~1.6x

Type of change

• Internal change

Checklist

• I have read the contribution guide: https://vaadin.com/docs-beta/latest/guide/contributing/overview/
• I have added a description following the guideline.
• The issue is created in the corresponding repository and I have referenced it.
• I have added tests to ensure my change is effective and works as intended.
• New and existing tests are passing locally with my change.
• I have performed self-review and corrected misspellings.

[sonarcloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
0.0% Duplication

[vursen]

Note: While this PR improves the initialization time of a chart, it is still possible to optimize the time even more by disabling re-drawing the chart in vaadin-chart-series's observers for the time adding a series and, instead, calling a single redraw() at the end.