Criar gráficos com chartJS no Adianti

File.php

<?php

use Adianti\Control\TAction;
use Adianti\Control\TPage;
use Adianti\Database\TCriteria;
use Adianti\Database\TDatabase;
use Adianti\Database\TFilter;
use Adianti\Database\TRepository;
use Adianti\Database\TTransaction;
use Adianti\Widget\Base\TElement;
use Adianti\Widget\Base\TScript;
use Adianti\Widget\Container\TPanelGroup;
use Adianti\Widget\Container\TVBox;
use Adianti\Widget\Datagrid\TDataGrid;
use Adianti\Widget\Datagrid\TDataGridColumn;
use Adianti\Widget\Dialog\TMessage;
use Adianti\Widget\Template\THtmlRenderer;
use Adianti\Wrapper\BootstrapDatagridWrapper;
use Carbon\Carbon;

class GraficoCurriculos extends TPage
{
   /**
    * Class constructor
    * Creates the page
    */

   private $grafico1;
   private $grafico1Aux;

   private $grafico2;

   private $datagrid;



   function __construct()
   {
      try {
         parent::__construct();


         $this->datagrid = new BootstrapDatagridWrapper(new TDataGrid);
         $this->datagrid->style = 'width: 100%';
         $this->datagrid->datatable = 'true';

         $column_id = new TDataGridColumn('id', '#', 'right');
         $column_descricao = new TDataGridColumn('descricao', 'Sigla', 'left');
         $column_dt_aprovacao = new TDataGridColumn('dt_aprovacao', 'Data Aprovação', 'left');
         $column_curso_id = new TDataGridColumn('curso->nome', 'Curso ', 'left');
         $column_curriculo_base = new TDataGridColumn('tipo', 'Tipo', 'left');
         $column_status = new TDataGridColumn('status', 'Status', 'left');

         $column_status->setTransformer(function ($value) {
            if ($value == 'I') {
               $div = new TElement('span');
               $div->class = "label label-danger";
               $div->style = "text-shadow: nome; font-size: 12px";
               $div->add('Inativo');

               return $div;
            } else {

               $div = new TElement('span');
               $div->class = "label label-success";
               $div->style = "text-shadow: nome; font-size: 12px";
               $div->add('Ativo');

               return $div;
            }
         });

         $this->datagrid->addColumn($column_id);
         $this->datagrid->addColumn($column_descricao);
         $this->datagrid->addColumn($column_dt_aprovacao);
         $this->datagrid->addColumn($column_curso_id);
         $this->datagrid->addColumn($column_curriculo_base);
         $this->datagrid->addColumn($column_status);

         $this->datagrid->createModel();


         TPage::include_js('lib/jquery/js/highcharts.js');
         TPage::include_js('lib/jquery/js/data.js');
         TPage::include_js('lib/jquery/js/drilldown.js');
         TPage::include_js('lib/jquery/js/exporting.js');
         TPage::include_js('lib/jquery/js/offline-exporting.js');

         $html = new THtmlRenderer('app/resources/graficos/doa/curriculo.html');


         $conn = TTransaction::open('sigen');

         //gráfico de barras
         $sql = "SELECT public.curriculo.id as id,
        public.curriculo.descricao as descricao,
        public.curriculo.dt_aprovacao as dt_aprovacao,
        public.curriculo.curso_id as curso_id,
        public.curriculo.curriculo_base as curriculo_base,
        public.curriculo.status as status,
        public.curso.tipo as tipo
        FROM public.curriculo, public.curso
        WHERE public.curriculo.curso_id = public.curso.id AND
        public.curriculo.status = 'A'";

         $rows = TDatabase::getData($conn, $sql);

         $auxArray = [];
         foreach ($rows as $item) {
            if (array_key_exists(Curso::tipo($item['tipo']), $auxArray)) {
               $auxArray[Curso::tipo($item['tipo'])] += 1;
            } else {
               $auxArray[Curso::tipo($item['tipo'])] = 0;
               $auxArray[Curso::tipo($item['tipo'])] += 1;
            }
         }
         $this->grafico1 = $this->makeArrayToString($auxArray);

         $this->grafico1Aux["total"] = count($rows);


         //CRIAR GRÁFICO DE PIZZA
         $repository = new TRepository('Curriculo');
         $criteria = new TCriteria;
         $criteria->add(new TFilter('status', '=', 'A'));

         $curriculosAtivos = $repository->load($criteria);

         $curriculosAtualizados = array("Atualizado" => 0, "Desatualizado" => 0);

         foreach ($curriculosAtivos as $item) {
            $date = new Carbon($item->dt_aprovacao);

            //TODO: DATA DE ATUALIZAÇÃO, QUEM SABE NÃO FAZER ESSA RN NA MODEL?
            if ($date->greaterThan(new Carbon('2019-01-01'))) {
               $curriculosAtualizados["Atualizado"] += 1;
            } else {
               $curriculosAtualizados["Desatualizado"] += 1;
            }
         }

         $this->grafico2 = $this->makeArrayToStringPIE($curriculosAtualizados);

         $html->enableSection('main', []);
         $container = new TVBox;
         $container->style = 'width: 100%';
         $container->add(TPanelGroup::pack('Relatório - Curriculos', $html));

         $panel = new TPanelGroup('', 'white');

         $panel->addHeaderActionLink('Remover Filtro',  new TAction(['GraficoCurriculos', 'onLoad'], []), 'fa:trash green');


         $panel->add($this->datagrid);

         $vbox = new TVBox;
         $vbox->style = 'width: 100%';
         $vbox->add($panel);

         parent::add($container);
         parent::add($vbox);
      } catch (Exception $e) {
         new TMessage('error', $e->getMessage());
      } finally {
         TTransaction::close();
      }
   }

