From bac8c6af6387cd175d74c3c647afad7bafed402e Mon Sep 17 00:00:00 2001
From: Hillel Coren <hillelcoren@gmail.com>
Date: Tue, 27 Feb 2018 09:43:58 +0200
Subject: [PATCH] Adding charts to reports

---
 app/Ninja/Reports/AbstractReport.php          |   2 +-
 .../views/reports/chart_builder.blade.php     | 116 ++++++++----------
 2 files changed, 50 insertions(+), 68 deletions(-)

diff --git a/app/Ninja/Reports/AbstractReport.php b/app/Ninja/Reports/AbstractReport.php
index 59a306e09c19..eeed226ff107 100644
--- a/app/Ninja/Reports/AbstractReport.php
+++ b/app/Ninja/Reports/AbstractReport.php
@@ -184,7 +184,7 @@ class AbstractReport
         return $date->format('Y' . $dateFormat);
     }
 
-    public function getChartData()
+    public function getLineChartData()
     {
         $startDate = date_create($this->startDate);
         $endDate = date_create($this->endDate);
diff --git a/resources/views/reports/chart_builder.blade.php b/resources/views/reports/chart_builder.blade.php
index 4d0c0c34a8ca..c4c4bc926426 100644
--- a/resources/views/reports/chart_builder.blade.php
+++ b/resources/views/reports/chart_builder.blade.php
@@ -1,85 +1,67 @@
 <script type="text/javascript">
 
-function loadChart(data) {
-    var ctx = document.getElementById('chart-canvas').getContext('2d');
-    if (window.myChart) {
-        window.myChart.config.data = data;
-        window.myChart.config.options.scales.xAxes[0].time.unit = chartGroupBy.toLowerCase();
-        window.myChart.config.options.scales.xAxes[0].time.round = chartGroupBy.toLowerCase();
-        window.myChart.update();
-    } else {
-        $('#progress-div').hide();
-        $('#chart-canvas').fadeIn();
-        window.myChart = new Chart(ctx, {
-            type: 'line',
-            data: data,
-            options: {
-                tooltips: {
-                    mode: 'x-axis',
-                    titleFontSize: 15,
-                    titleMarginBottom: 12,
-                    bodyFontSize: 15,
-                    bodySpacing: 10,
-                    callbacks: {
-                        title: function(item) {
-                            return moment(item[0].xLabel).format("{{ $account->getMomentDateFormat() }}");
-                        },
-                        label: function(item, data) {
-                            //return label + formatMoney(item.yLabel, chartCurrencyId, account.country_id);
-
-                            /*
-                            console.log('tooltip:');
-                            console.log(item);
-                            console.log(data);
-                            */
-                            return item.yLabel;
-                        }
+function loadLineChart(data) {
+    var ctx = document.getElementById('lineChartCanvas').getContext('2d');
+    window.myChart = new Chart(ctx, {
+        type: 'line',
+        data: data,
+        options: {
+            tooltips: {
+                mode: 'x-axis',
+                titleFontSize: 15,
+                titleMarginBottom: 12,
+                bodyFontSize: 15,
+                bodySpacing: 10,
+                callbacks: {
+                    title: function(item) {
+                        return moment(item[0].xLabel).format("{{ $account->getMomentDateFormat() }}");
+                    },
+                    label: function(item, data) {
+                        //return label + formatMoney(item.yLabel, chartCurrencyId, account.country_id);
+                        /*
+                        console.log('tooltip:');
+                        console.log(item);
+                        console.log(data);
+                        */
+                        return item.yLabel;
                     }
-                },
-                title: {
-                    display: false,
-                    fontSize: 18,
-                    text: '{{ trans('texts.total_revenue') }}'
-                },
-                scales: {
-                    xAxes: [{
-                        type: 'time',
-                        time: {
-                            unit: chartGroupBy,
-                            round: chartGroupBy,
-                        },
-                        gridLines: {
-                            display: false,
-                        },
-                    }],
-                    yAxes: [{
-                        ticks: {
-                            beginAtZero: true,
-                            callback: function(label, index, labels) {
-                                return roundSignificant(label);
-                            }
-                        },
-                    }]
                 }
+            },
+            scales: {
+                xAxes: [{
+                    type: 'time',
+                    time: {
+                        unit: "{{ $report->chartGroupBy() }}",
+                        round: "{{ $report->chartGroupBy() }}",
+                    },
+                    gridLines: {
+                        display: false,
+                    },
+                }],
+                yAxes: [{
+                    ticks: {
+                        beginAtZero: true,
+                        callback: function(label, index, labels) {
+                            return roundSignificant(label);
+                        }
+                    },
+                }]
             }
-        });
-    }
+        }
+    });
 }
 
-var account = {!! $account !!};
-var chartGroupBy = "{{ $report->chartGroupBy() }}";
-
 $(function() {
-    var chartData = {!! json_encode($report->getChartData()) !!};
+    var lineChartData = {!! json_encode($report->getLineChartData()) !!};
     //console.log(chartData);
-    loadChart(chartData);
+    loadLineChart(lineChartData);
 });
 
 </script>
 
 <div class="row">
     <div class="col-md-12">
-        <canvas id="chart-canvas" style="background-color:white; padding:20px; width:100%; height: 250px;"></canvas>
+        <canvas id="lineChartCanvas" style="background-color:white; padding:20px; width:100%; height: 250px;"></canvas>
     </div>
 </div>