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.

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