cgatno / sunburst-chart-periodic-table

Recreation of The Periodic Table of the Elements using a Wijmo sunburst chart and some custom JavaScript. ⚗️📊
https://www.grapecity.com/en/blogs/rethinking-periodic-table-wijmo-sunburst/
Other
8 stars 2 forks source link

Feature request #6

Open zladuric opened 7 years ago

zladuric commented 7 years ago

Or a suggestion: keyboard navigation. I love the project, and as I was clicking, I've immediately wanted to do keyboard navigation. If that sounds interesting, I'll see about doing that part.

cgatno commented 7 years ago

Hi there! I think that's a great idea! I've thought about adding better interaction support (keyboard and touch) but haven't had the chance yet. If you want to go ahead and give the keyboard interaction a shot, I'll assign this issue to you.

I know I don't have very rigid contribution rules stated or anything, so just keep everything pure JS and write the code however you feel most comfortable! We can discuss specifics after things get underway.

If you have any questions just let me know! Thanks for offering to help out and for the great idea!

zladuric commented 7 years ago

@cgatno I've done a bit around this, but I have no experience whatsoever with Wijmo5 widgets. Do you know of an y way to give the details about the given (clicked or selected) tile? It's an SVG and if I try to manually calculate what is left and right by walking the SVG paths, I'm afraid it's too much.

cgatno commented 7 years ago

@zladuric I totally understand! Admittedly, sometimes the Wijmo documentation and software design have a relatively steep learning curve. I went ahead and added a new property to the mySunburst object called selectedItem. It returns an object representing the selected item on the chart (check out commit f194d4426b1d6738099613beec335876d3baa924).

If you checkout the feature/extend_selected_item branch, you can run the demo and see that every time you click a panel on the chart, its item representation is logged to the console.

The object stored in mySunburst.selectedItem (I only extended this property on the mySunburst object to avoid 'contaminating' the prototype) has several useful properties like level (which gives the hierarchical level of the selected item, zero-based index) and chartIndex (which gives the overall zero-based index of the item in the chart).

Now that I finished making some other improvements on the chart, I am free to help out with this. I am still a little unsure about how to go about this design-wise. For example, if the selectedItem is on the first "tier" and the user presses the right arrow key, which "sub group" should be selected?

If you have any ideas, I'd love to hear them! We can also work on extending mySunburst to provide other functions if you think it would be helpful. Maybe itemAt(index) or itemAtCoords(x, y) would be helpful? Just let me know, and thank you for taking the time to look at this.

P.S. This code (which is already in app.js) represents how you can get a chart item at a certain point on the screen:

const ht = mySunburst.hitTest(e);
myPropTile.showInfoPanel(ht.item);

where e is the event arguments object from a mouse click event.