• Common properties
• Traits
• Available charts
  • ColumnChart
  • BarChart
  • LineChart
  • SplineChart
  • AreaChart
  • PieChart
  • DonutChart
  • Waterfall
  • FunnelChart
• Action

D3 Chart

Alternative to Google Charts, D3 is a great library to visualize your data. The strong reason to choose D3 over Google Charts is that D3 can work offline while Google Chart requires your user to be online to load library. D3 is a perfect option for intranet dashboard application.

Common properties #

Below are common properties for all D3 charts.

Traits #

D3 has been provided with following traits:

1. TAppLink: Able to refer to application with app() method
2. TDashboadLink: Able to refer to parent dashboard with dashboard() method
3. TEnabledPermit: Use enabled() and enabledWhen() to set permission
4. TParams: Able to get/set parameters with params() method
5. TWidgetState: Able to get/set persisted state for widget
6. TParamsPersisted: Able to make params set to widget persisted
7. TDataSource: Able to receive datasource via dataSource() method
8. TDetailAction: Able to open detail modal
9. TExportable: Able to export widget to different formats

Available charts #

ColumnChart #

Properties #

Note: Those above properties follows this code rules.

Example 1: Create your own chart derived from ColumnChart

<?php

use \koolreport\dashboard\widgets\d3\ColumnChart;
use \koolreport\dashboard\fields\Text;
use \koolreport\dashboard\fields\Currency;

class MyColumnChart extends ColumnChart
{
    protected function onCreated()
    {
        $this->stacked(false)
            ->xAxis([
                "prefix"=>"",
                "suffix"=>""
            ])
            ->dualAxis(false)
            ->xAxis([
                "prefix"=>"Item ",
            ])
            ->yAxis([
                "decimals"=>2,
                "decPoint"=>".",
                "thousandSep"=>",",
                "prefix"=>"",
                "suffix"=>""
            ]);
    }

    protected function dataSource()
    {
        return AutoMaker::table("orders")->groupBy("item")
                ->select("itemName")
                ->sum("amount")->alias("sale");
    }

    protected funtion fields()
    {
        return [
            Text::create("itemName"),
            Currency::create("sale")->USD()->symbol(),
        ];
    }
}

Example 1: Create chart directly from ColumnChart

use \koolreport\dashboard\widgets\d3\ColumnChart;

class MyDashboard extends Dashboard
{
    protected function content()
    {
        return [
            ColumnChart::create("myColumnChart")
                ->dataSource(function(){
                    return AutoMaker::table("orders")->groupBy("item")
                            ->select("itemName")
                            ->sum("amount")->align("sale");
                })
                ->fields([
                    Text::create("item"),
                    Currency::create("sale)->USD()->symbol(),
                ]),
        ];
    }
}

BarChart #

BarChart shared the same properties and the way of usage with above ColumnChart.

LineChart #

LineChart also share the same properties and the way of usage with ColumnChart. LineChart as an extra property below:

SplineChart #

SplineChart is special LineChart which use curve to connect points. SplineChart shares the same properties with LineChart.

AreaChart #

AreaChart also share the same properties and the way of usage with ColumnChart.

PieChart #

Properties #

Components of tooltip and label

->tooltip([
    "show"=>true,
    "use"=>"ratio", // "ratio"|"value"
    "decimals"=>2, //Number of decimals
    "thousandSeparator"=>",",
    "decimalPoint"=>".",
    "prefix"=>"",
    "suffix"=>"",
])
->label([
    "show"=>true,
    "use"=>"ratio", // "ratio"|"value"
    "decimals"=>2, //Number of decimals
    "thousandSeparator"=>",",
    "decimalPoint"=>".",
    "prefix"=>"",
    "suffix"=>"",
])

Examples:

<?php

namespace demo\d3;

use \koolreport\dashboard\widgets\d3\PieChart;
use \koolreport\dashboard\fields\Text;
use \koolreport\dashboard\fields\Currency;

class PieChartDemo extends PieChart
{
    protected function dataSource()
    {
        return AutoMaker::table("payments")
                ->leftJoin("customers","customers.customerNumber","=","payments.customerNumber")
                ->groupBy("payments.customerNumber")
                ->select("customers.customerName")
                ->sum("amount")->alias("total")
                ->orderBy("total","desc")
                ->limit(5);
    }

