feat(a11y): add textures to fill options #1138

ron-debajyoti · 2021-04-24T15:04:34Z

Summary

Adds optional texture styles prop to RectStyle and AreaStyle for xy area and bar charts.

Screen.Recording.2021-05-27.at.04.25.06.PM.mp4

Details

Adds new TextureStyle interface below.

interface TexturedStylesBase {
  /** polygon fill color for texture */
  fill?: Color | ColorVariant;
  /** polygon stroke color for texture */
  stroke?: Color | ColorVariant;
  /** polygon stroke width for texture  */
  strokeWidth?: number;
  /** polygon opacity for texture  */
  opacity?: number;
  /** polygon opacity for texture  */
  dash?: number[];
  /** polygon opacity for texture  */
  size?: number;
  /**
   * The angle of rotation for entire texture
   * in degrees
   */
  rotation?: number;
  /**
   * The angle of rotation for polygons
   * in degrees
   */
  shapeRotation?: number;
  /** texture spacing between polygons */
  spacing?: Partial<Point> | number;
  /** overall origin offset of pattern */
  offset?: Partial<Point> & {
    /** apply offset along global coordinate axes */
    global?: boolean;
  };
}

interface TexturedShapeStyles extends TexturedStylesBase {
  /** typed of texture designs currently supported */
  shape: TextureShape;
}

interface TexturedPathStyles extends TexturedStylesBase {
  /** path for polygon texture */
  path: string | Path2D;
}

/**
 * @public
 *
 * Texture style config for area spec
 */
export type TexturedStyles = TexturedPathStyles | TexturedShapeStyles;

Limitations

Unable to be assigned across splitSeriesAccesors like color, thus limited to separate Series definitions. Could be improved in the future to make ___SeriesStyle applied per XYSeriesIdentifier.

Connected issues

fix #1061 - Adds textures styles for xy area and bar charts

Todos:

For this PR, I added the majority of code in xy_chart/renderer/canvas/primitives/path.ts. We need to modularize it so that it can be added to different charts.
We need to standardize the number of textures to support so that different areas in a single chart can support different textures.

Checklist

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
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

…ted in xy_chart

kibanamachine · 2021-04-24T15:04:35Z

Since this is a community submitted pull request, a Jenkins build has not been kicked off automatically. Can an Elastic organization member please verify the contents of this patch and then kick off a build manually?

ron-debajyoti · 2021-04-24T15:59:01Z

Adding an image of the result :

ron-debajyoti · 2021-05-03T13:09:18Z

Hi @nickofthyme @markov00,
Any update on how do we proceed further? I was thinking first designing the API, considering no. of textures we support and possibly adding it in utils and then making a list of charts we initially support.

nickofthyme · 2021-05-03T14:07:22Z

@ron-debajyoti sorry for the delayed review. I'll take a look at this today. @markov00 is out sick today but should be back tomorrow to review as well.

nickofthyme

This is fantastic! Thanks, again for your work on this. Also much less complex than I expected it to be.

I left a few comments that came to mind I think we could expose some options on the Theme that would allow the user to better control the pattern as well as provide a small subset of simple patterns to choose from as you mentioned in the TODO's.

src/chart_types/xy_chart/renderer/canvas/renderers.ts

src/chart_types/xy_chart/renderer/canvas/primitives/path.ts

ron-debajyoti · 2021-05-11T16:01:25Z

Hi @nickofthyme!
Sorry for replying late. I got busy with my coursework earlier last week and got some time right now to continue working on this.

I started implementing the API, based on the feed you gave earlier and so far I have considered this interface for TexturedStyles

export interface TexturedStyles {
  /* typed of texture designs currently supported */
  type: 'line' | 'circle' | 'square' | 'triangle' | 'cross';

  /* To fill the stoke with Color or ColorVariant */
  stroke: Color | ColorVariant;

  /* The angle of rotation required in radians */
  rotation: number;

  /* The opacity of each texture on the theme/series */
  opacity?: number;

