Loading status for big report (use subReport)

Richb201 commented on Mar 31, 2021

I am in the process of cleaning up my code before going to test. One issue I have is that when I create the report via

    function setup()
    {
   ......
}

It takes a really long time (~8000ms). Admitted there are many sql calls and things like this, ->pipe($this->dataStore("ThreeWayRiskAnalysis")), in my report. I have played a little with the koolreport "cache" product and that makes it a little better. But still it is a major issue. I'd like to start up a spinner (aka busy flag) at the top of my function setup() and remove it at the bottom of my function setup().

This must be an issue affecting many (aka most) koolreport users. I found the code below on stackoverflow, but honestly have no idea how to implement it with koolreport. Please help! Where would I put this to start it up at the start of setup() and remove it at the bottom of setup()? Is the problem in the report or the report.view?



HTML:
   <img id="loading" src="~/Images/spinner.gif" alt="Updating ..." style="display: none;" />
In script file:
  // invoked when sending ajax request
  $(document).ajaxSend(function () {
      $("#loading").show();
  });

  // invoked when sending ajax completed
  $(document).ajaxComplete(function () {
      $("#loading").hide();
  });

Sebastian Morales commented on Apr 1, 2021

You could move your data setup to a sub report like this:

https://www.koolreport.com/examples/reports/others/subreport_demo/

Then put the loading spinner in your main report and remove it once sub report is loaded using javascript function in your sub report view.

Richb201 commented on Apr 1, 2021

Ok. I think I can make the entire big report (called MyReport and MyReport.view) into a subreport. I have a "sanity check" question before i get back to the main issue.

In MyReport I have settings() and that is where I am opening my database. I don't see that going on at all in CustomerOrders or in CustomerOrders.view? Assuming that is OK in my case? So I will make a new file called MainReport.php which will just consist of

function settings()
    {
        return array(
            "subReports"=>array(
                "MyReport=>MyReport::class,
            )
        );
    }

and also MainReport.view.php which will consist of:

    <div class="row">
        <div class="col-md-8 offset-md-2">
            <?php $this->subReport("MyReport"); ?>
        </div>
    </div>

  $(document).ajaxSend(function () {
      $("#loading").show();
  });

The MyReport will remain exactly the same EXCEPT in the bottom of MyReport.view.php I will place

  $(document).ajaxComplete(function () {
      $("#loading").hide();
  });

Is this correct? Anything else i need to do such as putting <img id="loading" src="~/Images/spinner.gif" alt="Updating ..." style="display: none;" /> into both MainReport.view and also in MyReport.view?

KoolReport commented on Apr 1, 2021

You are right, so the MainReport.php will look like this:

class MainReport extends \koolreport\KoolReport
{
    use \koolreport\core\SubReport;
    protected function settings()
    {
        return [
            "MyReport"=>MyReport::class
        ];
    }
}

The view of MainReport.view.php will be like this:

<div class="row">
    <div class="col-md-8 offset-md-2">
        <sub-report id="MyReport" name="MyReport"></sub-report>
    </div>
</div>

 <img id="loading" src="~/Images/spinner.gif" alt="Updating ..." style="display: none;" />

<script type="text/javascript">
    $(document).ajaxSend(function () {
        $("#loading").show();
    });
    $(document).ajaxComplete(function () {
        $("#loading").hide();
    });
    subReport.update("MyReport");
</script>

Richb201 commented on Apr 1, 2021

This is not working. In tracing through your code I see that you inhibit running KoolReport Widget.js again in the subreport

            if (!isset($_POST["@subReport"])) {
                //If this is subreport request, we dont want to render 
                //KoolReport.widget.js again
                $this->registerEvent(
                    "OnResourceInit",
                    function () {
                        $this->getResourceManager()->addScriptFileOnBegin(
                            $this->getResourceManager()->publishAssetFolder(
                                realpath(dirname(__FILE__) . "/clients/core")
                            ) . "/KoolReport.js"
                        );
                    },
                    true
                ); //Register on top
            }

