i’m developing a laravel 8 + livewire application, and in my app I need to dynamically populate charts. When I insert the charts with static data in my view it is populated and shown correctly, but when I try to populate it dynamically it doesn’t show me anything. To pass the data to the script, from my livewire controller I used the dispatchBrowserEvent method and in the view I listened to the event. But by doing so I don’t get anything and I don’t understand why … do you have any suggestions or ideas?
this is my code:
- livewire component:
TableReportResiduiFasce.php
<?php namespace AppHttpLivewire; use LivewireComponent; use IlluminateHttpRequest; use IlluminateSupportFacadesDB; use LivewireWithPagination; use AppTenant; use IlluminateDatabaseEloquentBuilder; use IlluminateSupportCarbon; use AppModelsAnagraficaSoggetto; class TableReportResiduiFasce extends Component { use WithPagination; protected $paginationTheme = 'bootstrap'; protected $connection = null; protected $render = true; public $fascia1 = null; public $fascia2 = null; public $fascia3 = null; public $fascia4 = null; public $fascia5 = null; public $fascia6 = null; public $tot_posizioni = null; public $tot_residuo = null; public function mount(Request $request) { // Setto la connessione if (null !== $request->get('throughMiddleware')) { $this->connection = 'tenant'; } else { $this->connection = null; } $anagrafica = new AnagraficaSoggetto(); $anagrafica->setConnection($this->connection); //query fascia 1, conto il numero di contribuenti con un residuo >0 e < 100 $this->fascia1 = $anagrafica->select( DB::raw('count(anagrafica_soggetto.codiceFiscale) as total'), DB::raw('sum(importoResiduo) as residuo') ) ->join('minuta_partita', 'minuta_partita.id_soggetto', '=', 'anagrafica_soggetto.id') ->join('partita_pagamenti', 'partita_pagamenti.id_minuta_partita', '=', 'minuta_partita.id', 'left outer') ->join('users', 'minuta_partita.id_user', '=', 'users.id', 'left outer') ->join('tipologia_imposta', 'minuta_partita.id_tipologia_imposta', '=', 'tipologia_imposta.id') ->whereBetween('importoResiduo', [1, 99])->get()->toArray(); //query fascia 2, conto il numero di contribuenti con un residuo >=100 e <=1000 $this->fascia2 = $anagrafica->select( DB::raw('count(anagrafica_soggetto.codiceFiscale) as total'), DB::raw('sum(importoResiduo) as residuo') ) ->join('minuta_partita', 'minuta_partita.id_soggetto', '=', 'anagrafica_soggetto.id') ->join('partita_pagamenti', 'partita_pagamenti.id_minuta_partita', '=', 'minuta_partita.id', 'left outer') ->join('users', 'minuta_partita.id_user', '=', 'users.id', 'left outer') ->join('tipologia_imposta', 'minuta_partita.id_tipologia_imposta', '=', 'tipologia_imposta.id') ->whereBetween('importoResiduo', [100, 1000])->get()->toArray(); //query fascia 1, conto il numero di contribuenti con un residuo >1000 e <= 5000 $this->fascia3 = $anagrafica->select( DB::raw('count(anagrafica_soggetto.codiceFiscale) as total'), DB::raw('sum(importoResiduo) as residuo') ) ->join('minuta_partita', 'minuta_partita.id_soggetto', '=', 'anagrafica_soggetto.id') ->join('partita_pagamenti', 'partita_pagamenti.id_minuta_partita', '=', 'minuta_partita.id', 'left outer') ->join('users', 'minuta_partita.id_user', '=', 'users.id', 'left outer') ->join('tipologia_imposta', 'minuta_partita.id_tipologia_imposta', '=', 'tipologia_imposta.id') ->whereBetween('importoResiduo', [1001, 5000])->get()->toArray(); //query fascia 1, conto il numero di contribuenti con un residuo >5000 e <= 10000 $this->fascia4 = $anagrafica->select( DB::raw('count(anagrafica_soggetto.codiceFiscale) as total'), DB::raw('sum(importoResiduo) as residuo') ) ->join('minuta_partita', 'minuta_partita.id_soggetto', '=', 'anagrafica_soggetto.id') ->join('partita_pagamenti', 'partita_pagamenti.id_minuta_partita', '=', 'minuta_partita.id', 'left outer') ->join('users', 'minuta_partita.id_user', '=', 'users.id', 'left outer') ->join('tipologia_imposta', 'minuta_partita.id_tipologia_imposta', '=', 'tipologia_imposta.id') ->whereBetween('importoResiduo', [5001, 10000])->get()->toArray(); //query fascia 5, conto il numero di contribuenti con un residuo >10000 e <=20000 $this->fascia5 = $anagrafica->select( DB::raw('count(anagrafica_soggetto.codiceFiscale) as total'), DB::raw('sum(importoResiduo) as residuo') ) ->join('minuta_partita', 'minuta_partita.id_soggetto', '=', 'anagrafica_soggetto.id') ->join('partita_pagamenti', 'partita_pagamenti.id_minuta_partita', '=', 'minuta_partita.id', 'left outer') ->join('users', 'minuta_partita.id_user', '=', 'users.id', 'left outer') ->join('tipologia_imposta', 'minuta_partita.id_tipologia_imposta', '=', 'tipologia_imposta.id') ->whereBetween('importoResiduo', [10001, 200000])->get()->toArray(); //query fascia 1, conto il numero di contribuenti con un residuo >20000 $this->fascia6 = $anagrafica->select( DB::raw('count(anagrafica_soggetto.codiceFiscale) as total'), DB::raw('sum(importoResiduo) as residuo') ) ->join('minuta_partita', 'minuta_partita.id_soggetto', '=', 'anagrafica_soggetto.id') ->join('partita_pagamenti', 'partita_pagamenti.id_minuta_partita', '=', 'minuta_partita.id', 'left outer') ->join('users', 'minuta_partita.id_user', '=', 'users.id', 'left outer') ->join('tipologia_imposta', 'minuta_partita.id_tipologia_imposta', '=', 'tipologia_imposta.id') ->where('importoResiduo', '>', 20000)->get()->toArray(); if (!empty($this->fascia1[0])) { $this->tot_posizioni = $this->tot_posizioni + $this->fascia1[0]['total']; $this->tot_residuo = $this->tot_residuo + $this->fascia1[0]['residuo']; } if (!empty($this->fascia2[0])) { $this->tot_posizioni = $this->tot_posizioni + $this->fascia2[0]['total']; $this->tot_residuo = $this->tot_residuo + $this->fascia2[0]['residuo']; } if (!empty($this->fascia3[0])) { $this->tot_posizioni = $this->tot_posizioni + $this->fascia3[0]['total']; $this->tot_residuo = $this->tot_residuo + $this->fascia3[0]['residuo']; } if (!empty($this->fascia4[0])) { $this->tot_posizioni = $this->tot_posizioni + $this->fascia4[0]['total']; $this->tot_residuo = $this->tot_residuo + $this->fascia4[0]['residuo']; } if (!empty($this->fascia5[0])) { $this->tot_posizioni = $this->tot_posizioni + $this->fascia5[0]['total']; $this->tot_residuo = $this->tot_residuo + $this->fascia5[0]['residuo']; } if (!empty($this->fascia6[0])) { $this->tot_posizioni = $this->tot_posizioni + $this->fascia6[0]['total']; $this->tot_residuo = $this->tot_residuo + $this->fascia6[0]['residuo']; } $this->dispatchBrowserEvent('open',['fascia1' => $this->fascia1, 'fascia2' => $this->fascia2, 'fascia3' => $this->fascia3, 'fascia4' => $this->fascia4, 'fascia5' => $this->fascia5, 'fascia6' => $this->fascia6, 'tot_posizioni' => $this->tot_posizioni]); //dd($this->fascia3); } public function render() { return view('livewire.table-report-residui-fasce') ->with('fascia1', $this->fascia1) ->with('fascia2', $this->fascia2) ->with('fascia3', $this->fascia3) ->with('fascia4', $this->fascia4) ->with('fascia5', $this->fascia5) ->with('fascia6', $this->fascia6) ->with('tot_posizioni', $this->tot_posizioni) ->with('tot_residuo', $this->tot_residuo); } }
- my view:
table-report-residui-fasce.blade.php
<div class="row"> <div class="col-12"> <div class="card"> <div class="card-header"> <h4 class="card-title">Report residui per fasce</h4> </div> <div class="card-body"> <div class="table-responsive"> <table class="table table-responsive-md" style="min-width: 845px"> <thead> <tr> <th>Fascia</th> <th># Posizioni</th> <th>Residuo €</th> <th>% Posizioni</th> <th>% Residuo</th> <th>Valore Medio €</th> </tr> </thead> <tbody> @if ($fascia1[0]['total'] !== 0) <tr> <td><span class="badge light badge-lg badge-info"> < 100 €</span> </td> <td>{{ $fascia1[0]['total'] }}</td> <td>{{ $fascia1[0]['residuo'] }} €</td> <td>{{ round((100 * $fascia1[0]['total']) / $tot_posizioni, 2) }} % </td> <td>{{ round((100 * $fascia1[0]['residuo']) / $tot_residuo, 2) }} %</td> <td> @if (!empty($fascia1[0]['total'])) {{ round($fascia1[0]['residuo'] / $fascia1[0]['total'], 2) }} @else 0 @endif € </td> </tr> @else <tr> <td><span class="badge light badge-lg badge-info"> < 100 €</span> </td> <td>0</td> <td>0 €</td> <td>0 % </td> <td>0 %</td> <td>0 €</td> </tr> @endif @if ($fascia2[0]['total'] !== 0) <tr> <td><span class="badge light badge-lg badge-success">100 - 1000 €</span></td> <td>{{ $fascia2[0]['total'] }}</td> <td>{{ $fascia2[0]['residuo'] }} €</td> <td>{{ round((100 * $fascia2[0]['total']) / $tot_posizioni, 2) }} % </td> <td>{{ round((100 * $fascia2[0]['residuo']) / $tot_residuo, 2) }} %</td> <td> @if (!empty($fascia2[0]['total'])) {{ round($fascia2[0]['residuo'] / $fascia2[0]['total'], 2) }} @else 0 @endif € </td> </tr> @else <tr> <td><span class="badge light badge-lg badge-success"> 100 - 1000 €</span></td> <td>0</td> <td>0 €</td> <td>0 % </td> <td>0 %</td> <td>0 €</td> </tr> @endif @if ($fascia3[0]['total'] !== 0) <tr> <td><span class="badge light badge-lg badge-light">1000 - 5000 €</span></td> <td>{{ $fascia3[0]['total'] }}</td> <td>{{ $fascia3[0]['residuo'] }} €</td> <td>{{ round((100 * $fascia3[0]['total']) / $tot_posizioni, 2) }} % </td> <td>{{ round((100 * $fascia3[0]['residuo']) / $tot_residuo, 2) }} %</td> <td> @if (!empty($fascia3[0]['total'])) {{ round($fascia3[0]['residuo'] / $fascia3[0]['total'], 2) }} @else 0 @endif € </td> </tr> @else <tr> <td><span class="badge light badge-lg badge-light"> 1000 - 5000 €</span></td> <td>0</td> <td>0 €</td> <td>0 % </td> <td>0 %</td> <td>0 €</td> </tr> @endif @if ($fascia4[0]['total'] !== 0) <tr> <td><span class="badge light badge-lg badge-dark">5000 - 10000 €</span></td> <td>{{ $fascia4[0]['total'] }}</td> <td>{{ $fascia4[0]['residuo'] }} €</td> <td>{{ round((100 * $fascia4[0]['total']) / $tot_posizioni, 2) }} % </td> <td>{{ round((100 * $fascia4[0]['residuo']) / $tot_residuo, 2) }} %</td> <td> @if (!empty($fascia4[0]['total'])) {{ round($fascia4[0]['residuo'] / $fascia4[0]['total'], 2) }} @else 0 @endif € </td> </tr> @else <tr> <td><span class="badge light badge-lg badge-dark"> 5000 - 10000 €</span> </td> <td>0</td> <td>0 €</td> <td>0 % </td> <td>0 %</td> <td>0 €</td> </tr> @endif @if ($fascia5[0]['total'] !== 0) <tr> <td><span class="badge light badge-lg badge-warning">10000 - 20000 €</span> </td> <td>{{ $fascia5[0]['total'] }}</td> <td>{{ $fascia5[0]['residuo'] }} €</td> <td>{{ round((100 * $fascia5[0]['total']) / $tot_posizioni, 2) }} % </td> <td>{{ round((100 * $fascia5[0]['residuo']) / $tot_residuo, 2) }} %</td> <td> @if (!empty($fascia5[0]['total'])) {{ round($fascia5[0]['residuo'] / $fascia5[0]['total'], 2) }} @else 0 @endif € </td> </tr> @else <tr> <td><span class="badge light badge-lg badge-warning"> 10000 - 20000 € </span> </td> <td>0</td> <td>0 €</td> <td>0 % </td> <td>0 %</td> <td>0 €</td> </tr> @endif @if ($fascia6[0]['total'] !== 0) <tr> <td><span class="badge light badge-lg badge-danger"> > 2000 €</span></td> <td>{{ $fascia6[0]['total'] }}</td> <td>{{ $fascia6[0]['residuo'] }} €</td> <td>{{ round((100 * $fascia6[0]['total']) / $tot_posizioni, 2) }} % </td> <td>{{ round((100 * $fascia6[0]['residuo']) / $tot_residuo, 2) }} %</td> <td> @if (!empty($fascia6[0]['total'])) {{ round($fascia6[0]['residuo'] / $fascia6[0]['total'], 2) }} @else 0 @endif € </td> </tr> @else <tr> <td><span class="badge light badge-lg badge-danger"> > 20000 €</span> </td> <td>0</td> <td>0 €</td> <td>0 % </td> <td>0 %</td> <td>0 €</td> </tr> @endif </tbody> <tfoot> <th></th> <th>Tot posizioni: {{ $tot_posizioni }}</th> <th>Tot residuo: {{ $tot_residuo }} €</th> <th>100%</th> <th>100%</th> <th>Tot medio: @if ($tot_posizioni != 0) {{ round($tot_residuo / $tot_posizioni, 2) }} @else 0 @endif €</th> </tfoot> </table> </div> </div> </div> </div> <!-- grafichiamo i risultati stampati in tabella --> <div class="col-xl-6 col-lg-12"> <div class="card"> <div class="card-header"> <h4 class="card-title">Residui per fasce</h4> </div> <div class="card-body"> <div id="morris" class="morris_chart_height"> </div> </div> </div> </div> </div> @push('custom_scripts') <script> //Codice per popolare il grafico var screenWidth = $(window).width(); var setChartWidth = function() { if (screenWidth <= 768) { var chartBlockWidth = 0; chartBlockWidth = (screenWidth < 300) ? screenWidth : 300; jQuery('.morris_chart_height').css('min-width', chartBlockWidth - 31); } } // VALORI HARD CODED SOLO A FINI DI TEST DI STAMPA A VIDEO DEL GRAFICO // VANNO POI MODIFICATI PER ESSERE DINAMICI // La somma di questi deve essere uguale a total //HERE I'M LISTENING THE EVENT TO TAKE VALUE WITH 'event.detail.fascia[i]['total']' VALUE window.addEventListener('open', event => { let Data = [{ label: "Fascia < 100 €", //color: info value: 12 //12 commenting the window.addEventListener //or dynamically value from event.detail }, { label: "Fascia 100 - 1000 €", //color: success value: 30 }, { label: "Fascia 1000 - 5000 €", //color: light value: 20 }, { label: "Fascia 5000 - 10000 €", //color: dark value: 20 }, { label: "Fascia 10000 - 20000 €", //color: warning value: 20 }, { label: "Fascia > 20000 €", //color: danger value: 20 }, ]; }) let total = 122; // Numero totale di residui non può essere hard coded var browsersChart = Morris.Donut({ element: 'morris', // Id del div dove va messo il grafico data: Data, formatter: function(value, data) { return Math.floor(value / total * 100) + '%'; }, resize: true, redraw: true, colors: ['rgba(0, 227, 239, 0.533)', 'rgba(0, 239, 52, 0.506)', 'rgba(171, 168, 168, 0.437)', 'rgba(80, 63, 88, 0.56)', 'rgba(246, 152, 45, 0.608)', 'rgba(251, 39, 39, 0.676)'] // Mettere tanti colori quante sono le fasce }); </script> @endpush
Advertisement
Answer
You can use Laravel’s {{ }}
since this JS is inside <script>
tags its code will be pre-processed by Laravel blade engine, therefore every {{ }}
will be recognized and substituted before sending the page to the client.
So in your specific case you can just do something like this:
let Data = [{ label: "Fascia < 100 €", //color: info value: {{ $fascia1[0]['residuo'] }} }, { label: "Fascia 100 - 1000 €", //color: success value: {{ $fascia2[0]['residuo'] }} }, { label: "Fascia 1000 - 5000 €", //color: light value: {{ $fascia3[0]['residuo'] }} }, { label: "Fascia 5000 - 10000 €", //color: dark value: {{ $fascia3[0]['residuo'] }} }, { label: "Fascia 10000 - 20000 €", //color: warning value: {{ $fascia5[0]['residuo'] }} }, { label: "Fascia > 20000 €", //color: danger value: {{ $fascia6[0]['residuo'] }} }, ]; let total = {{ $tot_residuo }};
Make sure to also check for 0 values since in these cases you don’t want to show the respective label.
Let’s say for example fascia 5000 - 10000
has a value of 0
then you don’t want to show that label otherwise the graph would make no sense.
Also i have a doubt regarding why you are saving the variables $fascia
as arrays, this way you will have to access them like you are doing e.g $fascia6[0]['residuo']
. Wouldn’t it be easier to avoid the toArray()
method and just saving them as they come back from Eloquent (since they are not a collection given your query). That way you can access them just like $fascia6['residuo']