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 5 days ago - 2 comments

Christian Voß commented 5 days ago

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 5 days ago

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 4 days ago

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;
    }
}

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