No error. The report (nor the busy spinner) just doesn't appear. But remember, in my case, the MainReport is just a dummy. No report is being run from there. I used your code above exactly.

This is MyReport.view.php


<div class="row">
    <div class="col-md-8 offset-md-2">
        <sub-report id="MyReport" name="MyReport"></sub-report>
    </div>
</div>

 <img id="loading" src="~/Images/spinner.gif" alt="Updating ..." style="display: none;" />

<script type="text/javascript">
    $(document).ajaxSend(function () {
        $("#loading").show();
    });

    subReport.update("MyReport");  //I also tried MainReport
</script>

KoolReport commented on Apr 1, 2021

This below code should be in MainReport.view.php (not MyReport.view.php as you state above):

<div class="row">
    <div class="col-md-8 offset-md-2">
        <sub-report id="MyReport" name="MyReport"></sub-report>
    </div>
</div>

 <img id="loading" src="~/Images/spinner.gif" alt="Updating ..." style="display: none;" />

<script type="text/javascript">
    $(document).ajaxSend(function () {
        $("#loading").show();
    });

    subReport.update("MyReport");  //I also tried MainReport
</script>

KoolReport commented on Apr 1, 2021

Better you do this:

<div class="row">
    <div class="col-md-8 offset-md-2">
        <sub-report id="MyReport" name="MyReport">
            <img id="loading" src="~/Images/spinner.gif" alt="Updating ..."/>
        </sub-report>
    </div>
</div>

<script type="text/javascript">
    subReport.update("MyReport");  //I also tried MainReport
</script>

Remember above code is inside MainReport.php (the dummy one).

Expected result:

You see the loading spinner when you load the page.
After 8s, the report should showing. The loading spinner is gone.

Also, please open the console of browser. Let me know if there is any error.

Richb201 commented on Apr 1, 2021

>>Remember above code is inside MainReport.php (the dummy one). You mean MainReport.view.php, correct?

KoolReport commented on Apr 1, 2021

Ah yes, sorry, the MainReport.view.php

Richb201 commented on Apr 1, 2021

Still not correct. Here is the page I see and also the console

and here is the browser code

<script type='text/javascript' src='/vendor/koolreport/core/src/clients/core/KoolReport.js'></script><script type='text/javascript' src='/vendor/koolreport/core/src/clients/core/KoolReport.subReport.js'></script>
<div class="row">
    <div class="col-md-8 offset-md-2">
        <sub-report id="MyReport" name="MyReport">
            <img id="loading" src="~/Images/spinner.gif" alt="Updating ..."/>
        </sub-report>
    </div>
</div>

<script type="text/javascript">
    subReport.update("MyReport");  //I also tried MainReport
</script><html lang="en">
<head>

    <meta charset="UTF-8">
    <title>Research Study Online</title>
    <link herf=""css/bootstrap.min.css" rel="stylesheet"
    < meta name-"viewport" content="width=device-width, no-cache, initial-scale=1">
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
    <link rel="manifest" href="/site.webmanifest">
    <link rel="shortcut icon" href="http://localhost/assets/themes/default/images/favicon.ico" type="image/x-icon"/>
</head>



<br><br><h3>CURRENT COMPANY:  Apple</h3>
<meta name="viewport" content="width=device-width, initial-scale=1">


