<commit_before><html>
    <head>
        <title>Daily : {{header_date}}</title>
        <link rel="stylesheet" href="/hotpi/style/main.css" type="text/css">
    </head>
    <body>
        <div id="navbar">
            <ul>
                <li><a href='/hotpi/_list/daily/stats?group_level=6&startkey=[{{prev_link_start}}]&endkey=[{{prev_link_end}}]'>previous</a></li>
                <li class="title">{{header_date}}</li>
                <li><a href='/hotpi/_list/daily/stats?group_level=6&startkey=[{{next_link_start}}]&endkey=[{{next_link_end}}]'>next</a></li>
                <li><a href="/hotpi/index.html">Main</a></li>
            </ul>
        </div>
        <div id="main">
            <div id="chart-area"></div>
            <div id="pressure-chart-area"></div>
            <div id="records">
                <ul id="records-text">
                    {{#records}}
                        <li><h4>Indoor</h4></li>
                        <li>High Temp: {{indoor_high}} at {{indoor_high_time}}</li>
                        <li>Low Temp: {{indoor_low}} at {{indoor_low_time}}</li>
                        <li><h4>Outdoor</h4></li>
                        <li>High Temp: {{outdoor_high}} at {{outdoor_high_time}}</li>
                        <li>Low Temp: {{outdoor_low}} at {{outdoor_low_time}}</li>
                        <br>
                        <li>High Pressure: {{pressure_high}} at {{pressure_high_time}}</li>
                        <li>Low Pressure: {{pressure_low}} at {{pressure_low_time}}</li>
                    {{/records}}
                </ul>
            </div>
        </div>
    </body>
    <script src="/hotpi/vendor/couchapp/jquery.js"></script>

    <!--Google Charts-->
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
        
        // Load the Visualization API and the piechart package.
        google.load('visualization', '1.0', {'packages':['corechart']});
        
        // Set a callback to run when the Google Visualization API is loaded.
        google.setOnLoadCallback(drawChart);
        
        // Callback that creates and populates a data table, 
        // instantiates the pie chart, passes in the data and
        // draws it.
        function drawChart() {
            // Create the data table.
            var data = new google.visualization.DataTable();
            data.addColumn('datetime', 'Time');
            data.addColumn('number', 'Indoor Temperature');
            data.addColumn('number', 'Outdoor Temperature');
            data.addColumn('number', 'Light Level');
            data.addRows([
                {{#temps}}
                    [new Date({{timestamp}}), {{indoor_temp}}, {{outdoor_temp}}, {{light}}],
                {{/temps}}
            null]);
            
            var pressure_data = new google.visualization.DataTable();
            pressure_data.addColumn('datetime', 'Time');
            pressure_data.addColumn('number', 'Pressure');
            pressure_data.addRows([
                {{#temps}}
                    [new Date({{timestamp}}), {{pressure}}],
                {{/temps}}
            null]);
            
        // Set chart options
            var options = {   title:'Daily Temps',
                            width:800,
                            height:600,
                            legend:{
                                position:'bottom'
                            },
                            vAxis:{
                                title: 'Deg F\n%Illum'
                            }
                        };
            
            var pressure_options = {
                            title: 'Barometric Pressure',
                            width:800,
                            height:600,
                            legend:{
                                position:'bottom'
                            },
                            vAxis:{
                                title: 'inHg',
                                minValue: 29,
                                maxValue: 32
                            }
                        };
        
            // Instantiate and draw our chart, passing in some options.
            var chart = new google.visualization.LineChart(document.getElementById('chart-area'));
            chart.draw(data, options);
            var pressure_chart = new google.visualization.LineChart(document.getElementById('pressure-chart-area'));
            pressure_chart.draw(pressure_data, pressure_options);
        }
    </script>

</html><commit_msg>added responsive Google charts to the daily view<commit_after><html>
    <head>
        <title>Daily : {{header_date}}</title>
        <link rel="stylesheet" href="/hotpi/style/main.css" type="text/css">
    </head>
    <body>
        <div id="navbar">
            <ul>
                <li><a href='/hotpi/_list/daily/stats?group_level=6&startkey=[{{prev_link_start}}]&endkey=[{{prev_link_end}}]'>previous</a></li>
                <li class="title">{{header_date}}</li>
                <li><a href='/hotpi/_list/daily/stats?group_level=6&startkey=[{{next_link_start}}]&endkey=[{{next_link_end}}]'>next</a></li>
                <li><a href="/hotpi/index.html">Main</a></li>
            </ul>
        </div>
        <div id="main">
            <div id="chart-area"></div>
            <div id="pressure-chart-area"></div>
            <div id="records">
                <ul id="records-text">
                    {{#records}}
                        <li><h4>Indoor</h4></li>
                        <li>High Temp: {{indoor_high}} at {{indoor_high_time}}</li>
                        <li>Low Temp: {{indoor_low}} at {{indoor_low_time}}</li>
                        <li><h4>Outdoor</h4></li>
                        <li>High Temp: {{outdoor_high}} at {{outdoor_high_time}}</li>
                        <li>Low Temp: {{outdoor_low}} at {{outdoor_low_time}}</li>
                        <br>
                        <li>High Pressure: {{pressure_high}} at {{pressure_high_time}}</li>
                        <li>Low Pressure: {{pressure_low}} at {{pressure_low_time}}</li>
                    {{/records}}
                </ul>
            </div>
        </div>
    </body>
    <script src="/hotpi/vendor/couchapp/jquery.js"></script>

    <!--Google Charts-->
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
        
        // Load the Visualization API and the piechart package.
        google.load('visualization', '1.0', {'packages':['corechart']});
        
        // Set a callback to run when the Google Visualization API is loaded.
        google.setOnLoadCallback(drawChart);
        
        // Callback that creates and populates a data table, 
        // instantiates the pie chart, passes in the data and
        // draws it.
        
        function drawChart() {
            // Create the data table.
            var data = new google.visualization.DataTable();
            data.addColumn('datetime', 'Time');
            data.addColumn('number', 'Indoor Temperature');
            data.addColumn('number', 'Outdoor Temperature');
            data.addColumn('number', 'Light Level');
            data.addRows([
                {{#temps}}
                    [new Date({{timestamp}}), {{indoor_temp}}, {{outdoor_temp}}, {{light}}],
                {{/temps}}
            null]);
            
            var pressure_data = new google.visualization.DataTable();
            pressure_data.addColumn('datetime', 'Time');
            pressure_data.addColumn('number', 'Pressure');
            pressure_data.addRows([
                {{#temps}}
                    [new Date({{timestamp}}), {{pressure}}],
                {{/temps}}
            null]);
            
        // Set chart options
            var options = {   title:'Daily Temps',
                              width:'100%',
//                            width:800,
                            height:400,
                            legend:{
                                position:'bottom'
                            },
                            vAxis:{
                                title: 'Deg F\n%Illum',
                                maxValue: 100
                            }
                        };
            
            var pressure_options = {
                            title: 'Barometric Pressure',
                            width:'100%',
//                            width:800,
                            height:400,
                            legend:{
                                position:'bottom'
                            },
                            vAxis:{
                                title: 'inHg',
//                                minValue: 29.0,
//                                maxValue: 31,
                                viewWindow:{
                                    min:29,
                                    max:31
                                }
                            }
                        };
        
            // Instantiate and draw our chart, passing in some options.
            var chart = new google.visualization.LineChart(document.getElementById('chart-area'));
            chart.draw(data, options);
            var pressure_chart = new google.visualization.LineChart(document.getElementById('pressure-chart-area'));
            pressure_chart.draw(pressure_data, pressure_options);

            // this script makes the charts responsive!
            (function($,sr){
              // debouncing function from <NAME>
              // http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/
              var debounce = function (func, threshold, execAsap) {
                  var timeout;
            
                  return function debounced () {
                      var obj = this, args = arguments;
                      function delayed () {
                          if (!execAsap)
                              func.apply(obj, args);
                          timeout = null;
                      };
            
                      if (timeout)
                          clearTimeout(timeout);
                      else if (execAsap)
                          func.apply(obj, args);
            
                      timeout = setTimeout(delayed, threshold || 100);
                  };
              }
              // smartresize 
              jQuery.fn[sr] = function(fn){  return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); };
            })(jQuery,'smartresize');

            // usage:
            $(window).smartresize(function(){
                chart.draw(data, options);
                pressure_chart.draw(pressure_data, pressure_options);
            });
        }
    </script>
</html>
{'fraction_non_alphanumeric': 0.13358953243663646, 'fraction_numerical': 0.006679476621831823, 'mean_word_length': 1.2247099531854264, 'pattern_counts': {'":': 0, '<': 136, '<?xml version=': 0, '>': 136, 'https://': 2, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3086125', 'n_tokens_mistral': 2885, 'n_tokens_neox': 2676, 'n_words': 530}