Widget update from Dropdown input

John commented on Nov 14

I can not find a way to update a Dashboard Widget from a Dropdown input i use in my board class like the code below describes. I don't want to create a new file for the Dropdown, is this allowed?

MyBoard.php

class MyBoard extends Dashboard
{		
    protected function content()
    {
        return [
            Row::create([
                Panel::create()->width(1/2)->sub([
					Dropdown::create("ddinfooutline")
					->title("View by")->items([
						"Day"=>MenuItem::create()->icon("fas fa-info-circle")->onClick(function(){
			//				return Client::dashboard("CustomerBoard")->load(); 
							return 'mydate'; 
							$this->sibling("myWidget")->update(); 
						}),

myWidget.php

class myWidget extends ComboChart
{
    protected function dataSource()
    {
//		$range = $this->sibling("MyBoard")->value();
		$range = $this->sibling("ddinfooutline")->value();

KoolReport commented on Nov 15

The onClick is the client-event, you should use the server-side action submit of dropdown:

Dropdown::create("ddinfooutline")
    ->title("View by")
    ->items([
        "Day"=>MenuItem::create()->icon("fas fa-info-circle")
    ])
    ->action("submit",function(){
        $this->sibling("myWidget")->update();
    })

Let us know if you need further assistance.

John commented on Nov 15

Day item should return a value 'mydate' and other items below - that i didn't include in the code - should return their values. How is this could be done with the way you suggest? I don't think the problem is there... It shows me this error (now and before your suggestion): "Call undefined value() method" I think the problem is on the way myWidget gets the value from the input (that is included in the Dashboard and not to its class/file).

KoolReport commented on Nov 16

The Dropdown does not have value like other, so what you can do is like this:

    ->action("submit",function($request){
        $this->sibling("myWidget")->setRange($request->params("selectedText"))->update();
    })

Now in your MyWidget, you add setRange function and also the way to get the range in datasource of your widget.

public function setRange($range)
{
    $this->state("range",$range);
}

protected function dataSource()
{
    $range = $this->state("range")?$this->state("range"):"Day"; //Default value is "Day"
    ...
}

Hope that helps.

John commented on Nov 16

Thank you for the answer, i think we are on the right way now. I couldn't though manage to pass the values from the dropdown menu items to the widget... I tried different things and it keeps showing 'Call to a member function update() on null'...

I have this on Dropdown:

->items([
    "Day"=>MenuItem::create(),
    "Week"=>MenuItem::create(),
    "Month"=>MenuItem::create(),

and i want to pass: 'mydate' for Day, 'week(mydate)' for Week and 'month(mydate)' for Month

Can you help?

KoolReport commented on Nov 17

It seems that it could not find the "myWidget" instance. May I see the code when you initiate the myWidget in your dashboard?

John commented on Nov 17

Thanks for response. You can see code from myWidget.php below:

use \koolreport\dashboard\widgets\apexcharts\ComboChart;

use \koolreport\dashboard\fields\Text;

use \koolreport\dashboard\fields\Currency;

use \koolreport\dashboard\ColorList;

class myWidget extends ComboChart
{
    protected function onInit()
    {
        $this
        ->colorScheme(ColorList::random())
        ->settings([
			"stacked" => true,
            "columns" => array(
                "Period" => [
                    "categoryType" => "datetime"
                ],
                "Amount" => [
                    "chartType" => "column",
					"label"=>"Income",
                ],
..
            ),
            'strokeWidth' => [
                0,
                2,
                5
            ],
            'fillOpacity' => [
                0.85,
                0.25,
                1
            ],
			'colors' => ['#FF4560', '#775DD0', '#00D9E9', '#FF66C3', '#008FFB', '#00E396', '#FEB019'],
			"options" => [
                'dataLabels | enabledOnSeries' => [0,1,2,3,4],
                'yaxis | 0 | title | text' => 'Value in Euros',
				'stroke | width' => 3,
                "legend | position" => "bottom",
            ],
            "showLabel" => true,
            "maxWidth" => "800px",
        ])
        ;
    }
	
	public function setRange($range)
	{
		$this->state("range",$range);
	}

    protected function dataSource()
    {
		$range = $this->state("range")?$this->state("range"):"month(mydate)"; 
		if (empty($range)) { $range = "month(mydate)"; };
		$source = mydb::rawSQL("
SELECT ...
		")
	   ->run() ;

    }

    protected function fields()
    {
        return [
            Text::create('Period'),
            Text::create('Amount'),
..
        ];
    }
}

John commented on Nov 23

Is there any news for this?

KoolReport commented on Nov 24

Sorry for late reply, I mean the code inside the MyBoard class where you create the myWidget because it seems to me that "myWidget" is not yet correct name, that why the ->sibling("myWidget") return null.

John commented on Nov 24

Ok, here it is:

MyBoard.php

<?php

use \koolreport\dashboard\Dashboard; use \koolreport\dashboard\containers\Row; use \koolreport\dashboard\containers\Panel; use \koolreport\dashboard\widgets\Text; use \koolreport\dashboard\containers\Html; use \koolreport\dashboard\menu\MenuItem; use \koolreport\dashboard\inputs\Dropdown; use \koolreport\dashboard\Client;

class MyBoard extends Dashboard {

protected function content()
{
    return [
        Row::create([
            Panel::create()->width(1/2)->sub([
				Dropdown::create("ddinfooutline")
				->title("View by")->items([
					"Day"=>MenuItem::create()->icon("fas fa-info-circle"),
					"Week"=>MenuItem::create(),
				])
				    ->action("submit",function($request){
						$this->sibling("myWidget")->setRange($request->params("selectedText"))->update();
					}),
                myWidget::create()
            ]),
            Panel::create()...

KoolReport commented on Nov 25

I see the issue now, instead of this

    $this->sibling("myWidget")->setRange($request->params("selectedText"))->update();

you do this:

    $this->sibling("myWidget")->setRange($request->params("selectedText"));
    $this->sibling("myWidget")->update();

or in this setRange, you need to return $this

	public function setRange($range)
	{
		$this->state("range",$range);
                return $this; //->this is important
	}

Also in the dataSource function, you need a map like this:

protected function dataSource()
{
    $rangeText = $this->state("range")?$this->state("range"):"Day";
    $map = [
        "Year"=>"year(mydate)",
        "Month"=>"month(mydate)",
        ...
    ];

    $range = $map[$rangeText];
    ...
    //now you can use the $range inside SQL.
}

John commented on Nov 25

Thank you!

KoolReport's Forum

Widget update from Dropdown input #3187

Build Your Excellent Data Report