<head>
    <title></title>
    <meta name="resource-type" content="document" />
    <meta name="robots" content="all, index, follow"/>
    <meta name="googlebot" content="all, index, follow" />

    
		<meta name="keywords" content="" />
		<meta name="description" content="" />

	
	
		<script src="http://localhost/js/javascript_funcs.js"></script>
		<script src="http://localhost/assets/themes/default/js/jquery-1.9.1.min.js"></script>
		<script src="http://localhost/assets/themes/default/hero_files/bootstrap-transition.js"></script>
		<script src="http://localhost/assets/themes/default/hero_files/bootstrap-collapse.js"></script>
		<script src="http://localhost/js/jquery.orgchart.js"></script>
	
    <!-- Le styles -->

    <link href="http://localhost/assets/themes/default/hero_files/bootstrap.css" rel="stylesheet">
    <link href="http://localhost/assets/themes/default/hero_files/bootstrap-responsive.css" rel="stylesheet">
    <link href="http://localhost/assets/themes/default/css/general.css" rel="stylesheet">
    <link href="http://localhost/assets/themes/default/css/custom.css" rel="stylesheet">
    <link href="http://localhost/assets/css/jquery.orgchart.css" rel="stylesheet">
    <link rel="shortcut icon" href="assets/favicon.ico?v=1617307313" />



    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

        <!-- Le fav and touch icons -->
        <link rel="shortcut icon" href="http://localhost/assets/themes/default/images/favicon.ico" type="image/x-icon"/>
        <meta property="og:image" content="http://localhost/assets/themes/default/images/favicon.ico"/>
        <link rel="image_src" href="http://localhost/assets/themes/default/images/favicon.ico" />
        <style type="text/css">


            ::selection{ background-color: #E13300; color: white; }
	::moz-selection{ background-color: #E13300; color: white; }
	::webkit-selection{ background-color: #E13300; color: white; }

	body{
		background-color: #fff;
		margin: 40px;
		font: 13px/20px normal Helvetica, Arial, sans-serif;
		color: #4F5155;
	}

	a {
		color: #003399;
		background-color: transparent;
		font-weight: normal;
	}

	h1 {
		color: #444;
		background-color: transparent;
		border-bottom: 1px solid #D0D0D0;
		font-size: 19px;
		font-weight: normal;
		margin: 0 0 14px 0;
		padding: 14px 15px 10px 15px;
	}

	code {
		font-family: Consolas, Monaco, Courier New, Courier, monospace;
		font-size: 12px;
		background-color: #f9f9f9;
		border: 1px solid #D0D0D0;
		color: #002166;
		display: block;
		margin: 14px 0 14px 0;
		padding: 12px 10px 12px 10px;
	}

	#body{
		margin: 0 15px 0 15px;
	}

	p.footer{
		text-align: right;
		font-size: 11px;
		border-top: 1px solid #D0D0D0;
		line-height: 32px;
		padding: 0 10px 0 10px;
		margin: 20px 0 0 0;
	}

	#container{
		margin: 10px;
		border: 1px solid #D0D0D0;
		-webkit-box-shadow: 0 0 8px #D0D0D0;
	}
	</style>
    <style>
        .dropdown {
            position: relative;
            display: inline-block;
        }

        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
            padding: 12px 16px;
            z-index: 1;
        }

        .dropdown:hover .dropdown-content {
            display: block;
        }
    </style>
</head>

<!--  <body onload="LoginSu();" onunload="LogoffSu();"> -->


    <div class="navbar navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>

          <div style="height: 0px;" class="nav-collapse collapse">
            <ul class="nav">

                <li class="active">
                <li><a href='http://localhost/index.php/Configure/report_generator_amazing'>Dashboard</a></li>
                <li><a href='http://localhost/index.php/Configure/campaign_management_with_actions'>Company</a></li>
                <li><a href='http://localhost/index.php/Configure/menu_setup'>Setup</a></li>
                <li><a href='http://localhost/index.php/Configure/maintain_employees_management'>Employees</a></li>
                <li><a href='http://localhost/index.php/Configure/titles_management'>Titles</a></li>
                <li><a href='http://localhost/index.php/Configure/contracts_management'>Contracts</a></li>
                <li><a href='http://localhost/index.php/Configure/IUS_management'>IUS</a></li>                <li><a href='http://localhost/index.php/Configure/menu_images'>Substantiation</a></li>
                <li><a href='http://localhost/index.php/Configure/surveys_sent'>Survey Distribution</a></li>

                <li><a href='http://localhost/index.php/Configure/menu_reports'>Run Reports</a></li>
                <li><a href='http://localhost/index.php/Configure/change_password'>Change Password</a></li>
                <li><a href='http://localhost/index.php/Configure/knowledge_base'>Help!</a></li>
                <li><a href='http://localhost/index.php/Configure/close_app'>Logout</a></li>
            </ul>
              
          </div><!--/.nav-collapse -->
        </div>
      </div>
    </div>

    <div class="container">
    
    <div class="row">
	    		
    </div>
      <hr/>



      <footer>
      	<div class="row">
	        <div class="span6 b12">
                <img src='http://localhost/assets/themes/default/images/Logo - Software Research Study Online-01.jpg' style='float:left;margin-top:5px;z-index:5' alt='Logo'>            </div>
        </div>

                </script>
                <p style="text-align:center">Research Study Online © 2021</p>


            </div>
        </div>
      </footer>

    </div> <!-- /container -->
