There is a know bug deep in the Javascript library
d3.js
which causes an intermediate charting rendering bug in Vue.js . In a nutshell, when a page is reloaded the chart data is not rendered sometimes, but when the Vue.js route changes (a menu item in the UserCP is selected), it works flawlessly.
After working on the bug for two days, I had decided to "move on" for now and so I changed the landing page for the new prototype UserCP to land on a page which does not have big line chart for now.
So, in UserCP version 0.48 there is a new landing page:
https://www.unix.com/cp/index.php#/landing
and this landing page at the moment is the same as the "My Dashboard" page minus the big chart at the top.
To see the big chart at the top, if you navigate to the "My Dashboard" page, it works as it should.
I spent a lot of time reading various bug reports and discussions about this "deep d3 bug" and instead of spending more time on this, the way forward at this time seems to create landing page without these big charts. This also speed up initial loading time a bit since there is no big chart to render on landing.
Later I will change the landing page and / or the my dashboard pages around so they are not so similar. But I want to see how it performs live and debug a bit more before I make a commitment to the new landing page.
Cheers.