Two questions: chart.js and LoadingIndicator component

Sivoph

Okay, so I have a custom extension built for me that analyzes stuff and posts the net total results on the front page.

I kind of mickey mouse'd things in a roundabout way by using the Custom CSS Header section to create a chart.js line graph with the following code (the InnerText is always a number):

<script>


window.addEventListener('load', (event) => {

var noob = document.getElementsByClassName("score-result")[0].innerText;
var coob = document.getElementsByClassName("score-result")[1].innerText;
var voob = document.getElementsByClassName("score-result")[2].innerText;



var data1 = {
    labels: ["Economy", "Real Estate", "Credit Scores"],
    datasets: [{
        label: 'Score',
        data: [noob, coob, voob],
        backgroundColor: [
            'rgba(255, 99, 132, 0.2)',
            'rgba(54, 162, 235, 0.2)',
            'rgba(255, 206, 86, 0.2)',
            'rgba(75, 192, 192, 0.2)',
            'rgba(153, 102, 255, 0.2)',
            'rgba(255, 159, 64, 0.2)'
        ],
       borderColor: [
            'rgba(255,99,132,1)',
            'rgba(54, 162, 235, 1)',
            'rgba(255, 206, 86, 1)',
            'rgba(75, 192, 192, 1)',
            'rgba(153, 102, 255, 1)',
            'rgba(255, 159, 64, 1)'
        ],
      
        borderWidth: 1
    }]
};
var options = {
           responsive: true,
            datasetStrokeWidth : 3,
            pointDotStrokeWidth : 4,
          
    maintainAspectRatio: false,
     // scales: {
     //        xAxes: [{
     //            type: 'linear',
     //            position: 'bottom'
     //        }]
     //    }
};

var ctx1 = document.getElementById("myLineChart").getContext("2d");


var lineChart = new Chart(ctx1, {

    type: 'line',
    data: data1,
    options: options,

    
});

});
</script>

I realize this could probably be achieved in .js file using the attributes, but for some reason I like doing things the hard/inefficient way. Anyway, after the slow and painful process of the chart rendering after everything on the page loads (I've also used a setTimeout function and should probably be using ajax), everything looks fine. But when the hash or the page changes (clicking on a post, for instance), I use the back button and the chart disappears. Only a full page load achieves the rendering and I've eliminated a common issue dealing with resizing and aspect ratio as the cause. Only thing I've hard coded in the js file is the canvas or chart div itself, nothing else. I've tried m.redraw...to no avail. Just to note: I am hosting Chart.min.js on my server.

Now with the LoadingIndicator issue. I have to write this directly into the compiled js file....when I place ,(this.loading = 1), right before the hard-coded canvas, it just shows the loading indicator and doesn't load the chart anymore. How do I stop the animation and load the canvas?

Any insight would be appreciated. Thank you.

clarkwinkelmann

where in the page is your canvas inserted?

If it's a child node of any part of Flarum's single page app, then it should probably be made into a Mithril component.

An example of a Mithril component that contains a canvas could be my Carving extension https://github.com/clarkwinkelmann/flarum-ext-carving-contest/blob/master/js/src/forum/components/PumpkinCanvas.ts

Basically if you use a Mithril component you can control how it's rendered or disposed of anytime it appears on a given page, through Mithril's lifecycle methods.

If the canvas is entirely out of the single page app, then it shouldn't be impacted by Flarum's page changes and stay visible forever. You shouldn't have to call m.redraw() unless you are also trying to refresh data displayed inside of the single page app components.

Similarly, LoadingIndicator is a Mithril component, so I'm not sure how/where you are trying to use it? I don't see any Mithril related code in your code.

Sivoph

clarkwinkelmann

Hey, Clark. To put this into context: I was having issue compiling code and finally got it working with node.js and yarn. Have a proper IDE now (atom), when I was using CodeLobster (yikes).

So what I was doing was just unminifying the js files and trying to code stuff into it, hence this beautiful beast of an endeavour. Here is a section of the mithril code:

          (r.view = function (e) {
                        if (this.loading) return m(T.a, null);
                        var i = o.a.forum.attribute("baseUrl");
                        return m(
                            "div",
                            { className: "sentiment-score-container" },
                            this.discussionScores &&
                                this.discussionScores.map(function (e) {
                                    var t = "background:#00cb0f;";
                                    return (
                                        e.data.attributes.sentimentScore < 0 && (t = "background:red;"),
                                        m(
                                            "div",
                                            { className: "single-score" },
                                            m("span", { className: "score-title" }, m(N.a, { href: i + "/d/" + e.data.attributes.slug, title: e.data.attributes.title, rel: "nofollow", className: "score-link" }, e.data.attributes.title)),
                                            m("span", { className: "score-result", style: t }, m("i", { class: "fas fa-tachometer-alt" }), " ", g(e.data.attributes.sentimentScore))
                                        )
                                    );
                                }),m("center", 

     
              m("div", {"class":"panel-heading"}, 
                m("h3", {"class":"panel-title"}, 
                  "Smart Analysis by <redacted>"
                )
              ),
              m("div", {"class":"fthis"}, 
                m("canvas", {"class":"chart","id":"myLineChart"})
         
              )
            
  

)
                        );
                    }),
                    a
                );
            })(S.a);