<!--Start of Tawk.to Script-->
<!--Start of Tawk.to Script-->
<script type="text/javascript">
    var Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date();
    (function(){
        var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0];
        s1.async=true;
        s1.src='https://embed.tawk.to/5fc604b2a1d54c18d8ef211d/default';
        s1.charset='UTF-8';
        s1.setAttribute('crossorigin','*');
        s0.parentNode.insertBefore(s1,s0);
    })();
</script>
<!--End of Tawk.to Script-->
<!--End of Tawk.to Script-->
</body></html>

KoolReport commented on Apr 1, 2021

I see the issue now, please adding jQuery to the MainReport.php like this:

class MainReport extends \koolreport\KoolReport
{
    use \koolreport\clients\jQuery; \\ <--- This is the one
    use \koolreport\core\SubReport;
    ...
}

When you open the inspector, move to the tab "Console" (you are using the tab Elements now). The Console tab will show if there is any javascript error.

Richb201 commented on Apr 1, 2021

What dir should spinner.gif be in?

KoolReport commented on Apr 1, 2021

By the way, you will need to move some of the html elements from MyReport.view.php to MainReport.view.php such as <html>, <head> <body>. Actually you move all structure to MainReport.view.php and keep only those important elements in MyReport.view.php

So the MainReport.view.php will act like a container and MyReport.view.php contains the core content.

KoolReport commented on Apr 1, 2021

You put it in the same folder as the index.php (the one that initiate the report). Or put at any folder, and you use the full path for it like "/assets/image/spinner.gif".

Richb201 commented on Apr 1, 2021

What parts should I move? Head? Style? Body? Body is the entire rest if the report. By the way I see spinner-select2.jpg. Will that work?

KoolReport commented on Apr 1, 2021

Have you added the jQuery yet? Does it work?

Richb201 commented on Apr 1, 2021

I added it but it doesn't work.

KoolReport commented on Apr 1, 2021

Nevermind, no worry about that. Tomorrow I will make example for you.

Richb201 commented on Apr 1, 2021

a Few months back I decided to split the code into two parts because of the slowness. Part A which builds the database files and does calculations and part B which is MyReport. Part A takes 10 seconds and part B takes 5 seconds.

Richb201 commented on Apr 1, 2021

OK. Thanks. Have a good night.

KoolReport commented on Apr 1, 2021

My example will be very simple, containing a MainReport and a CoreReport. The MainReport will show spinner and loading CoreReport via ajax. Spinner will be gone after loading is done. It will merely show this asynchronous technique. So you can apply this technique to your report. Is it ok?

Richb201 commented on Apr 1, 2021

I will give it a try.

KoolReport commented on Apr 1, 2021

Alright, that's great. I will come back tomorrow.

Richb201 commented on Apr 2, 2021

any luck?

KoolReport commented on Apr 5, 2021

sorry for the late, it will be available soon

Richb201 commented on Apr 7, 2021

If this cannot be done just say so and I will continue to look elsewhere

KoolReport commented on Apr 8, 2021

I am sorry for the delay, and thank you very much for your patience, here is the example:

Async Reports Loading

You can view the source code in the description part.

KoolReport's Forum

Loading status for big report (use subReport) #2004

Build Your Excellent Data Report