• Replies 2 replies
  • Subscribers 0 subscribers
  • Views 14 views
  • Users 0 members are here
Options
3sides - Social sharing widget
Related

How do I wait for the dashboard items to load?

Alex Muscina
27205

Hello everyone,

 

This may seem like a silly question but how do I wait for the whole dashboard to load before calling a function that manipulates the DOM?

I am trying to change the colors of some KPI cards based on the displayed value but I cannot find a way to "wait" for them to load and then fire my code.

 

  • Alex Muscina, there isn't any supported way as each visualisation is it's own async operation. However, for KPI cards the following quick'n' dirty techinque may help.

    Add the following example implementation (into a content panel) that will watch any KPI cards:

     

    ;(function($, window, document, undefined) {   
   
   CommunityExamples = window.CommunityExamples || {};
   
   CommunityExamples.CollaborateKpiCardWatcher = (cb) => {
      if (!CommunityExamples.CollaborateKpiCardWatcher.fnDrawChartKPI && _.isFunction(DashboardBuilderChartType.drawChartKPI)) {
         CommunityExamples.CollaborateKpiCardWatcher.fnDrawChartKPI = DashboardBuilderChartType.drawChartKPI;
         DashboardBuilderChartType.drawChartKPI = (a,d,f) => {
            CommunityExamples.CollaborateKpiCardWatcher.fnDrawChartKPI(a, d, f);
            if (_.isFunction(cb)) {
               window.setTimeout(() => {
                  var $container = $("#" + d);
                  var cards = $container.find(".kpiCardItem").map((idx, elem) => {
                     return {
                        $elem: $(elem),
                        value: $(elem).find(".kpiCardContentCalcValue span[id
    ).text() }; }).toArray(); cb({ $container, cards }) }, 0); } } } }; })(jQuery.noConflict(), window, document);

    Then we can call the watcher, providing a callback function that will be called for each KPI container (chart) being rendered, e.g.

     

    CommunityExamples.CollaborateKpiCardWatcher(params => {
   console.debug(">>> KPI Container Complete", params);
   params.cards.forEach(card => {
      var value = Number(card.value.replace(/[^0-9.]/g,""));
      card.$elem.css("background", (value > 100) ? "rgb(0,255,0)" : "rgb(255,0,0)");
   });
});

    There will be 1 or more cards in the callback params, depending on whether the KPI is defined for a series or not.

    • params.$container is set to the container (parent) panel for the completed KPI chart
    • params.cards[n].$elem is set to the KPI card element
    • params.cards[n].value is set to the text in the KPI card's value element, so a quick conversion to a number, we can then modify card attributes based on some dynamic rules.
    ]]>