src/plugins/grid.js

   1 /**
   2  * @license
   3  * Copyright 2012 Dan Vanderkam (danvdk@gmail.com)
   4  * MIT-licensed (http://opensource.org/licenses/MIT)
   5  */
   6 /*global Dygraph:false */
   7
   8 /*
   9
  10 Current bits of jankiness:
  11 - Direct layout access
  12 - Direct area access
  13
  14 */
  15
  16 "use strict";
  17
  18 /**
  19  * Draws the gridlines, i.e. the gray horizontal & vertical lines running the
  20  * length of the chart.
  21  *
  22  * @constructor
  23  */
  24 var grid = function() {
  25 };
  26
  27 grid.prototype.toString = function() {
  28   return "Gridline Plugin";
  29 };
  30
  31 grid.prototype.activate = function(g) {
  32   return {
  33     willDrawChart: this.willDrawChart
  34   };
  35 };
  36
  37 grid.prototype.willDrawChart = function(e) {
  38   // Draw the new X/Y grid. Lines appear crisper when pixels are rounded to
  39   // half-integers. This prevents them from drawing in two rows/cols.
  40   var g = e.dygraph;
  41   var ctx = e.drawingContext;
  42   var layout = g.layout_;
  43   var area = e.dygraph.plotter_.area;
  44
  45   function halfUp(x)  { return Math.round(x) + 0.5; }
  46   function halfDown(y){ return Math.round(y) - 0.5; }
  47
  48   var x, y, i, ticks;
  49   if (g.getOptionForAxis('drawGrid', 'y')) {
  50     var axes = ["y", "y2"];
  51     var strokeStyles = [], lineWidths = [], drawGrid = [], stroking = [], strokePattern = [];
  52     for (var i = 0; i < axes.length; i++) {
  53       drawGrid[i] = g.getOptionForAxis('drawGrid', axes[i]);
  54       if (drawGrid[i]) {
  55         strokeStyles[i] = g.getOptionForAxis('gridLineColor', axes[i]);
  56         lineWidths[i] = g.getOptionForAxis('gridLineWidth', axes[i]);
  57         strokePattern[i] = g.getOptionForAxis('gridLinePattern', axes[i]);
  58         stroking[i] = strokePattern[i] && (strokePattern[i].length >= 2);
  59       }
  60     }
  61     ticks = layout.yticks;
  62     ctx.save();
  63     // draw grids for the different y axes
  64     ticks.forEach(tick => {
  65       if (!tick.has_tick) return;
  66       var axis = tick.axis;
  67       if (drawGrid[axis]) {
  68         ctx.save();
  69         if (stroking[axis]) {
  70           if (ctx.setLineDash) ctx.setLineDash(strokePattern[axis]);
  71         }
  72         ctx.strokeStyle = strokeStyles[axis];
  73         ctx.lineWidth = lineWidths[axis];
  74
  75         x = halfUp(area.x);
  76         y = halfDown(area.y + tick.pos * area.h);
  77         ctx.beginPath();
  78         ctx.moveTo(x, y);
  79         ctx.lineTo(x + area.w, y);
  80         ctx.stroke();
  81
  82         ctx.restore();
  83       }
  84     });
  85     ctx.restore();
  86   }
  87
  88   // draw grid for x axis
  89   if (g.getOptionForAxis('drawGrid', 'x')) {
  90     ticks = layout.xticks;
  91     ctx.save();
  92     var strokePattern = g.getOptionForAxis('gridLinePattern', 'x');
  93     var stroking = strokePattern && (strokePattern.length >= 2);
  94     if (stroking) {
  95       if (ctx.setLineDash) ctx.setLineDash(strokePattern);
  96     }
  97     ctx.strokeStyle = g.getOptionForAxis('gridLineColor', 'x');
  98     ctx.lineWidth = g.getOptionForAxis('gridLineWidth', 'x');
  99     ticks.forEach(tick => {
 100       if (!tick.has_tick) return;
 101       x = halfUp(area.x + tick.pos * area.w);
 102       y = halfDown(area.y + area.h);
 103       ctx.beginPath();
 104       ctx.moveTo(x, y);
 105       ctx.lineTo(x, area.y);
 106       ctx.closePath();
 107       ctx.stroke();
 108     });
 109     if (stroking) {
 110       if (ctx.setLineDash) ctx.setLineDash([]);
 111     }
 112     ctx.restore();
 113   }
 114 };
 115
 116 grid.prototype.destroy = function() {
 117 };
 118
 119 export default grid;