JSFiddle - React, Tailwind, and code Playground

by fxi

JavaScript

/** 
 * Add functions to handle dashboard events
 * onAdd = Action to exectute when the widget is added to the DOM
 * onRemove = Action to execute when the widget is removed
 * onData = Action to execute when data is updated. Data is available with this.data or widget.data
 */
return {
  onAdd: function() {
    /**
     *  This widget is this
     */
    var widget = this;
    /**
     *  Using map-x getCSV function, download some data in CSV format. 
     *  Tips : use getJSON for json and getXML for XML.
     */
    mx.helpers.getCSV({
      url: "http://geodev.grid.unep.ch/extras/graph_co2_concentration.csv",
      onSuccess: function(data) {
        /**
         *  Success !. Init local variables. 
         */
        var monthly = [],
          annual = [],
          date = 0,
          a, m, isNumA, isNumM;

        /**
         *  For the current example, json comes with the format :
         * [{"Date":"12/12/1985","MontlyData":2,"AnnualData":3}, ... ]
         * We have to convert it to series compatible with highchart.
         * So for each row ...
         */
        data.forEach(function(row) {

          /* Using the mapx date function, convert string date to posix */
          date = mx.helpers.date(row.Date);

          /* get the row calue of each column */
          m = row.MonthlyData;
          a = row.AnnualData;

          /* 
           * Using mapx isNumeric function, test for numeric value
           * Exclude null, NaN, undefined, infinity and non numeric string  
           */
          isNumA = mx.helpers.isNumeric(a);
          isNumM = mx.helpers.isNumeric(m);


          /* Populate annual and monthly serie, 
           *  multiply by 1 in case of numeric coded as string 
           */
          if (isNumM) {
            monthly.push([date, m * 1]);
          }
          if (isNumA) {
            annual.push([date, a * 1]);
          }

        });

        /* 
         *  Get the highchart object from widget modules. 
         */
 ...