src/legacy/AgileEVM.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- Copyright (c) 2002-2009  Rally Software Development Corp. All rights reserved. -->
<head>
<meta name="Name" content="Mashup: Agile EVM"/>
<meta name="Version" content="2009.4.3"/>
<meta name="Vendor" content="Rally Software"/>
<link rel="stylesheet" type="text/css" href="/slm/css/rally/core.css" charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="/slm/css/slm.css" charset="utf-8"/>
<style type="text/css">
    body {
        font-family: tahoma, geneva, helvetica, arial, sans-serif;
        font-size: 11px;
        background: white;
    }

    th {
        font-family: tahoma, geneva, helvetica, arial, sans-serif;
        font-size: 11px;
        font-weight: bold;
    }

    .state-legend-green {
        background: #00aa00 none repeat scroll 0%;
        border: 1px solid #DDDDDD;
        color: #FFFFFF;
        cursor: default;
        float: left;
        height: 14px;
        line-height: 14px;
        margin-right: 1px;
        text-align: center;
        width: 30px;
    }

    .state-legend-red {
        background: #dd0000 none repeat scroll 0%;
        border: 1px solid #DDDDDD;
        color: #FFFFFF;
        cursor: default;
        float: left;
        height: 14px;
        line-height: 14px;
        margin-right: 1px;
        text-align: center;
        width: 30px;
    }

    .state-legend-yellow {
        background: #dddd00 none repeat scroll 0%;
        border: 1px solid #DDDDDD;
        color: #FFFFFF;
        cursor: default;
        float: left;
        height: 14px;
        line-height: 14px;
        margin-right: 1px;
        text-align: center;
        width: 30px;
    }
</style>

<script type="text/javascript" src="/slm/js-lib/dojo/1.3.1/dojo/dojo.js"></script>

<script type="text/javascript" src="/slm/js/slm.js"></script>

<script type="text/javascript" src="/slm/js/help.js"></script>

<script type="text/javascript" src="/slm/mashup/1.21/js/batch-toolkit.js"></script>

<script type="text/javascript" src="/slm/mashup/1.21/js/utilities.js"></script>

<script type="text/javascript" src="/slm/mashup/1.21/js/dropdown.js"></script>

<script type="text/javascript" src="/apps/1.33/lib/ejsc/EJSChart.js"></script>

<script type="text/javascript">
dojo.require("dojo.io.script");

// User needs to modify these 3 global vars if appropriate
var _billableRate = 50;
var _multiplier = 5;
var _baseVar = 5;

var batchtoolkit = null;
var releaseDropdown = null;

function computeSum(data, attributeName, filterAttributeName, filterAttributeValue) {
    var sum = 0.0;

    for (var i = 0; i < data.length; i++) {
        if (data[i][filterAttributeName] === filterAttributeValue) {
            sum += data[i][attributeName];
        } else if (typeof data[i][filterAttributeName] === 'undefined') {
            sum += data[i][attributeName];
        }
    }

    return sum;
}

//  TODO: Should we ignore weekends?
function getReleaseDays() {
    // The number of milliseconds in one day
    var dayInMilliseconds = 1000 * 60 * 60 * 24;

    // Convert both dates to milliseconds
    var timeboxStartDate = RALLY.Mashup.Utilities.convertIsoDateOnly(releaseDropdown.getSelectedStart()).getTime();
    var timeboxEndDate = RALLY.Mashup.Utilities.convertIsoDateOnly(releaseDropdown.getSelectedEnd()).getTime();

    // Calculate the difference in milliseconds
    var diffDates = Math.abs(timeboxEndDate - timeboxStartDate);

    // Convert back to days and return
    var numDays = Math.round(diffDates / dayInMilliseconds);
    return numDays;
}

