Problem/Motivation

It appears that the location of some of the remote JS libraries for Chart.js are no longer present. We need to find a new remote source.

Steps to reproduce

Proposed resolution

Remaining tasks

User interface changes

API changes

Data model changes

Issue fork charts-3616599

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

andileco created an issue. See original summary.

andileco opened merge request !225

andileco’s picture

andileco commented

I couldn't actually replicate some of the issues I had experienced earlier, so I think we may be able to postpone the remote sources. However, I have made a few improvements in terms of bumping the version of Chart.js and also making one of the remotes a .min.js, as that's what's brought in to the local when using npm.

andileco’s picture

andileco commented
Status: Active » Needs review
awearring’s picture

awearring commented

This fixes the issues I was having with the missing libraries/chartjs-plugin-annotation/dist/chartjs-plugin-annotation.js

However I still get the following error when I try and use a "treemap" chart type

Uncaught TypeError: can't access property "display", options.plugins.dataLabels is undefined
    attach [domain]/modules/contrib/charts/modules/charts_chartjs/js/charts_chartjs.js?v=1.x:81
    attach [domain]/modules/contrib/charts/modules/charts_chartjs/js/charts_chartjs.js?v=1.x:22
    attachBehaviors [domain]/core/misc/drupal.js?v=10.6.15:166
    attachBehaviors [domain]/core/misc/drupal.js?v=10.6.15:162
    insert [domain]/core/misc/ajax.js?v=10.6.15:1404
    jQuery 2
    insert [domain]/core/misc/ajax.js?v=10.6.15:1396
    commandExecutionQueue [domain]/core/misc/ajax.js?v=10.6.15:1046
    promise callback*Drupal.Ajax.prototype.commandExecutionQueue/< [domain]/core/misc/ajax.js?v=10.6.15:1039
    commandExecutionQueue [domain]/core/misc/ajax.js?v=10.6.15:1036
    success [domain]/core/misc/ajax.js?v=10.6.15:1095
    success [domain]/core/misc/ajax.js?v=10.6.15:584
    jQuery 8
    eventResponse [domain]/core/misc/ajax.js?v=10.6.15:796
    Ajax [domain]/core/misc/ajax.js?v=10.6.15:646
    jQuery 8
    Ajax [domain]/core/misc/ajax.js?v=10.6.15:635
    ajax [domain]/core/misc/ajax.js?v=10.6.15:267
    loadAjaxBehavior [domain]/core/misc/ajax.js?v=10.6.15:47
    loadAjaxBehavior [domain]/core/misc/ajax.js?v=10.6.15:44
    attach [domain]/core/misc/ajax.js?v=10.6.15:52
    attachBehaviors [domain]/core/misc/drupal.js?v=10.6.15:166
    attachBehaviors [domain]/core/misc/drupal.js?v=10.6.15:162
    insert [domain]/core/misc/ajax.js?v=10.6.15:1404
    jQuery 2
    insert [domain]/core/misc/ajax.js?v=10.6.15:1396
    commandExecutionQueue [domain]/core/misc/ajax.js?v=10.6.15:1046
    promise callback*Drupal.Ajax.prototype.commandExecutionQueue/< [domain]/core/misc/ajax.js?v=10.6.15:1039
charts_chartjs.js:81:15

Suggested edit is to change L80-82

            if (hasDataLabelsDisplay || hasAlternativeDataLabels) {
              options.plugins.dataLabels.display = false;
            }

to:

            if (hasDataLabelsDisplay || hasAlternativeDataLabels) {
              options.plugins = options.plugins || {};
              options.plugins.dataLabels = options.plugins.dataLabels || {};
              options.plugins.dataLabels.display = false;
            }

Initializing options.plugins and options.plugins.dataLabels before setting display = false preserves the existing intent (disable the dataLabels plugin for treemap charts) while preventing the attach-time crash.

andileco’s picture

andileco commented

@awearring, how is that? Which way of generating a treemap was causing this? Was it just the charts_api_example_chartjs module (or, have you looked at that)?

awearring’s picture

awearring commented

@andileco
I get it when using charts in a Paragraph and if `Treemap` is selected

andileco’s picture

andileco commented

Thanks! Do your errors go away when you pull the latest from this branch?

awearring’s picture

awearring commented
Status: Needs review » Active

Yes, pulling the updated branch clears that error - thanks

awearring’s picture

awearring commented
Status: Active » Needs review

Sorry, didn't spot that my comment would switch the issue to "active" - switching it back to "needs review"

awearring’s picture

awearring commented

@andileco

I think we should bump up the library version for charts_chartjs too in charts_chartjs.libraries.yml on line 37, that should then force browsers to pull the latest version (which would have resolved a problem that I've just encountered)

ckaotik made their first commit to this issue’s fork.

ckaotik’s picture

ckaotik
Primary language German
Location Berlin
commented

I've updated the copy instructions for the workspace-based package.json use. Otherwise, the npm install would fail:

$ npm run libraries:workspaces
...
> drupal-charts-chartjs-libraries@1.0.0 libraries:copy
> rimraf ../../../../../libraries/chart.js ../../../../../libraries/chartjs-adapter-date-fns ../../../../../libraries/chartjs-plugin-datalabels ../../../../../libraries/chartjs-plugin-annotation && copy-files-from-to

Reading copy instructions from file package.json

Starting copy operation in "default" mode:
 ✗ Failed to copy ../../../../../../node_modules/chartjs-plugin-annotation/dist/chartjs-plugin-annotation.js to ../../../../../libraries/chartjs-plugin-annotation/dist/chartjs-plugin-annotation.js
 ✔ Copied [ utf8 ] ../../../../../../node_modules/chart.js/dist/chart.umd.js to ../../../../../libraries/chart.js/dist/chart.umd.js
 ✔ Copied [ utf8 ] ../../../../../../node_modules/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.js to ../../../../../libraries/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.js
 ✔ Copied [ utf8 ] ../../../../../../node_modules/chartjs-plugin-datalabels/dist/chartjs-plugin-datalabels.js to ../../../../../libraries/chartjs-plugin-datalabels/dist/chartjs-plugin-datalabels.js

Encountered 1 warning. Please check.
Error: Please resolve the above mentioned warnings. Exiting with code 1.
npm error Lifecycle script `libraries:copy` failed with error:
npm error code 1
npm error path /var/www/html/web/modules/contrib/charts/modules/charts_chartjs
npm error workspace drupal-charts-chartjs-libraries@1.0.0
npm error location /var/www/html/web/modules/contrib/charts/modules/charts_chartjs
npm error command failed
npm error command sh -c rimraf ../../../../../libraries/chart.js ../../../../../libraries/chartjs-adapter-date-fns ../../../../../libraries/chartjs-plugin-datalabels ../../../../../libraries/chartjs-plugin-annotation && copy-files-from-to
andileco’s picture

andileco commented

Thank you @ckaotik (and also great to know someone's using that method). Does anyone feel comfortable marking this RTBC?

  • andileco committed d6f09ab3 on 5.2.x 
    task: #3616599 Chart.js remote libraries need updating
andileco’s picture

andileco commented
Status: Needs review » Fixed

Now that this issue is closed, review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, credit people who helped resolve this issue.