   public function show()
   {
      if (!$this->loaded) {
         $this->onLoad(func_get_arg(0));
      }
      parent::show();
   }


   public function onLoad($param = null)
   {
      if (isset($param['tipo'])) {
         try {

            //$this->datagrid;
            $tipos = Curso::tipo();
            $tipoId =  array_search($param['tipo'], $tipos);

            TTransaction::open('sigen');

            $cursos = Curso::where('tipo', '=', $tipoId)->get();

            $this->datagrid->clear();
            $arr = [];
            foreach ($cursos as $curso) {
               $data = $curso->curriculoAtivo;

               if ($data) {
                  $data->tipo = Curso::tipo($curso->tipo);
                  $arr[] = $data;
               }

               unset($data);
            }

            $this->datagrid->addItems($arr);
         } catch (Exception $e) {
            new TMessage('error', $e->getMessage());
         } finally {
            TTransaction::close();
         }
      }

      $this->curriculoPorTipo();
      $this->curriculoAtualizado();
   }


   private function curriculoPorTipo()
   {

      $script = new TElement('script');
      $script->type = 'text/javascript';
      $javascript = "
            $('#grafico1').highcharts({
               chart: {
                  type: 'column',
                  events:{
                     click: function(event){
                        console.log(event);
                     },
                  },
              },
              title: {
                  text: '<b>Total de curriculos ativos por tipo</b>'
              },
              subtitle: {
                  text: 'Em um total de: <b>" . $this->grafico1Aux["total"] . "</b> curriculos ativos, temos:'
              },

              plotOptions: {
                 series: {
                    cursor: 'pointer',
                    events: {
                       click: function(event){
                          window.location = 'index.php?class=GraficoCurriculos&method=onLoad&tipo='+event.point.name;
                       }
                    }
                 }

              },

              exporting: {
               chartOptions: {
                   plotOptions: {
                       series: {
                           dataLabels: {
                               enabled: true
                           }
                       }
                   }
               },
               fallbackToExportServer: false
               },

              xAxis: {
                  type: 'category',
                  labels: {
                      rotation: -45,
                      style: {
                          fontSize: '13px',
                          fontFamily: 'Verdana, sans-serif'
                      }
                  }
              },
              yAxis: {
                  min: 0,
                  title: {
                      text: 'Curriculos'
                  }
              },
              legend: {
                  enabled: false
              },
              tooltip: {
                 borderColor: '##3F51B5',
                 formatter: function() {
                     return 'Para <b>'+this.point.name+'</b> temos <b>' + this.y + '</b>, em um total de <b>" . $this->grafico1Aux["total"] . "</b> curriculos. ('+(this.y*100)/this.series.userOptions.total+'%) ';
                  }
              },
              series: [{
                  name: 'Total de Curriculos',
                  allowPointSelect: true,
                  total: {$this->grafico1Aux["total"]},
                  total2: " . $this->grafico1Aux["total"] . ",
                  data: [{$this->grafico1}],
                  dataLabels: {
                      enabled: true,
                      rotation: -90,
                      color: '#FFFFFF',
                      align: 'right',
                      format: '{point.y}', // one decimal
                      y: 10, // 10 pixels down from the top
                      style: {
                          fontSize: '13px',
                          fontFamily: 'Verdana, sans-serif'
                      }
                  }
              }],

          });
          ";
      $script->add($javascript);
      parent::add($script);
   }

   private function curriculoAtualizado()
   {
      $script = new TElement('script');
      $script->type = 'text/javascript';
      $javascript = "
            $('#grafico2').highcharts({
               chart: {
                  plotBackgroundColor: null,
                  plotBorderWidth: null,
                  plotShadow: false,
                  type: 'pie'
              },
               title: {
                  text: '<b>% Total de Atualização dos Curriculos Ativos</b>'
               },
               tooltip: {
                     pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
               },
               accessibility: {
                     point: {
                        valueSuffix: '%'
                     }
               },
               plotOptions: {
                  pie: {
                      allowPointSelect: true,
                      cursor: 'pointer',
                      dataLabels: {
                          enabled: true,
                          format: '<b>{point.name}</b>: {point.percentage:.1f} %'
                      }
                  }
              },
              series: [{
                  name: 'Total',
                  colorByPoint: true,
                  data: [{$this->grafico2}]
              }]

            });
          ";
      $script->add($javascript);
      parent::add($script);
   }


   private function makeArrayToString(array $data): string
   {
      $aux = null;
      foreach ($data as $finalArray => $key) {
         $aux = $aux . "['$finalArray', $key],";
      };

      $aux = substr($aux, 0, -1);

      return $aux;
   }

   private function makeArrayToStringPIE(array $data): string
   {
      $aux = null;
      foreach ($data as $finalArray => $key) {
         $aux = $aux . "{name: '$finalArray', y: $key},";
      };

      $aux = substr($aux, 0, -1);

      return $aux;
   }
}