KoolReport's Forum

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

Dashboard DataTables Custom Color Based On Value #3189

Open afieq opened this topic on on Nov 19 - 13 comments

afieq commented on Nov 19

Hi,

I'm facing an issue where i created a KWidget on my dashboard. Where i want to set color based on the value of the column. For example there is column A and column B, if the column B value is more than column A then i want to set the font color of column B to Green if the column B is less than the value of column A then set the font color of column B to Red. Is there a way to set the color based on my condition?

Below is an example of the code.

<?php

namespace demo\kwidgets;

use \koolreport\dashboard\widgets\KWidget;

use \demo\AutoMaker;
use \koolreport\dashboard\ColorList;

class DataTablesDemo extends KWidget
{
    protected function dataSource()
    {
        return AutoMaker::rawSQL("select name, columnA, columnB from payments");
    }

    protected function onCreated()
    {
        $this
        ->use(\koolreport\datagrid\DataTables::class)
        ->settings([
            "options"=>array(
                "paging"=>true,
            )
        ]);
    }

}

Thanks in advance.

Regards, Afieq

afieq commented on Nov 20

Hi,

Any help can i get on this problem?

Thanks in advance.

Regards, Afieq

David Winterburn commented on Nov 20

Since it is KWidget I think you could use DataTables' css style property to customize the columns:

https://www.koolreport.com/docs/datagrid/datatables/#set-custom-css-styles

In the "td" function you could use the $row parameter to get values of column A and column B, then assign font color when $colName === your target column.

afieq commented on Nov 20

Hi David,

I have added the cssStyle on my code and add the condition on my target column and it works like a charm. Thank you for your help.

Regards, Afieq

afieq commented on Nov 21

Hi,

I encounter new issue right now, after im implement the condition n the "td" function. Some of the rows not display the correct color. Instead of green it show in red color for the value of Column 2023 is more than Column 2022. Same for the Column Month, instead of green is display red when current month is more than previous month. Is there a solution for my problem?

Below is the result of my DataTables report and the coding.

'td' => function($row, $colName) use ($currentYear,$previousYear,$currentMonth,$previousMonth){
                    if($colName === $currentYear && $row[$currentYear] > $row[$previousYear]) {
                        return 'color: green;';
                    }
                    else if ($colName === $currentYear && $row[$currentYear] < $row[$previousYear]){
                        return  'color: red';
                    }
                    else if($colName === $currentMonth && $row[$currentMonth] > $row[$previousMonth]) {
                        return 'color: green;';
                    }
                    else if ($colName === $currentMonth && $row[$currentMonth] < $row[$previousMonth]){
                        return  'color: red';
                    }
                    else {
                        'color: black';
                    }
                },

Thanks in advance.

Regards, Afieq

David Winterburn commented on Nov 21

Pls var_dump $row[$currentMonth] and $row[$previousMonth] to their types and values. If they are formatted string you might need to convert them to numeric values right before comparing to get correct comparison.

afieq commented on Nov 22

Hi David,

I have added the var_dump and it's output as string for the column as you stated. I have convert the type to "num-fmt" and my condition color works. My report works fine but the value now is not separate thousand, how can i display my value with thousand separator?

"columnDefs" => array(
                    array( 
                        "type" => "num-fmt", 
                        "targets" => array(1) 
                    ), // set type for the 2nd column (index 1)
                    array( 
                        "type" => "num-fmt", 
                        "targets" => array(2) 
                    ),
                    array( 
                        "type" => "num-fmt", 
                        "targets" => array(3) 
                    ),
                    array( 
                        "type" => "num-fmt", 
                        "targets" => array(4) 
                    ),
                ),

Thanks in advance.

Regards, Afieq

afieq commented 3 days ago

Hi,

Any help can i get on this problem? I need to format the value using the comma separate thousand and align it to right.

Thanks in advance.

Regards, Afieq

David Winterburn commented 2 days ago

With Dashboard widget, pls use Number field for your columns so that they are formatted numerically:

https://www.koolreport.com/docs/dashboard/fields/#types-number

afieq commented 2 days ago

Hi David,

As per mention before, when i use the "Number" type my condition color set will not work properly. That's why i'm using "num-fmt" type then my condition color will work fine but there's no thousand separator when using it.

May i know how can i set the thousand separator on the num-fmt type format?

Regards, Afieq

John commented 1 day ago

Did you try this?

						 "amount"=>array(
							 "type"=>"number",
							 "thousandSeparator"=>".",
afieq commented 22 hours ago

Hi John,

I'm not using the number type, i'm using the num-fmt format for my condtion to works.

Regards, Afieq

John commented 11 hours ago

Hi Afieq, I didn't notice this. I would try to format it via mysql, e.g. format() function

John commented 3 hours ago

Use this, i tested it and it's ok:

					 "formatValue"=>function($value){
						return number_format($value,2,',','.');
							},

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

DataGrid