function computeReleaseInfo() {
    var releaseInfo = [];
    var now = new Date();
    var releaseRemainingDays = 0;
    var percentDone = 1;
    var timeboxEnd = RALLY.Mashup.Utilities.convertIsoDateOnly(releaseDropdown.getSelectedEnd());

    var releaseDays = getReleaseDays() + 1;

    if (timeboxEnd > now) {
        releaseRemainingDays = RALLY.Mashup.Utilities.calcDateDiff(timeboxEnd, now) + 1;
        percentDone = (releaseDays - releaseRemainingDays) / releaseDays;
    }

    releaseInfo = {
        releaseDays: releaseDays,
        releaseRemainingDays: releaseRemainingDays,
        percentDone: percentDone
    };

    //console.log("Release Info:");
    //console.log(releaseInfo);
    return releaseInfo;
}

function roundNumber(num, dec) {
    return Math.round(num * Math.pow(10, dec)) / Math.pow(10, dec);
}

function formatCurrency(num) {
    num = num.toString().replace(/\$|\,/g, '');

    if (isNaN(num)) {
        num = "0";
    }
    sign = (num == (num = Math.abs(num)));
    num = Math.floor(num * 100 + 0.50000000001);
    cents = num % 100;
    num = Math.floor(num / 100).toString();

    if (cents < 10) {
        cents = "0" + cents;
    }

    for (var i = 0; i < Math.floor((num.length - (1 + i)) / 3); i++) {
        num = num.substring(0, num.length - (4 * i + 3)) + ',' +
                num.substring(num.length - (4 * i + 3));
    }

    return (((sign) ? '' : '-') + '$' + num + '.' + cents);
}

function formatPercent(amount) {
    // returns the amount in the percent format
    amount = Math.round(amount * 100);
    return amount;
}

function returnSignalFormatting(num) {
    // defaults
    var highVar = 0.95;
    var midVarHigh = 0.94;
    var midVarLow = 0.90;
    var lowVar = 0.89;
    var status = "";

    if (_baseVar === 10) {
        highVar = 0.90;
        midVarHigh = 0.89;
        midVarLow = 0.80;
        lowVar = 0.79;
    }

    if (num <= lowVar) {
        status = "red";
    } else if (num >= midVarLow && num <= midVarHigh) {
        status = "yellow";
    } else {
        status = "green";
    }

    return "<div class = \"state-legend-" + status + "\">" + num + "</div>";
}

function getGreaterNum(num1, num2) {
    if (num1 >= num2) {
        return num1;
    } else {
        return num2;
    }
}

function getMidNum(num) {
    return num / 2;
}

function getPercentVariance(num1, num2) {
    return num1 / num2;
}

function buildTableRow(label, data) {
    return "<tr><td>&nbsp;</td><td>" + label + "</td><td>&nbsp;</td><td>" + data + "</td></tr>";
}

function buildTableHeading(heading) {
    return "<tr><th colspan=4 align=left>" + heading + "</th></tr>";
}

