UserReports: Difference between revisions

84 bytes added ,  11:24, 2 January 2022
m
no edit summary
mNo edit summary
mNo edit summary
Line 1: Line 1:
{|align=right
  |__TOC__
  |}
== Introduction ==
== Introduction ==
''CumulusUtils'' provides the module ''UserReports'' which is a bit similar to the processing feature of ''CumulusMX'' itself. This gives the possibility to create whatever report the user wishes from within the ecosystem of ''CumulusUtils''. When a text file containing [[webtags]] is offered to ''CumulusUtils'' it is processed and the resulting text file is stored on the website.
''CumulusUtils'' provides the module ''UserReports'' which is a bit similar to the processing feature of ''CumulusMX'' itself. This gives the possibility to create whatever report the user wishes from within the ecosystem of ''CumulusUtils''. When a text file containing [[webtags]] is offered to ''CumulusUtils'' it is processed and the resulting text file is stored on the website.
Line 23: Line 26:


If you wish to create a page to be displayed in the ReportView (the right part of the website display where the charts are) you need to take into account the following:
If you wish to create a page to be displayed in the ReportView (the right part of the website display where the charts are) you need to take into account the following:
# The whole context of the website is 'As Is' and your HTML is inserted into the DIV that defines the right part, seven column (out of 12) Bootstrap block with a height of approximately 75vh (see the HTML units page).
* The whole context of the website is 'As Is' and your HTML is inserted into the DIV that defines the right part, seven column (out of 12) Bootstrap block with a height of approximately 75vh (see the [https://www.w3schools.com/cssref/css_units.asp HTML/CSS units] page).
# You could analyse the HTML context yourself by editing index.html in an appropriate editor which is able to make the file readable (e.g. Visual Studio Code). Note thios is HTML which is generated with colours and other information from you cumulusutils.ini file. You are not supposed to change this, changes will inevitably disappear again.
* You could analyse the HTML context yourself by editing index.html in an appropriate editor which is able to make the file readable (e.g. Visual Studio Code). Note thios is HTML which is generated with colours and other information from you cumulusutils.ini file. You are not supposed to change this, changes will inevitably disappear again.
# The basic structure of the index.html is as follows:
* The basic structure of the index.html is as follows:


     <nowiki><!DOCTYPE HTML>
     <nowiki><!DOCTYPE HTML>
Line 89: Line 92:
</nowiki>
</nowiki>
And your UserReport will  be inserted in the <nowiki><div id='CUReportView' class='scrollable CUReport'></div></nowiki> DIV. This means you have all libraries which are included at your disposal (especially Bootstrap, jQuery, Leaflet and HighCharts) if you wish to used them. Experiment freely.
And your UserReport will  be inserted in the <nowiki><div id='CUReportView' class='scrollable CUReport'></div></nowiki> DIV. This means you have all libraries which are included at your disposal (especially Bootstrap, jQuery, Leaflet and HighCharts) if you wish to used them. Experiment freely.
# The important thing here is that you can freely use CSS to give your HTML colouring and size attributes. If you wish to make your own CSS UserReport style you could put it into a file.
* The important thing here is that you can freely use CSS to give your HTML colouring and size attributes. If you wish to make your own CSS UserReport style you could put it into a file.
# Formatting the alignment of lists and values is best done with the TABLE html tag which also gives the possibility for more than one column.  
* Formatting the alignment of lists and values is best done with the TABLE html tag which also gives the possibility for more than one column.  
# Size of the font may increase/decrease information density
* Size of the font may increase/decrease information density
# You may use ''overflow'' to get a scrollbar on a table or div. Note that the usage of ''overflow'' may require some additional study.
* You may use ''overflow'' to get a scrollbar on a table or div. Note that the usage of ''overflow'' may require some additional study.
# If you wish to adhere to the CumulusUtils de facto standard of the thin line around the report (see e.g. Reports on your site) then the standard CSS used for the DIV containing the report is:
* If you wish to adhere to the CumulusUtils de facto standard of the thin line around the report (see e.g. Reports on your site) then the standard CSS used for the DIV containing the report is:
     <nowiki>#report{
     <nowiki>#report{
       font-family: arial;
       font-family: arial;