wip chart rectangle draw patch

This commit is contained in:
Sérgio Ramos 2016-11-09 17:07:34 +00:00
parent 5f630f30f4
commit 5293face9d

View File

@ -2,6 +2,67 @@ const buildArray = require('build-array');
const Chart = require('chart.js'); const Chart = require('chart.js');
const React = require('react'); 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({ module.exports = React.createClass({
ref: function(name) { ref: function(name) {
this._refs = this._refs || {}; this._refs = this._refs || {};
@ -27,6 +88,11 @@ module.exports = React.createClass({
this._chart = new Chart(this._refs.component, { this._chart = new Chart(this._refs.component, {
type: 'bar', type: 'bar',
options: { options: {
elements: {
rectangle: {
borderSkipped: ['bottom', 'left', 'right']
}
},
scales: { scales: {
xAxes: [{ xAxes: [{
display: false display: false