diff --git a/spikes/graphs-matrix/chartjs/client/chart.js b/spikes/graphs-matrix/chartjs/client/chart.js index 1e64842d..cae1536f 100644 --- a/spikes/graphs-matrix/chartjs/client/chart.js +++ b/spikes/graphs-matrix/chartjs/client/chart.js @@ -2,6 +2,67 @@ const buildArray = require('build-array'); const Chart = require('chart.js'); const React = require('react'); +// borderSkipped +// patch `.draw` to support `borderSkipped`: +// Chart.elements.Rectangle.prototype.draw = function() { +// var ctx = this._chart.ctx; +// var vm = this._view; +// +// var halfWidth = vm.width / 2, +// leftX = vm.x - halfWidth, +// rightX = vm.x + halfWidth, +// top = vm.base - (vm.base - vm.y), +// halfStroke = vm.borderWidth / 2; +// +// // Canvas doesn't allow us to stroke inside the width so we can +// // adjust the sizes to fit if we're setting a stroke on the line +// if (vm.borderWidth) { +// leftX += halfStroke; +// rightX -= halfStroke; +// top += halfStroke; +// } +// +// ctx.beginPath(); +// ctx.fillStyle = vm.backgroundColor; +// ctx.strokeStyle = vm.borderColor; +// ctx.lineWidth = vm.borderWidth; +// +// var borderSkipped = !Array.isArray(vm.borderSkipped) +// ? [vm.borderSkipped] +// : vm.borderSkipped; +// +// // Corner points, from bottom-left to bottom-right clockwise +// // | 1 2 | +// // | 0 3 | +// var corners = [ +// [leftX, vm.base, (borderSkipped.indexOf('bottom') >= 0), 'bottom'], +// [leftX, top, (borderSkipped.indexOf('left') >= 0), 'left'], +// [rightX, top, (borderSkipped.indexOf('top') >= 0), 'top'], +// [rightX, vm.base, (borderSkipped.indexOf('right') >= 0), 'right'] +// ]; +// +// function cornerAt(index) { +// return corners[index % 4]; +// } +// +// // Draw rectangle from 'startCorner' +// var corner = cornerAt(0); +// ctx.moveTo(corner[0], corner[1]); +// +// for (var i = 1; i < 5; i++) { +// corner = cornerAt(i); +// ctx.lineTo(corner[0], corner[1]); +// +// if (!corner[2]) { +// ctx.stroke(); +// } +// } +// +// console.log(corners); +// +// ctx.fill(); +// }; + module.exports = React.createClass({ ref: function(name) { this._refs = this._refs || {}; @@ -27,6 +88,11 @@ module.exports = React.createClass({ this._chart = new Chart(this._refs.component, { type: 'bar', options: { + elements: { + rectangle: { + borderSkipped: ['bottom', 'left', 'right'] + } + }, scales: { xAxes: [{ display: false