Focus and Context charts (Temporal base axis)

by duarteleao

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.19/require.min.js"></script>
<script src="//webdetails.github.io/ccc/charts/lib/amd/require.config.js"></script>
<script src="//webdetails.github.io/ccc/charts/lib/q01-01.js"></script>
<div id="cccExample1"></div>
<br />
<h1>Focus Window</h1>
<div id="logWin">&nbsp;</div>
<br />
<h1>Selection</h1>
<div id="logSel">&nbsp;</div>

CSS

h1 {
    font: bold 14px sans-serif;
}

#logSel, #logWin {
    font: 12px sans-serif;
}

JavaScript

require([
  "ccc/pvc", 
  "ccc/def", 
  "ccc/protovis"
], function(pvc, def, pv) {

    var masterChart = new pvc.LineChart({
        canvas: "cccExample1",
        width:   600,
        height:  200,    
        title:   "Context Chart",

        timeSeries: true,

        animate: false,
        selectable: true,
        selectionMode: 'focuswindow',
        clearSelectionMode: 'none',

        //focusWindowBaseBegin: new Date(2011, 6, 1), // 2011-07-01
        //focusWindowBaseEnd:   new Date(2011, 7, 1), // 2011-08-01
        //focusWindowBaseLength: pvc.time.intervals.w,

        //focusWindowBaseResizable: false,
        //focusWindowBaseMovable:   false,

        // Round dates to Day
        //focusWindowBaseConstraint: function(oper) {
        //    oper.value = pvc.time.withoutTime(oper.value);
        //},

        // Round dates to Weeks.
        // Force starting/ending on a Monday.
        // Force minimum length to a week
        focusWindowBaseConstraint: function(oper) {
            // ISSUE: CDF-???
            // Detect initialization bug, when Begin/End are unspecified
            if(oper.length <= 1 && oper.value < new Date(0)) {
                var len = (oper.max - oper.min) / 4;
                var middle = ((+oper.max) + (+oper.min))/2;
                oper.value  = new Date(middle - len / 2);
                oper.length = len;
            }

            // Time namespace
            var tim  = pvc.time;
            var twd  = tim.weekday;
            var minLen = tim.intervals.w;
            var swd  = 1; // Start of Week Day is Monday
            var sign = oper.target === 'end' ? -1 : +1;

            var t0   = +oper.value;

            // Round to day and then to closest/previous weekday
            var t = +twd.closestOrSelf(tim.withoutTime(oper.value), swd);

            // Don't let value go below the minimum value in the view
            oper.min = twd.previousOrSelf(
                         tim.withoutTime(oper.minView),...