SamratK / ko-tagCloud

A simple tag cloud creator for visual representation of data using SVG and KnockoutJS.
MIT License
2 stars 0 forks source link

Make the tagcloud more dynamic #2

Closed jbuddha closed 7 years ago

jbuddha commented 8 years ago

The example shows how to construct a tag cloud at once. Some times, the weightage will not be known while constructing the tag cloud.

For example cloudData.push({'textContent':'Facebook','url':'http://www.facebook.com','weightage':"1", 'fill':'#0000FF'}), should increment Facebook's weightage by 1. This way.. if there are times when you don't want to refresh the entire page but just update tagcloud, by making small rest call, that can be done.

SamratK commented 8 years ago

I have already mentioned details to your queries in the example itself. For first point, 'Some times, the weightage will not be known...' - in that case you can skip that parameter and it will be created with default value as given the table in README file. For the rest part of your query, I wrote a comment in the custom binding code :- //Call the TagCloud function to generate the tag cloud using the data. Every time the data changes or property of any data element changes, the tag cloud is recreated so as to avoid any misalignments of the text elements in the bounding container. Also if the browser window is resized then the also TagCloud to be recreated to be responsive.

As per the above comment it means that when you want to add, update (like in your case for facebook tag element) or delete elements you will have to change your observable array (if using knockout) and have the code that observes array to call the TagCloud with new array data. Each time the cloud has to be re-created. It wont take any page refresh. It will happen in place. I already mentioned that the reason to recreate whole cloud is to avoid misalignments. You may want to increment only facebook weightage and if the TagCloud only changes that element, then there is a chance that it may overflow the container or it may appear over another element due its new size. Also there is sorting happening on the elements and if their properties change then their position and sizes might change which will obviously need to re-create cloud. It is pretty fast process and hardly consumes any time or resources. I also mentioned in one comment already that you can get data from rest call instead of the way example is made. As you mentioned in usual scenarios that is how tag cloud updates might happen, using REST calls. Whatever the 'terms' or 'links' people are using in the website are noted on the server side and the tag clouds are updated live. I havent added any existing element checks or null checks on the given data as of now. Also the weightage range 1 - 5 is not strict. It is only advised range for optimum display. I have left it to the user how he handles his data. Thank you for your suggestion. I shall update after I make any relevant changes.