function queryData() {
    var queryArr = [];
    var sumInfo = {};
    var releaseInfo = computeReleaseInfo();

    var BAC = 0, rawCost = 0, rawPV = 0;
    var APC = 0, rawEV = 0, CPI = 0;
    var rawEAC = 0, EAC = 0, SPI = 0;
    var EC = 0, eacOptimistic = 0, eacPessimistic = 0;
    var filter, filterRelease;

    RALLY.Mashup.Utilities.showWait("spinner", ["tableDiv1", "chartDiv1", "chartDiv2", "chartDiv3"]);

    function buildTable() {
        var results = '';
        results += "<table border=0><tr><td valign=top width=45%><table>";
        results += buildTableHeading("Release Data:");
        results += buildTableRow('Release Name', releaseDropdown.getSelectedName());
        results += buildTableRow('Release Start Date', releaseDropdown.getSelectedStart());
        results += buildTableRow('Release End Date', releaseDropdown.getSelectedEnd());
        results += buildTableRow('Points Scheduled (PS)', sumInfo.sumPlanEst);
        results += buildTableRow('Budget at Complete (BAC)', formatCurrency(BAC));
        results += "<tr><td>&nbsp;</td></tr>";

        results += buildTableHeading("Release Status:");
        results += buildTableRow('Number of Days Remaining in Release (DR)', releaseInfo.releaseRemainingDays);
        results += buildTableRow('Points Completed (PC)', sumInfo.sumAcceptedPlanEst);
        results += buildTableRow('Actual Cost (AC)', formatCurrency(rawCost));
        results += "<tr><td>&nbsp;</td></tr>";

        results += buildTableHeading("User Specified Inputs:");
        results += buildTableRow('<i>Billable Rate</i>', formatCurrency(_billableRate));
        results += buildTableRow('<i>Multiplier</i>', _multiplier);
        results += buildTableRow('<i>Base Variance</i>', _baseVar);
        results += "<tr><td>&nbsp;</td></tr></table>";

        results += "</td><td width=5%>&nbsp;</td><td valign=top width=45%>";
        results += "<table><tr><th colspan=4 align=left>Agile Earned Value Calculations:</th></tr>";
        results += buildTableRow('Expected Percent Complete (EPC = (RD - DR) / RD)', formatPercent(releaseInfo.percentDone) + "%");
        results += buildTableRow('Actual Percent Complete (APC = PC / PS)', formatPercent(APC) + "%");
        results += "<tr><td>&nbsp;</td></tr>";

        results += buildTableRow('Planned Value (PV = EPC * BAC)', formatCurrency(rawPV));
        results += buildTableRow('Earned Value (EV = APC * BAC)', formatCurrency(rawEV));

        if (SPI === 0) {
            results += buildTableRow('Schedule Performance Index (SPI = EV / PV)', 'Not Known at this time');
        } else {
            results += buildTableRow('Schedule Performance Index (SPI = EV / PV)', returnSignalFormatting(SPI, _baseVar));
        }
        results += "<tr><td>&nbsp;</td></tr>";

        if (CPI === 0) {
            results += buildTableRow('Cost Performance Index (CPI = EV / AC)', 'Not Known at this time');
        } else {
            results += buildTableRow('Cost Performance Index (CPI = EV / AC)', returnSignalFormatting(CPI, _baseVar));
        }

        if (rawEAC === 0) {
            results += buildTableRow('Estimate At Completion (EAC = AC + 1/CPI*(BAC-EV))', 'Not Known at this time');
        } else {
            results += buildTableRow('Estimate At Completion (EAC = AC + 1/CPI*(BAC-EV))', formatCurrency(rawEAC));
        }

        results += "</tr></table></table>";

        document.getElementById("tableDiv2").innerHTML = results;

        RALLY.Mashup.Utilities.hideWait("spinner", ["tableDiv1", "chartDiv1", "chartDiv2", "chartDiv3"]);
    }

    function getBarColor(num1, num2, reportVar) {
        var greaterNum = getGreaterNum(num1, num2);
        var midPointNum = getMidNum(greaterNum);
        var percentVariance = getPercentVariance(num2, num1);

        var barColor = "";
        var highVar = 0.95;
        var midVarHigh = 0.94;
        var midVarLow = 0.90;
        var lowVar = 0.89;

        // depending on whether the variance is better 1.0+ or 1.0-
        if (_baseVar === 10) {
            highVar = 0.90;
            midVarHigh = 0.89;
            midVarLow = 0.80;
            lowVar = 0.79;
        }

        if (reportVar === 1) {
            if (percentVariance > 1.0) {
                barColor = "rgb(221,0,0)";
            }
            else if (percentVariance >= highVar && percentVariance <= 1.0) {
                barColor = "rgb(221,221,0)";
            }
            else {
                barColor = "rgb(0,170,0)";
            }
        } else {
            if (percentVariance <= lowVar) {
                barColor = "rgb(221,0,0)";
            }
            else if (percentVariance >= midVarLow && percentVariance <= midVarHigh) {
                barColor = "rgb(221,221,0)";
            }
            else {
                barColor = "rgb(0,170,0)";
            }
        }
        return barColor;
    }

    function createChart(divId, barData1, barCaption1, barColor1, barData2, barCaption2, barColor2, currencySymbol, currencyAlign, maxYValue) {
        var chart = new EJSC.Chart(divId, {
            title:"",
            show_legend:false,
            lineOpacity: 5,
            axis_left: {caption: "",
                max_extreme: maxYValue,
                formatter: new EJSC.NumberFormatter({ currency_symbol: currencySymbol, currency_align: currencyAlign,
                    forced_decimals: 0,  variable_decimals: 0 })},
            axis_bottom: {caption: ""},
            show_legend: false
        });
        var mySeries = new EJSC.BarSeries(
                new EJSC.ArrayDataHandler([
                    [barCaption1,barData1],
                    [barCaption2,barData2 ]
                ]),
                {
                    useColorArray: true ,
                    defaultColors: [
                        barColor2,
                        barColor1
                    ]
                }
        );
        mySeries.x_axis_formatter =
                new EJSC.NumberFormatter({
                    forced_decimals: 2
                });
        mySeries.y_axis_formatter =
                new EJSC.NumberFormatter({
                    currency_align: currencyAlign,
                    forced_decimals: 2,
                    currency_symbol: currencySymbol,
                    currency_position: "inner",
                    negative_symbol: "()"
                });
        mySeries.opacity = 100;
        chart.addSeries(mySeries);
        document.getElementById(divId).width = 230;
        document.getElementById(divId).height = 230;
    }


    function buildCharts() {

        createChart("chartDiv1", rawPV, "PV", 'rgb(0,0,237)', rawEV, "EV", getBarColor(rawPV, rawEV, 0), "$", "left", Math.max(rawPV, rawEV));
        createChart("chartDiv2", BAC, "BAC", 'rgb(0,0,237)', rawEAC, "EAC", getBarColor(BAC, rawEAC, 1), "$", "left", Math.max(BAC, rawEAC));
        createChart("chartDiv3", releaseInfo.percentDone * 100, "EPC", 'rgb(0,0,237)', APC * 100, "APC", getBarColor(releaseInfo.percentDone, APC, 0), "%", "right", 100);

        RALLY.Mashup.Utilities.hideWait("spinner", ["tableDiv1", "chartDiv1", "chartDiv2", "chartDiv3"]);

        buildTable();
    }

    function calcEvm() {
        BAC = (sumInfo.sumPlanEst * _billableRate) * _multiplier;
        //console.log("Perecent Done: " + releaseInfo.percentDone);
        //console.log("Raw budget: " + BAC);

        rawCost = _billableRate * sumInfo.sumActuals;
        //console.log("Raw cost (billable rate x actuals): " + rawCost);
        rawPV = releaseInfo.percentDone * BAC;
        //console.log("PV: " + rawPV);

        APC = sumInfo.sumAcceptedPlanEst / sumInfo.sumPlanEst;
        //console.log("Sum Accepted: " + sumInfo.sumAcceptedPlanEst);
        //console.log("Sum Plan Est: " + sumInfo.sumPlanEst);
        //console.log("Sum Accepted/ Sum ALL Plan Est (APC): " + APC);
        rawEV = APC * BAC;
        //console.log("APC*BAC (EV): " + rawEV);

        if (rawPV !== 0) {
            SPI = roundNumber(rawEV / rawPV, 2);
        }
        //console.log("SPI: " + SPI);

        if (rawCost !== 0 && rawEV !== 0) {
            CPI = roundNumber(rawEV / rawCost, 2);
            rawEAC = rawCost + 1 / CPI * (BAC - rawEV);
        }
        //console.log("EV/rawCost: " + CPI);
        //console.log("rawEAC: " + rawEAC);
    }

    function sumResults(results) {
        sumInfo.sumActuals = computeSum(results.tasks, 'Actuals');
        sumInfo.sumPlanEst = computeSum(results.stories, 'PlanEstimate');
        sumInfo.sumAcceptedPlanEst = computeSum(results.stories, 'PlanEstimate', 'ScheduleState', 'Accepted');

        sumInfo.sumResources = computeSum(results.releases, 'Resources');

        if (sumInfo.sumResources === 0) {
            document.getElementById("spinner").innerHTML = "No resources specified on the release(s) in scope.";
            return;
        } else if (sumInfo.sumPlanEst === 0) {
            document.getElementById("spinner").innerHTML = "No plan estimates found on any of the scheduled stories.";
            return;
        }

        //console.log("Sum info: ");
        //console.log(sumInfo);

        calcEvm();
        buildCharts();
    }

    filter = "((( " + releaseDropdown.getStartFieldName() + " = " + releaseDropdown.getSelectedStart() +
            ") AND (" + releaseDropdown.getEndFieldName() + " = " + releaseDropdown.getSelectedEnd() +
            ")) AND (Name = " + '\"' + releaseDropdown.getSelectedName() + '\"))';
    filterRelease = "((( Release." + releaseDropdown.getStartFieldName() + " = " +
            releaseDropdown.getSelectedStart() +
            ") AND (Release." + releaseDropdown.getEndFieldName() + " = " + releaseDropdown.getSelectedEnd() +
            ")) AND (Release.Name = " + '\"' + releaseDropdown.getSelectedName() + '\"))';

    queryArr[0] = {
        key: 'releases',
        type: 'release',
        query: filter,
        fetch: 'Resources'
    };
    queryArr[1] = {
        key: 'tasks',
        type: 'task',
        query: filterRelease,
        fetch: 'Actuals'
    };
    queryArr[2] = {
        key: 'stories',
        type: 'hierarchicalRequirement',
        query: filterRelease,
        fetch: 'PlanEstimate,ScheduleState,Name'
    };

    batchToolkit.findAll(queryArr, sumResults);
}

