index.html

<link rel="stylesheet" href="style.css" type="text/css">

<script src="all_sensors_cache.js"></script>
<script src="fetch.js"></script>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script>
    async function meter() {
        var sensor_id = document.getElementById('gasInput').value
        //var dis = document.getElementById('display')

        try {
            let done1 = fetchDataAndPlotDaily(sensor_id)
            let done2 = fetchDataAndPlotWeekly(sensor_id)

            // wait until these are done so we can show your individual data
            // while we wait for the whole neighborhood to load
            let dailyData = await done1
            await done2
            let first48 = getSelectReadings(dailyData, 300)

            //this toggles the visibility of the text overview when fucntion fires
            var overview = document.getElementById('overview');
            overview.style.display = "inline";

            //calculates data to compare

            var dustHood = await getDataForNeighborhood(sensor_id);
            //console.log("#&#&#&#&hood next:");
            //console.dir(dustHood);

            entireHood = wholeNeighborhood(dustHood);

            console.log("the 2ns from hood");
            console.log(entireHood[3].time);
            console.log(entireHood[3].reading);

            // neighborhoodPlot(entireHood);
            leaderboardPlot(dustHood)

            var hoodAverage = compareNeighbors(entireHood);
            var userinputAverage = userAverage(first48);
            console.log("this is the user invputaverage" + userinputAverage);
            console.log("hoodave " + hoodAverage);
            var usageRelative = ((userinputAverage / (userinputAverage - hoodAverage)) * 100).toFixed(1);

            function determineSign(val) {
                sign = val > 0 ? "above" : "below";
                return sign;
            }
            var usageRelativeSign = determineSign(usageRelative);
            //http://www.enstarnaturalgas.com/wp-content/uploads/2014/09/Attachment-E-Tariff-Sheets-262-4-.pdf
            var averageInsert = document.getElementById('ban3');
            averageInsert.innerHTML = usageRelative + " % " + usageRelativeSign;

            var lastReadingValue = returnLastReading(first48);
             var costValue =  calculateCost(lastReadingValue);
            document.getElementById('ban1').innerHTML = lastReadingValue.toLocaleString()+" BTUs";
            document.getElementById('ban2').innerHTML =  "$"+costValue;

        }
        catch (err) {
            console.log(err)
        }
    }

    function getSelectReadings(data, numReadings) {
        //
        let selectTime = [];
        let selectReadings = [];
        let selectObj = {};

        //grab most recent numReadings readings (* 2 for hours)
        const selectData = data.readings.slice(0, numReadings);
        selectData.forEach(function (val) {
            selectTime.push(val[0]);
            selectReadings.push(val[1]);

        })

        //create object
        selectObj.time = selectTime;
        selectObj.reading = selectReadings;
        //console.log("the object"+JSON.stringify(selectObj));
        return selectObj;

    }


    function compareNeighbors(arr) {

        var averageArr = [];
        var dailyAverage;

        //loop through the neighborhood array, removing those w/ fewer than 50 readings

        for (i = 0; i < arr.length; i++) {

            if (arr[i].reading.length > 6) {

                //console.log ("this should be a readings array "+arr[i].reading)
                //push the readings to avarge into a new array
                var averageArr = averageArr.concat(arr[i].reading);
            }
        }
        //console.log("the average big arr" + averageArr);
        //console.dir(averageArr);

        //average the new array
        var dailySum = averageArr.reduce(function (a, b) { return a + b; });
        var dailyAverage = dailySum / averageArr.length;

        //console.log("the dailiy ageravge"+dailyAverage);
        return dailyAverage;

    }

    function userAverage(arr) {

        var useraverageArr = [];
        var userdailyAverage;

        // if (arr.reading.length >50) {

        //console.log ("this should be a readings array "+arr[i].reading)
        //push the readings to avarge into a new array
        var useraverageArr = useraverageArr.concat(arr.reading);
        // }

        //console.log("the average big arr" + useraverageArr);
        //console.dir(useraverageArr);
        //console.log("the length of the input reading" + arr.reading.length);
        //console.log("the length fo the arret is " + useraverageArr.length);
        // var arrTest = (arr.reading === useraverageArr);
       // console.log("the arr test" + arrTest);

        //average the new array
        var userdailySum = useraverageArr.reduce(function (a, b) { return a + b; });
        var userdailyAverage = userdailySum / useraverageArr.length;

        //console.log("the dailiy ageravge"+dailyAverage);
        return userdailyAverage;



    }

    function calculateCost(sensor_id) {

        //$0.13361 per hundred cubic feet (Ccf)
    }

    //take neighborhood data convert for the plotting.


    function wholeNeighborhood(hood) {
        //
        let neighborTime = [];
        let neighborReading = [];
        let neighborObj = {};

        let aggregatedneighborArray = [];

        //grab most recent numReadings readings (* 2 for hours)

        hood.forEach(
            function (val) {
                val.readings.forEach(
                    function (num) {
                        neighborTime.push(num[0]);
                        neighborReading.push(num[1]);

                    })
                neighborObj.time = neighborTime;
                neighborObj.reading = neighborReading;
                neighborReading = [];
                neighborTime = [];
                {

                    aggregatedneighborArray.push(neighborObj);
                    neighborObj = {};
                }

            })
        //console.log("the object"+JSON.stringify(selectObj));
        return aggregatedneighborArray;

    }


    function returnLastReading (obj) {
        var userLength = obj.reading.length;
        var lastReading = (obj.reading[userLength -1]).toFixed(2);
        console.log("the last reading"+ lastReading);
        return lastReading;
    }


    function calculateCost (val) {

        // BTU first to CCF
        //

       var valDaily = (val*24)/103000;
       var cost = (valDaily * .13).toFixed(2);
        console.log("the cost"+ cost);
       return cost;

    }



    // plotting function in which an object is passed of time series and readings


    function plotTime(timeSeries) {

        var timesTrace = {
            x: timeSeries.time,
            y: timeSeries.reading,
            mode: 'lines'
        };

        var timeTraceData = [timesTrace];

        var timeLayout = {
            title: 'Your gas usage over past day',
            font: {
                family: 'Open Sans',
                color: '#000000',
                size: 18
            }
        };

        Plotly.newPlot('dailyUsage', timeTraceData, timeLayout);


    }


    ///Neighborhood large plot

    function neighborhoodPlot(hoodSet) {

        hoodData = []

        hoodSet.forEach(neighbor => {
            hoodData.push({
                x: neighbor.time,
                y: neighbor.reading,
                mode: 'lines',
            })
        })

        var hoodLayout = {
            title: 'Gas Usage Among Your Neighbors',
            font: {
                family: "Open-Sans",
                color: '#000000',
                size: 18
            }
        };

        Plotly.newPlot('neighborhoodTime', hoodData, hoodLayout);


    }

    async function fetchDataAndPlotWeekly(sensor_id) {
        let weeklyData = await getDataForSensorId(sensor_id)
        let timeSeries = getSelectReadings(weeklyData, 999);

        var timesTrace = {
            x: timeSeries.time,
            y: timeSeries.reading,
            mode: 'lines'
        };

        var timeTraceData = [timesTrace];

        var timeLayout = {
            title: 'Your gas usage over past week',
            font: {
                family: 'Open Sans',
                color: '#000000',
                size: 18
            }
        };

        Plotly.newPlot('weeklyUsage', timeTraceData, timeLayout);

        return weeklyData
    }

    async function fetchDataAndPlotDaily(sensor_id) {
        let dailyData = await getDailyDataForSensorId(sensor_id)
        let timeSeries = getSelectReadings(dailyData, 999);

        var timesTrace = {
            x: timeSeries.time,
            y: timeSeries.reading,
            mode: 'lines'
        };

        var timeTraceData = [timesTrace];

        var timeLayout = {
            title: 'Your gas usage over past day',
            font: {
                family: 'Open Sans',
                color: '#000000',
                size: 18
            }
        };

        Plotly.newPlot('dailyUsage', timeTraceData, timeLayout);

        return dailyData
    }

    function leaderboardPlot(hoodSet) {
        hoodData = {
            x: [],
            y: [],
            type: 'bar',
        }

        hoodSet.forEach((neighbor, index) => {
            if (!neighbor.readings.length) return

            let total = neighbor.readings.reduce((x,y) => x?x[1]:0 + y?(y[1]*24):0)
            hoodData.y.push(total)
            hoodData.x.push('anon ' + index)
        })

        var hoodLayout = {
            title: 'Weekly Gas Usage Among Your Neighbors',
            font: {
                family: "Open-Sans",
                color: '#000000',
                size: 18
            }
        };

        Plotly.newPlot('neighborhoodTime', [hoodData], hoodLayout);
    }
</script>

    <div id="googleMap" style="width:100%;height:300px;"></div>

<script src="energyMapper.js"></script>

<script src="https://maps.googleapis.com/maps/api/js?callback=myMap"></script>


<div id="main">
    <img src="flame.png">

    <h1 id='gas'>
        Keep it cool</h1>
    <h1>
        Enter your gas meter ID number to see<br /> how you match up with your neighbors:
    </h1>


    <input id="gasInput" type="text" value="44634440">
    <button onclick="meter()">Go</button>

    <pre id="display"></pre>

    <div id="overview">


    <div id="dailyUsage"></div>
    <div id="weeklyUsage"></div>


    <div class="container">

    <div id="div1"><p id="ban1"><p id="banexplain">Latest hourly reading</div>
    <div id="div2"><p id="ban2"><p  id="banexplain">Gas cost over 24-hour period</div>
    <div id="div3"><p id="ban3"><p id="banexplain">Compared to your neighborhood</div>

    </div>


    <p id="things"><strong>Three things you can do to cut your gas usage:</strong><br /><br />
        *Close your shades at night<br />*Lower your thermostat <br /> *Let in bright sun during the day. <br /></p>
    </div>



    <div id="neighborhoodTime"></div>

</div>