Warning, /office/skrooge/plugins/skrooge/responsive.txt is written in an unsupported language. File is not indexed.
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 <meta name="viewport" content="width=device-width, initial-scale=1.0">
0015 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
0016 <style>
0017 body {padding-top: 70px; padding-bottom: 70px; }
0018 td {white-space: nowrap;}
0019 @media print {a[href]:after {content: "" !important;}}
0020 meter {
0021 -webkit-appearance: none;
0022 -moz-appearance: none;
0023 appearance: none;
0024
0025 width: 200px;
0026 height: 30px;
0027 }
0028 meter::-webkit-meter-bar {
0029 background: #EEE;
0030 box-shadow: 0 2px 3px rgba(0,0,0,0.2) inset;
0031 border-radius: 3px;
0032 }
0033
0034 meter::-webkit-meter-optimum-value {
0035 background: #86CC00; /* Green */
0036 border-radius: 3px;
0037 }
0038
0039 meter::-webkit-meter-suboptimum-value {
0040 background: #FFDB1A; /* Yellow */
0041 border-radius: 3px;
0042 }
0043
0044 meter::-webkit-meter-even-less-good-value {
0045 background: #CC4600; /* Red */
0046 border-radius: 3px;
0047 }
0048 </style>
0049 </head>
0050 <body>
0051 <script src="https://code.jquery.com/jquery.js"></script>
0052 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
0053 <script src="https://code.highcharts.com/highcharts.js"></script>
0054 <script src="https://code.highcharts.com/highcharts-3d.js"></script>
0055 <div class="navbar navbar-default navbar-fixed-top" role="navigation">
0056 <div class="container">
0057 <div class="navbar-header">
0058 <h1>{{ title_main }}</h1>
0059 </div>
0060 </div>
0061 </div>
0062
0063 <div class="navbar navbar-default navbar-fixed-bottom" role="navigation">
0064 <div class="container">
0065 <small>Date: {{ current_date }}</small><br/>
0066 <small>File name: {{ document.fileName }}</small><br/>
0067 <small>* {{ msg_amount_unit_date }}</small>
0068 </div>
0069 </div>
0070 </div>
0071
0072 <div class="container">
0073 <h2>{{ title_personal_finance_score }}</h2>
0074 <span class="btn btn-{{ report.personal_finance_score_details.level }} btn-lg">{{ report.personal_finance_score_details.value|floatformat }}
0075 <span class="badge">
0076 {{ title_networth }} / {{ title_annual_spending }}</br>
0077 {{ report.networth|money|safe }} / {{ report.annual_spending|money|safe }}
0078 </span>
0079 </span>
0080 <p>{{ report.personal_finance_score_details.message }}</p>
0081
0082 <h2>{{ document|display:"f_CURRENTAMOUNT_INCOME" }} & {{ document|display:"f_CURRENTAMOUNT_EXPENSE" }} *</h2>
0083 {% include "default/income_vs_expenditure_table.html" %}
0084 <div id="chart4" style="height: 300px; width: 600px"></div>
0085
0086 <h2>{{ title_budget }}</h2>
0087 {% include "default/budget_table.html" %}
0088
0089 <h2>{{ title_main_categories }}</h2>
0090 <table>
0091 <tr>
0092 <td align="center">
0093 {% include "default/categories_previous_period_table.html" %}
0094 <div id="chart1" style="height: 300px; width: 300px"></div>
0095 </td>
0096 <td align="center">
0097 {% include "default/categories_period_table.html" %}
0098 <div id="chart2" style="height: 300px; width: 300px"></div>
0099 </tr>
0100 </table>
0101 <h2>{{ title_variations }}</h2>
0102 {% include "default/categories_variations.html" %}
0103
0104 <h2>{{ title_account }} *</h2>
0105 {% include "default/bank_table.html" %}
0106 <div id="chart5" style="height: 300px; width: 400px"></div>
0107 <br/>
0108 {% include "default/account_table.html" %}
0109
0110 <h2>{{ title_unit }} *</h2>
0111 {% include "default/unit_table.html" %}
0112
0113 <h2>{{ title_portfolio }} *</h2>
0114 {% include "default/portfolio.html" %}
0115 {% if report.portfolio|length %}
0116 <div id="chart3" style="height: 300px; width: 400px"></div>
0117 {% endif %}
0118 <h2>{{ title_highlighted }}</h2>
0119 {% include "default/highlighted_operations.html" %}
0120 </div>
0121
0122 <script language="javascript">
0123 var item = document.getElementById("table_unit");
0124 if(item != null) item.className= "table table-bordered table-striped table-condensed";
0125
0126 var item = document.getElementById("table_portfolio");
0127 if(item != null) item.className= "table table-bordered table-striped table-condensed";
0128
0129 var item = document.getElementById("table_income_vs_expenditure");
0130 if(item != null) item.className= "table table-bordered table-striped table-condensed";
0131
0132 var item = document.getElementById("table_categories_previous_period");
0133 if(item != null) item.className= "table table-bordered table-striped table-condensed";
0134
0135 var item = document.getElementById("table_categories_period");
0136 if(item != null) item.className= "table table-bordered table-striped table-condensed";
0137
0138 var item = document.getElementById("table_budget");
0139 if(item != null) item.className= "table table-bordered table-striped table-condensed";
0140
0141 var item = document.getElementById("table_bank");
0142 if(item != null) item.className= "table table-bordered table-striped table-condensed";
0143
0144 var item = document.getElementById("table_account");
0145 if(item != null) item.className= "table table-bordered table-striped table-condensed";
0146
0147 $(function () {
0148 $('#chart1').highcharts({
0149 chart: {
0150 type: 'pie',
0151 options3d: {
0152 enabled: true,
0153 alpha: 45,
0154 beta: 0
0155 }
0156 },
0157 title: {
0158 text: ''
0159 },
0160 tooltip: {
0161 pointFormat: '{point.percentage:.1f}%</b>'
0162 },
0163 plotOptions: {
0164 pie: {
0165 allowPointSelect: false,
0166 depth: 35,
0167 dataLabels: {
0168 enabled: true,
0169 format: '{point.name}'
0170 },
0171 cursor: 'pointer',
0172 point: {
0173 events: {
0174 click: function () {
0175 window.open(this.options.url);
0176 }
0177 }
0178 }
0179 }
0180 },
0181 series: [{
0182 type: 'pie',
0183 name: '{{ title_main_categories }}',
0184 data: [
0185 {% for item in report.categories_previous_period %}
0186 {% if forloop.first %}
0187 {% else %}
0188 {name: '{{ forloop.counter0 }}',
0189 y: {{ item.2 }},
0190 url: 'skg://Skrooge_operation_plugin/SKGOPERATION_CONSOLIDATED_DEFAULT_PARAMETERS/?operationTable=v_suboperation_consolidated&operationWhereClause={{ item.3|encode }}&title={{ item.1|encode }}/{{ report.categories_period.0.2 }}&title_icon=view-categories'}
0191 {% if forloop.last %}{% else %},{% endif %}
0192 {% endif %}
0193 {% endfor %}
0194 ]
0195 }]
0196 });
0197 });
0198
0199 $(function () {
0200 $('#chart2').highcharts({
0201 chart: {
0202 type: 'pie',
0203 options3d: {
0204 enabled: true,
0205 alpha: 45,
0206 beta: 0
0207 }
0208 },
0209 title: {
0210 text: ''
0211 },
0212 tooltip: {
0213 pointFormat: '{point.percentage:.1f}%</b>'
0214 },
0215 plotOptions: {
0216 pie: {
0217 allowPointSelect: false,
0218 depth: 35,
0219 dataLabels: {
0220 enabled: true,
0221 format: '{point.name}'
0222 }
0223 }
0224 },
0225 series: [{
0226 type: 'pie',
0227 name: '{{ title_main_categories }}',
0228 data: [
0229 {% for item in report.categories_period %}
0230 {% if forloop.first %}
0231 {% else %}
0232 {name: '{{ forloop.counter0 }}',
0233 y: {{ item.2 }},
0234 url: 'skg://Skrooge_operation_plugin/SKGOPERATION_CONSOLIDATED_DEFAULT_PARAMETERS/?operationTable=v_suboperation_consolidated&operationWhereClause={{ item.3|encode }}&title={{ item.1|encode }}/{{ report.categories_period.0.2 }}&title_icon=view-categories'}
0235 {% if forloop.last %}{% else %},{% endif %}
0236 {% endif %}
0237 {% endfor %}
0238 ]
0239 }]
0240 });
0241 });
0242
0243 $(function () {
0244 $('#chart3').highcharts({
0245 chart: {
0246 type: 'pie',
0247 options3d: {
0248 enabled: true,
0249 alpha: 45,
0250 beta: 0
0251 }
0252 },
0253 title: {
0254 text: ''
0255 },
0256 tooltip: {
0257 pointFormat: '{point.percentage:.1f}%</b>'
0258 },
0259 plotOptions: {
0260 pie: {
0261 allowPointSelect: false,
0262 depth: 35,
0263 dataLabels: {
0264 enabled: true,
0265 format: '{point.name}'
0266 }
0267 }
0268 },
0269 series: [{
0270 type: 'pie',
0271 name: '',
0272 data: [
0273 {% for item in report.portfolio %}
0274 {% if forloop.first %}
0275 {% else %}
0276 ['{{ item.0 }}', {{ item.5 }}]
0277 {% if forloop.last %}{% else %},{% endif %}
0278 {% endif %}
0279 {% endfor %}
0280 ]
0281 }]
0282 });
0283 });
0284
0285
0286
0287 $(function () {
0288 $('#chart4').highcharts({
0289 chart: {
0290 type: 'column',
0291 options3d: {
0292 enabled: true,
0293 alpha: 15,
0294 beta: 15,
0295 viewDistance: 25,
0296 depth: 40
0297 }
0298 },
0299
0300 title: {
0301 text: ''
0302 },
0303
0304 xAxis: {
0305 categories: ['{{ report.previous_period }}', '{{ report.period }}']
0306 },
0307
0308 yAxis: {
0309 allowDecimals: true,
0310 min: 0,
0311 title: {
0312 text: ''
0313 }
0314 },
0315 colors: ['#{{ color_negativetext }}', '#{{ color_positivetext }}'],
0316
0317 tooltip: {
0318 pointFormat: '<span style="color:{series.color}">\u25CF</span>{point.y}'
0319 },
0320
0321 series: [{
0322 name: '{{ document|display:"f_CURRENTAMOUNT_EXPENSE" }}',
0323 data: [{{ report.income_vs_expenditure.2.2 }}, {{ report.income_vs_expenditure.2.3 }}0]
0324 }, {
0325 name: '{{ document|display:"f_CURRENTAMOUNT_INCOME" }}',
0326 data: [{{ report.income_vs_expenditure.1.2 }}, {{ report.income_vs_expenditure.1.3 }}]
0327 }
0328 ]
0329 });
0330 });
0331
0332 $(function () {
0333 $('#chart5').highcharts({
0334 chart: {
0335 type: 'pie',
0336 options3d: {
0337 enabled: true,
0338 alpha: 45,
0339 beta: 0
0340 }
0341 },
0342 title: {
0343 text: ''
0344 },
0345 tooltip: {
0346 pointFormat: '{point.percentage:.1f}%</b>'
0347 },
0348 plotOptions: {
0349 pie: {
0350 allowPointSelect: false,
0351 depth: 35,
0352 dataLabels: {
0353 enabled: true,
0354 format: '{point.name}'
0355 }
0356 }
0357 },
0358 series: [{
0359 type: 'pie',
0360 name: '',
0361 data: [
0362 {% for item in report.bank_table %}
0363 {% if forloop.first %}
0364 {% else %}
0365 {% if forloop.last %}
0366 [null, null]
0367 {% else %}
0368 ['{{ item.1 }}', {{ item.6 }}],
0369 {% endif %}
0370 {% endif %}
0371 {% endfor %}
0372 ]
0373 }]
0374 });
0375 });
0376
0377 </script>
0378 </body>
0379 </html>