function initPage() {
    RALLY.Mashup.Utilities.showHelpIcon(164);
    RALLY.Mashup.Utilities.showPrintButton();

    batchToolkit = new RALLY.Mashup.BatchToolkit('__WORKSPACE_OID__', '__PROJECT_OID__',
            '__PROJECT_SCOPING_UP__', '__PROJECT_SCOPING_DOWN__');

    releaseDropdown = new RALLY.Mashup.Dropdown(batchToolkit, RALLY.Mashup.RELEASE, 'releaseList',
            'releaseLabel', 'mu_test_releasedropdown123', {projectScopeUp: false, projectScopeDown: false});

    releaseDropdown.invoke(queryData);
}

dojo.addOnLoad(initPage);
</script>
<title>Agile EVM Mashup</title>
</head>
<body>
<div style="float: right" id="help">
</div>
<div style="float: left" id="title" class="titlebar">
    Agile EVM
</div>
<table>
    <tr>
        <td style="text-align: left; width: 99%;">
        <td style="text-align: right; width: 1%;">
            <img id="do" onmouseover="RALLY.Mashup.Utilities.showcbButton();" onmouseout="hidecbMenu('buttons',event);"
                 style="vertical-align: middle;" src="/slm/images/menu_actions.gif" alt=""/>

            <div style="position: relative; top: 5px" align="left">
                <div id="buttons" class="do-menu" style="left: 0px;" onmouseover="document.body.style.cursor='pointer';"
                     onmouseout="document.body.style.cursor='default';hidecbMenu('buttons',event);">
                    <a id="print" onclick="RALLY.Mashup.Utilities.printPage()">Print...</a>
                </div>
            </div>
        </td>
        </td>
    </tr>
</table>
<div style="clear: both">
</div>
<table>
    <tr>
        <td id="releaseLabel" class="lbl">
            Release
        </td>
        <td>
            <select id="releaseList">
            </select>
        </td>
        <td id="timeboxInfo" class="lbl">
        </td>
    </tr>
</table>
<div id="spinner">
</div>
<div id="tableDiv1">
    <table border="0">
        <tr>
            <th align="center">
                PV v. EV
            </th>
            <th align="center">
                BAC v. EAC
            </th>
            <th align="center">
                EPC v. APC
            </th>
        </tr>
        <tr>
            <td>
                <div id='chartDiv1' style="width:220px;height:210px">
                </div>
            </td>
            <td>
                <div id='chartDiv2' style="width:220px;height:210px">
                </div>
            </td>
            <td>
                <div id='chartDiv3' style="width:220px;height:210px">
                </div>
            </td>
        </tr>
    </table>
    <div id="tableDiv2">
    </div>
</div>
</body>
</html>