plugins/skrooge/tutorial.txt

0001 <!--
0002 /***************************************************************************
0003  * SPDX-FileCopyrightText: 2022 S. MANKOWSKI stephane@mankowski.fr
0004  * SPDX-FileCopyrightText: 2022 G. DE BURE support@mankowski.fr
0005  * SPDX-License-Identifier: GPL-3.0-or-later
0006  ***************************************************************************/
0007 -->
0008 <?xml version="1.0" encoding="utf-8"?>
0009 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
0010 <html xmlns="https://www.w3.org/1999/xhtml">
0011   <head>
0012     <meta http-equiv="content-type" content="text/html;charset=utf-8" />
0013     <meta http-equiv="Content-Style-Type" content="text/css" />
0014     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
0015   </head>
0016   <body>
0017   <h1>Introduction</h1>
0018   Welcome to this tutorial. You will learn how to develop a template to personalize your how report.<br>
0019   The template engine is based on <a href="http://www.grantlee.org/apidox/">Grantlee</a>.<br>
0020   <br>
0021   You can find information here:<br>
0022   <a href="http://www.grantlee.org/apidox/for_themers.html">http://www.grantlee.org/apidox/for_themers.html</a><br>
0023   <a href="https://docs.djangoproject.com/en/dev/ref/templates/builtins/">https://docs.djangoproject.com/en/dev/ref/templates/builtins/</a><br>
0024
0025   <h1>The main variables</h1>
0026   <h2>The simple values:</h2>
0027 You can have access to simple values:
0028 <div class="panel panel-primary">
0029   <div class="panel-heading">Code</div>
0030   <div class="panel-body">
0031 color_negativetext: &#123;{ color_negativetext }}<br/>
0032 color_positivetext: &#123;{ color_positivetext }}<br/>
0033 color_neutraltext: &#123;{ color_neutraltext }}<br/>
0034 color_normaltext: &#123;{ color_normaltext }}<br/>
0035 color_inactivetext: &#123;{ color_inactivetext }}<br/>
0036 color_activetext: &#123;{ color_activetext }}<br/>
0037 color_linktext: &#123;{ color_linktext }}<br/>
0038 color_visitedtext: &#123;{ color_visitedtext }}<br/>
0039 color_activebackground: &#123;{ color_activebackground }}<br/>
0040
0041 font_family: &#123;{ font_family }}<br/>
0042
0043 logo: &#123;{ logo }} &lt;img src="&#123;{ logo }}" /><br/>
0044 logo_black: &#123;{ logo_black }} &lt;img src="&#123;{ logo_black }}" /><br/>
0045
0046 title_main: &#123;{ title_main }}<br/>
0047 title_budget: &#123;{ title_budget }}<br/>
0048 title_main_categories: &#123;{ title_main_categories }}<br/>
0049 title_variations: &#123;{ title_variations }}<br/>
0050 title_account: &#123;{ title_account }}<br/>
0051 title_unit: &#123;{ title_unit }}<br/>
0052 title_advice: &#123;{ title_advice }}<br/>
0053 title_portfolio: &#123;{ title_portfolio }}<br/>
0054 title_highlighted: &#123;{ title_highlighted }}<br/>
0055 title_networth: &#123;{ title_networth }}<br/>
0056 title_annual_spending: &#123;{ title_annual_spending }}<br/>
0057 title_personal_finance_score: &#123;{ title_personal_finance_score }}<br/>
0058
0059 msg_no_variation: &#123;{ msg_no_variation|safe }}<br/>
0060 msg_no_scheduled: &#123;{ msg_no_scheduled|safe }}<br/>
0061 msg_no_highlighted: &#123;{ msg_no_highlighted|safe }}<br/>
0062 msg_no_budget: &#123;{ msg_no_budget|safe }}<br/>
0063 msg_no_share: &#123;{ msg_no_share|safe }}<br/>
0064 msg_amount_unit_date: &#123;{ msg_amount_unit_date|safe }}<br/>
0065
0066 about_welcome: &#123;{ about_welcome|safe }}<br/>
0067 about_programname: &#123;{ about_programname|safe }}<br/>
0068 about_version: &#123;{ about_version|safe }}<br/>
0069 about_bugaddress: &#123;{ about_bugaddress|safe }}<br/>
0070 about_copyrightstatement: &#123;{ about_copyrightstatement|safe }}<br/>
0071 about_homepage: &#123;{ about_homepage|safe }}<br/>
0072 about_forumpage: &#123;{ about_forumpage|safe }}<br/>
0073 about_newspage: &#123;{ about_newspage|safe }}<br/>
0074 about_operationpage: &#123;{ about_operationpage|safe }}<br/>
0075 about_accountpage: &#123;{ about_accountpage|safe }}<br/>
0076 about_shortdescription: &#123;{ about_shortdescription|safe }}<br/>
0077 about_othertext: &#123;{ about_othertext|safe }}<br/>
0078 about_maintext: &#123;{ about_maintext|safe }}<br/>
0079 about_did_you_know: &#123;{ about_did_you_know|safe }}<br/>
0080   </div>
0081 </div>
0082
0083 <div class="panel panel-primary">
0084   <div class="panel-heading">Result</div>
0085   <div class="panel-body">
0086 color_negativetext: {{ color_negativetext }}<br/>
0087 color_positivetext: {{ color_positivetext }}<br/>
0088 color_neutraltext: {{ color_neutraltext }}<br/>
0089 color_normaltext: {{ color_normaltext }}<br/>
0090 color_inactivetext: {{ color_inactivetext }}<br/>
0091 color_activetext: {{ color_activetext }}<br/>
0092 color_linktext: {{ color_linktext }}<br/>
0093 color_visitedtext: {{ color_visitedtext }}<br/>
0094 color_activebackground: {{ color_activebackground }}<br/>
0095
0096 font_family: {{ font_family }}<br/>
0097
0098 logo: {{ logo }} <img src="{{ logo }}" /><br/>
0099 logo_black: {{ logo_black }} <img src="{{ logo_black }}" /><br/>
0100
0101 title_main: {{ title_main }}<br/>
0102 title_budget: {{ title_budget }}<br/>
0103 title_main_categories: {{ title_main_categories }}<br/>
0104 title_variations: {{ title_variations }}<br/>
0105 title_account: {{ title_account }}<br/>
0106 title_unit: {{ title_unit }}<br/>
0107 title_advice: {{ title_advice }}<br/>
0108 title_portfolio: {{ title_portfolio }}<br/>
0109 title_highlighted: {{ title_highlighted }}<br/>
0110 title_networth: {{ title_networth }}<br/>
0111 title_annual_spending: {{ title_annual_spending }}<br/>
0112 title_personal_finance_score: {{ title_personal_finance_score }}<br/>
0113
0114 msg_no_variation: {{ msg_no_variation|safe }}<br/>
0115 msg_no_scheduled: {{ msg_no_scheduled|safe }}<br/>
0116 msg_no_highlighted: {{ msg_no_highlighted|safe }}<br/>
0117 msg_no_budget: {{ msg_no_budget|safe }}<br/>
0118 msg_no_share: {{ msg_no_share|safe }}<br/>
0119 msg_amount_unit_date: {{ msg_amount_unit_date|safe }}<br/>
0120
0121 about_welcome: {{ about_welcome|safe }}<br/>
0122 about_programname: {{ about_programname|safe }}<br/>
0123 about_version: {{ about_version|safe }}<br/>
0124 about_bugaddress: {{ about_bugaddress|safe }}<br/>
0125 about_copyrightstatement: {{ about_copyrightstatement|safe }}<br/>
0126 about_homepage: {{ about_homepage|safe }}<br/>
0127 about_forumpage: {{ about_forumpage|safe }}<br/>
0128 about_newspage: {{ about_newspage|safe }}<br/>
0129 about_operationpage: {{ about_operationpage|safe }}<br/>
0130 about_accountpage: {{ about_accountpage|safe }}<br/>
0131 about_shortdescription: {{ about_shortdescription|safe }}<br/>
0132 about_othertext: {{ about_othertext|safe }}<br/>
0133 about_maintext: {{ about_maintext|safe }}<br/>
0134 about_did_you_know: {{ about_did_you_know|safe }}<br/>
0135   </div>
0136 </div>
0137
0138   <h2>The report:</h2>
0139 From this object you can have access to more complex values:
0140 <div class="panel panel-primary">
0141   <div class="panel-heading">Code</div>
0142   <div class="panel-body">
0143 report.period=&#123;{ report.period }}<br/>
0144 report.previous_period=&#123;{ report.previous_period }}<br/>
0145 report.previous.period=&#123;{ report.previous.period }}<br/>
0146 report.previous.previous_period=&#123;{ report.previous.previous_period }}<br/>
0147 report.tip_of_day;{ report.tip_of_day }}<br/>
0148
0149
0150 report.budget_table=&#123;{ report.budget_table|dump|safe }}<br/>
0151 report.unit_table=&#123;{ report.unit_table|dump|safe }}<br/>
0152 report.portfolio=&#123;{ report.portfolio|dump|safe }}<br/>
0153 report.account_table=&#123;{ report.account_table|dump|safe }}<br/>
0154 report.bank_table=&#123;{ report.bank_table|dump|safe }}<br/>
0155 report.scheduled_operations=&#123;{ report.scheduled_operations|dump|safe }}<br/>
0156 report.categories_period=&#123;{ report.categories_period|dump|safe }}<br/>
0157 report.categories_previous_period=&#123;{ report.categories_previous_period|dump|safe }}<br/>
0158 report.income_vs_expenditure=&#123;{ report.income_vs_expenditure|dump|safe }}<br/>
0159 report.networth=&#123;{ report.networth|money|safe }}<br/>
0160 report.annual_spending=&#123;{ report.annual_spending|money|safe }}<br/>
0161 report.personal_finance_score=&#123;{ report.personal_finance_score }}<br/>
0162 report.categories_variations=&#123;{ report.categories_variations|dump|safe }}<br/>
0163 report.categories_variations_issues=&#123;{ report.categories_variations_issues|dump|safe }}<br/>
0164   </div>
0165 </div>
0166
0167 <div class="panel panel-primary">
0168   <div class="panel-heading">Result</div>
0169   <div class="panel-body">
0170 report.period={{ report.period }}<br/>
0171 report.previous_period={{ report.previous_period }}<br/>
0172 report.previous.period={{ report.previous.period }}<br/>
0173 report.previous.previous_period={{ report.previous.previous_period }}<br/>
0174 report.tip_of_day={{ report.tip_of_day }}<br/>
0175
0176 report.budget_table={{ report.budget_table|dump|safe }}<br/>
0177 report.unit_table={{ report.unit_table|dump|safe }}<br/>
0178 report.portfolio={{ report.portfolio|dump|safe }}<br/>
0179 report.account_table={{ report.account_table|dump|safe }}<br/>
0180 report.bank_table={{ report.bank_table|dump|safe }}<br/>
0181 report.scheduled_operations={{ report.scheduled_operations|dump|safe }}<br/>
0182 report.categories_period={{ report.categories_period|dump|safe }}<br/>
0183 report.categories_previous_period={{ report.categories_previous_period|dump|safe }}<br/>
0184 report.income_vs_expenditure={{ report.income_vs_expenditure|dump|safe }}<br/>
0185 report.networth={{ report.networth|money|safe }}<br/>
0186 report.annual_spending={{ report.annual_spending|money|safe }}<br/>
0187 report.personal_finance_score={{ report.personal_finance_score }}<br/>
0188 report.categories_variations={{ report.categories_variations|dump|safe }}<br/>
0189 report.categories_variations_issues={{ report.categories_variations_issues|dump|safe }}<br/>
0190   </div>
0191 </div>
0192
0193   <h2>The document:</h2>
0194 From this object you can have access to more complex values:
0195 <div class="panel panel-primary">
0196   <div class="panel-heading">Code</div>
0197   <div class="panel-body">
0198 &#123;{ document|dump|safe }}
0199   </div>
0200 </div>
0201 <div class="alert alert-success" role="alert">The "dump" filter allows to dump the object</div>
0202
0203 <div class="panel panel-primary">
0204   <div class="panel-heading">Result</div>
0205   <div class="panel-body">
0206 {{ document|dump|safe }}
0207   </div>
0208 </div>
0209
0210  <h1>The filters</h1>
0211   In addition of standard filters, you can the following filters developed for Skrooge.
0212 <div class="panel panel-primary">
0213   <div class="panel-heading">Code</div>
0214   <div class="panel-body">
0215 &#123;{ 10.1|money|safe }}<br/>
0216 &#123;{ -10.2|money|safe }}<br/>
0217 &#123;{ -10.3|money:"nocolor" }}<br/>
0218 &#123;{ -10.4|money:"nodecimal" }}<br/>
0219 &#123;{ -10.5|money:"nocolor;nodecimal" }}<br/>
0220
0221 &#123;{ 10.1|money:"1"|safe }}<br/>
0222 &#123;{ -10.2|money:"1"|safe }}<br/>
0223 &#123;{ -10.3|money:"1;nocolor" }}<br/>
0224 &#123;{ -10.4|money:"1;nocolor;nodecimal" }}<br/>
0225
0226 &#123;{ 10.1|money:"2"|safe }}<br/>
0227 &#123;{ -10.2|money:"2"|safe }}<br/>
0228 &#123;{ -10.3|money:"2;nocolor" }}<br/>
0229 &#123;{ -10.4|money:"2;nocolor;nodecimal" }}<br/>
0230
0231 &#123;{ 10.1|percent|safe }}<br/>
0232 &#123;{ -10.2|percent|safe }}<br/>
0233
0234 &#123;{ 70000|filesizeformat }}<br/>
0235
0236 &#123;{ about_did_you_know|replace:"Did;Do" }}<br/>
0237   </div>
0238 </div>
0239 <div class="alert alert-success" role="alert">The "money" filter displays a numerical value as a money. With "1", in primary money. With "2", in secondary money</div>
0240 <div class="alert alert-success" role="alert">The "percent" filter displays a numerical value as a percent</div>
0241 <div class="alert alert-success" role="alert">The "filesizeformat" filter displays a numerical value as a file size format</div>
0242 <div class="alert alert-success" role="alert">The "replace" filter replaces a string by another one</div>
0243
0244 <div class="panel panel-primary">
0245   <div class="panel-heading">Result</div>
0246   <div class="panel-body">
0247 {{ 10.1|money|safe }}<br/>
0248 {{ -10.2|money|safe }}<br/>
0249 {{ -10.3|money:"nocolor" }}<br/>
0250 {{ -10.4|money:"nodecimal" }}<br/>
0251 {{ -10.5|money:"nocolor;nodecimal" }}<br/>
0252
0253 {{ 10.1|money:"1"|safe }}<br/>
0254 {{ -10.2|money:"1"|safe }}<br/>
0255 {{ -10.3|money:"1;nocolor" }}<br/>
0256 {{ -10.4|money:"1;nocolor;nodecimal" }}<br/>
0257
0258 {{ 10.1|money:"2"|safe }}<br/>
0259 {{ -10.2|money:"2"|safe }}<br/>
0260 {{ -10.3|money:"2;nocolor" }}<br/>
0261 {{ -10.4|money:"2;nocolor;nodecimal" }}<br/>
0262
0263 {{ 10.1|percent|safe }}<br/>
0264 {{ -10.2|percent|safe }}<br/>
0265
0266 {{ 70000|filesizeformat }}<br/>
0267
0268 {{ about_did_you_know|replace:"Did;Do" }}<br/>
0269   </div>
0270 </div>
0271
0272 The following code will display the list of opened accounts with current amount:<br/>
0273 <div class="panel panel-primary">
0274   <div class="panel-heading">Code</div>
0275   <div class="panel-body">
0276 &#123;% for item in document|table:"v_account_display,t_close='N' ORDER BY t_name" %}<br/>
0277 &#123;{ item|att:"rd_bank_id.t_name" }}.&#123;{ item|att:"t_name" }}:&#123;{ item|att:"f_CURRENTAMOUNT"|money|safe }}&lt;br/&gt;<br/>
0278 &#123;% endfor %}
0279   </div>
0280 </div>
0281 <div class="alert alert-success" role="alert">The "table" filter allows to search objects</div>
0282 <div class="alert alert-success" role="alert">The "att" filter allows to get an attribute of an object</div>
0283
0284 <div class="panel panel-primary">
0285   <div class="panel-heading">Result</div>
0286   <div class="panel-body">
0287 {% for item in document|table:"v_account_display,t_close='N' ORDER BY t_name" %}
0288 {{ item|att:"rd_bank_id.t_name" }}.{{ item|att:"t_name" }}:{{ item|att:"f_CURRENTAMOUNT"|money|safe }}<br/>
0289 {% endfor %}
0290   </div>
0291 </div>
0292
0293 The following code will execute a sql order and display the result:<br/>
0294 <div class="panel panel-primary">
0295   <div class="panel-heading">Code</div>
0296   <div class="panel-body">
0297 &#123;% for item in document|query:"select t_name as name, (select count(1) from operation where rd_account_id=account.id) as id from account" %}<br/>
0298 &#123;{ item.0 }}:&#123;{ item.1 }}&lt;br/&gt;<br/>
0299 &#123;% endfor %}
0300   </div>
0301 </div>
0302 <div class="alert alert-success" role="alert">The "query" filter allows to execute the sql order you want</div>
0303
0304 <div class="panel panel-primary">
0305   <div class="panel-heading">Result</div>
0306   <div class="panel-body">
0307 {% for item in document|query:"select t_name as name, (select count(1) from operation where rd_account_id=account.id) as id from account" %}
0308 {{ item.0 }}:{{ item.1 }}<br/>
0309 {% endfor %}
0310   </div>
0311 </div>
0312
0313   <h1>Some examples</h1>
0314 To go faster, you can include already existing part of template like this:
0315 <div class="panel panel-primary">
0316   <div class="panel-heading">Code</div>
0317   <div class="panel-body">
0318 &#123;% include "default/personal_finance_score.html" %}<br/>
0319 &#123;% include "default/income_vs_expenditure_table.html" %}<br/>
0320 &#123;% include "default/budget_table.html" %}<br/>
0321 &#123;% include "default/categories_previous_period_table.html" %}<br/>
0322 &#123;% include "default/categories_period_table.html" %}<br/>
0323 &#123;% include "default/categories_variations.html" %}<br/>
0324 &#123;% include "default/bank_table.html" %}<br/>
0325 &#123;% include "default/account_table.html" %}<br/>
0326 &#123;% include "default/unit_table.html" %}<br/>
0327 &#123;% include "default/portfolio.html" %}<br/>
0328 &#123;% include "default/highlighted_operations.html" %}<br/>
0329   </div>
0330 </div>
0331 <div class="panel panel-primary">
0332   <div class="panel-heading">Result</div>
0333   <div class="panel-body">
0334 {% include "default/personal_finance_score.html" %}
0335 {% include "default/income_vs_expenditure_table.html" %}
0336 {% include "default/budget_table.html" %}
0337 {% include "default/categories_previous_period_table.html" %}
0338 {% include "default/categories_period_table.html" %}
0339 {% include "default/categories_variations.html" %}
0340 {% include "default/bank_table.html" %}
0341 {% include "default/account_table.html" %}
0342 {% include "default/unit_table.html" %}
0343 {% include "default/portfolio.html" %}
0344 {% include "default/highlighted_operations.html" %}
0345   </div>
0346 </div>
0347
0348 You can also use external libraries to display values as you want:
0349 <div class="panel panel-primary">
0350   <div class="panel-heading">Code</div>
0351   <div class="panel-body">
0352   &lt;img src="https://chart.apis.google.com/chart?cht=bvs&chxs=0,&#123;{ color_normaltext }}|1,&#123;{ color_normaltext }}&chbh=100&chxt=x,y&chxr=1,0,&#123;{ report.income_vs_expenditure.4.3 }}&chf=bg,s,&#123;{ color_normalbackground }}&chco=&#123;{ color_negativetext }}|&#123;{ color_positivetext }}&chd=t:&#123;{ report.income_vs_expenditure.2.3 }},&#123;{ report.income_vs_expenditure.1.3 }}&chds=0,&#123;{ report.income_vs_expenditure.4.3 }}&chs=300x200&chl=&#123;{ document|display:"f_CURRENTAMOUNT_EXPENSE" }}|&#123;{ document|display:"f_CURRENTAMOUNT_INCOME" }}&chts=&#123;{ color_normaltext }}&chtt=&#123;{ document|display:"f_CURRENTAMOUNT_EXPENSE" }} vs &#123;{ document|display:"f_CURRENTAMOUNT_INCOME" }}|&#123;{ report.period }}"/>
0353   </div>
0354 </div>
0355 <div class="panel panel-primary">
0356   <div class="panel-heading">Result</div>
0357   <div class="panel-body">
0358   <img src="https://chart.apis.google.com/chart?cht=bvs&chxs=0,{{ color_normaltext }}|1,{{ color_normaltext }}&chbh=100&chxt=x,y&chxr=1,0,{{ report.income_vs_expenditure.4.3 }}&chf=bg,s,{{ color_normalbackground }}&chco={{ color_negativetext }}|{{ color_positivetext }}&chd=t:{{ report.income_vs_expenditure.2.3 }},{{ report.income_vs_expenditure.1.3 }}&chds=0,{{ report.income_vs_expenditure.4.3 }}&chs=300x200&chl={{ document|display:"f_CURRENTAMOUNT_EXPENSE" }}|{{ document|display:"f_CURRENTAMOUNT_INCOME" }}&chts={{ color_normaltext }}&chtt={{ document|display:"f_CURRENTAMOUNT_EXPENSE" }} vs {{ document|display:"f_CURRENTAMOUNT_INCOME" }}|{{ report.period }}"/>
0359   </div>
0360 </div>
0361
0362   </body>
0363 </html>