aqi_monitor/web/templates/graphs.html

{% extends "layout.html" %}
{% block content %}
    <div class="full-width">
        <div class="content">
            <h1>Graphs</h1>
            <p>All the graphs and table on this page will get recreated every night with the newest values.</p>
        </div>
        <div class="content-subtitle">
            <h2>Last three days</h2>
        </div>
        <div class="content graph">
            <div class="graph-item">
                <p>Three days ago</p>
                <a href="/static/dyn/day-3.png" data-lightbox="graph">
                    <img src="/static/dyn/day-3.png" alt="Three days ago graph">
                </a>
            </div>
            <div class="graph-item">
                <p>Two days ago</p>
                <a href="/static/dyn/day-2.png" data-lightbox="graph">
                    <img src="/static/dyn/day-2.png" alt="Two days ago graph">
                </a>
            </div>
            <div class="graph-item">
                <p>Yesterday</p>
                <a href="/static/dyn/day-1.png" data-lightbox="graph">
                    <img src="/static/dyn/day-1.png" alt="Yesterday graph">
                </a>
            </div>
        </div>
        <div class="content">
            <hr class="col_border">
        </div>
        <div class="content">
            <h2>Particle Matter sizes</h2>
            <p class="block-text"><b>There is no healthy level of pollution.</b> Particle matter (PM) are defined in two different sizes: PM 2.5 which represents particle sizes smaller than 2.5 µm or less than 1/20th of the diameter of a human hair and PM 10 which represents particle sizer smaller than 10 µm or 1/5th of the diameter of a human hair.</p>
            <p class="block-text">The <a href="https://www.who.int/news-room/fact-sheets/detail/ambient-(outdoor)-air-quality-and-health" target="_blank">WHO</a> is providing more details on their website regarding particle matter and their health implications. On <a href="https://en.wikipedia.org/wiki/Particulates" target="blank">Wikipedia</a> there are some interesting links to studies for further reading.</p>
        </div>
        <div class="content graph">
            <div class="graph-item">
                <a href="/static/dyn/pm25.png" data-lightbox="pm">
                    <img src="/static/dyn/pm25.png" alt="pm 2.5 value graph">
                </a>
            </div>
            <div class="graph-item">
                <h3>PM 2.5</h3>
                <p class="block-text">Particle matter sizes smaller than 2.5&#xB5;m are the most problematic as these particles will find their way through the lungs into the bloodstream.</p>
                <p class="block-text">The WHO Air quality guideline values set a 25 µg/m³ 24-hour average as an upper level threshold. In the 10 days overview you can see:</p>
                <p class="block-text">Green: Daily average exposure below 25 &#xB5;g/m&sup3;<br>
                Red: Daily average exposure above 25 &#xB5;g/m&sup3;</p>
            </div>
        </div>
        <div class="content graph">
            <div class="graph-item">
                <a href="/static/dyn/pm10.png" data-lightbox="pm">
                    <img src="/static/dyn/pm10.png" alt="pm 10 value graph">
                </a>
            </div>
            <div class="graph-item">
                <h3>PM 10</h3>
                <p class="block-text">The threshold for the daily average PM 10 exposure is set to 50 &#xB5;g/m&sup3; by the WHO. Particles this size can penetrate and lodge deep inside the lungs but are too big to enter the blood stream. For this reason the threshold is higher.</p>
                <p class="block-text">In the 10 days overview you can see:</p>
                <p class="block-text">Green: Daily average exposure below 50 &#xB5;g/m&sup3;<br>
                Red: Daily average exposure above 50 &#xB5;g/m&sup3;</p>
            </div>
        </div>
        <div class="content">
            <hr class="col_border">
        </div>
        <div class="content-subtitle">
            <h2>Hour by Hour</h2>
        </div>
        <div class="content graph">
            <div class="graph-item">
                <a href="/static/dyn/hours.png" data-lightbox="hours">
                    <img src="/static/dyn/hours.png" alt="hour by hour graph">
                </a>
            </div>
            <div class="graph-item">
                <h3>Hourly AQI average</h3>
                <p class="block-text">The AQI value can change a lot during the day. This can depend on the wind, cooking on fire or just another additional source of pollution nearby.</p>
                <p class="block-text">In this chart you can see the average AQI for each hour. This data is based on the last three days. This data can help to visualize which hours in the past three days have been better or worse on average.</p>
            </div>
        </div>
        <div class="content">
            <hr class="col_border">
        </div>
        <div class="content">
            <h2>Compared to last year</h2>
            <p>This year's daily average AQI values from last 10 days compared to corresponding values from last year.</p>
        </div>
        <div class="content graph">
            <div class="graph-item">
                {{ table }}
            </div>
            <div class="graph-item">
                <a href="/static/dyn/year-graph.png" data-lightbox="year">
                    <img src="/static/dyn/year-graph.png" alt="year comparison graph">
                </a>
            </div>
        </div>
    </div>
{% endblock content %}