Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: expose style for interpolation fit functions #1505

Merged
merged 18 commits into from
Dec 1, 2021

Conversation

markov00
Copy link
Member

@markov00 markov00 commented Nov 25, 2021

Summary

This PR exposes the style options for the currently available interpolation fit functions.
In particular:

  • the area path of an interpolated area can be customized as:
type AreaFitStyle = 
  Visible & // hide or show the area path
  Opacity & { // change the opacity used to fill the area
    fill: Color | typeof ColorVariant.Series;  // a specific color or the assigned data series color
    texture?: TexturedStyles; // an optional texture
  };

Screenshot 2021-11-25 at 17 51 14

rendered with:

<AreaSeries
  areaSeriesStyle={{
    fit: {
      line: { visible: false },
      area: {
        fill: 'rgba(33, 33, 33, 0.3)',
        texture: { opacity: 0.2, stroke: 'gray', rotation: -45, shape: TextureShape.Line },
      },
    },
  }}
  • the line path can be customized with:
type LineFitStyle =
  Visible & // hide or show the line path
  Opacity & // change the opacity used to render the line stroke
  StrokeDashArray & { // an optional dash stroke array
    stroke: Color | typeof ColorVariant.Series; // a specific color or the assigned data series color
  };

Screenshot 2021-11-25 at 17 48 14

rendered with:

<LineSeries
    lineSeriesStyle={{
      fit: {
        line: {
          dash: [2, 10, 10, 5],
          stroke: 'rgba(0, 0, 0, 0.2)',
        },
      },
  }}

Details

The style is exposed through the LineSeriesStyle and the AreaSeriesStyle so it can be configured globally and/or configured per series.

I take the chance to refactor a bit the code, removing some optional arguments and reversing small logic to improve code readability.

cc @elastic/eui-design
Please double-check the theme property. We basically just expose the currently used style without breaking changes.
The visualization editor will take care of handling and applying a different style when requested by the user (generally they are just requesting to show a straight line and a filled area without any differences between the interpolated line/area and the original line/area created with the dataset.

Issues

fix #1489

Checklist

  • The proper chart type label has been added (e.g. :xy, :partition)
  • The proper feature labels have been added (e.g. :interactions, :axis)
  • The :theme label has been added and the @elastic/eui-design team has been pinged when there are Theme API changes
  • All related issues have been linked (i.e. closes #123, fixes #123)
  • New public API exports have been added to packages/charts/src/index.ts
  • Unit tests have been added or updated to match the most common scenarios
  • The proper documentation and/or storybook story has been added or updated
  • The code has been checked for cross-browser compatibility (Chrome, Firefox, Safari, Edge)
  • Visual changes have been tested with all available themes including dark, light, eui-dark & eui-light

@markov00 markov00 added :data Data/series/scales related issue :xy Bar/Line/Area chart related :theme labels Nov 25, 2021
@markov00 markov00 marked this pull request as draft November 25, 2021 18:52
@markov00 markov00 marked this pull request as ready for review November 26, 2021 11:31
Copy link
Collaborator

@nickofthyme nickofthyme left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM, I just made two comments on the api

packages/charts/src/utils/geometry.ts Show resolved Hide resolved
packages/charts/src/utils/themes/theme.ts Outdated Show resolved Hide resolved
packages/charts/src/utils/themes/theme.ts Outdated Show resolved Hide resolved
Copy link
Contributor

@rshen91 rshen91 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These changes LGTM - tested locally

@markov00 markov00 enabled auto-merge (squash) December 1, 2021 17:54
@markov00 markov00 merged commit 3071457 into elastic:master Dec 1, 2021
nickofthyme pushed a commit that referenced this pull request Dec 9, 2021
# [40.2.0](v40.1.0...v40.2.0) (2021-12-09)

### Bug Fixes

* **partition:** linkLabel textColor override ([#1498](#1498)) ([3013310](3013310))
* **waffle:** use descend sortPredicate by default ([#1510](#1510)) ([763e2e3](763e2e3))
* **xy:** stacked polarity ([#1502](#1502)) ([920666a](920666a)), closes [#1280](#1280)

### Features

* **xy:** expose style for interpolation fit functions ([#1505](#1505)) ([3071457](3071457))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
:data Data/series/scales related issue :theme :xy Bar/Line/Area chart related
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Expose fit function style
3 participants