var gradient;

var datasets = ['circle', 'cross', 'crossRot', 'dash', 'line', 'rect', 'rectRounded', 'rectRot', 'star', 'triangle'].map(function(style, y) {
  return {
    pointStyle: style,
    data: Array.apply(null, Array(17)).map(function(v, x) {
      return {x: x, y: 10 - y};
    })
  };
});

var angles = Array.apply(null, Array(17)).map(function(v, i) {
  return -180 + i * 22.5;
});

module.exports = {
  config: {
    type: 'bubble',
    data: {
      datasets: datasets
    },
    options: {
      responsive: false,
      elements: {
        point: {
          rotation: angles,
          radius: 10,
          backgroundColor: function(context) {
            if (!gradient) {
              gradient = context.chart.ctx.createLinearGradient(0, 0, 512, 256);
              gradient.addColorStop(0, '#ff0000');
              gradient.addColorStop(1, '#0000ff');
            }
            return gradient;
          },
          borderColor: '#cccccc'
        }
      },
      layout: {
        padding: 20
      },
      scales: {
        x: {display: false},
        y: {display: false}
      }
    }
  },
  options: {
    canvas: {
      height: 256,
      width: 512
    }
  }
};
