Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
  • Loading branch information
daredloco committed Dec 7, 2022
2 parents cecf5ee + 60a8690 commit ff50df1
Show file tree
Hide file tree
Showing 19 changed files with 493 additions and 16 deletions.
97 changes: 82 additions & 15 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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()))
```


Expand All @@ -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
Expand All @@ -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()))
```
2 changes: 1 addition & 1 deletion composer.json
Original file line number Diff line number Diff line change
Expand Up @@ -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/"
Expand Down
7 changes: 7 additions & 0 deletions resources/views/livewire/area-chart.blade.php
Original file line number Diff line number Diff line change
Expand Up @@ -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 = '<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>
7 changes: 7 additions & 0 deletions resources/views/livewire/bar-chart.blade.php
Original file line number Diff line number Diff line change
Expand Up @@ -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 = '<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>
40 changes: 40 additions & 0 deletions resources/views/livewire/candlestick-chart.blade.php
Original file line number Diff line number Diff line change
@@ -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)
);
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>
40 changes: 40 additions & 0 deletions resources/views/livewire/column-chart.blade.php
Original file line number Diff line number Diff line change
@@ -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)
);
var options = @json($optionsArray);
var chart = new google.visualization.ColumnChart(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>
45 changes: 45 additions & 0 deletions resources/views/livewire/gantt-chart.blade.php
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
<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':['gantt'], 'language': '{{ config("lagoon.language") }}'});
</script>
@endpush
@endonce

<script type="text/javascript">
google.charts.setOnLoadCallback(drawChart{{ $chartId }});
function drawChart{{ $chartId }}() {
var data = new google.visualization.DataTable(
{
cols:
[
{id: 'id', label: 'Task ID', type: 'string'},
{id: 'name', label: 'Task Name', type: 'string'},
{id: 'resource', label: 'Resource', type: 'string'},
{id: 'start', label: 'Start Date', type: 'date'},
{id: 'end', label: 'End Date', type: 'date'},
{id: 'duration', label: 'Duration', type: 'number'},
{id: 'percent', label: 'Percent Complete', type: 'number'},
{id: 'dependencies', label: 'Dependencies', type: 'string'}
],
rows: {!! $chartData !!}
}
);
var options = @json($optionsArray);
var chart = new google.visualization.Gantt(document.getElementById('{{ $chartId.$random }}'));
chart.draw(data, options);
}
</script>

<div id="{{ $chartId.$random }}" style="height: 100%; width: 100%;"></div>
</div>
7 changes: 7 additions & 0 deletions resources/views/livewire/line-chart.blade.php
Original file line number Diff line number Diff line change
Expand Up @@ -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 = '<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>
7 changes: 7 additions & 0 deletions resources/views/livewire/pie-chart.blade.php
Original file line number Diff line number Diff line change
Expand Up @@ -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 = '<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>
45 changes: 45 additions & 0 deletions src/DataTables/ColumnChartTable.php
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
<?php

namespace Helvetiapps\LagoonCharts\DataTables;

use Exception;

class ColumnChartTable{

private $data = [];
private $colCount;

public function __construct(string $xAxisLabel, array $yAxisLabels, array $rows = [])
{
$this->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;
}
}
Loading

0 comments on commit ff50df1

Please sign in to comment.