Please excuse my taste in class and variable names. I basically just inserted the div class and Flarum's extra css/js is used to render the chart. I have placed the entirety of the js script in the js file and it worked, but same issue with the disappearing act. I think my problem is just being a noob and not doing it the right way. I'm certain I can just use the data attr and have everything load at once, but I don't have the github repository as the closed project was given to me in a zip file (we had some time constraints and settled on that).

For loading indicator issue: I would simply place ,(this.loading = !0), at the beginning of the hack job.

MY question is on your point on mithril components: if I create a custom component, how would I then call it in the view function here? Do I need to register in extend.php or controller?

clarkwinkelmann

Sivoph which element are you currently modifying? You override r.view, what's r ?

In the same component where you return your view(), you could define an oncreate() method. That method will be called by Mithril anytime the component is inserted into the DOM. That function could update this.loading when the data is loaded/ready and call m.redraw() to make the view() method return the new template with/without the loading indicator.

If you are loading a library for the canvas, I would recommend to have the canvas element created at the same time as the component so that you can initialize the library directly in oncreate. If you don't want the canvas to be visible until your data has loaded, you could hide it with CSS so that only the loading indicator shows up. (in your current code, the canvas will only exist after the loading indicator is removed, which can make it difficult to time the initialization of the library because you don't know how long Mithril will take to redraw the component after the loading state changes)

Sivoph

clarkwinkelmann

Thanks for pointing me in the right direction, Clark. I've been watching your videos and they are quite helpful. I also forgot to email you back about the extension project. Sorry about that, it got lost in my email inbox. @Justoverclock took care of it nicely, although I'm sure you would have done a great job, too, with your level of skills.

I need to seriously look at the laravel and mithril docs along with some github repositories to understand things more. Definitely taking on the development route with Flarum as it uses modern languages and SPA/mithril is lightning fast. Hopefully will one day be contributing to the ecosystem in a meaningful way.

Sivoph

Hello, @clarkwinkelmann, so I created another widget and registered with Afrux widget, using @Justoverclock extension code as a skeleton. Main code is here:

import Widget from 'flarum/extensions/afrux-forum-widgets-core/common/components/Widget';
import app from 'flarum/forum/app';
import LoadingIndicator from 'flarum/common/components/LoadingIndicator';
import Link from "flarum/common/components/Link";

export default class chartWidget extends Widget {
    oninit(vnode) {
        super.oninit(vnode);
        this.loading = true;
    }