  /* If the polygon textures should be filled or empty */
  fill?: 0 | 1;

  /* The size of the textures,defaulted as 10 */
  scale?: number;

  path?: string;
  spacing?: number;
}

and updated the AreaStyle to incorporate TexturedStyles as well. I incorporated the rotation and opacity and other attributes but am still in the process of incorporating TexturedStyles.path and TexturedStyles.spacing.

I'm a bit confused about how are we going to start filling the textures automatically. For a start, I was thinking of looking into this line for xy_charts, but I'm confused about how do we automate the selection of texture. Is there a way to maybe add the texture data to every areaChart ?

Meanwhile, should I open a new PR with the latest updated code, since the current PR is just a draft one for discussion ?

markov00 · 2021-05-12T15:57:37Z

Meanwhile, should I open a new PR with the latest updated code, since the current PR is just a draft one for discussion ?

Hi @ron-debajyoti thanks for all your help here! If you like to open a new PR with an updated code is fine.
What do you think if we jump directly on the PR helping you on the integration part with the Theme style?
I think the most of core part of the feature is done by you and we can just add the glue to the missing pieces.

ron-debajyoti · 2021-05-12T18:13:51Z

What do you think if we jump directly on the PR helping you on the integration part with the Theme style?
I think the most of core part of the feature is done by you and we can just add the glue to the missing pieces.

Yeah, that would be great as well.
I pushed the latest update yesterday to this PR itself, need to refactor it a bit. Perhaps you could review it and guide me the integration part.

ron-debajyoti · 2021-05-16T15:48:24Z

Hey @nickofthyme @markov00,
A gentle reminder that it would be helpful if the latest changes are reviewed and provide some guidance towards the integration part.

markov00

hi @ron-debajyoti I've wrote some comments on the PR that should help you complete the work.
In particular how to get the texture from the style object of the geometry and the request to apply the pattern also to bars
Thanks a lot for that huge work

src/chart_types/xy_chart/renderer/canvas/primitives/path.ts

src/utils/themes/theme.ts

src/chart_types/xy_chart/renderer/canvas/renderers.ts

src/utils/themes/textures.ts

src/utils/themes/theme.ts

- use shared svg shape paths - pull texture styles from theme - add more options to texture theme styles - add global pattern rotation and offset - add stories to showcase changes - dry up degree to radian conversions

- Add texture option to rect styles - improves shared geom highlight opacity usage - set default rectBorder.strokeWidth to 1, visible will hide - improve stories with bar series option

nickofthyme · 2021-05-27T21:42:05Z

@ron-debajyoti I made a few changes to the great start you provided, I hope you don't mind me pushing to your branch 😅. I think this is for the most part complete in terms of the overall implementation, @markov00 let me know if I'm missing something.

I wired up the texture styles to the theme and passed a few global options to change the overall rotation and offset of the pattern. Also added the textures to the bar rect styles.

I also added two stories to play with the textures in our storybook. To see them you can just run...

yarn && yarn start

Then visit either and play with the knob inputs:

I think the only thing remaining is to fix the unit and visual regression tests. I can look at those tomorrow unless you'd like to take a stab at it.

Anyways, lmk if you have any questions or comments on the changes. I'd be happy to explain.

ron-debajyoti · 2021-06-06T15:23:55Z

Hey @nickofthyme @markov00 ,
I believe most of the integration work is already done by @nickofthyme. Honestly, the ending work couldn't have been at the same level of finesse by me and I learned a lot through these contributions. Thanks a lot once again for allowing me to contribute. Perhaps we could merge and close this.

On another note, do you think is it a good idea for me to take up some of the other open beginner level issues of this project despite not being a core member of elastic? I got a good overall feel of the codebase and would love to improve my skills esp. writing modular code.

nickofthyme · 2021-06-07T14:06:57Z

Jenkins test this please

nickofthyme · 2021-06-07T16:41:11Z

Jenkins test this please

