diff --git a/README.md b/README.md index 3e799b7..73c05c4 100644 --- a/README.md +++ b/README.md @@ -12,26 +12,22 @@ Google Charts for Laravel Livewire ## Installation -Add to composer.json +Run composer: ``` -"require": { - "helvetiapps/lagoon-charts": "^0.1" -}, -"repositories": [ - { - "url": "https://github.com/daredloco/lagoon-charts.git", - "type": "git" - } -] +composer require helvetiapps/lagoon-charts ``` ## Included Charts -* Line Charts -* Pie Charts + * Area Charts * Bar Charts +* Candlestick Charts +* Column Charts +* Line Charts +* Pie Charts +* Gantt Charts (Preview) ## TODO @@ -71,7 +67,23 @@ $data = $lineChartTable->toArray(); Blade ``` -@livewire('lagoon-line-chart', ['chartId' => 'uniqueID', 'chartData' => $data, 'height' => 300, 'width' => 400, 'title' => 'Title', 'options' => [], key('uniquekey'.now())) +@livewire('lagoon-line-chart', ['chartId' => 'uniqueID', 'chartData' => $data, 'height' => 300, 'width' => 400, 'title' => 'Title', 'options' => []], key('uniquekey'.now())) +``` + + +### Candlestick Chart + +Livewire +```php +$candlestickChartTable = new \HelvetiApps\LagoonCharts\DataTables\CandlestickChartTable(); +$candlestickChartTable->addRow([1, 100, 200]); +$candlestickChartTable->addRow([2, 200, 100]); +$data = $candlestickChartTable->toArray(); +``` + +Blade +``` +@livewire('lagoon-candlestick-chart', ['chartId' => 'uniqueID', 'chartData' => $data, 'height' => 300, 'width' => 400, 'title' => 'Title', 'options' => []], key('uniquekey'.now())) ``` @@ -87,9 +99,26 @@ $data = $barChartTable->toArray(); Blade ``` -@livewire('lagoon-bar-chart', ['chartId' => 'uniqueID', 'chartData' => $data, 'height' => 300, 'width' => 400, 'title' => 'Title', 'options' => [], key('uniquekey'.now())) +@livewire('lagoon-bar-chart', ['chartId' => 'uniqueID', 'chartData' => $data, 'height' => 300, 'width' => 400, 'title' => 'Title', 'options' => []], key('uniquekey'.now())) ``` + +### Column Chart + +Livewire +```php +$columnChartTable = new \HelvetiApps\LagoonCharts\DataTables\ColumnChartTable('xAxis', ['yAxis1', 'yAxis2']); +$columnChartTable->addRow([1, 100, 200]); +$columnChartTable->addRow([2, 200, 100]); +$data = $columnChartTable->toArray(); +``` + +Blade +``` +@livewire('lagoon-column-chart', ['chartId' => 'uniqueID', 'chartData' => $data, 'height' => 300, 'width' => 400, 'title' => 'Title', 'options' => []], key('uniquekey'.now())) +``` + + ### Area Chart Livewire @@ -102,5 +131,43 @@ $data = $areaChartTable->toArray(); Blade ``` -@livewire('lagoon-area-chart', ['chartId' => 'uniqueID', 'chartData' => $data, 'height' => 300, 'width' => 400, 'title' => 'Title', 'options' => [], key('uniquekey'.now())) +@livewire('lagoon-area-chart', ['chartId' => 'uniqueID', 'chartData' => $data, 'height' => 300, 'width' => 400, 'title' => 'Title', 'options' => []], key('uniquekey'.now())) +``` + +### Gantt Chart + +Livewire +```php +$ganttChartTable = new GanttChartTable(); + +$ganttChartTable->addTask("test1", "Test1", Carbon::now(), Carbon::now()->copy()->addMonth(), 30, 100, null); +$ganttChartTable->addTask("test2", "Test2", Carbon::now()->copy()->addMonth(), Carbon::now()->copy()->addMonths(2), 30, 100, "test1"); + +$data = $ganttChartTable->__toString(); //IMPORTANT USE __toString() here! +``` + +Blade +``` +@livewire('lagoon-gantt-chart', ['chartId' => 'uniqueID', 'chartData' => $data, 'height' => 300, 'width' => 400, 'options' => []], key('uniquekey'.now())) +``` + + +### Add options to the Charts + +You can add options with the 'options' => ['option1' => 'something'] variable. +You can add all options that are inside the respective Google Chart. + +Blade +``` +@livewire('lagoon-area-chart', ['chartId' => 'uniqueID', 'chartData' => $data, 'height' => 300, 'width' => 400, 'title' => 'Title', 'options' => ['backgroundColor' => 'black']], key('uniquekey'.now())) +``` + + +### Add link to Chart PNG + +You can add a link to a PNG from the chart by adding 'printable' => true, this does only work with corecharts! + +Blade +``` +@livewire('lagoon-area-chart', ['chartId' => 'uniqueID', 'chartData' => $data, 'height' => 300, 'width' => 400, 'title' => 'Title', 'options' => [], 'printable' => true], key('uniquekey'.now())) ``` \ No newline at end of file diff --git a/composer.json b/composer.json index 0049e5a..55e1e22 100644 --- a/composer.json +++ b/composer.json @@ -2,7 +2,7 @@ "name": "helvetiapps/lagoon-charts", "description": "Google Charts for Laravel Livewire", "type": "library", - "license": "proprietary", + "license": "GPL-3.0", "autoload": { "psr-4": { "Helvetiapps\\LagoonCharts\\": "src/" diff --git a/resources/views/livewire/area-chart.blade.php b/resources/views/livewire/area-chart.blade.php index 1d5d38d..a9348f0 100644 --- a/resources/views/livewire/area-chart.blade.php +++ b/resources/views/livewire/area-chart.blade.php @@ -26,8 +26,15 @@ function drawChart{{ $chartId }}() { var chart = new google.visualization.AreaChart(document.getElementById('{{ $chartId.$random }}')); chart.draw(data, options); + + @if($printable) + document.getElementById('lagoon-printable-{{ $chartId.$random }}').outerHTML = '
Print
'; + @endif }
+ @if($printable) +
+ @endif diff --git a/resources/views/livewire/bar-chart.blade.php b/resources/views/livewire/bar-chart.blade.php index 9931c4b..8b4dff7 100644 --- a/resources/views/livewire/bar-chart.blade.php +++ b/resources/views/livewire/bar-chart.blade.php @@ -26,8 +26,15 @@ function drawChart{{ $chartId }}() { var chart = new google.visualization.BarChart(document.getElementById('{{ $chartId.$random }}')); chart.draw(data, options); + + @if($printable) + document.getElementById('lagoon-printable-{{ $chartId.$random }}').outerHTML = '
Print
'; + @endif }
+ @if($printable) +
+ @endif diff --git a/resources/views/livewire/candlestick-chart.blade.php b/resources/views/livewire/candlestick-chart.blade.php new file mode 100644 index 0000000..b1b5615 --- /dev/null +++ b/resources/views/livewire/candlestick-chart.blade.php @@ -0,0 +1,40 @@ +
+ @once + @push('styles') + + @endpush + @push('headerScripts') + + + @endpush + @endonce + + + +
+ @if($printable) +
+ @endif +
diff --git a/resources/views/livewire/column-chart.blade.php b/resources/views/livewire/column-chart.blade.php new file mode 100644 index 0000000..693c97c --- /dev/null +++ b/resources/views/livewire/column-chart.blade.php @@ -0,0 +1,40 @@ +
+ @once + @push('styles') + + @endpush + @push('headerScripts') + + + @endpush + @endonce + + + +
+ @if($printable) +
+ @endif +
diff --git a/resources/views/livewire/gantt-chart.blade.php b/resources/views/livewire/gantt-chart.blade.php new file mode 100644 index 0000000..bb026b2 --- /dev/null +++ b/resources/views/livewire/gantt-chart.blade.php @@ -0,0 +1,45 @@ +
+ @once + @push('styles') + + @endpush + @push('headerScripts') + + + @endpush + @endonce + + + +
+
diff --git a/resources/views/livewire/line-chart.blade.php b/resources/views/livewire/line-chart.blade.php index d1c6f6a..d29cc7a 100644 --- a/resources/views/livewire/line-chart.blade.php +++ b/resources/views/livewire/line-chart.blade.php @@ -26,8 +26,15 @@ function drawChart{{ $chartId }}() { var chart = new google.visualization.LineChart(document.getElementById('{{ $chartId.$random }}')); chart.draw(data, options); + + @if($printable) + document.getElementById('lagoon-printable-{{ $chartId.$random }}').outerHTML = '
Print
'; + @endif }
+ @if($printable) +
+ @endif diff --git a/resources/views/livewire/pie-chart.blade.php b/resources/views/livewire/pie-chart.blade.php index f4de798..246b840 100644 --- a/resources/views/livewire/pie-chart.blade.php +++ b/resources/views/livewire/pie-chart.blade.php @@ -33,8 +33,15 @@ function drawChart{{ $chartId }}() { // Instantiate and draw our chart, passing in some options. var chart = new google.visualization.PieChart(document.getElementById('{{ $chartId.$random }}')); chart.draw(data, options); + + @if($printable) + document.getElementById('lagoon-printable-{{ $chartId.$random }}').outerHTML = '
Print
'; + @endif }
+ @if($printable) +
+ @endif diff --git a/src/DataTables/CandlestickChartTable.php b/src/DataTables/CandlestickChartTable.php new file mode 100644 index 0000000..ca7f88c --- /dev/null +++ b/src/DataTables/CandlestickChartTable.php @@ -0,0 +1,45 @@ +colCount = count($rows) < 1 ? 0 : count($rows[0]); + $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(array $row){ + if($this->colCount == 0){ + $this->colCount = count($row); + } + if(count($row) != $this->colCount){ + throw new Exception("Row has ".count($row)." columns but needs to have ".$this->colCount."!"); + } + array_push($this->data, $row); + } + + 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/DataTables/ColumnChartTable.php b/src/DataTables/ColumnChartTable.php new file mode 100644 index 0000000..795f126 --- /dev/null +++ b/src/DataTables/ColumnChartTable.php @@ -0,0 +1,45 @@ +colCount = count($yAxisLabels) + 1; + $rowCount = 0; + $labels = [$xAxisLabel]; + foreach($yAxisLabels as $label){ + array_push($labels, $label); + } + $this->data = [$labels]; + 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(array $row){ + if(count($row) != $this->colCount){ + throw new Exception("Row has ".count($row)." columns but needs to have ".$this->colCount."!"); + } + array_push($this->data, $row); + } + + 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/DataTables/GanttChartTable.php b/src/DataTables/GanttChartTable.php new file mode 100644 index 0000000..5a90f5a --- /dev/null +++ b/src/DataTables/GanttChartTable.php @@ -0,0 +1,45 @@ +data, [ + $id, + $name, + null, + "Date(".$start->year.','.($start->month - 1).','.$start->day.")", + "Date(".$end->year.','.($end->month - 1).','.$end->day.")", + $duration * 24 * 60 * 60 * 1000, + $completion, + $dependencies + ]); + } + + public function __toString() + { + $str = "["; + + $count = 0; + foreach($this->data as $item){ + if($count > 0){ + $str .= ","; + } + $count++; + $str .= "{c: [{v: '".$item[0]."'}, {v: '".$item[1]."'}, {v: '".$item[2]."'}, {v: '".$item[3]."'}, {v: '".$item[4]."'}, {v: '".$item[5]."'}, {v: '".$item[6]."'}, {v: '".$item[7]."'}]}"; + } + + $str .= "]"; + + return $str; + } + + public function toArray():array{ + return $this->data; + } + +} \ No newline at end of file diff --git a/src/Http/Livewire/AreaChart.php b/src/Http/Livewire/AreaChart.php index 49798cc..21035ff 100644 --- a/src/Http/Livewire/AreaChart.php +++ b/src/Http/Livewire/AreaChart.php @@ -23,6 +23,8 @@ class AreaChart extends Component public $optionsArray; + public $printable = false; + public function mount(){ $newOptions = [ 'title' => $this->title, diff --git a/src/Http/Livewire/BarChart.php b/src/Http/Livewire/BarChart.php index b75ee99..4a21df1 100644 --- a/src/Http/Livewire/BarChart.php +++ b/src/Http/Livewire/BarChart.php @@ -22,6 +22,8 @@ class BarChart extends Component public $random; public $optionsArray; + + public $printable = false; public function mount(){ $newOptions = [ diff --git a/src/Http/Livewire/CandlestickChart.php b/src/Http/Livewire/CandlestickChart.php new file mode 100644 index 0000000..330b949 --- /dev/null +++ b/src/Http/Livewire/CandlestickChart.php @@ -0,0 +1,50 @@ + $this->title, + ]; + + 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.line-chart'); + } +} diff --git a/src/Http/Livewire/ColumnChart.php b/src/Http/Livewire/ColumnChart.php new file mode 100644 index 0000000..c96ecc5 --- /dev/null +++ b/src/Http/Livewire/ColumnChart.php @@ -0,0 +1,53 @@ + $this->title, + ]; + + 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.column-chart'); + } +} \ No newline at end of file diff --git a/src/Http/Livewire/GanttChart.php b/src/Http/Livewire/GanttChart.php new file mode 100644 index 0000000..30a1de7 --- /dev/null +++ b/src/Http/Livewire/GanttChart.php @@ -0,0 +1,50 @@ + 'None' + ]; + + 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.gantt-chart'); + } +} diff --git a/src/Http/Livewire/LineChart.php b/src/Http/Livewire/LineChart.php index b53e49f..24c5c4f 100644 --- a/src/Http/Livewire/LineChart.php +++ b/src/Http/Livewire/LineChart.php @@ -19,6 +19,8 @@ class LineChart extends Component public $random; public $optionsArray; + + public $printable = false; public function mount(){ $newOptions = [ diff --git a/src/Http/Livewire/PieChart.php b/src/Http/Livewire/PieChart.php index 8b5457b..75572f3 100644 --- a/src/Http/Livewire/PieChart.php +++ b/src/Http/Livewire/PieChart.php @@ -22,6 +22,8 @@ class PieChart extends Component public $random; public $optionsArray; + + public $printable = false; public function mount(){ $newOptions = [ diff --git a/src/LagoonServiceProvider.php b/src/LagoonServiceProvider.php index 59ff923..ac3eded 100644 --- a/src/LagoonServiceProvider.php +++ b/src/LagoonServiceProvider.php @@ -6,6 +6,9 @@ use Helvetiapps\LagoonCharts\Http\Livewire\PieChart; use Helvetiapps\LagoonCharts\Http\Livewire\AreaChart; use Helvetiapps\LagoonCharts\Http\Livewire\BarChart; +use Helvetiapps\LagoonCharts\Http\Livewire\CandlestickChart; +use Helvetiapps\LagoonCharts\Http\Livewire\ColumnChart; +use Helvetiapps\LagoonCharts\Http\Livewire\GanttChart; use Illuminate\Support\ServiceProvider; use Livewire\Livewire; @@ -23,6 +26,9 @@ public function boot() Livewire::component('lagoon-pie-chart', PieChart::class); Livewire::component('lagoon-area-chart', AreaChart::class); Livewire::component('lagoon-bar-chart', BarChart::class); + Livewire::component('lagoon-gantt-chart', GanttChart::class); + Livewire::component('lagoon-gantt-chart', ColumnChart::class); + Livewire::component('lagoon-candlestick-chart', CandlestickChart::class); if ($this->app->runningInConsole()) {