Radar chart tooltips#992
Conversation
|
|
mcnuttandrew
left a comment
There was a problem hiding this comment.
Hey @emilyjeppson,
This is great! Thanks for doing this! I liked that you gave mouse overs to the custom SVG in doing so.
| import RadarChart from 'radar-chart'; | ||
| import {Hint} from 'index'; | ||
|
|
||
| const DATA = [ |
There was a problem hiding this comment.
I think your example will stand out more if these series don't all have the same fils
There was a problem hiding this comment.
So the reason I did it this way is because I wanted to closely mimic my implementation, which uses the first 5 sets of data to draw polygon-shaped gridlines. (Similar to CircularGridLines, but with straight lines instead of round.) This makes it look more like a traditional "Spider" radar chart, which I thought could be useful for others trying to implement a radar chart? I did change them to alternating gray/white, but I could also completely remove them if you think that's better.
There was a problem hiding this comment.
Oh i see! In that case, i think this is probably fine for now if you leave a comment in the code about what this is the way it is. In the future it would be good to add a new component just for the radar chart to produce those spider grids (in fact would you mind creating an issue to that effect?).
| }; | ||
| }); | ||
|
|
||
| return ( |
There was a problem hiding this comment.
so instead of mapping all of your points to customSVGSeries here you'd would just map them to an array and then use that as the input to a mark series or voronoi
There was a problem hiding this comment.
I looked into the voronoi for a little bit, and I agree it would be cool to add here (but I didn't add it)
There was a problem hiding this comment.
Fair this PR has already gotten quite large
|
Oh I was trying to find this pr (#771) yesterday, this resolves that |
|
Thanks @mcnuttandrew! I think this is ready for review again. I update the description to more closely align with the changes. |
mcnuttandrew
left a comment
There was a problem hiding this comment.
Oh my goodness, this is a wonderful PR. It covers a lot of different things and adds tests for everything. The last thing it needs before it can be merged in is updates to the docs for the new props you've added.
| }; | ||
| }); | ||
|
|
||
| return ( |
There was a problem hiding this comment.
Fair this PR has already gotten quite large
| @@ -75,12 +75,23 @@ test('CustomSVGSeries: Showcase Example - CustomSVGRootLevelComponent', t => { | |||
| }); | |||
|
|
|||
| test('CustomSVGSeries: Showcase Example - CustomSVGAllTheMarks', t => { | |||
| import RadarChart from 'radar-chart'; | ||
| import {Hint} from 'index'; | ||
|
|
||
| const DATA = [ |
There was a problem hiding this comment.
Oh i see! In that case, i think this is probably fine for now if you leave a comment in the code about what this is the way it is. In the future it would be good to add a new component just for the radar chart to produce those spider grids (in fact would you mind creating an issue to that effect?).
…GSeries to MarkSeries
|
Stamp! Before i merge it in will you resolve the merge conflict that has arisen? |
0afa3ea to
da89aa9
Compare
|
@mcnuttandrew Done! I think I was merging as you were writing your last comment 😄 |
|
MERGED WOOOOOOOOO |
|
WOOO!! Thanks @mcnuttandrew! |
* RadarChart: Add ability to show tooltips at the end of each polygon * Add showcase file for radar chart with tooltips * Fix eslint errors * Updates based on review: add onSeriesMouseOver, convert from CustomSVGSeries to MarkSeries * Fix lint errors * Added new params to documentation * Fix merge conflicts
* RadarChart: Add ability to show tooltips at the end of each polygon * Add showcase file for radar chart with tooltips * Fix eslint errors * Updates based on review: add onSeriesMouseOver, convert from CustomSVGSeries to MarkSeries * Fix lint errors * Added new params to documentation * Fix merge conflicts
This is a pull request for the issue I logged recently: #959
This has a few changes:
RadarChart- add the option to display axes on top of the polygons. I have charts with high opacity that cover the axes labels. I added a prop to give the option to render the axes on top (false by default). (The 1, 2, 3, 4 labels in the screenshot below illustrate this.)CustomSvgSeries- ]addonMouseOver/onMouseOuteventsRadarChart- Tooltips on the Polygon corners.onValueMouseOverandonValueMouseOutMarkSeries- has asizeof 14 so that the mouse just needs to be close to the point to show the tooltip.showcase. New tests have also been added.RadarChart-onSeriesMouseOver/onSeriesMouseOutevents: