My Charts in the Prototype Vue.js UserCP


 
Thread Tools Search this Thread
The Lounge What is on Your Mind? My Charts in the Prototype Vue.js UserCP
# 1  
Old 02-26-2019
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.

Code:
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!

Image

Image
This User Gave Thanks to Neo For This Post:
# 2  
Old 02-27-2019
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"?

Last edited by nezabudka; 02-27-2019 at 02:34 AM..
This User Gave Thanks to nezabudka For This Post:
# 3  
Old 02-27-2019
Yes,

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

You have no idea how much time it takes Smilie

I think you are taking about a lot more than just moving menu items arounds; but maybe I just misunderstand you?
These 2 Users Gave Thanks to Neo For This Post:
# 4  
Old 02-27-2019
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:

Code:
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 Smilie

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

Code:
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 Smilie
This User Gave Thanks to Neo For This Post:
# 5  
Old 02-27-2019
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:

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

Image
This User Gave Thanks to Neo For This Post:
# 6  
Old 02-27-2019
A shout-out of thanks again to Cristi Jora (Creative Tim) for pointing me to this potential solution to "reactive charts":

Code:
https://codesandbox.io/s/yknmk8or1z

Quote:
Hey Neo

I found an older sandbox for you
Reactive chart with Vue chart.js - CodeSandbox

Take a look at generateData function inside App.vue
You have to re-assign the whole `chart-data` object rather than modify it.
Let me know if this helps
It's really great to have someone who can provide me some help with Vue.js! Much appreciated Cristi Jora ! Thank you!
# 7  
Old 02-27-2019
Quote:
Originally Posted by nezabudka
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"?
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" Smilie

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.
This User Gave Thanks to Neo For This Post:
Login or Register to Ask a Question

Previous Thread | Next Thread

10 More Discussions You Might Find Interesting

1. What is on Your Mind?

Video Overview of the Vue.js UserCP @UNIX.com

Here is my second live video screencast (in my life, using Camtasia) with voice for the new usercp: Overview of the Vue.js UserCP @UNIX.com Shout outs to Don Cragun, Corona688, Rudi, Wolf, Made in Germany, stomp, Ravinder, Creative Tim, PubNub and others in the video. Thanks. If you are... (1 Reply)
Discussion started by: Neo
1 Replies

2. What is on Your Mind?

UserCP Screeching Frog 0.7446 Using Vue.js

Here is a status update on the new forum usercp. The current version of the new UserCP is Screeching Frog v0.7446. Most users will need to clear the files from your browser cache, quit and restart your browser to see the new version (check bottom of the page for version). Safari seems to... (9 Replies)
Discussion started by: Neo
9 Replies

3. What is on Your Mind?

Major Changes in New UserCP (v0.63) Prototype

Regarding the latest version of the UserCP prototype (version 0.63) I have made a lot of major changes, including Added a "Posts Timeline" table for the recent posts, complimenting the non-table version earlier, which has been moved off the main menu (link at the bottom of the table). Added a... (4 Replies)
Discussion started by: Neo
4 Replies

4. Web Development

Simple Vue.js Component to Redirect to External Web Page Using Vue Router

Vue Router has some quirks and on of the quirks is that it is not reliable when adding external links using the vue-router library. After struggling with many solutions, I have found that creating a simple Vue.js component like this one seems to work the best (so far): Component Example: ... (0 Replies)
Discussion started by: Neo
0 Replies

5. What is on Your Mind?

UserCP Prototype v0.53 Quick Search in Navbar

FYI. In version 0.53 of the new UserCP I am working on, the top navbar search works; but I'm still displaying the results in the main forums. I in the future, I may being to change this to display the results in the new UserCP. https://www.unix.com/members/1-albums225-picture1118.png (2 Replies)
Discussion started by: Neo
2 Replies

6. What is on Your Mind?

Congrats to Nezabudka for her Formulator Badge (UserCP Prototype v0.40)

Please join me in thanking one of our most active new members, nezabudka, who suggested that we start using the new usercp prototype and change the menu items around, effectively "promoting" the new prototype CP. At first, I did not understand her suggestion, but after 'coming down" from days of... (1 Reply)
Discussion started by: Neo
1 Replies

7. Web Development

New Badge Timeline in Vue.js UserCP Mockup

Continuing to think Vue.js is AWESOME, we now have a new badges timeline in version 0.26 of the UserCP Mockup: https://www.unix.com/cp/index.php#/pages/badges Changes: Added Mockup from Badges timeline. Changed notifications (upper right) to use v-for: bindings. Fixes minor vue routing... (0 Replies)
Discussion started by: Neo
0 Replies

8. Web Development

New Discussion Timeline in Vue.js UserCP Mockup

Well, thanks to the amazing power of Vue.js, we now have a new timeline in version 0.23 of the UserCP Mockup: Wow! I'm really impressed with Vue.js. https://www.unix.com/cp/index.php#/pages/timeline In this version: Created database, and PHP model for the remote AJAX (Axios) call to... (1 Reply)
Discussion started by: Neo
1 Replies

9. Web Development

MySQL Query to Build Mockup Vue.js UserCP Timeline Page

Here is the query (and some sample results) I plan to use to build a new timeline page in the mockup vue.js usercp I am working on. When the postid is the same as lastpostid, this means the timeline entry will be - "{{Member}} Started Discussion {{Thread Title}} at {{date and time}}" and when... (4 Replies)
Discussion started by: Neo
4 Replies

10. Web Development

Vue.js UserCP Mockup Version 0.20 - Badge Notifications

Vue.js UserCP Mockup Version 0.20 - Badge Notifications https://www.unix.com/cp/index.php#/dashboardIn this mockup release: Badge Notifications are working with live data: Upper Right (see image) Added Axios to Vue and changed large table updates to axios (ajax) Note: Will reformat... (2 Replies)
Discussion started by: Neo
2 Replies
Login or Register to Ask a Question