Skip to content

Fix stacking together different series types (#1037) - #1145

Merged
mcnuttandrew merged 4 commits into
uber:masterfrom
talc23:fix-stack-graph
Apr 14, 2019
Merged

mcnuttandrew merged 4 commits into
uber:masterfrom
talc23:fix-stack-graph

Conversation

@talc23

@talc23 talc23 commented Apr 5, 2019

Copy link
Copy Markdown
Contributor

Fix stacking together of different Series types.
for example, using this graph from showcase:
https://github.com/uber/react-vis/blob/master/showcase/plot/stacked-vertical-bar-chart.js

Added the last two lines to the showcase example:

        <XYPlot width={300} height={300} stackBy="y">
          <VerticalGridLines />
          <HorizontalGridLines />
          <XAxis />
          <YAxis />
          <BarSeries data={[{x: 2, y: 10}, {x: 4, y: 5}, {x: 5, y: 15}]} />
          <BarSeries data={[{x: 2, y: 12}, {x: 4, y: 2}, {x: 5, y: 11}]} />
          <LabelSeries data={[{x: 2, y: 10, label:"10"}, {x: 4, y: 5, label:"5"}, {x: 5, y: 15, label:"15"}]} />
          <LabelSeries data={[{x: 2, y: 12, label:"12"}, {x: 4, y: 2, label:"2"}, {x: 5, y: 11, label:"11"}]} />

Previously:

image

After fixing:

image

@talc23
talc23 force-pushed the fix-stack-graph branch from 4e5c99b to 16bd809 Compare April 5, 2019 13:27
@talc23

talc23 commented Apr 5, 2019

Copy link
Copy Markdown
Contributor Author

Running the tests on windows fail, what is the recommended setup for development?

@mcnuttandrew mcnuttandrew left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Hey @talc23,
This is looking good so far! I like that you have tests!! Awesome!
In your comment you say that you modified one of the show case examples, would you mind including that in this PR? (Maybe also write a test against that)

@talc23

talc23 commented Apr 7, 2019

Copy link
Copy Markdown
Contributor Author

Sure, I'll add more tests.

Please notice that if you're using a clustered stack bars graph, you can't simply add LabelSeries to the graph since it doesn't have the 'cluster' attribute. Adding LabelSeries to such a graph will result the labels to stack over with no distinction of clustering. see this comment on the original issue - #1037 (comment)

@talc23

talc23 commented Apr 12, 2019

Copy link
Copy Markdown
Contributor Author

Hi @mcnuttandrew,
Added the showcase example and a test.
Please review.

Comment thread showcase/plot/labeled-stacked-vertical-bar-chart.js Outdated
return labelData;
}
)
const bars = data.map((value, index) =>

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

nit: value -> row, i read this a couple of times as a really ineffective way to defined bars and labels

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Not very familiar with Js, what should be a more effective way to do so?

@mcnuttandrew

Copy link
Copy Markdown
Contributor

couple of code quality nits, but generally I approve. thanks for adding tests, code quality is important!

@mcnuttandrew
mcnuttandrew merged commit 67c86e2 into uber:master Apr 14, 2019
@mcnuttandrew

Copy link
Copy Markdown
Contributor

Thanks for doing this!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants