Amazing Theme

Show the new look-n-feel of Amazing Theme

Buttons

Inputs

Charts

Progress

Table

Customer NameAmount
Euro+ Shopping Channel $820,689
Mini Gifts Distributors Ltd. $591,827
Australian Collectors, Co. $180,585
Muscle Machine Inc $177,914
La Rochelle Gifts $158,573
Dragon Souveniers, Ltd. $156,251
Down Under Souveniers, Inc $154,622
Land of Toys Inc. $149,085
AV Stores, Co. $148,410
The Sharp Gifts Warehouse $143,536
Salzburg Collectables $137,480
Kelly's Gift Shop $137,461
Anna's Decorations, Ltd $137,034
Souveniers And Things Co. $133,907
Corporate Gift Ideas Co. $132,341
Saveley & Henriot, Co. $130,305
Danish Wholesale Imports $129,085
Rovelli Gifts $127,530
Reims Collectables $126,983
L'ordine Souveniers $125,505
Scandinavian Gift Ideas $120,943
Corrida Auto Replicas, Ltd $112,440
Vida Sport, Ltd $108,778
Handji Gifts& Co $107,747
UK Collectables, Ltd. $106,611
Online Diecast Creations Co. $106,225
Tokyo Collectables, Ltd $105,549
Technics Stores Inc. $104,545
Diecast Classics Inc. $104,359
Baane Mini Imports $104,225
Suominen Souveniers $103,897
Mini Creations Ltd. $101,872
Herkku Gifts $97,562
Oulu Toy Supplies, Inc. $95,706
Toys of Finland, Co. $95,546
Gift Depot Inc. $95,425
GiftsForHim.com $94,432
Toys4GrownUps.com $93,803
Marta's Replicas Co. $90,545
Extreme Desk Decorations, Ltd $90,332
Heintze Collectables $89,910
Toms Spezialitäten, Ltd $89,223
FunGiftIdeas.com $88,627
Cruz & Sons Co. $87,468
La Corne D'abondance, Co. $86,553
Auto Canal+ Petit $86,437
Gifts4AllAges.com $84,340
Amica Models & Co. $82,223
Tekni Collectables Inc. $81,807
Stylish Desk Decors, Co. $80,557
Collectable Mini Designs Co. $80,375
Signal Gift Stores $80,181
Mini Classics $78,432
Motor Mint Distributors Inc. $77,727
Mini Caravy $75,859
Collectables For Less Inc. $73,534
Vitachrome Inc. $72,498
giftsbymail.co.uk $71,784
Marseille Mini Autos $71,548
Petit Auto $70,852
Super Scale Inc. $70,379
Canadian Gift Exchange Network $70,122
Classic Legends Inc. $69,214
Norway Gifts By Mail, Co. $69,059
Québec Home Shopping Network $68,978
Enaco Distributors $68,520
Lyon Souveniers $67,659
Royal Canadian Collectables, Ltd. $66,812
Mini Wheels Co. $66,711
Volvo Model Replicas, Co $66,695
Diecast Collectables $65,542
Blauer See Auto, Co. $65,389
Osaka Souveniers Co. $62,361
Daedalus Designs Imports $61,782
Alpha Cognac $60,483
Auto Associés & Cie. $58,876
Classic Gift Ideas, Inc $57,939
Australian Collectables, Ltd $55,866
Online Mini Collectables $55,577
Australian Gift Network, Co $55,190
Mini Auto Werke $51,060
Iberia Gift Imports, Corp. $50,988
Gift Ideas Corp. $49,968
Clover Collections, Co. $49,898
CAF Imports $46,751
King Kong Collectables, Co. $45,481
West Coast Collectables Co. $43,749
Signal Collectibles Ltd. $42,570
Men 'R' US Retailers, Ltd. $41,506
Cambridge Collectables Co. $32,199
Bavarian Collectables Imports, Co. $31,310
Double Decker Gift Stores, Ltd $29,586
Microscale Inc. $29,230
Royale Belge $29,217
Frau da Collezione $25,358
Atelier graphique $22,314
Auto-Moto Classics Inc. $21,554
Boards & Toys Co. $7,919

Introduction

This example shows the Amazing theme for koolreport. By apply the theme, your report will change the look-n-feel for everything.

In order to use the them in a report, you simply declare like below:

class MyReport extends \koolreport\KoolReport
{
    use \koolreport\amazing\Theme;
    ...
}

The theme will:

  1. Change the CSS applied to report such as layouts, buttons
  2. Apply new color scheme to charts
<?php
require_once "MyReport.php";

$report = new MyReport;
$report->run()->render();
<?php
require_once "../../../load.koolreport.php";

