123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176 |
- 'use strict';
- module.exports = function(Chart) {
- var globalOpts = Chart.defaults.global;
- globalOpts.elements.rectangle = {
- backgroundColor: globalOpts.defaultColor,
- borderWidth: 0,
- borderColor: globalOpts.defaultColor,
- borderSkipped: 'bottom'
- };
- function isVertical(bar) {
- return bar._view.width !== undefined;
- }
- /**
- * Helper function to get the bounds of the bar regardless of the orientation
- * @private
- * @param bar {Chart.Element.Rectangle} the bar
- * @return {Bounds} bounds of the bar
- */
- function getBarBounds(bar) {
- var vm = bar._view;
- var x1, x2, y1, y2;
- if (isVertical(bar)) {
- // vertical
- var halfWidth = vm.width / 2;
- x1 = vm.x - halfWidth;
- x2 = vm.x + halfWidth;
- y1 = Math.min(vm.y, vm.base);
- y2 = Math.max(vm.y, vm.base);
- } else {
- // horizontal bar
- var halfHeight = vm.height / 2;
- x1 = Math.min(vm.x, vm.base);
- x2 = Math.max(vm.x, vm.base);
- y1 = vm.y - halfHeight;
- y2 = vm.y + halfHeight;
- }
- return {
- left: x1,
- top: y1,
- right: x2,
- bottom: y2
- };
- }
- Chart.elements.Rectangle = Chart.Element.extend({
- 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;
- // Corner points, from bottom-left to bottom-right clockwise
- // | 1 2 |
- // | 0 3 |
- var corners = [
- [leftX, vm.base],
- [leftX, top],
- [rightX, top],
- [rightX, vm.base]
- ];
- // Find first (starting) corner with fallback to 'bottom'
- var borders = ['bottom', 'left', 'top', 'right'];
- var startCorner = borders.indexOf(vm.borderSkipped, 0);
- if (startCorner === -1) {
- startCorner = 0;
- }
- function cornerAt(index) {
- return corners[(startCorner + index) % 4];
- }
- // Draw rectangle from 'startCorner'
- var corner = cornerAt(0);
- ctx.moveTo(corner[0], corner[1]);
- for (var i = 1; i < 4; i++) {
- corner = cornerAt(i);
- ctx.lineTo(corner[0], corner[1]);
- }
- ctx.fill();
- if (vm.borderWidth) {
- ctx.stroke();
- }
- },
- height: function() {
- var vm = this._view;
- return vm.base - vm.y;
- },
- inRange: function(mouseX, mouseY) {
- var inRange = false;
- if (this._view) {
- var bounds = getBarBounds(this);
- inRange = mouseX >= bounds.left && mouseX <= bounds.right && mouseY >= bounds.top && mouseY <= bounds.bottom;
- }
- return inRange;
- },
- inLabelRange: function(mouseX, mouseY) {
- var me = this;
- if (!me._view) {
- return false;
- }
- var inRange = false;
- var bounds = getBarBounds(me);
- if (isVertical(me)) {
- inRange = mouseX >= bounds.left && mouseX <= bounds.right;
- } else {
- inRange = mouseY >= bounds.top && mouseY <= bounds.bottom;
- }
- return inRange;
- },
- inXRange: function(mouseX) {
- var bounds = getBarBounds(this);
- return mouseX >= bounds.left && mouseX <= bounds.right;
- },
- inYRange: function(mouseY) {
- var bounds = getBarBounds(this);
- return mouseY >= bounds.top && mouseY <= bounds.bottom;
- },
- getCenterPoint: function() {
- var vm = this._view;
- var x, y;
- if (isVertical(this)) {
- x = vm.x;
- y = (vm.y + vm.base) / 2;
- } else {
- x = (vm.x + vm.base) / 2;
- y = vm.y;
- }
- return {x: x, y: y};
- },
- getArea: function() {
- var vm = this._view;
- return vm.width * Math.abs(vm.y - vm.base);
- },
- tooltipPosition: function() {
- var vm = this._view;
- return {
- x: vm.x,
- y: vm.y
- };
- }
- });
- };
|