KoolReport's Forum

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

ApexChart.js - legendFormatter is not a function #3422

Open Christian Voß opened this topic on on Mar 12 - 3 comments

Christian Voß commented on Mar 12

Hi,

I'm using an ApexChart (ComboChart) in my dashboard. It has been working for years, but I now upgraded the koolreport files to the latest version. I'm now receiving an error in the apexchart.js .

The error is in row 14062. Can you please review and advise? I need this chart for a client.

Thanks and best regards

Christian

Sebastian Morales commented on Mar 13

Pls let us know your ApexCharts package's current version and post your report code for us to fix it for you. Tks,

Christian Voß commented on Mar 13

Thank you for your help. I'm using the latest version which you published, which should be V. 1.1.1. and here's my code:

<?php

namespace App\Dashboards\Boards\ResourceBoard\widgets;

use App\Dashboards\datasource;
use App\Http\Controllers\HomeController;
use App\Models\Site;
use Carbon\Carbon;
use DateInterval;
use DatePeriod;
use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\DB;

use koolreport\dashboard\ColorList;
use koolreport\dashboard\widgets\apexcharts\ComboChart;
use koolreport\pivot\processes\Pivot;
use \koolreport\dashboard\fields\Text;

class chart extends ComboChart
{
    private $customerList = null;

    public function getSiteId()
    {
        return $this->params("site_id");
    }

    public function getScheduleVersionId()
    {
        $schedule_version_id = $this->sibling("scheduleVersionSelect")->value();
        if ($schedule_version_id == null) {
            $schedule_version_id = $this->params("schedule_version_id");
            if ($schedule_version_id == null) {
                $site = Site::find($this->getSiteId());
                $schedule_version_id = $site ? $site->scheduleVersion()->id : null;
            }
        }
        return $schedule_version_id;
    }

    public function customerList($startWeek, $endWeek)
    {
        if ($this->customerList == null) {
            $data = $this->data($startWeek, $endWeek);
            $this->customerList = $data->unique(function ($item) {
                return $item->customer . '-' . $item->customer_id . '-' . $item->customer_color;
            })->sortBy('customer');;
        }
        return $this->customerList;
    }

    private $dataCache = [];
    public function data($startWeek, $endWeek)
    {
        $key = $startWeek->format('Y-m-d') . '_' . $endWeek->format('Y-m-d');
        if (!isset($this->dataCache[$key])) {
            // Fetch and store result
            $this->dataCache[$key] = DB::table('resource_view')
                ->select('week', 'customer', 'customer_id', 'customer_color', DB::raw('SUM(hours) as hours'))
                ->whereBetween('week', [$startWeek, $endWeek])
                ->where('schedule_version_id', $this->getScheduleVersionId())
                ->groupBy('week', 'customer', 'customer_id', 'customer_color')
                ->orderBy('week')
                ->get();
        }
        return $this->dataCache[$key];
    }


    private $budgetData = null;
    public function budgetData($startWeek, $endWeek)
    {
        if ($this->budgetData == null) {
            $site_id = $this->getSiteId();

            $trades = $this->sibling("tradeSelect")->value();

            $query = DB::table(DB::raw("GetCurrentBudgetsForMondays(?, ?)"))
                ->select('monday', DB::raw('SUM(budget) as budget'))
                ->groupBy('monday')
                ->orderBy('monday');

            $query->setBindings([$startWeek->format('Y-m-d'), $endWeek->format('Y-m-d')]);


            if ($site_id != null) {
                $query = $query->where('site_id', $site_id);
            }
            if ($trades != null) {
                $query = $query->whereIn('trade_id', $trades);
            }
            $this->budgetData = $query->get();
        }
        return $this->budgetData;
    }

    protected function onInit()
    {
        $dates = $this->sibling("datePicker")->value();

        $startWeek = Carbon::parse($dates[0])->startOfWeek();
        $endWeek = Carbon::parse($dates[1])->endOfWeek();
        $customers = $this->customerList($startWeek, $endWeek);
        $colors = [];
        $columns['week'] = ['chartType' => 'date'];
        $stacked = [];
        foreach ($customers as $customer) {
            array_push($colors, $customer->customer_color);
            array_push($stacked, true);
            $columns[$customer->customer] = ['chartType' => 'area'];
        }
        array_push($stacked, false);
        $columns['budget'] = ['chartType' => 'line'];
        array_push($colors, '#F00');

        $this
            ->settings([
                "title" => "Resources",
                'columns' => $columns,
                'fillOpacity' => 0.5,
                'strokeWidth' => 3,
                'stacked' => $stacked

            ])
            ->colorScheme($colors)
        ;
    }

    protected function dataSource()
    {


        $dates = $this->sibling("datePicker")->value();

        $startWeek = Carbon::parse($dates[0])->startOfWeek();
        $endWeek = Carbon::parse($dates[1])->endOfWeek();
        $customers = $this->customerList($startWeek, $endWeek);
        $data = collect($this->data($startWeek, $endWeek));

        $budgets = $this->budgetData($startWeek, $endWeek);

        $subHeader = ['week'];
        foreach ($customers as $customer) {
            array_push($subHeader, $customer->customer);
        }
        array_push($subHeader, 'budget');
        $result[0] = $subHeader;

        foreach (new DatePeriod($startWeek, DateInterval::createFromDateString('1 week'), $endWeek->copy()->endOfWeek()) as $date) {
            $sub = [$date->format('Y-m-d')];
            foreach ($customers as $customer) {
                $item = $data->first(function ($value) use ($date, $customer) {
                    return $value->week == $date->format('Y-m-d') && $value->customer == $customer->customer;
                });

                array_push($sub, $item != null ? ($item->hours ?? 0) : 0);
            }
            $budget = $budgets->where('monday', $date->format('Y-m-d'))->first();

            array_push($sub, $budget->budget ?? 0);
            array_push($result, $sub);
        }


        return $result;
    }



    protected function fields()
    {

        $fields = [Text::create('week')];
        $dates = $this->sibling("datePicker")->value();
        $startWeek = Carbon::parse($dates[0])->startOfWeek();
        $endWeek = Carbon::parse($dates[1])->endOfWeek();
        $customers = $this->customerList($startWeek, $endWeek);

        foreach ($customers as $customer) {
            array_push($fields, Text::create($customer->customer));
        }
        array_push($fields, Text::create('budget'));
        return $fields;
    }
}

Sebastian Morales commented on Mar 20

Would you pls inspect your report page to see where the files apexcharts.js and KoolReportApexCharts are loaded from? If it's from a kooreport_asset subdirectory pls delete the subdirectory and reload your report again.

Another test is to try our ApexCharts example on your setup and see if it gets the same error:

https://www.koolreport.com/examples/reports/apexcharts/mixed_combo/line_column/

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
bug

ApexCharts