My Charts in the Prototype Vue.js UserCP

Yea.... something I thought would take me an hour ended up taking most of the day. Well, it's not like those YT video tutorials where it take a week or more to make a video and the guys (gals) make it look so easy. But having said that, I'm happy to share with forum members the first "My Charts" page in this version 0.33 of the prototype.

https://www.unix.com/cp/index.php#/dashboard

Just go to the link above and click on "My Charts" to see the initial stats I created today.

Let me know if you like it! Thanks!

1 Like

How about by swapping menu items in "User CP".
For example raise upper
"User CP Prototype" (it becomes convenient and popular. Honestly, I saw same only in the admin panels)
and lower down
"Edit Your Details", "Edit Options"
Or move some items from "User CP" to "User CP Prototype"?
Or plan to completely replace "User CP" with "User CP Prototype"?

1 Like

Yes,

That is the plan, but developing all the code takes a lot of time.

You have no idea how much time it takes :slight_smile:

I think you are taking about a lot more than just moving menu items arounds; but maybe I just misunderstand you?

2 Likes

What I really need: .... please tell me why I have to reload the page to get the big chart at the top stats to work in this Vue.Js component:

https://www.unix.com/cp/index.php#/member/1

I have spent over 20 hours on this, and I cannot get the reactive property of one simple chart to work as it should and have been forced to store the AJAX data in localStorage() and this is a problem because localStorage() is not reactive within Vue.js, so I have to load the page and reload it, and I cannot figure it out after two full days...

You will more-than-likely need to learn a lot about web development, javascript and Vue.js to help; so if you can do that, then that is help I would appreciate :slight_smile:

The following is but one of maybe 100s of variations I have tried to no avail.... and it's really getting me down :frowning:

neo removed code because not working as it should
 

The problem is that my DB call using Vue Axios (AJAX) returns the data (the promise) after the Vue data() instance is created. It's a timing issue which I cannot resolve after days of work :slight_smile:

1 Like

Hey Nez...

Finally, I gave up on Vue.js reactive lifecycle to get the "big chart" to work without a manual reload, so I created an adhoc way to force a page reload when the Vue.js route changes.

The bottom line is you can view other members chart stats now by their userid (will get this working by username later):

Here is nezabudka's page by id:

https://www.unix.com/cp/index.php#/member/302181242

1 Like

A shout-out of thanks again to Cristi Jora (Creative Tim) for pointing me to this potential solution to "reactive charts":

https://codesandbox.io/s/yknmk8or1z

It's really great to have someone who can provide me some help with Vue.js! Much appreciated Cristi Jora ! Thank you!

OK..... I think I understand what you mean as an "intermediate step".

You want me to take the current menu items for the UserCP in the drop down nav in the main forum menu, and move those items to the new usercp prototype and begin to make the new usercp prototype the main entry to the usercp, including legacy usercp links.

That is easy to do, actually and is a great idea, now that the new usercp is coming along a 'neck breaking pace" :slight_smile:

Honestly, I was not keen to quickly promote the new usercp; but your post has motivated me to go ahead and promote the new usercp and add the legacy (not yet recoded sections) as menu items to the new CP.

That is actually a good idea (sorry it took me so long to understand it, as we don't share the same mother language and I was tired from days of debugging Vue.js code) and so, with little fanfare, but much appreciation you earned a gree "Formulator Badge" for the recent good forum ideas you have shared with us.

Thank you for this and other good ideas and for your help with the forums.

1 Like