Add page in user profile

Dinendal

@julian Perfect ! It's a very good example.
Another question, i need some Charts on this page. I saw that the chart.js plugin is used in the admin dashboard.
I saw the TPL file who "draw" this page too (dashboard.tpl), but could you show me from where these charts are created please ? I can't find the JS file.

julian

@Dinendal https://github.com/NodeBB/NodeBB/blob/master/public/src/admin/general/dashboard.js#L129

Dinendal

@julian Thanks a lot.
Is there a way to use a hook when this page created by the plugin is built ? I tried several sorts of config with ".build" hooks (like : "filter:account.myPluginTPL.build") but it seems to not work like a "static" page or I did not really understand.

EDIT : Ok I found a solution.
I use the hook : "filter:middleware.render" and add a condition with match function to be sure that's my new page loading.

<baris>

The hook for the profile page is filter:account/profile.build

Dinendal

@baris Ok thanks, i'll see that.

How nodejs interact with the DOM to create/update charts in the admin panel ?
I searched in the code but I can't see where "document" is declared.
Is there a way to do this with JSDOM or it's managed in another way ?

chart.js need the context so :

var ctx = document.getElementById("myChart");

But from the server side document is undefined, so I tried some declaration :

const jsdom = require("jsdom");
const { JSDOM } = jsdom;
const { document } = new JSDOM(IDontReallyKnowWhatToPutInHere);

Could you explain to me how this works or link me an example of this from NodeBB please ? Because I can't see anything in dashboard.js about that.

<baris>

The ACP chart code is in https://github.com/NodeBB/NodeBB/blob/master/public/src/admin/general/dashboard.js, you can look for new Chart

Dinendal

@baris Ok, but I don't understand how this could work on server side, for example :

var trafficCanvas = document.getElementById('analytics-traffic');

Dinendal

@julian I tried to add the same code as the admin panel in my plugin but I always got the same error :

ReferenceError: document is not defined

What's the trick to use "document" and use/modify elements on server side ?

julian

Erm... you cannot call Chart.js on the server-side. It's a client-side charting library...

Dinendal

@julian So the way to achieve that, is to use the library on the client side and to request data with socket.io, i think.

Is it possible to integrate JS file from the node_modules directory in the page with tags <script></script> ? Can't find the path.

I use a copy of chart.js in the public directory : /uploads/script/chart.js

julian

You either request the data with socket.io, or you put it in the template data when you render the page itself.

If it's in the page template itself, it is accessible on the client side via ajaxify.data

Chart.js you can get on the client side via

require(['Chart'], function (Chart) { ... });