Closed ShadyStego closed 2 years ago
I'm using the docs example as is, and it seems that the boxplot svg is misaligned.
const frameProps = { data: [ { theaterCount: 4, rank: 18, grossWeekly: 327616, title: "Ex Machina" }, { theaterCount: 39, rank: 15, grossWeekly: 1150814, title: "Ex Machina" }, { theaterCount: 1255, rank: 6, grossWeekly: 7156570, title: "Ex Machina" }, { theaterCount: 1279, rank: 6, grossWeekly: 3615000, title: "Ex Machina" }, { theaterCount: 2004, rank: 6, grossWeekly: 5212462, title: "Ex Machina" }, { theaterCount: 1718, rank: 9, grossWeekly: 3108609, title: "Ex Machina" }, { theaterCount: 896, rank: 12, grossWeekly: 2248258, title: "Ex Machina" }, { theaterCount: 506, rank: 13, grossWeekly: 1122034, title: "Ex Machina" }, { theaterCount: 302, rank: 19, grossWeekly: 551552, title: "Ex Machina" }, { theaterCount: 194, rank: 20, grossWeekly: 316877, title: "Ex Machina" }, { theaterCount: 124, rank: 29, grossWeekly: 201345, title: "Ex Machina" }, { theaterCount: 81, rank: 34, grossWeekly: 153162, title: "Ex Machina" }, { theaterCount: 61, rank: 36, grossWeekly: 102114, title: "Ex Machina" }, { theaterCount: 39, rank: 42, grossWeekly: 64350, title: "Ex Machina" }, { theaterCount: 31, rank: 47, grossWeekly: 45344, title: "Ex Machina" }, { theaterCount: 10, rank: 24, grossWeekly: 240160, title: "Far from the Madding Crowd" }, { theaterCount: 99, rank: 15, grossWeekly: 1090487, title: "Far from the Madding Crowd" }, { theaterCount: 289, rank: 10, grossWeekly: 1831958, title: "Far from the Madding Crowd" }, { theaterCount: 865, rank: 7, grossWeekly: 3779833, title: "Far from the Madding Crowd" }, { theaterCount: 902, rank: 9, grossWeekly: 2246233, title: "Far from the Madding Crowd" }, { theaterCount: 610, rank: 14, grossWeekly: 1129007, title: "Far from the Madding Crowd" }, { theaterCount: 366, rank: 17, grossWeekly: 701207, title: "Far from the Madding Crowd" }, { theaterCount: 256, rank: 20, grossWeekly: 430870, title: "Far from the Madding Crowd" }, { theaterCount: 122, rank: 24, grossWeekly: 270977, title: "Far from the Madding Crowd" }, { theaterCount: 105, rank: 28, grossWeekly: 195483, title: "Far from the Madding Crowd" }, { theaterCount: 98, rank: 30, grossWeekly: 138071, title: "Far from the Madding Crowd" }, { theaterCount: 74, rank: 39, grossWeekly: 86393, title: "Far from the Madding Crowd" }, { theaterCount: 47, rank: 42, grossWeekly: 52821, title: "Far from the Madding Crowd" }, { theaterCount: 27, rank: 58, grossWeekly: 25708, title: "Far from the Madding Crowd" }, { theaterCount: 18, rank: 60, grossWeekly: 17292, title: "Far from the Madding Crowd" }, { theaterCount: 3366, rank: 3, grossWeekly: 16660516, title: "The Longest Ride" }, { theaterCount: 3371, rank: 5, grossWeekly: 9372323, title: "The Longest Ride" }, { theaterCount: 3140, rank: 7, grossWeekly: 5507604, title: "The Longest Ride" }, { theaterCount: 2115, rank: 10, grossWeekly: 2369655, title: "The Longest Ride" }, { theaterCount: 1464, rank: 11, grossWeekly: 1823683, title: "The Longest Ride" }, { theaterCount: 803, rank: 14, grossWeekly: 780244, title: "The Longest Ride" }, { theaterCount: 329, rank: 17, grossWeekly: 419930, title: "The Longest Ride" }, { theaterCount: 230, rank: 21, grossWeekly: 226064, title: "The Longest Ride" }, { theaterCount: 155, rank: 28, grossWeekly: 126320, title: "The Longest Ride" }, { theaterCount: 116, rank: 31, grossWeekly: 101719, title: "The Longest Ride" }, { theaterCount: 45, rank: 40, grossWeekly: 33808, title: "The Longest Ride" }, { theaterCount: 24, rank: 56, grossWeekly: 17379, title: "The Longest Ride" }, { theaterCount: 9, rank: 67, grossWeekly: 6872, title: "The Longest Ride" } ], size: [700, 400], margin: { left: 160, bottom: 90, right: 10, top: 40 }, type: "point", summaryType: "boxplot", projection: "horizontal", oPadding: 20, oAccessor: "title", rAccessor: "rank", rExtent: [0], style: (d) => { return { r: 2, fill: d && colors[d.title] } }, summaryStyle: (d) => ({ fill: d && colors[d.title], fillOpacity: 0.2, stroke: d && colors[d.title], strokeWidth: 0.5 }), title: "Box Office Movies by Rank", axes: [{ orient: "bottom", label: "Rank" }], oLabel: true } return <OrdinalFrame {...frameProps} />
The amount of pixels shifted is not fixed. E.g. if I adjust the size to [700,240], the box plot is now shifted downwards (instead of upwards):
This is fixed in 2.0 if you want to upgrade. You can try it out 2.0.0-rc.16 to see. We should have a migration guide coming soon but if you have issues feel free to post them and I can answer them ad hoc.
2.0.0-rc.16
I'm using the docs example as is, and it seems that the boxplot svg is misaligned.
The amount of pixels shifted is not fixed. E.g. if I adjust the size to [700,240], the box plot is now shifted downwards (instead of upwards):