<!-- generated by QuantStats for Python -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Tearsheet (generated by QuantStats)</title>
    <meta name="robots" content="noindex, nofollow">
    <link rel="shortcut icon" href="https://qtpylib.io/favicon.ico" type="image/x-icon">
    <style>
        body {
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            margin: 30px
        }

        body,
        p,
        table,
        td,
        th {
            font: 13px/1.4 Arial, sans-serif
        }

        .container {
            max-width: 960px;
            margin: auto
        }

        img,
        svg {
            width: 100%
        }

        h1,
        h2,
        h3,
        h4 {
            font-weight: 400;
            margin: 0
        }

        h1 dt {
            display: inline;
            margin-left: 10px;
            font-size: 14px
        }

        h3 {
            margin-bottom: 10px;
            font-weight: 700
        }

        h4 {
            color: grey
        }

        h4 a {
            color: #09c;
            text-decoration: none
        }

        h4 a:hover {
            color: #069;
            text-decoration: underline
        }

        hr {
            margin: 25px 0 40px;
            height: 0;
            border: 0;
            border-top: 1px solid #ccc
        }

        #left {
            width: 620px;
            margin-right: 18px;
            margin-top: -1.2rem;
            float: left
        }

        #right {
            width: 320px;
            float: right
        }

        #left svg {
            margin: -1.5rem 0
        }

        #monthly_heatmap {
            overflow: hidden
        }

        #monthly_heatmap svg {
            margin: -1.5rem 0
        }

        table {
            margin: 0 0 40px;
            border: 0;
            border-spacing: 0;
            width: 100%
        }

        table td,
        table th {
            text-align: right;
            padding: 4px 5px 3px 5px
        }

        table th {
            text-align: right;
            padding: 6px 5px 5px 5px
        }

        table td:first-of-type,
        table th:first-of-type {
            text-align: left;
            padding-left: 2px
        }

        table td:last-of-type,
        table th:last-of-type {
            text-align: right;
            padding-right: 2px
        }

        td hr {
            margin: 5px 0
        }

        table th {
            font-weight: 400
        }

        table thead th {
            font-weight: 700;
            background: #eee
        }

        #eoy table td:after {
            content: "%"
        }

        #eoy table td:first-of-type:after,
        #eoy table td:last-of-type:after,
        #eoy table td:nth-of-type(4):after {
            content: ""
        }

        #eoy table th {
            text-align: right
        }

        #eoy table th:first-of-type {
            text-align: left
        }

        #eoy table td:after {
            content: "%"
        }

        #eoy table td:first-of-type:after,
        #eoy table td:last-of-type:after {
            content: ""
        }

        #ddinfo table td:nth-of-type(3):after {
            content: "%"
        }

        #ddinfo table th {
            text-align: right
        }

        #ddinfo table td:first-of-type,
        #ddinfo table td:nth-of-type(2),
        #ddinfo table th:first-of-type,
        #ddinfo table th:nth-of-type(2) {
            text-align: left
        }

        #ddinfo table td:nth-of-type(3):after {
            content: "%"
        }

        @media print {
            hr {
                margin: 25px 0
            }

            body {
                margin: 0
            }

            .container {
                max-width: 100%;
                margin: 0
            }

            #left {
                width: 55%;
                margin: 0
            }

            #left svg {
                margin: 0 0 -10%
            }

            #left svg:first-of-type {
                margin-top: -30%
            }

            #right {
                margin: 0;
                width: 45%
            }
        }


        /*  Headline Metrics */
        .metric-main {
            margin-bottom: 20px;
        }
        .metric-main h1 {
            font-size: 3em;
            font-weight: bold;
            color: #333;
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .metric-main .metric-title {
            font-size: 1.2em;
            color: #666;
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .metric-sub-container {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            row-gap: 10px;
            column-gap: 20px;
            justify-items: center;
            margin-top: 0px;
            margin-bottom: 20px;
        }
        .metric-sub {
            text-align: center;
        }
        .metric-sub h2 {
            font-size: 2em;
            margin: 0;
            color: #333;
        }
        .metric-sub .metric-title {
            font-size: 1em;
            color: #666;
            margin: 5px 0 0;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .info-icon {
            font-size: 0.8em;
            color: #999;
            margin-left: 5px;
            vertical-align: middle;
            cursor: pointer;
        }
    </style>
</head>

<body onload="save()">

    <div class="container">

        <h1>{{title}} <dt>{{date_range}}</dt>
        </h1>
        <h4>{{benchmark_title}} Generated by <a href="https://github.com/Lumiwealth/quantstats_lumi" target="quantstats">QuantStats</a> (v.
            {{v}})</h4>
        <hr>

        <div id="left">

            <div>
                {{returns}}
            </div>

            <div id="log_returns">{{log_returns}}</div>
            <div id="vol_returns">{{vol_returns}}</div>
            <div id="eoy_returns">{{eoy_returns}}</div>
            <div id="monthly_dist">{{monthly_dist}}</div>
            <div id="daily_returns">{{daily_returns}}</div>
            <div id="rolling_beta">{{rolling_beta}}</div>
            <div id="rolling_vol">{{rolling_vol}}</div>
            <div id="rolling_sharpe">{{rolling_sharpe}}</div>
            <div id="rolling_sortino">{{rolling_sortino}}</div>
            <div id="dd_periods">{{dd_periods}}</div>
            <div id="dd_plot">{{dd_plot}}</div>
            <div id="monthly_heatmap">{{monthly_heatmap}}</div>
            <div id="returns_dist">{{returns_dist}}</div>

            <!---  Add a disclaimer to the bottom of the page -->
            <div style="text-align:center;margin-top:20px;font-size:12px;color:grey">
                <p>
                    Disclaimer: This report is for informational purposes only and
                    should not be considered as investment advice. Past performance
                    is not indicative of future results.
                </p>
            </div>

        </div>

        <div id="right">
            <!---  Add the summary metrics -->
            <div class="metric-main">
                <div class="metric-title">Annual Return <span class="info-icon" title="Annual return is the yearly growth rate of the portfolio.">&#9432;</span></div>
                <h1>{{cagr}}</h1>
            </div>

            <div class="metric-sub-container">
                <div class="metric-sub">
                    <div class="metric-title">Total Return <span class="info-icon" title="Total return is the overall percentage increase or decrease of the portfolio value.">&#9432;</span></div>
                    <h2>{{total_return}}</h2>
                </div>
                <div class="metric-sub">
                    <div class="metric-title">Max Drawdown <span class="info-icon" title="Max drawdown is the largest single drop in portfolio value from peak to trough.">&#9432;</span></div>
                    <h2>{{max_drawdown}}</h2>
                </div>
                <div class="metric-sub">
                    <div class="metric-title">RoMaD <span class="info-icon" title="Return over Max Drawdown (RoMaD) measures return per unit of drawdown.">&#9432;</span></div>
                    <h2>{{romad}}</h2>
                </div>
                <div class="metric-sub">
                    <div class="metric-title">Longest DD Days <span class="info-icon" title="Longest drawdown days is the longest period the portfolio stayed below its peak value.">&#9432;</span></div>
                    <h2>{{longest_dd_days}}</h2>
                </div>
                <div class="metric-sub">
                    <div class="metric-title">Sharpe <span class="info-icon" title="Sharpe ratio measures risk-adjusted return by comparing its excess return to its volatility.">&#9432;</span></div>
                    <h2>{{sharpe}}</h2>
                </div>
                <div class="metric-sub">
                    <div class="metric-title">Sortino <span class="info-icon" title="Sortino ratio measures risk-adjusted return by comparing its excess return to its downside volatility.">&#9432;</span></div>
                    <h2>{{sortino}}</h2>
                </div>
            </div>

            <!---  Add parameters if available -->
            {{parameters_section}}

            <h3>Key Performance Metrics</h3>
            {{metrics}}

            <div id="eoy">{{eoy_title}}
                {{eoy_table}}</div>

            <div id="ddinfo">
                <h3>Worst 10 Drawdowns</h3>
                {{dd_info}}
            </div>

        </div>

    </div>
    <style>
        * {
            white-space: auto !important;
        }
    </style>
</body>

</html>
