From 85b3c4683b37c0b42922e97a82a9b0e417ffa6d5 Mon Sep 17 00:00:00 2001
From: James Cole <thegrumpydictator@gmail.com>
Date: Sat, 12 Nov 2016 12:23:55 +0100
Subject: [PATCH] Fix redraw bug in category report.

---
 public/js/ff/charts.js                      |  4 ++-
 resources/lang/en_US/firefly.php            |  7 ++++
 resources/views/reports/category/month.twig | 37 +++++++++++----------
 3 files changed, 29 insertions(+), 19 deletions(-)

diff --git a/public/js/ff/charts.js b/public/js/ff/charts.js
index 07ea8ca68c..6478a8bf5e 100644
--- a/public/js/ff/charts.js
+++ b/public/js/ff/charts.js
@@ -91,7 +91,9 @@ var defaultPieOptions = {
                 return data.labels[tooltipItem.index] + ': ' + accounting.formatMoney(value);
             }
         }
-    }
+    },
+    maintainAspectRatio: true,
+    responsive: true
 };
 
 
diff --git a/resources/lang/en_US/firefly.php b/resources/lang/en_US/firefly.php
index 2cc9fae536..058a239131 100644
--- a/resources/lang/en_US/firefly.php
+++ b/resources/lang/en_US/firefly.php
@@ -624,6 +624,7 @@ return [
     // reports:
     'report_default'                             => 'Default financial report for :start until :end',
     'report_audit'                               => 'Transaction history overview for :start until :end',
+    'report_category'                            => 'Category report for :start until :end',
     'quick_link_reports'                         => 'Quick links',
     'quick_link_default_report'                  => 'Default financial report',
     'quick_link_audit_report'                    => 'Transaction history overview',
@@ -689,6 +690,12 @@ return [
     'reports_submit'                             => 'View report',
     'end_after_start_date'                       => 'End date of report must be after start date.',
     'select_category'                            => 'Select one or more categories.',
+    'income_per_category'                        => 'Income per category',
+    'expense_per_category'                       => 'Expense per category',
+    'income_per_account'                         => 'Income per account',
+    'expense_per_account'                        => 'Expense per account',
+    'include_not_in_category'                    => 'Include transactions not selected for this report',
+    'everything_else'                            => 'Everything else',
 
     // charts:
     'chart'                                      => 'Chart',
diff --git a/resources/views/reports/category/month.twig b/resources/views/reports/category/month.twig
index 9308f9f440..4a7ca59700 100644
--- a/resources/views/reports/category/month.twig
+++ b/resources/views/reports/category/month.twig
@@ -7,7 +7,7 @@
 {% block content %}
 
     <div class="row">
-        <div class="col-lg-4">
+        <div class="col-lg-4 col-md-6">
             <div class="box">
                 <div class="box-header with-border">
                     <h3 class="box-title">{{ 'accounts'|_ }}</h3>
@@ -89,66 +89,67 @@
             </div>
         </div>
         {% if categories.count > 1 %}
-        <div class="col-lg-2">
+        <div class="col-lg-2 col-md-3">
             <div class="box">
                 <div class="box-header with-border">
                     <h3 class="box-title">{{ 'income_per_category'|_ }}</h3>
                 </div>
                 <div class="box-body">
-                    <canvas id="categories-in-pie-chart" style="width:100px;height:100px;" height="100"></canvas>
-                    <label>
-                        <input type="checkbox" id="categories-in-pie-chart-checked"> Include transactions not in these categories
+                    <canvas id="categories-in-pie-chart" style="margin:0 auto;" height="150" width="150"></canvas>
+                    <label style="font-weight:normal;">
+                        <input type="checkbox" id="categories-in-pie-chart-checked"> <small>{{ 'include_not_in_category'|_ }}</small>
                     </label>
                 </div>
             </div>
         </div>
-        <div class="col-lg-2">
+        <div class="col-lg-2 col-md-3">
             <div class="box">
                 <div class="box-header with-border">
                     <h3 class="box-title">{{ 'expense_per_category'|_ }}</h3>
                 </div>
                 <div class="box-body">
-                    <canvas id="categories-out-pie-chart" style="width:100px;height:100px;" height="100"></canvas>
-                    <label>
-                        <input type="checkbox" id="categories-out-pie-chart-checked"> Include transactions not in these categories
+                    <canvas id="categories-out-pie-chart" style="margin:0 auto;" height="150" width="150"></canvas>
+                    <label style="font-weight:normal;">
+                        <input type="checkbox" id="categories-out-pie-chart-checked"> <small>{{ 'include_not_in_category'|_ }}</small>
                     </label>
                 </div>
             </div>
         </div>
         {% endif %}
         {% if accounts.count > 1 %}
-        <div class="col-lg-2">
+        <div class="col-lg-2 col-md-3">
             <div class="box">
                 <div class="box-header with-border">
                     <h3 class="box-title">{{ 'income_per_account'|_ }}</h3>
                 </div>
                 <div class="box-body">
-                    <canvas id="accounts-in-pie-chart" style="width:100px;height:100px;" height="100"></canvas>
-                    <label>
-                        <input type="checkbox" id="accounts-in-pie-chart-checked"> Include transactions not in these categories
+                    <canvas id="accounts-in-pie-chart" style="margin:0 auto;" height="150" width="150"></canvas>
+                    <label style="font-weight:normal;">
+                        <input type="checkbox" id="accounts-in-pie-chart-checked"> <small>{{ 'include_not_in_category'|_ }}</small>
                     </label>
                 </div>
             </div>
         </div>
-        <div class="col-lg-2">
+        <div class="col-lg-2 col-md-3">
             <div class="box">
                 <div class="box-header with-border">
                     <h3 class="box-title">{{ 'expense_per_account'|_ }}</h3>
                 </div>
                 <div class="box-body">
-                    <canvas id="accounts-out-pie-chart" style="width:100px;height:100px;" height="100"></canvas>
-                    <label>
-                        <input type="checkbox" id="accounts-out-pie-chart-checked"> Include transactions not in these categories
+                    <canvas id="accounts-out-pie-chart" style="margin:0 auto;" height="150" width="150"></canvas>
+                    <label style="font-weight:normal;">
+                        <input type="checkbox" id="accounts-out-pie-chart-checked"> <small>{{ 'include_not_in_category'|_ }}</small>
                     </label>
                 </div>
             </div>
         </div>
         {% endif %}
-            {#Pie chart with income (aka all deposits in category). Optional checkbox to include all other transactions (for comparison).#}
     </div>
 
     <div class="row">
         <div class="col-lg-12">
+
+            
             big chart here
 
             Show income / expenses per period. Differs per report: month = per day, year = per month, multi-year = per year.