Blade Directive - #3

Author: bbsnly

docs/readme.md

@@ -106,6 +106,14 @@ $chart->options($options);
 
 $chart->toJson();
 ```
+
+### Blade
+It is also possible to use the Blade Directive and generate the chart canvas
+```blade
+@chartjs('element_id', $chart)
+```
+
+
 ### Config class
 To configure your chart you can use the `Config` class directly or helpers
 like `Dataset` or `Options`.

src/Chart.php

@@ -118,4 +118,27 @@ public function beginAtZero()
 
         return $this;
     }
+
+    /**
+     * @param string $element
+     * @param Chart|null $chart
+     * @param string $height
+     * @param string $width
+     *
+     * @return string
+     */
+    public function toHtml(string $element, Chart $chart = null)
+    {
+        if ($chart === null) {
+            $chart = $this;
+        }
+
+        return '<canvas id="' . $element . '"></canvas>
+        <script>
+            new Chart(
+                document.getElementById("' . $element . '").getContext("2d"),
+                ' . $chart->toJson() . '
+            );
+        </script>';
+    }
 }

src/ChartServiceProvider.php

@@ -2,6 +2,7 @@
 
 namespace Bbsnly\ChartJs;
 
+use Illuminate\Support\Facades\Blade;
 use Illuminate\Support\ServiceProvider;
 
 class ChartServiceProvider extends ServiceProvider
@@ -13,7 +14,9 @@ class ChartServiceProvider extends ServiceProvider
      */
     public function boot()
     {
-        //
+        Blade::directive('chartjs', function ($expression) {
+            return "<?php echo app(\Bbsnly\ChartJs\Chart::class)->toHtml($expression); ?>";
+        });
     }
 
     /**