    protected function fields()
    {
        return [
            Text::create("customerName"),
            Currency::create("total")
                ->USD()->symbol()
                ->decimals(0),
        ];
    }
}

DonutChart #

DonutChart also share the same properties and the way of usage with ColumnChart. Donut only has one extra title property to set title in center of DonutChart:

DonutChart::create("myDonut")
->title("Revenue by customers")
...

Waterfall #

Properties #

Example:

<?php

use \koolreport\dashboard\widgets\d3\Waterfall;
use \koolreport\dashboard\fields\Text;
use \koolreport\dashboard\fields\Number;

class MyChart extends Waterfall
{
    protected function onCreated()
    {
        $this
        ->title("Cashflow")
        ->margin([
            "top"=>80,
            "right"=>20,
            "bottom"=>30,
            "left"=>50,
        ])
        ->summary([
            "Total now"=>"end"
        ])
        ->colorScheme([
            "#7FFF00",  //positive-value
            "#FA8072",  //negative-value
            "#20B2AA",  //summary-postive
            "#FF1493",  //summary-negative 
        ]);
    }

    protected function dataSource()
    {
        return DB::table("cashflow")
                ->select("item","amount");
    }

    protected function fields()
    {
        return [
            Text::create("item"),
            Number::create("amount")
        ];
    }
}

FunnelChart #

use \koolreport\dashboard\widgets\d3\FunnelChart;
use \koolreport\dashboard\fields\Text;
use \koolreport\dashboard\fields\Number;

class MyChart extends FunnelChart
{
    protected function onCreated()
    {
        $this
        ->chart([
            "animate"=>true,
            "bottomPinch"=>1,
        ])
        ->block([
            "dynamicHeight"=>true,
            "minHeight"=>25,
            "highlight"=>true,
            "fill"=>[
                "type"=>"gradient",
            ]
        ])
        ->label([
            "enabled"=>true,
            "fontFamily"=>"Arial",
        ])
        ->tooltip([
            "enabled"=>false
        ])
        ->colorScheme(["#ff776b","#6ee05a","#bc5ae0","#e0de5a","#5abae0","#e05a8d"]);
    }

    protected function dataSource()
    {
        return DB::table("metrics")
                ->select("name","value");
    }

    protected function fields()
    {
        return [
            Text::create("name"),
            Number::create("value")
        ];
    }
}

Action #

All D3 chart support actionItemSelect. This action is triggered when user click on item on chart, for example clicking on the bar inside BarChart or to a pie inside PieChart. The client-side events will be transformed to server-side action to be handled. Here you can do anything such as update content of other widgets based on user selection in D3 chart.

You can get parameters from $request->params(). This parameters will bring you all information about item selection at client-side.

View full list of parameters

Example:

<?php

use \koolreport\dashboard\widgets\d3\PieChart;
use \koolreport\dashboard\fields\Text;
use \koolreport\dashboard\fields\Currency;

class PieChartDemo extends PieChart
{

    protected function actionItemSelect($request, $response)
    {
        $params = $request->params();
        $selectedCustomerName = $params["columnName"];

        //Send param to CustomerTable and update it.
        $this->sibling("CustomerTable")
            ->params(["customerName"=>$selectedCustomerName])
            ->update();
    }

    protected function dataSource()
    {
        return AutoMaker::table("payments")
                ->leftJoin("customers","customers.customerNumber","=","payments.customerNumber")
                ->groupBy("payments.customerNumber")
                ->select("customers.customerName")
                ->sum("amount")->alias("total")
                ->orderBy("total","desc")
                ->limit(5);
    }

    protected function fields()
    {
        return [
            Text::create("customerName"),
            Currency::create("total")
                ->USD()->symbol()
                ->decimals(0),
        ];
    }
}