From 649a6fd506dd1fc963d13ad5e790c92c6afe8c40 Mon Sep 17 00:00:00 2001
From: Roman Wanner <60240491+daredloco@users.noreply.github.com>
Date: Wed, 7 Dec 2022 09:34:23 -0300
Subject: [PATCH] Added Waterfall Charts

---
 .../views/livewire/waterfall-chart.blade.php  | 40 ++++++++++++
 src/DataTables/WaterfallChartTable.php        | 38 +++++++++++
 src/Http/Livewire/WaterfallChart.php          | 63 +++++++++++++++++++
 3 files changed, 141 insertions(+)
 create mode 100644 resources/views/livewire/waterfall-chart.blade.php
 create mode 100644 src/DataTables/WaterfallChartTable.php
 create mode 100644 src/Http/Livewire/WaterfallChart.php

diff --git a/resources/views/livewire/waterfall-chart.blade.php b/resources/views/livewire/waterfall-chart.blade.php
new file mode 100644
index 0000000..da3d9f9
--- /dev/null
+++ b/resources/views/livewire/waterfall-chart.blade.php
@@ -0,0 +1,40 @@
+<div>
+    @once
+        @push('styles')
+            <style>
+                svg > g > g.google-visualization-tooltip { pointer-events: none }
+            </style>
+        @endpush
+        @push('headerScripts')
+            <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
+            <script type="text/javascript">
+              google.charts.load('current', {'packages':['corechart'], 'language': '{{ config("lagoon.language") }}'});
+            </script>
+        @endpush
+    @endonce
+
+    <script type="text/javascript">
+        google.charts.setOnLoadCallback(drawChart{{ $chartId }});
+
+        function drawChart{{ $chartId }}() {
+          var data = google.visualization.arrayToDataTable(
+            @json($chartData)
+          , true);
+
+          var options = @json($optionsArray);
+
+          var chart = new google.visualization.CandlestickChart(document.getElementById('{{ $chartId.$random }}'));
+
+          chart.draw(data, options);
+
+          @if($printable)
+            document.getElementById('lagoon-printable-{{ $chartId.$random }}').outerHTML = '<div style="display: flex; justify-content: center;"><a href="' + chart.getImageURI() + '">Print</a></div>';
+          @endif
+        }
+    </script>
+
+    <div id="{{ $chartId.$random }}" style="height: 100%; width: 100%;"></div>
+    @if($printable)
+      <div id="lagoon-printable-{{ $chartId.$random }}"></div>
+    @endif
+</div>
diff --git a/src/DataTables/WaterfallChartTable.php b/src/DataTables/WaterfallChartTable.php
new file mode 100644
index 0000000..536b6a1
--- /dev/null
+++ b/src/DataTables/WaterfallChartTable.php
@@ -0,0 +1,38 @@
+<?php
+
+namespace Helvetiapps\LagoonCharts\DataTables;
+
+use Exception;
+
+class WaterfallChartTable{
+
+    private $data = [];
+    private $colCount = 5;
+
+    public function __construct(array $rows = [])
+    {
+        $rowCount = 0;
+
+        $this->data = [];
+        foreach($rows as $row){
+            $rowCount++;
+            if(count($row) != $this->colCount){
+                throw new Exception("Row ".$rowCount." has ".count($row)." columns but needs to have ".$this->colCount."!");
+            }
+            array_push($this->data, $row);
+        }
+    }
+
+    public function addRow(string $label, $min, $max){
+        array_push($this->data, [$label, $min, $min, $max, $max]);
+    }
+
+    public function __toString()
+    {
+        return json_encode($this->data);
+    }
+
+    public function toArray():array{
+        return $this->data;
+    }
+}
\ No newline at end of file
diff --git a/src/Http/Livewire/WaterfallChart.php b/src/Http/Livewire/WaterfallChart.php
new file mode 100644
index 0000000..b557686
--- /dev/null
+++ b/src/Http/Livewire/WaterfallChart.php
@@ -0,0 +1,63 @@
+<?php
+
+namespace Helvetiapps\LagoonCharts\Http\Livewire;
+
+use Carbon\Carbon;
+use Livewire\Component;
+
+class CandlestickChart extends Component
+{
+    public $title = "NO_TITLE";
+    public $chartData = [];
+
+    public $height;
+    public $width;
+    
+    public $options; 
+
+    public $chartId;
+    public $random;
+
+    public $optionsArray;
+    
+    public $printable = false;
+
+    public function mount(){
+        $newOptions = [
+            'title' => $this->title,
+            'bar' => [
+                'groupWidth' => "100%"
+            ],
+            'candlestick' => [
+                'fallingColor' => [
+                    'strokeWidth' => 0,
+                    'fill' => ''
+                ],
+                'risingColor' => [
+                    'strokeWidth' => 0,
+                    'fill' => ''
+                ]
+            ]
+        ];
+
+        if(!is_null($this->height)){
+            $newOptions["height"] = $this->height;
+        }
+        if(!is_null($this->width)){
+            $newOptions["width"] = $this->width;
+        }
+        if(!is_null($this->options) && is_array($this->options)){
+            foreach($this->options as $key => $value){
+                $newOptions[$key] = $value;
+            }
+        }
+
+        $this->optionsArray = $newOptions;
+    }
+
+    public function render()
+    {
+        $this->random = Carbon::now()->timestamp;
+        return view('lagoon::livewire.waterfall-chart');
+    }
+}