title = "Charts"
^L
{% extends templates/about.html %}
{% block page %}
<style>
    .chart-wrapper {
        width: 480px;
        float: left;
    }
    .chart-wrapper.newline {
        clear: left;
    }
    H2 {
        padding-top: 12pt;
    }
    .chart {
        position: relative;
        height: 100px;
    }
    .week {
        position: absolute;
        top: 0;
        left: 0;
        cursor: pointer;
    }
    .shaded {
        position: absolute;
        background: #2A8F79;
        bottom: 0;
    }
    .week SPAN, .x-axis {
        font: normal 7pt/7pt "Lucida Mono", Monaco, monospace;
    }
    .week SPAN.x-tick {
        position: absolute;
        bottom: -12pt;
        padding: 6pt 0 0 0.5pt;
        border: 1pt solid #614C3E;
        border-style: none none none solid;
        display: none;
        color: #614C3E;
    }
    .week SPAN.x-tick.on {
        border-color: #B2A196;
        color: #B2A196;
    }
    .week.flagged SPAN.x-tick.on,
    .week.hover SPAN.x-tick.on {
        border-color: #614C3E;
        color: #614C3E;
    }
    .week SPAN.y-label {
        display: none;
        position: absolute;
        top: -17pt;
        text-align: center;
        background: white;
        color: #614C3E;
        border: 2pt solid #614C3E;
        border-radius: 0 3pt 3pt 0;
        padding: 2pt 3pt;
    }
    .week.max SPAN.y-label {
        display: block;
    }
    .week.flagged SPAN.y-label,
    .week.flagged SPAN.x-tick,
    .week.hover SPAN.y-label,
    .week.hover SPAN.x-tick {
        display: block;
    }
    .eek.hover {
        background: red;
    }
    .x-axis {
        text-align: center;
        padding-top: 14pt;
    }
    .note {
        font-style: italic;
        font-size: 8pt;
        line-height: 10pt;
        padding-bottom: 12pt;
    }
</style>

<div class="chart-wrapper">
    <a name="users"></a>
    <h2>Users</h2>
    <p class="note">Anyone who's ever created an account on Gittip</p>
    <div class="chart" id="users-"></div>
    <div class="x-axis">weeks</div>
</div>

<div class="chart-wrapper">
    <a name="funders"></a>
    <h2>Funders</h2>
    <p class="note">People who gave money to other people within Gittip</p>
    <div class="chart" id="funders-"></div>
    <div class="x-axis">weeks</div>
</div>

<div class="chart-wrapper">
    <a name="gifts"></a>
    <h2>Gifts ($)</h2>
    <p class="note">Money transferred within Gittip</p>
    <div class="chart" id="volume-"></div>
    <div class="x-axis">weeks</div>
</div>

<div class="chart-wrapper">
    <a name="cumulative-gifts"></a>
    <h2>Cumulative Gifts ($)</h2>
    <p class="note">Money transferred within Gittip (cumulative)</p>
    <div class="chart" id="cumulative-"></div>
    <div class="x-axis">weeks</div>
</div>

<div class="chart-wrapper newline">
    <a name="charges"></a>
    <h2>Charges ($)</h2>
    <p class="note">Money moved into Gittip via credit card<br /> (minimum
    charge <a
        href="http://blog.gittip.com/post/28158537529/why-were-you-charged-10">upped</a>
    to $10 in week 8)</p>
    <div class="chart" id="charges-"></div>
    <div class="x-axis">weeks</div>
</div>

<div class="chart-wrapper">
    <a name="withdrawals"></a>
    <h2>Withdrawals ($)</h2>

    <p class="note">Money withdrawn from Gittip to a bank account<br />(feature <a
        href="http://blog.gittip.com/post/30116848405/with-payouts-gittip-is-minimally-viable">added</a>
    in week 12)</p>

    <div class="chart" id="withdrawals-"></div>
    <div class="x-axis">weeks</div>
</div>

