refactored donuts

This commit is contained in:
denisdulici 2019-12-28 22:30:10 +03:00
parent 541c8f3f01
commit 20c9b5c524
4 changed files with 147 additions and 171 deletions

View File

@ -9,7 +9,7 @@ use Date;
class ExpensesByCategory extends AbstractWidget class ExpensesByCategory extends AbstractWidget
{ {
public $expense_donut = ['colors' => [], 'labels' => [], 'values' => []]; public $donut = ['colors' => [], 'labels' => [], 'values' => []];
/** /**
* The configuration array. * The configuration array.
@ -17,7 +17,7 @@ class ExpensesByCategory extends AbstractWidget
* @var array * @var array
*/ */
protected $config = [ protected $config = [
'width' => 'col-md-6' 'width' => 'col-md-6',
]; ];
/** /**
@ -50,96 +50,39 @@ class ExpensesByCategory extends AbstractWidget
$overdue_bill += $overdue; $overdue_bill += $overdue;
} }
$this->addToExpenseDonut($category->color, $amount, $category->name); $this->addToDonut($category->color, $amount, $category->name);
} }
// Show donut prorated if there is no expense // Show donut prorated if there is no expense
if (array_sum($this->expense_donut['values']) == 0) { if (array_sum($this->donut['values']) == 0) {
foreach ($this->expense_donut['values'] as $key => $value) { foreach ($this->donut['values'] as $key => $value) {
$this->expense_donut['values'][$key] = 1; $this->donut['values'][$key] = 1;
} }
} }
// Get 6 categories by amount // Get 6 categories by amount
$colors = $labels = []; $colors = $labels = [];
$values = collect($this->expense_donut['values'])->sort()->reverse()->take(6)->all(); $values = collect($this->donut['values'])->sort()->reverse()->take(6)->all();
foreach ($values as $id => $val) { foreach ($values as $id => $val) {
$colors[$id] = $this->expense_donut['colors'][$id]; $colors[$id] = $this->donut['colors'][$id];
$labels[$id] = $this->expense_donut['labels'][$id]; $labels[$id] = $this->donut['labels'][$id];
} }
$options = [ $chart = new Chartjs();
'color' => $colors,
'cutoutPercentage' => 80, $chart->type('doughnut')
'legend' => [
'position' => 'right'
],
'tooltips' => [
'backgroundColor' => '#f5f5f5',
'titleFontColor' => '#333',
'bodyFontColor' => '#666',
'bodySpacing' => 4,
'xPadding' => 12,
'mode' => 'nearest',
'intersect' => 0,
'position' => 'nearest'
],
'scales' => [
'yAxes' => [
[
'display' => 0,
'ticks' => [
'display' => false
],
'gridLines' => [
'drawBorder' => false,
'zeroLineColor' => 'transparent',
'color' => 'rgba(255,255,255,0.05)'
]
]
],
'xAxes' => [
[
'display' => 0,
'barPercentage' => 1.6,
'gridLines' => [
'drawBorder' => false,
'color' => 'rgba(255,255,255,0.1)',
'zeroLineColor' => 'transparent'
],
'ticks' => [
'display' => false
]
]
]
]
];
$donut_expenses = new Chartjs();
$donut_expenses->type('doughnut')
->width(0) ->width(0)
->height(160) ->height(160)
->options($options) ->options($this->getChartOptions($colors))
->labels(array_values($labels)); ->labels(array_values($labels));
$donut_expenses->dataset(trans_choice('general.expenses', 2), 'doughnut', array_values($values)) $chart->dataset(trans_choice('general.expenses', 2), 'doughnut', array_values($values))
->backgroundColor(array_values($colors)); ->backgroundColor(array_values($colors));
return view('widgets.expenses_by_category', [ return view('widgets.expenses_by_category', [
'config' => (object) $this->config, 'config' => (object) $this->config,
'donut_expenses' => $donut_expenses, 'chart' => $chart,
]); ]);
} }
@ -170,23 +113,23 @@ class ExpensesByCategory extends AbstractWidget
$overdue_bill += $overdue; $overdue_bill += $overdue;
} }
$this->addToExpenseDonut($category->color, $amount, $category->name); $this->addToDonut($category->color, $amount, $category->name);
} }
// Show donut prorated if there is no expense // Show donut prorated if there is no expense
if (array_sum($this->expense_donut['values']) == 0) { if (array_sum($this->donut['values']) == 0) {
foreach ($this->expense_donut['values'] as $key => $value) { foreach ($this->donut['values'] as $key => $value) {
$this->expense_donut['values'][$key] = 1; $this->donut['values'][$key] = 1;
} }
} }
// Get 6 categories by amount // Get 6 categories by amount
$colors = $labels = []; $colors = $labels = [];
$values = collect($this->expense_donut['values'])->sort()->reverse()->take(6)->all(); $values = collect($this->donut['values'])->sort()->reverse()->take(6)->all();
foreach ($values as $id => $val) { foreach ($values as $id => $val) {
$colors[$id] = $this->expense_donut['colors'][$id]; $colors[$id] = $this->donut['colors'][$id];
$labels[$id] = $this->expense_donut['labels'][$id]; $labels[$id] = $this->donut['labels'][$id];
} }
return [ return [
@ -224,10 +167,56 @@ class ExpensesByCategory extends AbstractWidget
return [$open, $overdue]; return [$open, $overdue];
} }
private function addToExpenseDonut($color, $amount, $text) private function addToDonut($color, $amount, $text)
{ {
$this->expense_donut['colors'][] = $color; $this->donut['colors'][] = $color;
$this->expense_donut['labels'][] = money($amount, setting('default.currency'), true)->format() . ' - ' . $text; $this->donut['labels'][] = money($amount, setting('default.currency'), true)->format() . ' - ' . $text;
$this->expense_donut['values'][] = (int) $amount; $this->donut['values'][] = (int) $amount;
}
private function getChartOptions($colors)
{
return [
'color' => array_values($colors),
'cutoutPercentage' => 80,
'legend' => [
'position' => 'right',
],
'tooltips' => [
'backgroundColor' => '#f5f5f5',
'titleFontColor' => '#333',
'bodyFontColor' => '#666',
'bodySpacing' => 4,
'xPadding' => 12,
'mode' => 'nearest',
'intersect' => 0,
'position' => 'nearest',
],
'scales' => [
'yAxes' => [
'display' => 0,
'ticks' => [
'display' => false,
],
'gridLines' => [
'drawBorder' => false,
'zeroLineColor' => 'transparent',
'color' => 'rgba(255,255,255,0.05)',
],
],
'xAxes' => [
'display' => 0,
'barPercentage' => 1.6,
'ticks' => [
'display' => false,
],
'gridLines' => [
'drawBorder' => false,
'color' => 'rgba(255,255,255,0.1)',
'zeroLineColor' => 'transparent',
],
],
],
];
} }
} }

View File

@ -9,7 +9,7 @@ use Date;
class IncomesByCategory extends AbstractWidget class IncomesByCategory extends AbstractWidget
{ {
public $income_donut = ['colors' => [], 'labels' => [], 'values' => []]; public $donut = ['colors' => [], 'labels' => [], 'values' => []];
/** /**
* The configuration array. * The configuration array.
@ -17,7 +17,7 @@ class IncomesByCategory extends AbstractWidget
* @var array * @var array
*/ */
protected $config = [ protected $config = [
'width' => 'col-md-6' 'width' => 'col-md-6',
]; ];
/** /**
@ -26,7 +26,6 @@ class IncomesByCategory extends AbstractWidget
*/ */
public function run() public function run()
{ {
//
$incomes_amount = $open_invoice = $overdue_invoice = 0; $incomes_amount = $open_invoice = $overdue_invoice = 0;
// Get categories // Get categories
@ -51,97 +50,39 @@ class IncomesByCategory extends AbstractWidget
$overdue_invoice += $overdue; $overdue_invoice += $overdue;
} }
$this->addToIncomeDonut($category->color, $amount, $category->name); $this->addToDonut($category->color, $amount, $category->name);
} }
// Show donut prorated if there is no income // Show donut prorated if there is no income
if (array_sum($this->income_donut['values']) == 0) { if (array_sum($this->donut['values']) == 0) {
foreach ($this->income_donut['values'] as $key => $value) { foreach ($this->donut['values'] as $key => $value) {
$this->income_donut['values'][$key] = 1; $this->donut['values'][$key] = 1;
} }
} }
// Get 6 categories by amount // Get 6 categories by amount
$colors = $labels = []; $colors = $labels = [];
$values = collect($this->income_donut['values'])->sort()->reverse()->take(6)->all(); $values = collect($this->donut['values'])->sort()->reverse()->take(6)->all();
foreach ($values as $id => $val) { foreach ($values as $id => $val) {
$colors[$id] = $this->income_donut['colors'][$id]; $colors[$id] = $this->donut['colors'][$id];
$labels[$id] = $this->income_donut['labels'][$id]; $labels[$id] = $this->donut['labels'][$id];
} }
$options = [ $chart = new Chartjs();
'backgroudColor' => array_values($colors),
'cutoutPercentage' => 80, $chart->type('doughnut')
'legend' => [
'position' => 'right'
],
'tooltips' => [
'backgroundColor' => '#f5f5f5',
'titleFontColor' => '#333',
'bodyFontColor' => '#666',
'bodySpacing' => 4,
'xPadding' => 12,
'mode' => 'nearest',
'intersect' => 0,
'position' => 'nearest'
],
'scales' => [
'yAxes' => [
[
'display' => 0,
'ticks' => [
'display' => false
],
'gridLines' => [
'drawBorder' => false,
'zeroLineColor' => 'transparent',
'color' => 'rgba(255,255,255,0.05)'
]
]
],
'xAxes' => [
[
'display' => 0,
'barPercentage' => 1.6,
'gridLines' => [
'drawBorder' => false,
'color' => 'rgba(255,255,255,0.1)',
'zeroLineColor' => 'transparent'
],
'ticks' => [
'display' => false
]
]
]
]
];
$donut_incomes = new Chartjs();
$donut_incomes->type('doughnut')
->width(0) ->width(0)
->height(160) ->height(160)
->options($options) ->options($this->getChartOptions($colors))
->labels(array_values($labels)); ->labels(array_values($labels));
$donut_incomes->dataset(trans_choice('general.incomes', 2), 'doughnut', array_values($values)) $chart->dataset(trans_choice('general.incomes', 2), 'doughnut', array_values($values))
->backgroundColor(array_values($colors)); ->backgroundColor(array_values($colors));
return view('widgets.incomes_by_category', [ return view('widgets.incomes_by_category', [
'config' => (object) $this->config, 'config' => (object) $this->config,
'donut_incomes' => $donut_incomes, 'chart' => $chart,
]); ]);
} }
@ -172,23 +113,23 @@ class IncomesByCategory extends AbstractWidget
$overdue_invoice += $overdue; $overdue_invoice += $overdue;
} }
$this->addToIncomeDonut($category->color, $amount, $category->name); $this->addToDonut($category->color, $amount, $category->name);
} }
// Show donut prorated if there is no income // Show donut prorated if there is no income
if (array_sum($this->income_donut['values']) == 0) { if (array_sum($this->donut['values']) == 0) {
foreach ($this->income_donut['values'] as $key => $value) { foreach ($this->donut['values'] as $key => $value) {
$this->income_donut['values'][$key] = 1; $this->donut['values'][$key] = 1;
} }
} }
// Get 6 categories by amount // Get 6 categories by amount
$colors = $labels = []; $colors = $labels = [];
$values = collect($this->income_donut['values'])->sort()->reverse()->take(6)->all(); $values = collect($this->donut['values'])->sort()->reverse()->take(6)->all();
foreach ($values as $id => $val) { foreach ($values as $id => $val) {
$colors[$id] = $this->income_donut['colors'][$id]; $colors[$id] = $this->donut['colors'][$id];
$labels[$id] = $this->income_donut['labels'][$id]; $labels[$id] = $this->donut['labels'][$id];
} }
return [ return [
@ -226,10 +167,56 @@ class IncomesByCategory extends AbstractWidget
return [$open, $overdue]; return [$open, $overdue];
} }
private function addToIncomeDonut($color, $amount, $text) private function addToDonut($color, $amount, $text)
{ {
$this->income_donut['colors'][] = $color; $this->donut['colors'][] = $color;
$this->income_donut['labels'][] = money($amount, setting('default.currency'), true)->format() . ' - ' . $text; $this->donut['labels'][] = money($amount, setting('default.currency'), true)->format() . ' - ' . $text;
$this->income_donut['values'][] = (int) $amount; $this->donut['values'][] = (int) $amount;
}
private function getChartOptions($colors)
{
return [
'backgroudColor' => array_values($colors),
'cutoutPercentage' => 80,
'legend' => [
'position' => 'right',
],
'tooltips' => [
'backgroundColor' => '#f5f5f5',
'titleFontColor' => '#333',
'bodyFontColor' => '#666',
'bodySpacing' => 4,
'xPadding' => 12,
'mode' => 'nearest',
'intersect' => 0,
'position' => 'nearest',
],
'scales' => [
'yAxes' => [
'display' => 0,
'ticks' => [
'display' => false,
],
'gridLines' => [
'drawBorder' => false,
'zeroLineColor' => 'transparent',
'color' => 'rgba(255,255,255,0.05)',
],
],
'xAxes' => [
'display' => 0,
'barPercentage' => 1.6,
'ticks' => [
'display' => false,
],
'gridLines' => [
'drawBorder' => false,
'color' => 'rgba(255,255,255,0.1)',
'zeroLineColor' => 'transparent',
],
],
],
];
} }
} }

View File

@ -33,7 +33,7 @@
<div class="card-body" id="expense-category-doughnut"> <div class="card-body" id="expense-category-doughnut">
<div class="dashboard-categories"> <div class="dashboard-categories">
{!! $donut_expenses->container() !!} {!! $chart->container() !!}
</div> </div>
</div> </div>
</div> </div>
@ -48,5 +48,5 @@
@endpush @endpush
@push('body_scripts') @push('body_scripts')
{!! $donut_expenses->script() !!} {!! $chart->script() !!}
@endpush @endpush

View File

@ -33,7 +33,7 @@
<div class="card-body" id="income-category-doughnut"> <div class="card-body" id="income-category-doughnut">
<div class="dashboard-categories"> <div class="dashboard-categories">
{!! $donut_incomes->container() !!} {!! $chart->container() !!}
</div> </div>
</div> </div>
</div> </div>
@ -48,5 +48,5 @@
@endpush @endpush
@push('body_scripts') @push('body_scripts')
{!! $donut_incomes->script() !!} {!! $chart->script() !!}
@endpush @endpush