class MyReport extends \koolreport\KoolReport
{
    use \koolreport\amazing\Theme;
    public function settings()
    {
        return array(
            "dataSources" => array(
                "sales" => array(
                    "class" => '\koolreport\datasources\CSVDataSource',
                    "filePath" => "../../../databases/customer_product_dollarsales2.csv",
                    "fieldSeparator" => ";",
                ),
            ),
        );
    }
}
<?php
    use \koolreport\processes\Group;
    use \koolreport\processes\Sort;
    use \koolreport\widgets\koolphp\Table;
?>
<style>
.small-section
{
    margin-top:10px;
    margin-bottom:10px;
}
</style>
<div class="report-content" style="padding:15px;">
    <div class="text-center">
        <h1>Amazing Theme</h1>
        <p class="lead">
            Show the new look-n-feel of Amazing Theme
        </p>
    </div>

    <h3>Buttons</h3>

    <div class="small-section">
        <!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
        <button type="button" class="btn btn-primary">Primary</button>

        <!-- Secondary, outline button -->
        <button type="button" class="btn btn-secondary">Secondary</button>

        <!-- Indicates a successful or positive action -->
        <button type="button" class="btn btn-success">Success</button>

        <!-- Indicates caution should be taken with this action -->
        <button type="button" class="btn btn-warning">Warning</button>

        <!-- Indicates a dangerous or potentially negative action -->
        <button type="button" class="btn btn-danger">Danger</button>

        <!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
        <button type="button" class="btn btn-link">Link</button>
    </div>

    <div class="small-section">
        <!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
        <button type="button" class="btn btn-outline-primary">Primary</button>

        <!-- Secondary, outline button -->
        <button type="button" class="btn btn-outline-secondary">Secondary</button>

        <!-- Indicates a successful or positive action -->
        <button type="button" class="btn btn-outline-success">Success</button>

        <!-- Indicates caution should be taken with this action -->
        <button type="button" class="btn btn-outline-warning">Warning</button>

        <!-- Indicates a dangerous or potentially negative action -->
        <button type="button" class="btn btn-outline-danger">Danger</button>
    </div>

    <div class="small-section">
        <button type="button" class="btn btn-primary"><i class="fa fa-star"></i>  Primary</button>
        <button type="button" class="btn btn-secondary"><i class="fa fa-lightbulb-o"></i>  Secondary</button>
        <button type="button" class="btn btn-success"><i class="fa fa-magic"></i>  Success</button>
        <button type="button" class="btn btn-warning"><i class="fa fa-map-marker"></i>  Warning</button>
        <button type="button" class="btn btn-danger"><i class="fa fa-rss"></i>  Danger</button>
        <button type="button" class="btn btn-link"><i class="fa fa-link"></i>  Link</button>
    </div>

    <div class="small-section">
        <button type="button" class="btn btn-primary btn-lg">Primary</button>
        <button type="button" class="btn btn-secondary btn-lg">Secondary</button>
        <button type="button" class="btn btn-success btn-lg">Success</button>
        <button type="button" class="btn btn-info btn-lg">Info</button>
        <button type="button" class="btn btn-warning btn-lg">Warning</button>
        <button type="button" class="btn btn-danger btn-lg">Danger</button>
        <button type="button" class="btn btn-link btn-lg">Link</button>
    </div>

    <div class="small-section">
        <button type="button" class="btn btn-primary btn-sm">Primary</button>
        <button type="button" class="btn btn-secondary btn-sm">Secondary</button>
        <button type="button" class="btn btn-success btn-sm">Success</button>
        <button type="button" class="btn btn-info btn-sm">Info</button>
        <button type="button" class="btn btn-warning btn-sm">Warning</button>
        <button type="button" class="btn btn-danger btn-sm">Danger</button>
        <button type="button" class="btn btn-link btn-sm">Link</button>
    </div>

    <div class="small-section">
        <div class="btn-group">
            <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Primary
            </button>
            <div class="dropdown-menu" x-placement="top-start" style="position: absolute; transform: translate3d(0px, -174px, 0px); top: 0px; left: 0px; will-change: transform;">
                <a class="dropdown-item" href="#">Action</a>
                <a class="dropdown-item" href="#">Another action</a>
                <a class="dropdown-item" href="#">Something else here</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="#">Separated link</a>
            </div>
        </div>
        <div class="btn-group">
            <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Secondary
            </button>
            <div class="dropdown-menu" x-placement="top-start" style="position: absolute; transform: translate3d(0px, -174px, 0px); top: 0px; left: 0px; will-change: transform;">
                <a class="dropdown-item" href="#">Action</a>
                <a class="dropdown-item" href="#">Another action</a>
                <a class="dropdown-item" href="#">Something else here</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="#">Separated link</a>
            </div>
        </div>
        <div class="btn-group">
            <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Success
            </button>
            <div class="dropdown-menu" x-placement="top-start" style="position: absolute; transform: translate3d(0px, -174px, 0px); top: 0px; left: 0px; will-change: transform;">
                <a class="dropdown-item" href="#">Action</a>
                <a class="dropdown-item" href="#">Another action</a>
                <a class="dropdown-item" href="#">Something else here</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="#">Separated link</a>
            </div>
        </div>
        <div class="btn-group">
            <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Info
            </button>
            <div class="dropdown-menu" x-placement="top-start" style="position: absolute; transform: translate3d(0px, -174px, 0px); top: 0px; left: 0px; will-change: transform;">
                <a class="dropdown-item" href="#">Action</a>
                <a class="dropdown-item" href="#">Another action</a>
                <a class="dropdown-item" href="#">Something else here</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="#">Separated link</a>
            </div>
        </div>
        <div class="btn-group">
            <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Warning
            </button>
            <div class="dropdown-menu" x-placement="top-start" style="position: absolute; transform: translate3d(0px, -174px, 0px); top: 0px; left: 0px; will-change: transform;">
                <a class="dropdown-item" href="#">Action</a>
                <a class="dropdown-item" href="#">Another action</a>
                <a class="dropdown-item" href="#">Something else here</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="#">Separated link</a>
            </div>
        </div>
        <div class="btn-group">
            <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Danger
            </button>
            <div class="dropdown-menu" x-placement="top-start" style="position: absolute; transform: translate3d(0px, -174px, 0px); top: 0px; left: 0px; will-change: transform;">
                <a class="dropdown-item" href="#">Action</a>
                <a class="dropdown-item" href="#">Another action</a>
                <a class="dropdown-item" href="#">Something else here</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="#">Separated link</a>
            </div>
        </div>
    </div>

    <div class="small-section">
        <div class="btn-group">
            <button type="button" class="btn btn-primary">Primary</button>
            <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <span class="sr-only">Toggle Dropdown</span>
            </button>
            <div class="dropdown-menu" x-placement="top-start" style="position: absolute; transform: translate3d(71px, -187px, 0px); top: 0px; left: 0px; will-change: transform;">
                <a class="dropdown-item" href="#">Action</a>
                <a class="dropdown-item" href="#">Another action</a>
                <a class="dropdown-item" href="#">Something else here</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="#">Separated link</a>
            </div>
        </div>
        <div class="btn-group">
            <button type="button" class="btn btn-secondary">Secondary</button>
            <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <span class="sr-only">Toggle Dropdown</span>
            </button>
            <div class="dropdown-menu" x-placement="top-start" style="position: absolute; transform: translate3d(71px, -187px, 0px); top: 0px; left: 0px; will-change: transform;">
                <a class="dropdown-item" href="#">Action</a>
                <a class="dropdown-item" href="#">Another action</a>
                <a class="dropdown-item" href="#">Something else here</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="#">Separated link</a>
            </div>
        </div>
        <div class="btn-group">
            <button type="button" class="btn btn-success">Success</button>
            <button type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <span class="sr-only">Toggle Dropdown</span>
            </button>
            <div class="dropdown-menu" x-placement="top-start" style="position: absolute; transform: translate3d(71px, -187px, 0px); top: 0px; left: 0px; will-change: transform;">
                <a class="dropdown-item" href="#">Action</a>
                <a class="dropdown-item" href="#">Another action</a>
                <a class="dropdown-item" href="#">Something else here</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="#">Separated link</a>
            </div>
        </div>
        <div class="btn-group">
            <button type="button" class="btn btn-info">Info</button>
            <button type="button" class="btn btn-info dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <span class="sr-only">Toggle Dropdown</span>
            </button>
            <div class="dropdown-menu" x-placement="top-start" style="position: absolute; transform: translate3d(71px, -187px, 0px); top: 0px; left: 0px; will-change: transform;">
                <a class="dropdown-item" href="#">Action</a>
                <a class="dropdown-item" href="#">Another action</a>
                <a class="dropdown-item" href="#">Something else here</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="#">Separated link</a>
            </div>
        </div>
        <div class="btn-group">
            <button type="button" class="btn btn-warning">Warning</button>
            <button type="button" class="btn btn-warning dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <span class="sr-only">Toggle Dropdown</span>
            </button>
            <div class="dropdown-menu" x-placement="top-start" style="position: absolute; transform: translate3d(71px, -187px, 0px); top: 0px; left: 0px; will-change: transform;">
                <a class="dropdown-item" href="#">Action</a>
                <a class="dropdown-item" href="#">Another action</a>
                <a class="dropdown-item" href="#">Something else here</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="#">Separated link</a>
            </div>
        </div>
        <div class="btn-group">
            <button type="button" class="btn btn-danger">Danger</button>
            <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <span class="sr-only">Toggle Dropdown</span>
            </button>
            <div class="dropdown-menu" x-placement="top-start" style="position: absolute; transform: translate3d(71px, -187px, 0px); top: 0px; left: 0px; will-change: transform;">
                <a class="dropdown-item" href="#">Action</a>
                <a class="dropdown-item" href="#">Another action</a>
                <a class="dropdown-item" href="#">Something else here</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="#">Separated link</a>
            </div>
        </div>
    </div>
    

    <h3>Inputs</h3>

    <div class="row small-section">
        <div class="col-md-6">
            <label>TextBox</label>
            <?php
            \koolreport\inputs\TextBox::create([
                "name"=>"textBox",
                "attributes"=>array(
                    "placeholder"=>"Enter your text",
                    "class"=>"form-control"
                )
            ]);
            ?>
        </div>
        <div class="col-md-6">
            <label>Select2</label>
            <?php
            \koolreport\inputs\Select2::create([
                "name"=>"select2",
                "multiple"=>true,
                "data"=>array(
                    "New York","Washinton D.C"
                ),
                "attributes"=>array(
                    "placeholder"=>"Enter your text",
                    "class"=>"form-control"
                )
            ]);
            ?>
        </div>
        <div class="col-md-6">
            <label>Select</label>
            <?php
            \koolreport\inputs\Select::create([
                "name"=>"select",
                "data"=>array(
                    "New York","Washinton D.C"
                ),
                "attributes"=>array(
                    "placeholder"=>"Enter your text",
                    "class"=>"form-control"
                )
            ]);
            ?>
        </div>

        <div class="col-md-6">
            <label>DateRangePicker</label>
            <?php
            \koolreport\inputs\DateRangePicker::create([
                "name"=>"dateRangePicker",
                "attributes"=>array(
                    "placeholder"=>"Enter your text",
                    "class"=>"form-control"
                )
            ]);
            ?>
        </div>
        <div class="col-md-6">
            <label>DateTimePicker</label>
            <?php
            \koolreport\inputs\DateTimePicker::create([
                "name"=>"dateTimePicker",
                "attributes"=>array(
                    "placeholder"=>"Enter your text",
                    "class"=>"form-control"
                )
            ]);
            ?>
        </div>
        <div class="col-md-6">
            <label>RangeSlider</label>
            <?php
            \koolreport\inputs\RangeSlider::create([
                "name"=>"rangeSlider",
            ]);
            ?>
        </div>

    </div>

    <h3>Charts</h3>
    <?php
    \koolreport\widgets\google\ColumnChart::create(array(
        "dataSource"=>array(
            array("category"=>"Books","sale"=>32000,"cost"=>20000,"profit"=>12000),
            array("category"=>"Accessories","sale"=>43000,"cost"=>36000,"profit"=>7000),
            array("category"=>"Phones","sale"=>54000,"cost"=>39000,"profit"=>15000),
            array("category"=>"Movies","sale"=>23000,"cost"=>18000,"profit"=>5000),
            array("category"=>"Others","sale"=>12000,"cost"=>6000,"profit"=>6000),
        )
    ));
    ?>

    <h3>Progress</h3>
    <div class="small-section">
        <div class="progress mb-3">
        <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
        <div class="progress mb-3">
        <div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
        <div class="progress mb-3">
        <div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
        <div class="progress mb-3">
        <div class="progress-bar progress-bar-striped bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
        <div class="progress mb-3">
        <div class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
    </div>

    <h3>Table</h3>
    <?php
    Table::create(array(
        "dataSource"=>(
            $this->src('sales')
            ->pipe(new Group(array(
                "by" => "customerName",
                "sum" => "dollar_sales",
            )))
            ->pipe(new Sort(array(
                "dollar_sales" => "desc",
            )))    
        ),
        "columns"=>array(
            "customerName"=>array(
                "label"=>"Customer Name"
            ),
            "dollar_sales"=>array(
                "label"=>"Amount",
                "type"=>"number",
                "prefix"=>"$"
            )
        ),
        "paging"=>array(
            "pageSize"=>10
        ),
        "cssClass"=>array(
            "table"=>"table-bordered table-striped table-hover"
        )
    ));
    ?>
</div>

What People Are Saying

"KoolReport helps me very much in creating data report for my corporate! Keep up your good work!"
-- Alain Melsens

"The first use of your product. I was impressed by its easiness and powerfulness. This product is a great and amazing."
-- Dr. Lew Choy Onn

"Fantastic framework for reporting!"
-- Greg Schneider

Download KoolReport Get KoolReport Pro