KoolReport's Forum

Official Support Area, Q&As, Discussions, Suggestions and Bug reports.
Forum's Guidelines

D3 chart action/state #2787

Closed GHSix opened this topic on on Aug 8, 2022 - 2 comments

GHSix commented on Aug 8, 2022

In the Dashboard demo at Dashboard / Products, when we click on the donut, the table is reloaded and the "guide" text is changed.

Two questions about it.

  1. From actionRowSelect method, instead of change "guide" text, how to change its container panel header?
  2. Is it possible to replace the donut from Google Chart to D3 Chart? I canĀ“t find actionRowSelect on the docs.
KoolReport commented on Aug 9, 2022

It is possible, you put the Text element inside the the header() method of Panel:

                Panel::create()
                ->header(Text::create("guide")->text(function(){
                    $selectedProductLine = $this->dashboard()->widget("ProductByLine")->selectedProductLine();
                    if($selectedProductLine!==null) {
                        return Html::p(["List of ",Html::b($selectedProductLine)," products"]);
                    }
                    return null;
                })->asHtml(true))

For your second questions, D3 has not fully developed for Dashboard like GoogleChart so the client events has not been available in form of "action" like google chart but you can do it like following (very simple).

D3 chart has the itemSelect event, here is the doc. So what we do that we will register the itemSelect event and then call the widgetAction() of Dashboard Framework, the widgetAction will help to call the actionItemSelect at server-side.

class MyD3Donut extends \koolreport\dashboard\widgets\d3\DonutChart
{
    protected function onCreated()
    {
        $this->settings([
            "clientEvents"=>[
                "itemSelect"=>"function(params){
                    widgetAction('MyD3Donut','itemSelect',{
                        selectedValue:params['selectedValue']
                    });
                }"
            ]
        ])
    }

    protected function actionItemSelect($request,$response)
    {
        $selectedValue = $request->params("selectedValue");
    }
}

Hope that helps.

GHSix commented on Aug 9, 2022

1 worked like a charm.

2 worked but letting the actionItemSelect exactly like the actionRowSelect from the docs.

Thank you.

Build Your Excellent Data Report

Let KoolReport help you to make great reports. It's free & open-source released under MIT license.

Download KoolReport View demo
help needed

Dashboard