feat: fit functions for null y1 values

[nickofthyme]

Summary

Add fit functions below to fill null y1 values (y0 null values not yet supported)

Works for ONLY non-stacked series. Stacked series requires another approach having to account for the fitted value of lower series.

Name	Description	Examples
None	Don't draw that value on the graph	[2, null null, 8]
Carry	Use the last non null value before that	[2, 2, 2, 8]
Nearest	Use the closest value (either before or after) that was non null	[2, 2, 8, 8]
Lookahead	Use the next non null value after that (opposite of Carry)	[2, 8, 8, 8]
Average	Use the average of the last and next non null value	[2, 5, 5, 8]
Linear	Linear interpolate between closest values	[2, 4, 6, 8]
Zero	Fills all null values with 0	[2, 0, 0, 8]
Explicit	Specify an explicit value (x), that should be used instead	[2, x, x, 8]

Note: All "fitted" (aka "filled") points are not rendered but only used to draw the line/area.

Related to fix #388

Usage

within a series spec definition, define the fit type.

import { Fit } from '@elastic/charts';

<AreaSeries
  fit={Fit.Nearest}
/>

when using the explicit type you must provide a value like so...

<AreaSeries
  fit={{
    type: Fit.Explicit,
    value: 5,
  }}
/>

By default, indeterminate endvalues, values not able to be fitted, are set to null. To set a specific value rather than null, you can pass an endValue prop like so...

<AreaSeries
  fit={{
    type: Fit.Average,
    endValue: 4,
  }}
/>

Demos [Non-stacked]

Assuming the following data

const data = [
  { x: 0, y: null },
  { x: 1, y: 3 },
  { x: 2, y: 5 },
  { x: 3, y: null },
  { x: 4, y: 4 },
  { x: 5, y: null },
  { x: 6, y: 5 },
  { x: 7, y: 6 },
  { x: 8, y: null },
  { x: 9, y: null },
  { x: 10, y: null },
  { x: 11, y: 12 },
  { x: 12, y: null },
];

Fit.None [default]

Fit.Carry

Fit.Nearest

Fit.Lookahead

Fit.Average

Fit.Linear

Fit.Zero

Fit.Explicit with value set to 4

Curved Linear

Also Works with curves

Note: If the explicit value is set outside of the xScale domain, the charts will not recompute the domain to include it. This will have to be fixed in a later PR.

Using endValue

The endValue property allows you to set the end null point values to a specific value. This value is only used in the case where the fitting function does not have sufficient information to determine the fitted value. For example, using Fit.Average requires both the trailing and leading non-null boundaries, thus if the endpoints are both null the value can not be found for either.

<AreaSeries
  fit={{
    type: Fit.Average,
    endValue: 4,
  }}
/>

Checklist

Use strikethroughs to remove checklist items you don't feel are applicable to this PR.

• Any consumer-facing exports were added to src/index.ts (and stories only import from ../src except for test data & storybook)
• This was checked for cross-browser compatibility, including a check against IE11
• Proper documentation or storybook story was added for features that require explanation or tutorials
• Unit tests were updated or added to match the most common scenarios
• Each commit follows the convention

[codecov-io]

Codecov Report

❗ No coverage uploaded for pull request base (master@f2c7bd9). Click here to learn what that means.
The diff coverage is 86.01%.

@@            Coverage Diff            @@
##             master     #416   +/-   ##
=========================================
  Coverage          ?   78.16%           
=========================================
  Files             ?       91           
  Lines             ?     4301           
  Branches          ?      870           
=========================================
  Hits              ?     3362           
  Misses            ?      926           
  Partials          ?       13

Impacted Files	Coverage Δ
src/chart_types/xy_chart/utils/interactions.ts	100% <ø> (ø)
src/chart_types/xy_chart/utils/series.ts	100% <ø> (ø)
src/utils/scales/scales.ts	100% <ø> (ø)
src/components/icons/icon.tsx	57.89% <ø> (ø)
src/utils/commons.ts	94.73% <ø> (ø)
src/utils/curves.ts	100% <ø> (ø)
src/components/react_canvas/line_geometries.tsx	24% <0%> (ø)
src/components/react_canvas/area_geometries.tsx	16.39% <0%> (ø)
src/components/react_canvas/reactive_chart.tsx	11.62% <0%> (ø)
src/mocks/specs/index.ts	100% <100%> (ø)
... and 17 more

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update f2c7bd9...ac9f744. Read the comment docs.

[markov00]

Tested locally and everything looks fine.
I've just two minor concerns:

1. the static Explicit value is not taken in consideration as part of the data domain
2. I'd like to add a small change on the endValue to allow either a value and the nearest point to avoid having to specify a value that maybe is not in the range

[nickofthyme]

Still need to add support for ordinal scale type

[nickofthyme]

@markov00 I don't know why the coverage went down to 78% but it does not appear to be because of my code changes. Maybe this is causing some issues. Any thoughts?

[markov00]

I think the current coverage only cover the modules/files imported on each test. Adding the coveragePathIgnorePatterns maybe count also the missing modules without a test file importing them

[markov00]

LGTM, just few minor comments to fix before merging

[markov00]

LGTM

[markov00]

🎉 This PR is included in version 14.1.0 🎉

The release is available on:

• GitHub release
• npm package (@latest dist-tag)

Your semantic-release bot 📦🚀