Bootstrap Not Working in Example

The O commented on Aug 18, 2020

When I reproduce this example:

the colors do not show up; the cards are all white
the cards are not centered; they are left aligned

In fact, the code below gave a fatal error as to attempt to call a private function of a class.

Card::create(array(
            "value"=>$this->src("automaker")->query("select sum(amount) from payments"),

So I had to move the query to the setup and change this portion to simple a datasource reference.

How do I resolve the bootstrap seemingly not working?

KoolReport commented on Aug 18, 2020

Can you give us a screenshot?

The O commented on Aug 18, 2020

Please note that the SQL Query result doesn't get displayed in the last card at the bottom. Yet when I comment out use \koolreport\clients\Bootstrap; it now shows as depicted in screenshot below.

KoolReport commented on Aug 18, 2020

May be you should try our bootstrap4, please download package called bootstrap4 and instead:

use \koolreport\clients\Bootstrap;

you do:

use \koolreport\bootstrap4\Theme;

Please let me know if it works.

The O commented on Aug 18, 2020

Here's the code, pretty much your multi-file example code but compressed into single-page. Perhaps you can spot what I'm doing wrong:

use \koolreport\widgets\koolphp\Card;


class MyReport extends \koolreport\KoolReport
{
    use \koolreport\instant\SinglePage;
   // use \koolreport\clients\Bootstrap;

	
    function settings()
    {
        return array(
            "dataSources"=>array(
                "automaker"=>array(
                    "connectionString"=>"mysql:host=localhost;dbname=mydb",
                    "username"=>"root",
                    "password"=>"",
                    "charset"=>"utf8"
                ),
            ),
        );
    }

   function setup()
    {
        $this->src('automaker')->query("select sum(Amount) from sales")
                ->pipe($this->dataStore("mydata"));
    } 
}

$report = new MyReport;
$report->start();

?>

<html>
    <head>
        <title>Test</title>
    </head>
    <body>
        <h1>Testing</h1>
<div class="report-content">
    <div class="text-center">
        <h1>Card</h1>
        <p class="lead">
            Guide you how to use Card to display important KPI value
        </p>
    </div>
    <div class="row">
        <div class="col-md-3">
            <?php
            Card::create(array(
                "value"=>2000,
                "title"=>"Member Online",
                "cssClass"=>array(
                    "card"=>"bg-info",
                    "title"=>"text-white",
                    "value"=>"text-white"
                )
            ));
            ?>
        </div>
        <div class="col-md-3">
            <?php
            Card::create(array(
                "value"=>230,
                "title"=>"Conversions",
                "cssClass"=>array(
                    "card"=>"bg-warning",
                    "title"=>"text-white",
                    "value"=>"text-white"
                )
            ));
            ?>
        </div>
        <div class="col-md-3">
            <?php
            Card::create(array(
                "value"=>15299,
                "title"=>"Revenue",
                "format"=>array(
                    "value"=>array(
                        "prefix"=>"$"
                    )
                ),
                "cssClass"=>array(
                    "card"=>"bg-success",
                    "title"=>"text-white",
                    "value"=>"text-white"
                )
            ));
            ?>
        </div>

        <div class="col-md-3">
            <?php
            Card::create(array(
                "value"=>6912,
                "title"=>"Cost",
                "format"=>array(
                    "value"=>array(
                        "prefix"=>"$"
                    )
                ),
                "cssClass"=>array(
                    "card"=>"bg-danger",
                    "title"=>"text-white",
                    "value"=>"text-white"
                )
            ));
            ?>
        </div>
    </div>

    <div class="text-center" style="margin-top:30px;">
        <h3>Showing indicator</h3>
        <p class="lead">
            Card is able to show the percentage increased or decreased
        </p>
    </div>

    <div class="row">
        <div class="col-md-3 offset-md-3">
        <?php
        Card::create(array(
            "value"=>11249,
            "baseValue"=>9230,
            "format"=>array(
                "value"=>array(
                    "prefix"=>"$"
                )
            ),
            "title"=>"Month Sale",
        ));
        ?>    
        </div>
        <div class="col-md-3">
        <?php
        Card::create(array(
            "value"=>13,
            "baseValue"=>15,
            "format"=>array(
                "value"=>array(
                    "suffix"=>"k"
                )
            ),
            "title"=>"Visitors",
        ));
        ?>
        </div>        
    </div>

    <div class="text-center" style="margin-top:30px;">
        <h3>Get value with SQL Query</h3>
        <p class="lead">
            The value of card is able to receive value from SQL
        </p>
    </div>

    <div class="row">
        <div class="col-md-4 offset-md-4">
        <?php
        Card::create(array(
            "value"=>$report->dataStore("mydata"),
            "format"=>array(
                "value"=>array(
                    "prefix"=>"$"
                )
            ),
            "title"=>"Total Sale",
            "cssClass"=>array(
                "card"=>"bg-primary",
                "title"=>"text-white",
                "value"=>"text-white"
            )
        ));
        ?>    
        </div>
    </div>

</div>    </body>
</html>

<?php $report->end(); ?>

The O commented on Aug 18, 2020

I get Fatal error: Trait 'koolreport\bootstrap4\Theme' not found in This example is under "Card" not under "Extended Packages" so I would expect it to work without purchase of Amazing theme. Or how else do I add this bootstrap4 theme and why does the example not show the dependency?

Thanks

Keith Burke commented on Aug 18, 2020

I use Amazing Theme [which is also Bootstrap 4, I believe]. Works well.

use \koolreport\amazing\Theme;

I've used it well with

    use \koolreport\widgets\koolphp\Card;
    use \koolreport\amazing\ChartCard;
    use \koolreport\amazing\GaugeCard;

The O commented on Aug 19, 2020

Very true!

KoolReport's Forum

Bootstrap Not Working in Example #1574

Build Your Excellent Data Report