nickofthyme · 2021-06-07T16:44:16Z

@markov00 both stories seem to work fine with bars for me. Let me know if you see something different.

Screen.Recording.2021-06-07.at.11.43.26.AM.mp4

nickofthyme · 2021-06-07T16:53:42Z

On another note, do you think is it a good idea for me to take up some of the other open beginner level issues of this project despite not being a core member of elastic? I got a good overall feel of the codebase and would love to improve my skills esp. writing modular code.

@ron-debajyoti If you'd like to take on another issue I compiled a list of potentially good issues to tackle under the good first issue label. If you'd like to take a look at those and pick one you'd like to focus on we can refine the scope of the issue and make sure we have a clear understanding of the solution.

nickofthyme · 2021-06-07T17:27:20Z

Jenkins retest this please

nickofthyme · 2021-06-08T18:46:25Z

Jenkins test this please

# [30.1.0](v30.0.0...v30.1.0) (2021-06-08) ### Features * **a11y:** add textures to fill options ([#1138](#1138)) ([fd0479f](fd0479f))

nickofthyme · 2021-06-08T22:37:45Z

🎉 This PR is included in version 30.1.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

# [30.1.0](elastic/elastic-charts@v30.0.0...v30.1.0) (2021-06-08) ### Features * **a11y:** add textures to fill options ([opensearch-project#1138](elastic/elastic-charts#1138)) ([6e03cd9](elastic/elastic-charts@6e03cd9))

ron-debajyoti added 3 commits April 18, 2021 19:03

feat: texture: Add svg image to chart_types

58f3a73

feat(textures): an example of allowing textures with colors, implemen…

9b95ddd

…ted in xy_chart

feat(textures): update package.json

4bfdb13

ron-debajyoti changed the title ~~feat (a11y) : A draft PR for adding textures with colors. #1061~~ feat (a11y) : A draft PR for adding textures with colors. Apr 24, 2021

nickofthyme changed the title ~~feat (a11y) : A draft PR for adding textures with colors.~~ feat(a11y): A draft PR for adding textures with colors. May 3, 2021

nickofthyme changed the title ~~feat(a11y): A draft PR for adding textures with colors.~~ feat(a11y): add textures to fill options May 3, 2021

nickofthyme reviewed May 3, 2021

View reviewed changes

feat(a11y): add partial refactor of textures implementation

9e79aff

ron-debajyoti added 2 commits May 11, 2021 21:33

feat(a11y): add rotation attribute for textures

66b0570

Merge branch 'master' into texture-fill

16b9525

fix(a11y): refactor functions in xy_chart

8eb2b44

markov00 reviewed May 19, 2021

View reviewed changes

ron-debajyoti and others added 3 commits May 20, 2021 19:14

Merge branch 'master' into texture-fill

9a2fe5d

chore: cleanup area texture logic

df766a8

- use shared svg shape paths - pull texture styles from theme - add more options to texture theme styles - add global pattern rotation and offset - add stories to showcase changes - dry up degree to radian conversions

feat: add textures to rect fill styles

10518c5

- Add texture option to rect styles - improves shared geom highlight opacity usage - set default rectBorder.strokeWidth to 1, visible will hide - improve stories with bar series option

nickofthyme added :accessibility Accessibility related issue :styling Styling related issue enhancement New feature or request labels May 27, 2021

nickofthyme added 2 commits May 27, 2021 16:32

fix: broken bar story

23b84a3

Merge branch 'master' into texture-fill

4323470

Merge branch 'master' into texture-fill

741db93

nickofthyme added 2 commits May 28, 2021 16:30

test: fix failing tests, add new texture tests with canvas mocks

e7a807e

test: add vrt test and update broken test

89c1532

nickofthyme marked this pull request as ready for review May 28, 2021 22:51

nickofthyme requested review from markov00 and nickofthyme May 28, 2021 22:51

monfera and others added 3 commits June 7, 2021 14:11

fix: render nodeLabel formatted text into the nodes

