MagicMirror Forum
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • 3rd-Party-Modules
    • Donate
    • Discord
    • Register
    • Login
    A New Chapter for MagicMirror: The Community Takes the Lead
    Read the statement by Michael Teeuw here.

    Encapsule chart.js plugins?

    Scheduled Pinned Locked Moved Development
    10 Posts 2 Posters 1.0k Views 2 Watching
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • A Offline
      Ashaman
      last edited by

      Hi everyone, this is my first post here.

      I started to set up my MM one month ago.
      Initialy I set up some basic modules, but I had trouble finding modules that could handle what I wanted to display on my MM.
      I have very little experience with coding, but it’s 2024 and I use AI a lot at work. I have mostly used AI to guide me in making my custom modules, and AI can help with a lot (but not everything).

      I have made 4-5 custom modules now, three of them focus on electricity info, the rest is updated weather-modules that uses the new Yr.no API.

      The problem I have now is with chart.js plugins.
      I have one module to display prices the next few days. It uses chart.js annotations.
      Screenshot_20240124_214637_Samsung Internet.jpg

      The other module display my daily consumption for the month, and it uses chart.js datalabels.
      My problem is that if both modules are active, the module drawn “last” removes the plugin on the other. So the price-module loose the annotations.
      Screenshot_20240201_121844_Samsung Internet.jpg

      Is there a way to “encapsule” chart.js inside each module? Or any other way to make sure they don’t interfer with eachother?
      I don’t have much experience with the “depths” on how MM works, so any enlightenment is highly apprechiated!

      Both modules have different canvas-id, both have chart.umd.js installed and start them from the node_modules (I have tried a vendors folder too, but no luck).
      I can paste/attach the code if needed.

      S 1 Reply Last reply Reply Quote 0
      • S Away
        sdetweil @Ashaman
        last edited by

        @Ashaman no cannot encapsulate a lib to only one module

        Sam

        How to add modules

        learning how to use browser developers window for css changes

        A 1 Reply Last reply Reply Quote 0
        • A Offline
          Ashaman @sdetweil
          last edited by

          @sdetweil Can chart.js run on two different modules with different plugins without interfering with one another?

          Both modules have chart.js 4.4.1 installed.
          Both use chartjs.umd.js (min was not installed with npm, as I understand, this was changed last year?).

          I might try to just combine the two modules into one module, if you think it is worth a try?

          S 1 Reply Last reply Reply Quote 0
          • A Offline
            Ashaman
            last edited by

            I tried to swap the order of the modules and have the consumption-module first, then the price-module, and they suddenly work as intended!!

            I havw tried that before, but it’s been a while since I tested that, so I have probably changed something.
            Not optimal, but a workaround I can live with.
            Still apprechiate any feedback if someone have a suggestion!

            S 1 Reply Last reply Reply Quote 0
            • S Away
              sdetweil @Ashaman
              last edited by sdetweil

              @Ashaman I don’t know. but I suspect no. I would guess they clear the list on a new instance.

              I have not used any plugins

              yes for combining modules

              Sam

              How to add modules

              learning how to use browser developers window for css changes

              1 Reply Last reply Reply Quote 0
              • S Away
                sdetweil @Ashaman
                last edited by

                @Ashaman awesome

                Sam

                How to add modules

                learning how to use browser developers window for css changes

                A 1 Reply Last reply Reply Quote 0
                • A Offline
                  Ashaman @sdetweil
                  last edited by

                  @sdetweil
                  Some further testing:
                  If i define the chart.umd.js in the price module, and comment out the line for chart.umd.js in the consumption-module, the modules work in the order I want!

                  getScripts: function() {
                  return [
                  this.file(‘vendor/chart.umd.js’),

                  If the module that is listed “on top” in the config gets the chart.umd.js script, it will fix both modules.

                  (The lables is placed wrong in the consumption-module if it is above the price-module, but I guess that can be fixed somehow.)

                  Problem is solved, but I don’t know why! :grinning_face_with_sweat:

                  S 1 Reply Last reply Reply Quote 0
                  • S Away
                    sdetweil @Ashaman
                    last edited by

                    @Ashaman why? cause the initialization order matters to chartjs.

                    again, they would never see two apps on the same web page in normal life. in different tabs, sure, but those are different instances

                    Sam

                    How to add modules

                    learning how to use browser developers window for css changes

                    A 1 Reply Last reply Reply Quote 0
                    • A Offline
                      Ashaman @sdetweil
                      last edited by

                      @sdetweil Yes, I see that now. I also think I have a strategy if I ever need more modules using chart.js. Make sure they run the same version, and initialize in the “first” module only.

                      Thank you so much for your help!

                      S 1 Reply Last reply Reply Quote 0
                      • S Away
                        sdetweil @Ashaman
                        last edited by

                        @Ashaman cool. understand that this problem happens whenever multiple modules use the same script library.

                        I discovered it with QR code. my module and WiFipassword collided over different versions. wifipassword uses an older version and hasn’t been updated.i wanted to use a feature in a newer version

                        so much fun…

                        Sam

                        How to add modules

                        learning how to use browser developers window for css changes

                        1 Reply Last reply Reply Quote 0
                        • 1 / 1
                        • First post
                          Last post
                        Enjoying MagicMirror? Please consider a donation!
                        MagicMirror created by Michael Teeuw.
                        Forum managed by Sam, technical setup by Karsten.
                        This forum is using NodeBB as its core | Contributors
                        Contact | Privacy Policy