    oncreate(vnode) {

setTimeout(() => {
var noob = document.getElementsByClassName("score-result")[0].innerText;
var coob = document.getElementsByClassName("score-result")[1].innerText;
var boob = document.getElementsByClassName("score-result")[2].innerText;



var data1 = {
    labels: ["Economy", "Real Estate", "Credit Scores"],
    datasets: [{
        label: 'Score',
        data: [noob, coob, boob],
        backgroundColor: [
            'rgba(255, 99, 132, 0.2)',
            'rgba(54, 162, 235, 0.2)',
            'rgba(255, 206, 86, 0.2)',
            'rgba(75, 192, 192, 0.2)',
            'rgba(153, 102, 255, 0.2)',
            'rgba(255, 159, 64, 0.2)'
        ],
       borderColor: [
            'rgba(255,99,132,1)',
            'rgba(54, 162, 235, 1)',
            'rgba(255, 206, 86, 1)',
            'rgba(75, 192, 192, 1)',
            'rgba(153, 102, 255, 1)',
            'rgba(255, 159, 64, 1)'
        ],

        borderWidth: 1
    }]
};
var options = {
           responsive: true,
            datasetStrokeWidth : 3,
            pointDotStrokeWidth : 4,

    maintainAspectRatio: false,
     // scales: {
     //        xAxes: [{
     //            type: 'linear',
     //            position: 'bottom'
     //        }]
     //    }
};

var ctx1 = document.getElementById("myLineChart").getContext("2d");


var lineChart = new Chart(ctx1, {

    type: 'line',
    data: data1,
    options: options,


});

}, 7000);

 };

    className() {
        // css class for the container
        return 'chart-widget';
    }

    icon() {
        // Widget icon.
        return 'fas fa-chart-line';
    }

    title() {
        // Widget title.
        return 'Analyzer';
    }

    content() {
        if (this.loading) {
            return <LoadingIndicator />;
        }
        return (
          return m("div", {
      "class": "panel-heading"
    }, m("h3", {
      "class": "panel-title"
    }, "Smart Analysis by <redacted>")), m("div", {
      "class": "fthis"
    }, m("canvas", {
      "class": "chart",
      "id": "myLineChart"
    }), m("img", {
      "class": "img-fluid",
      "src": "",
      "id": "coolImage"
    }),
    m("script", {"src":"https://<redacted>/Chart.min.js"}),

    m.redraw());
  };

    }
}

I got the chart to re-render on a hash change event...or when the user pressed the back button and does not fully reload the page using m.redraw(). Two questions:

I use a setTimeout function to delay the getElement, otherwise the var will return undefined. Works most of the time but is there any way to structure this using a more native method? If I understand correctly, extensions fire on order of installation. That should be enough time for me to grab a div element like InnerText using another method?
Also, my LoadingIndicator will only show and not load the chart, but if I remove the if statement with the component the chart renders fine, just with no load indicator. Not sure how to incorporate a proper this statement to have it work properly.

Any insight would be appreciated. Thank you.

Sivoph

I just had to actually read what Clark said to solve the loading indicator issue. I solved the issue with this:

  _proto.content = function content() {
    if (this.loading) {
    
       setTimeout(() => {
           this.loading = false;
                m.redraw();
       }, 5000);
         return m((flarum_common_components_LoadingIndicator__WEBPACK_IMPORTED_MODULE_3___default()), null);
    }

    return m("div", {
      "class": "panel-heading"
    }, m("h3", {
      "class": "panel-title"
    }, "Smart Analysis by <redacted>")), m("div", {
      "class": "fthis"
    }, m("canvas", {
      "class": "chart",
      "id": "myLineChart"
    }), m("img", {
      "class": "img-fluid",
      "src": "",
      "id": "coolImage"
    }),
     m("script", {"src":"https://<redacted>/Chart.min.js"}),
    
    m.redraw());
  };

Just wondering if there are more efficient DOM ready or element ready events I can use.

clarkwinkelmann

Sivoph you should be able to use the oncreate or onupdate Mithril hook functions. I'm not sure how that works with the widgets extension but what you create is probably a component class so you could just add that method in the class and Mithril will call it when it renders the component. Don't forget to call parent.oncreate(vnode) (vnode is the first parameter to the function) because Flarum's abstract component runs custom code in there as well.