<script>
    $(document).ready(function()
    {
        var Withdrawals = $('#withdrawals-');
        var Charges = $('#charges-');
        var Volume = $('#volume-');
        var Cumulative = $('#cumulative-');
        var Users = $('#users-');
        var Funders = $('#funders-');

        function mouseover()
        {
            var x = $(this).attr('x');
            var y = $(this).attr('y');

            $(this).addClass('hover');
        }

        function mouseout() 
        { 
            $(this).removeClass('hover') 
        }

        jQuery.get('/about/paydays.json', function(paydays)
        {
            var H = $('.chart').height();
            var W = $('.chart').width();
            var nweeks = paydays.length - 1; // don't show Gittip #0
            var w = Math.floor((W - 20) / nweeks);
            var W = w * nweeks;
            
            var payday = null;

            $('.n-weeks').text(nweeks);
            $('.chart').width(W);


            // Compute vertical scale.
            // =======================

            var maxUsers = 0;
            var maxFunders = 0;
            var maxGifts = 0;
            var maxCumulative = 0;
            var maxWithdrawals = 0;
            var maxCharges = 0;


            for (var i=0; i < nweeks; i++)
            {
                payday = paydays[i];
                maxUsers = Math.max( maxUsers
                                   , parseFloat(payday.nparticipants)
                                    );
                maxFunders = Math.max( maxFunders
                                     , parseFloat(payday.ntippers)
                                      );
                maxCumulative += parseFloat(payday.transfer_volume);
                maxGifts = Math.max( maxGifts
                                   , parseFloat(payday.transfer_volume)
                                    );
                maxWithdrawals = Math.max( maxWithdrawals
                                         , -parseFloat(payday.ach_volume)
                                          );
                maxCharges = Math.max( maxCharges
                                     , parseFloat(payday.charge_volume)
                                      );
            }

            scaleUsers = Math.ceil(maxUsers / 100) * 100;
            scaleFunders = Math.ceil(maxFunders / 100) * 100;
            scaleGifts = Math.ceil(maxGifts / 100) * 100;
            scaleCumulative = Math.ceil(maxCumulative / 100) * 100;
            scaleWithdrawals = Math.ceil(maxWithdrawals / 100) * 100;
            scaleCharges = Math.ceil(maxCharges / 100) * 100;


            // Draw weeks.
            // ===========

            function Week(n, max, N, y, title)
            {
                var x = nweeks - n;
                var create = function(x) { return document.createElement(x) };
                var week = $(create('div')).addClass('week');
                var shaded = $(create('div')).addClass('shaded');
                shaded.html( '<span class="y-label">' 
                           + parseInt(y) 
                           + '</span>'
                            );
                week.append(shaded);
                week.attr({x: x, y: y});

                var xTick = $(create('span')).addClass('x-tick');
                xTick.text(x);
                xTick.attr('title', title);
                if ((x % 5) === 0)
                    xTick.addClass('on');
                week.append(xTick);
                if (y === max)
                    week.addClass('flagged');

                var y = parseFloat(y);
                var h = Math.ceil(((y / N) * H));
                week.height(H);
                week.width(w);
                week.css({"left": w * (nweeks - n - 1)});
                shaded.css({"height": h});
                return week;
            }

            var cumulative = maxCumulative;
            for (var i=0; i < nweeks; i++)
            {
                var payday = paydays[i];
                var weekstamp = payday.ts_start.slice(0, 10);

                Users.append(Week( i
                                 , maxUsers
                                 , scaleUsers
                                 , payday.nparticipants
                                 , weekstamp
                                  ));
                Funders.append(Week( i
                                   , maxFunders
                                   , scaleFunders
                                   , payday.ntippers
                                   , weekstamp
                                    ));
                Volume.append(Week( i
                                  , maxGifts
                                  , scaleGifts
                                  , payday.transfer_volume
                                  , weekstamp
                                   ));
                Cumulative.append(Week( i
                                      , maxCumulative
                                      , scaleCumulative
                                      , cumulative
                                      , weekstamp
                                       ));
                cumulative -= parseFloat(payday.transfer_volume);
                Withdrawals.append(Week( i 
                                       , maxWithdrawals
                                       , scaleWithdrawals
                                       , -payday.ach_volume
                                       , weekstamp
                                        ));
                Charges.append(Week( i
                                   , maxCharges
                                   , scaleCharges
                                   , payday.charge_volume 
                                   , weekstamp
                                    ));
            }

            $('.week').width(w);
            $('.shaded').width(w);


            // Wire up behaviors.
            // ==================

            $('.week').click(function() 
            { 
                $(this).toggleClass('flagged');
                if ($(this).hasClass('flagged'))
                    $(this).removeClass('hover');
            });
            $('.week').mouseover(mouseover)
            $('.week').mouseout(mouseout)
        });
    });
</script>
{% end %}