73d6244

Merge branch 'master' into texture-fill

3504822

Merge remote-tracking branch 'ron/texture-fill' into texture-fill

f1836e4

nickofthyme approved these changes Jun 7, 2021

View reviewed changes

fix: also apply the dpi scaler to the pattern canvas itself

a37df95

Merge branch 'master' into texture-fill

4f31500

nickofthyme added 4 commits June 8, 2021 11:24

Merge branch 'master' into texture-fill

65a9ee6

Merge branch 'master' into texture-fill

8fa599c

Merge remote-tracking branch 'ron/texture-fill' into texture-fill

d191ead

chore: remove added texture

be73881

nickofthyme merged commit fd0479f into elastic:master Jun 8, 2021

nickofthyme pushed a commit that referenced this pull request Jun 8, 2021

chore(release): 30.1.0 [skip ci]

f7fbc12

# [30.1.0](v30.0.0...v30.1.0) (2021-06-08) ### Features * **a11y:** add textures to fill options ([#1138](#1138)) ([fd0479f](fd0479f))

nickofthyme added the released Issue released publicly label Jun 8, 2021

markov00 mentioned this pull request Jun 14, 2021

Improve texture coloring on bar/area #1202

Open

flash1293 mentioned this pull request Jun 14, 2021

[Lens] Expose texture settings for bars and areas in Lens elastic/kibana#102037

Open

myasonik mentioned this pull request Jul 1, 2021

Colorblind Mode for Kibana Visualizations elastic/kibana#10726

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(a11y): add textures to fill options #1138

feat(a11y): add textures to fill options #1138

ron-debajyoti commented Apr 24, 2021 •

edited by nickofthyme

Loading

kibanamachine commented Apr 24, 2021

ron-debajyoti commented Apr 24, 2021

ron-debajyoti commented May 3, 2021

nickofthyme commented May 3, 2021

nickofthyme left a comment

ron-debajyoti commented May 11, 2021

markov00 commented May 12, 2021

ron-debajyoti commented May 12, 2021

ron-debajyoti commented May 16, 2021

markov00 left a comment

nickofthyme commented May 27, 2021 •

edited

Loading

ron-debajyoti commented Jun 6, 2021

nickofthyme commented Jun 7, 2021

nickofthyme commented Jun 7, 2021

nickofthyme commented Jun 7, 2021

nickofthyme commented Jun 7, 2021 •

edited

Loading

nickofthyme commented Jun 7, 2021

nickofthyme commented Jun 8, 2021

nickofthyme commented Jun 8, 2021

feat(a11y): add textures to fill options #1138

feat(a11y): add textures to fill options #1138

Conversation

ron-debajyoti commented Apr 24, 2021 • edited by nickofthyme Loading

Summary

Details

Limitations

Connected issues

Todos:

Checklist

kibanamachine commented Apr 24, 2021

ron-debajyoti commented Apr 24, 2021

ron-debajyoti commented May 3, 2021

nickofthyme commented May 3, 2021

nickofthyme left a comment

Choose a reason for hiding this comment

ron-debajyoti commented May 11, 2021

markov00 commented May 12, 2021

ron-debajyoti commented May 12, 2021

ron-debajyoti commented May 16, 2021

markov00 left a comment

Choose a reason for hiding this comment

nickofthyme commented May 27, 2021 • edited Loading

ron-debajyoti commented Jun 6, 2021

nickofthyme commented Jun 7, 2021

nickofthyme commented Jun 7, 2021

nickofthyme commented Jun 7, 2021

nickofthyme commented Jun 7, 2021 • edited Loading

nickofthyme commented Jun 7, 2021

nickofthyme commented Jun 8, 2021

nickofthyme commented Jun 8, 2021

ron-debajyoti commented Apr 24, 2021 •

edited by nickofthyme

Loading

nickofthyme commented May 27, 2021 •

edited

Loading

nickofthyme commented Jun 7, 2021 •

edited

Loading