Categorical Line chart with shadowed weekend bands

by duarteleao

HTML

<link rel="stylesheet" href="http://www.webdetails.pt/ctools/charts/lib/tipsy.css">
<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="cccExample" />

JavaScript

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

  var _dateFormat = pv.Format.date("%Y-%m-%d");

  new pvc.LineChart({
    canvas: "cccExample",
    width:  500,
    height: 400,
    title:  "Categorical Line chart with shadowed weekend bands",
    animate:    true,
    clickable:  true,
    selectable: true,
    hoverable:  true,
    legend:     true,
    legendPosition: 'right',
    axisGrid:   true,
    dotsVisible: true,
    extensionPoints: {
      baseAxisGrid_add: function() {
        var width;
        var axisHeight;

        // Shadow Panel
        return new pv.Panel()
          .zOrder(-50)
          .visible(function(scene) {
          // NOTE: There's an issue here
          // with the indexes and the last scene,
          // the reason why the next index test
          // doesn't seem to make much sense.
          // This will be fixed. In the mean-time...
          // Always hide the last band cause 
          // there's an extra grid-line at the end.
          if(this.index === scene.parent.childNodes.length) {
            return false; 
          }

          var dateText  = scene.vars.tick.value;
          var date      = _dateFormat.parse(dateText);
          var dayOfWeek = date.getDay();

          // Sunday or Saturday
          return dayOfWeek === 0 || dayOfWeek === 6;
        })
        .width(function() { 
          if(width == null) {
            var scale = this.getContext().chart.axes.base.scale;
            width = scale.range().step;
          }
          return width; 
        })
        .height(function() { 
          if(axisHeight == null) {
            axisHeight = this.getContext()
               .chart.axesPanels.base._layoutInfo.axisSize;
          }

          return axisHeight + this.parent.height();
        })
        .fillStyle('rgba(0,0,255, 0.1)');
      },
      baseAxisLabel_textAngle:    -Math.PI/2,
      baseAxisLabel_textAlign:    'right',
      baseAxisLabel_textBaseline:...