Sprinkle that Integrates Charts on Admin Pages

Share Your Project
#1

As part of my self-learning process in the impressively well organized and documented UserFrosting framework, I took a stab at creating a custom sprinkle that I can share with others and that they might also find useful.

It does not modify your database and installation simply requires updating your sprinkles.json file in the normal manner. All installation and configuration information is included in the README.md.

Package Name: frankfont/uf-sprinkle-account-graphs

Example sprinkles.json file

{
    "require": {
        "frankfont/uf-sprinkle-account-graphs" : ">=0.0"
    },
    "base": [
        "core",
        "account",
        "admin",
        "uf-sprinkle-account-graphs"
    ]
}
1 Like
#2

Hello, nice plugin. But Iā€™ donā€™t see any charts after installation. The black line with Chart Options is loading, but underneath this line there are no charts visible. In console there is one error (e.g. when Iā€™m clicking on menu Groups): The requested URL /api/graph/group/memberships was not found on this server. What could be the problem? Am I missing something?

#3

Iā€™ve looked further on this topic. Iā€™ve solved a problem with installation of npm/node.js (because of a new computer), and run bakery bake command. At the end I get the error:

Fetching from `uf-sprinkle-account-graphs`

In Migrator.php line 340:

  Unable to find the migration class '\UserFrosting\Sprinkle\UfSprinkleAccountGraphs\Databas
  e\Migrations\v2018102001\AccountGraphsUserprefsTable'.

Iā€™ve enabled the migration file, so the above error went away. But problem still exists, and the error in console is still appearing. Iā€™ll hope youā€™ll can give me an answer to the problem.

#4

Hi @franky sounds like you may need to run this command ā€¦

php bakery build-assets

If that does not fix it for you, then Iā€™ll wipe out my machine and try to recreate your error. (Thanks for reporting it!)

PS ā€“ The migrate class is deprecated and not used by the code, Iā€™m planning to remove the file but left it in the current repo for now.

#5

I wiped my installation and got the same error you reported. The error went away after I physically removed the deprecated Database migration file. New version in the repo no longer has that unused file; I expect you will not have that trouble anymore.

#6

Thx for reply. The build-assets command Iā€™ve used that before, and it gave then no error. Iā€™ve done it again, but no result. So Iā€™ve just installed a fresh copy of Userfrosting. I initially got an error with building assets, updated npm, and the fresh UF is working. I installed your plugin and build the assets and this seems to be successful, got no errors. But the graphs are still not loading. I have same error in console as before:

Failed to load resource: the server responded with a status of 404 (Not Found) - http://localhost/api/graph/group/memberships.

Should in this link ā€˜userfrosting/public/ā€™ appear before ā€˜api/graph/ā€¦ā€™?

#7

Iā€™ve seen errors like that when the file permissions are off; perhaps that is the case here too. Are you on a flavor of linux? If so, can you check that the file is owned by the right user for your webserver and has the right permissions?

Compare the file owner/permissions to assets of the core sprinkle. Should be the same. If not the same, a dirty little test would be to run this command at the sprinkle folder (warning, makes all the files WIDE OPEN):

chmod -R 777 .

PS ā€” If you run the composer update or the php bake commands as ā€œrootā€ that can mess up the permissions.

#8

Iā€™m testing on iMac OSX Mojave with MAMP-server. File permissions are the same for all Sprinkles (and correct). It seems that something is not going smooth with the assets building of the plugin.

#9

OSX is not something I have. What user did you run the composer and bake commands as?

#10

As admin with full rights. Iā€™ve also checked if there are new permissions added in your plugin, but Iā€™ve not seen them. So this must not be the problem. I will check this issue later on this week further, I hope that other UF users will install/test your plugin and comment on this post or they are successful or not. I think itā€™s important that my issue will be solved, your Sprinkle plugin is the first thatā€™s published in the forum. And can be instructional for others.

#11

Iā€™ve done a test again. On building assets there is an error:

Installing assets bundles
-------------------------

> npm run uf-assets-install

> @userfrosting/userfrosting@4.1.0 uf-assets-install /Applications/MAMP/htdocs/userfrosting/build
> gulp bower-install

fs.js:25
'use strict';
^

ReferenceError: internalBinding is not defined
    at fs.js:25:1
    at req_ (/Applications/MAMP/htdocs/userfrosting/build/node_modules/natives/index.js:137:5)
    at Object.req [as require] (/Applications/MAMP/htdocs/userfrosting/build/node_modules/natives/index.js:54:10)
    at Object.<anonymous> (/Applications/MAMP/htdocs/userfrosting/build/node_modules/graceful-fs/fs.js:1:99)
    at Module._compile (internal/modules/cjs/loader.js:722:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:733:10)
    at Module.load (internal/modules/cjs/loader.js:620:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:560:12)
    at Function.Module._load (internal/modules/cjs/loader.js:552:3)
    at Module.require (internal/modules/cjs/loader.js:658:17)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @userfrosting/userfrosting@4.1.0 uf-assets-install: `gulp bower-install`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @userfrosting/userfrosting@4.1.0 uf-assets-install script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

At the moment my knowledge is not enough to tackle this errorā€¦

#12

