Add documentation for custom HTML template file and CSS override file in Report Generator

[Marinovsky]

A new feature has been implemented in LEAN that now allows the users to provide a custom HTML template file and CSS override file to use in the reports generated(see LEAN pr's #7401 and #7410). The given HTML template file replaces the default template and the CSS override file, as its name says, override default CSS stylesheet. Now, the next step is add the required documentation to brief the users on how to use this new feature.

Expected Behavior

CSS Override file usage

-CLOUD usage: To override the default CSS stylesheet, the user needs to first create a CSS file in the workspace and write in it the changes to be overridden (in CSS language of course). Once the CSS file has been created and saved, the user should run the backtest and once it has loaded, the user will click the button Report to generate the report. Below, screenshots of an example are shown:

Edit: cloud usage requires creating report.html/report.css file names explicitly any other name will be ignored.

2. Run the backtest 3. Click on the button labeled Report and request a report

-CLI usage: To override the default CSS stylesheet, the user needs to first create a CSS file in the working directory and write in it the changes to be overridden (in CSS language of course). Once the css file has been created and all the desired changes are written there, the user will run the following command from its terminal (in the working directory): lean report --css <name of the CSS file>(Other optional arguments can be included of course). For example, if the user is working in C:\LEAN_CLI\ and the name of the CSS override file is report_override.css, the command it should run would be lean report --css report_override.css. Below, screenshots of the mentioned example are shown:

1. Create a CSS file in the working directory and write the CSS changes to be applied (I'm using Notepad++ editor)
2. Open a terminal in the working directory
3. Write the following command lean report --css report_override.css and press enter
4. Open the report generated

Custom HTML template usage

Though the design of the HTML template is up to the user, the HTML needs to fulfill these following requirements:

1. In order to display certain Report Element, the user needs to add the respective key in its HTML file (see https://github.com/QuantConnect/Lean/blob/master/Report/ReportKey.cs for information about each key). For example, if the user wants to add the Rolling Beta chart in its report, their custom HTML file should contain the key = {{$PLOT-BETA}} in the part were this chart is expected to be displayed
2. To display the crisis plots, the user needs to add the template they will follow as comment in the custom HTML template file. However, the comment should follow the next pattern: <!--crisis <the HTML template for the crisis plots> crisis--> as shown in the image below
3. To display each algorithm parameter, the user needs to add the HTML template each entry will follow as comment in the custom HTML template file. However, the comment should follow the follow the next pattern: <!--parameters <the HTML template for each parameter entry> parameters--> as shown in the image below On the other hand, each key and value name in the template should have the same format {{$KEY<number>}} and {{$VALUE<number>}}. If the user wants to display three parameters per row then it should define three keys with the names {{$KEY0}}, {{$KEY1}}, {{$KEY2}} and their respective values {{$VALUE0}},{{$VALUE1}},{{$VALUE2}}

• CLOUD usage: To use a custom HTML template in the report generated the user needs to first create a HTML file in the workspace and write in it the template to be used in the report generated. Then, the user will run the backtest and wait until this have already loaded. Finally, the user will press the button labeled as Report and will request a report. Below, screenshots of an example are shown

Edit: cloud usage requires creating report.html/report.css file names explicitly any other name will be ignored.

1. Create a HTML template in the workspace and save it
2. Run the backtest
3. Press the button Report and request a report

• CLI usage: To use a custom HTML template in the report generated, the user needs to first create a HTML file in the working directory and write in it the template to be used in the report generated. Then, a terminal should be opened in the same working directory. When the terminal is open the user should write the following command: lean report --html <name of the custom HTML template file> and press enter. For example, if the name of the custom HTML template file is template_custom.html and the user working directory is C:\Lean_CLI\ the user needs to run the command lean report --html template_custom.html(Other optional arguments can be also included) in a terminal in C:\Lean_CLI\. Below, screenshots of the mentioned example are shown:

1. Create a HTML file in your working directory and write in it the desired template you would like to use in the reports generated(in HTML code of course)

2. Open a terminal in your working directory, in this case: C:\Lean_CLI\

3. Run the following command: lean report --html template_custom.html

4. Open the file report.html, located in your current working directory

For more information, please see https://github.com/QuantConnect/Lean/blob/master/Report/Report.cs

Actual Behavior

There is no documentation

Checklist

• [x] I have completely filled out this template
• [x] I have confirmed that this issue exists on the current master branch
• [x] I have confirmed that this is not a duplicate issue by searching issues

[oussamanahdi]

html with custom logo and report.css with a fix to allow using logos of any dimensions without breaking out of the header

custom report.zip

[DerekMelchin]

We also need to ensure we have these changes:

• https://github.com/QuantConnect/Lean/pull/7410 / https://github.com/QuantConnect/lean-cli/pull/351
  • Update https://www.quantconnect.com/docs/v2/cloud-platform/backtesting/report and https://www.quantconnect.com/docs/v2/lean-cli/reports to explain how to provide a custom HTML template
  • Update Options to include the new --html option
• https://github.com/QuantConnect/Lean/pull/7401 / https://github.com/QuantConnect/lean-cli/pull/349
  • Add a new Parameters H3 to the bottom of https://www.quantconnect.com/docs/v2/cloud-platform/backtesting/report and https://www.quantconnect.com/docs/v2/lean-cli/reports that explains the new table, how to hide it, and how it transforms your parameter names. Also add this new information to https://www.quantconnect.com/docs/v2/lean-cli/api-reference/lean-report#02-Description
  • Update Supported File Types and Supported File Types to include CSS and HTML files
  • Update Options to include the new --css option

[AlexCatarino]

Reopen for discussion:

"Customize the Report HTML" should be on the Backtesting > Report page, e.g. H3 "Customize the Report HTML". The Backtesting > Results > Report H3 has a link to that page where users would see the customization option.

Backtesting > Report on Lean CLI could follow the same pattern (add a H3).

I think the "problem" is that Local Platform, since Reports only lives in Backtesting > Results > Report.