fix

Author: cihan emre kisakurek

resources/views/livewire/linechart.blade.php

@@ -16,31 +16,15 @@
         }
     }
     var bar_chart_config = {
-        type: 'bar',
+        type: String("{!! $chart_type !!}"),
         data: {
             labels: @json($labels),
             datasets: [{
                 label: String("{!! $title !!}"),
                 data: @json($data),
-                backgroundColor: [
-                    'rgba(255, 99, 132, 0.2)',
-                    'rgba(255, 159, 64, 0.2)',
-                    'rgba(255, 205, 86, 0.2)',
-                    'rgba(75, 192, 192, 0.2)',
-                    'rgba(54, 162, 235, 0.2)',
-                    'rgba(153, 102, 255, 0.2)',
-                    'rgba(201, 203, 207, 0.2)'
-                ],
-                borderColor: [
-                    'rgb(255, 99, 132)',
-                    'rgb(255, 159, 64)',
-                    'rgb(255, 205, 86)',
-                    'rgb(75, 192, 192)',
-                    'rgb(54, 162, 235)',
-                    'rgb(153, 102, 255)',
-                    'rgb(201, 203, 207)'
-                ],
-                borderWidth: 1
+                backgroundColor: @json($background_colors),
+                borderColor: @json($border_colors),
+                borderWidth: parseFloat("{!! $border_width !!}")
             }]
         },
         options: {
@@ -53,13 +37,14 @@
         }
     };
    
-    var chart = new Chart(document.getElementById('{{!! $chart_id !!}}'), bar_chart_config);
+    let chart_id = String("{!! $chart_id !!}");
+    var chart = new Chart(document.getElementById(chart_id), bar_chart_config);
 
     document.addEventListener("DOMContentLoaded", function() {
-        window.addEventListener('update_chart_data', event => {
-            var bar_chart = Chart.getChart('{{!! $chart_id !!}}');
+        window.addEventListener('update_' + chart_id + '_data' , event => {
+            var bar_chart = Chart.getChart(chart_id);
             bar_chart.destroy();
-            var ctx = document.getElementById('bar_chart').getContext('2d');
+            var ctx = document.getElementById(chart_id).getContext('2d');
             bar_chart = new Chart(ctx, bar_chart_config);
             var chart_data = JSON.parse(event.detail.chart_data);
             // chart.data.labels = chart_data.labels;

src/LineChart.php

@@ -12,13 +12,36 @@ class LineChart extends Component {
     public $title = 'title';
 
     public $chart_id = 'la-chart-line-chart';
+    public $chart_type = 'bar';
+
+    public $background_colors = [
+        'rgba(255, 99, 132, 0.2)',
+        'rgba(255, 159, 64, 0.2)',
+        'rgba(255, 205, 86, 0.2)',
+        'rgba(75, 192, 192, 0.2)',
+        'rgba(54, 162, 235, 0.2)',
+        'rgba(153, 102, 255, 0.2)',
+        'rgba(201, 203, 207, 0.2)'
+    ];
+
+    public $border_colors = [
+        'rgb(255, 99, 132)',
+        'rgb(255, 159, 64)',
+        'rgb(255, 205, 86)',
+        'rgb(75, 192, 192)',
+        'rgb(54, 162, 235)',
+        'rgb(153, 102, 255)',
+        'rgb(201, 203, 207)'
+    ];
+
+    public $border_width = 1.0;
 
     public function mount() {
 
 
     }
 
-    public function click() {
+    public function click($id) {
         dd($this);
     }