Updated natives to v.1.1.6 according to this link:

https://stackoverflow.com/questions/53146394/node-app-fails-to-run-on-mojave-referenceerror-internalbinding-is-not-defined

Build assets again:

UserFrosting's Assets Builder
=============================

Installing npm dependencies
---------------------------

> npm install
audited 4781 packages in 3.448s
found 22 vulnerabilities (5 low, 4 moderate, 13 high)
  run `npm audit fix` to fix them, or `npm audit` for details

Installing assets bundles
-------------------------

> npm run uf-assets-install

> @userfrosting/userfrosting@4.1.0 uf-assets-install /Applications/MAMP/htdocs/userfrosting/build
> gulp bower-install

[18:44:17] Using gulpfile /Applications/MAMP/htdocs/userfrosting/build/gulpfile.js
[18:44:17] Starting 'bower-install'...
bower.json found in 'core' Sprinkle, installing assets.
bower.json found in 'core' Sprinkle, installing assets.
bower.json found in 'account' Sprinkle, installing assets.
bower.json found in 'uf-sprinkle-account-graphs' Sprinkle, installing assets.
[18:44:19] Finished 'bower-install' after 2.4 s

Testing assets installation
---------------------------

 [OK] Assets install looks successful

But still no graphs. And the error in console is still there.

Iā€™ve run:

npm audit fix
npm ERR! code EAUDITNOPJSON
npm ERR! audit No package.json found: Cannot audit a project without a package.json

So this is it for now.

#13

@frankfont, Iā€™ve looked into this further.

  1. Iā€™ve made a simple Sprinkle myself, pure for testing, and this is loaded correctly on local machine
  2. Iā€™ve installed UF and your Sprinkle on a development server, and here the same error in console arises.
    I have to do a little extra test, but for now it seems that the problem - that your assets are not loading - could be an issue in your Sprinkle. Could you dig into this further? Thx.
#14

@Franky, can you F12 your browser and select the console view in the displayed debugger then click on the pie/chart/none chart buttons and see if there are any informative messages displayed there? Can you paste the messages into this thread; this might provide a useful clue to me. Thanks in advance!

Also, here is the full sequence I steps I go through when installing a new sprinkle ā€¦

  1. php bakery clear-cache
  2. composer update
  3. npm run uf-assets-install
  4. php bakery build-assets
#15

@frankfont, when I click in sidemenu e.g. on users the error is:
Not Found The requested URL localhost/api/graph/users-activity-summary/view was not found on this server.
The error repeats everytime I click any of the icons in the icon bar.
When I run the command php bakery build-assets --compile, everything seems to be correctly compiled. No errors. But the graphs are not displayed. In the browser inspector I can see that the assets as such are loaded in the HTML page but there is some problem to integrate the graphs. This is the HTML:

<div id="account-graph-single1" class="account-graph-single">
        <canvas id="myChart" width="400" height="80" style=""></canvas>
</div>
<div id="chartjs-tooltip">
            <table></table>
</div>

When I run your 4 commands, I get an error on the third one.
npm ERR! path /Applications/MAMP/htdocs/userfrosting/package.json
npm ERR! code ENOENT
npm ERR! errno -2
npm ERR! syscall open
npm ERR! enoent ENOENT: no such file or directory, open ā€˜/Applications/MAMP/htdocs/userfrosting/package.jsonā€™
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent

In the rootdirectory there is no package.json. Possible this is some problem? But everything else in UF works fineā€¦

#16

From this message ā€¦
Not Found The requested URL localhost/api/graph/users-activity-summary/view
ā€¦ implies the AJAX data query is failing. Since thats in javascript, the charts donā€™t get built after that.

Perhaps I can embed some more debug information into it; right now Iā€™m drawing a blank on why the data retrieval would fail like that.

Can you try one of the dedicated pages like these?

  • localhost/graph/group/memberships
  • localhost/graph/role/memberships
  • localhost/graph/permission/memberships
  • localhost/graph/activity/view
#17

they give Not Found error: e.g. The requested URL /graph/role/memberships was not found on this server.

#18

Aha, that would explain the ajax failing too. Looks like none of the custom routes are being recognized. Not clear why that would be. Is there any step from the following list that you are not doing ā€¦

  1. php bakery clear-cache <-- from docroot

  2. composer update <-- from docroot

  3. npm run uf-assets-install <-- from the **build** folder

  4. php bakery build-assets <-- from docroot
#19

Alle the steps are followed, also the npm run command from the build-directory. But still no graphs, and same error in the consoleā€¦

Under menu dashboard there is also an error in console, but this seems not having any effect, not on UF, and I think not on your Sprinkle.

ufTable could not be initialized: wrapper element does not exist, or does not contain a matched tableElement (see https://learn.userfrosting.com/client-side-code/components/tables )

#20

@Franky Iā€™m currently stumped on why none of the custom routes are being recognized in your install. Can you paste one of the URLs, for example the dashboard, that does work in your browser? Iā€™d like to rule out something obviously different/wrong that could have to do with the web server configuration.

UPDATE: Tip from the chat room (thanks @Amos_Folz)
https://learn.userfrosting.com/troubleshooting/common-problems#deployment-production