Add categories graphs

git-svn-id: svn+ssh://svn.mageia.org/svn/soft/mga-treasurer/trunk@8342 5b7c3c08-40e5-403b-9995-ace06908e4af

1 files changed, 78 insertions, 2 deletions

diff --git a/tmpl/transactions_by_year.html b/tmpl/transactions_by_year.html
index 08e9c60..b363c72 100644
--- a/tmpl/transactions_by_year.html
+++ b/tmpl/transactions_by_year.html
@@ -22,11 +22,87 @@
             </li>
         </ul>
         <h2>By category</h2>
+
+        [%-
+        SET ca_expenses = [];
+        SET ca_expenses_names = [];
+        SET ca_revenues = [];
+        SET ca_revenues_names = [];
+
+        IF transactions.by_year.$year.ca_revenues;
+        FOREACH ca IN transactions.by_year.$year.ca_revenues.keys;
+                ca_revenues.push(ca);
+                ca_revenues_names.push(transactions.by_ca.$ca.c_name);
+        END;
+        END;
+        IF transactions.by_year.$year.ca_expenses;
+        FOREACH ca IN transactions.by_year.$year.ca_expenses.keys;
+                ca_expenses.push(ca);
+                ca_expenses_names.push(transactions.by_ca.$ca.c_name);
+        END;
+        END;
+        -%]
+        <h3>Expenses</h3>
+        [% IF ca_expenses.size > 1 %]
+        <canvas id="expenses_ca_bar_chart" height="300" width="[% 80 + ca_expenses.size * 65 %]"></canvas>
+
+        <script>
+
+            var barChartDataExpenses = {
+                labels : ["[% ca_expenses_names.join('","') %]"],
+                datasets : [
+                {
+                    fillColor : "#e51b1b",
+                    strokeColor : "#f11111",
+                    data: [
+                    [%- FOR ca IN ca_expenses -%]
+                    [%- transactions.by_year.$year.ca_expenses.$ca -%]
+                    [%- IF ! loop.last() -%],[%- END -%]
+                    [%- END %]]
+                }
+                ]
+            }
+
+            var myLine = new Chart(document.getElementById("expenses_ca_bar_chart").getContext("2d")).Bar(barChartDataExpenses);
+        
+        </script>
+        [% END %]
+        <ul>
+            [%- FOR ca IN ca_expenses %]
+            <li><b><a href="c_[% ca %].html">[% transactions.by_ca.$ca.c_name %]</a></b>: [% transactions.by_year.$year.ca_expenses.$ca %] Euros</li>
+            [%- END -%]
+        </ul>
+
+        <h3>Revenues</h3>
+        [% IF ca_revenues.size > 1 %]
+        <canvas id="revenues_ca_bar_chart" height="300" width="[% 80 + ca_revenues.size * 65 %]"></canvas>
+
+        <script>
+            var barChartDataRevenues = {
+                labels : ["[% ca_revenues_names.join('","') %]"],
+                datasets : [
+                {
+                    fillColor : "#151f79",
+                    strokeColor : "#101333",
+                    data: [
+                    [%- FOR ca IN ca_revenues -%]
+                    [%- transactions.by_year.$year.ca_revenues.$ca -%]
+                    [%- IF ! loop.last() -%],[%- END -%]
+                    [%- END %]]
+                }
+                ]
+            }
+
+            var myLine = new Chart(document.getElementById("revenues_ca_bar_chart").getContext("2d")).Bar(barChartDataRevenues);
+        
+        </script>
+        [% END %]
         <ul>
-            [% FOR ca IN transactions.by_year.$year.ca_balance.keys %]
-            <li><b><a href="c_[% ca %].html">[% transactions.by_ca.$ca.c_name %]</a></b>: [% transactions.by_year.$year.ca_balance.$ca %] Euros</b></li>
+            [%- FOR ca IN ca_revenues %]
+            <li><b><a href="c_[% ca %].html">[% transactions.by_ca.$ca.c_name %]</a></b>: [% transactions.by_year.$year.ca_revenues.$ca %] Euros</li>
             [%- END -%]
         </ul>
+
         <h2>Monthly reports</h2>
 
         <canvas id="accounts_history_bar_chart" height="250" width="[% 80 + transactions.by_year.$year.months.size * 65 %]"></canvas>