archive-gh-me/Chart.js
1
0
Fork 0
mirror of https://github.com/chartjs/Chart.js.git synced 2025-12-08 20:36:08 +00:00
Code Issues Projects Releases Wiki Activity

Hover macros, type defaults, and cleanup

Browse Source
This commit is contained in:
Tanner Linsley 2015-06-15 16:18:56 -06:00
parent 051ef8178e
commit 872c9d5ebb
12 changed files with 110 additions and 719 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
src/charts/chart.bar.js
View File

@ -1,75 +0,0 @@
(function() {
"use strict";
var root = this,
Chart = root.Chart,
helpers = Chart.helpers;
Chart.defaults.bar = {
hover: {
mode: "label"
},
scales: {
xAxes: [{
type: "category",
categorySpacing: 10,
spacing: 1,
// grid line settings
gridLines: {
offsetGridLines: true,
},
}],
yAxes: [{
type: "linear",
}],
},
};
// Chart.Type.extend({
// name: "Bar",
// defaults: defaultConfig,
// initialize: function() {
// this.elementController = new Chart.RectangularElementController(this);
// this.canvasController = new Chart.RectangularCanvasController(this, this.elementController);
// //Create a new bar for each piece of data
// helpers.each(this.data.datasets, function(dataset, datasetIndex) {
// helpers.each(dataset.data, function(dataPoint, index) {
// this.elementController.addRectangle(dataset, datasetIndex, index);
// }, this);
// // The bar chart only supports a single x axis because the x axis is always a category axis
// dataset.xAxisID = this.options.scales.xAxes[0].id;
// if (!dataset.yAxisID) {
// dataset.yAxisID = this.options.scales.yAxes[0].id;
// }
// }, this);
// this.canvasController.initialize();
// },
// draw: function(ease) {
// var easingDecimal = ease || 1;
// this.clear();
// // Draw all the scales
// helpers.each(this.scales, function(scale) {
// scale.draw(this.chartArea);
// }, this);
// //Draw all the bars for each dataset
// this.eachElement(function(bar, index, datasetIndex) {
// bar.transition(easingDecimal).draw();
// }, this);
// // Finally draw the tooltip
// this.tooltip.transition(easingDecimal).draw();
// },
// });
}).call(this);

85
src/charts/chart.line.js
View File

@ -1,85 +0,0 @@
(function() {
"use strict";
var root = this,
Chart = root.Chart,
helpers = Chart.helpers;
var defaultConfig = {
hover: {
mode: "label"
},
scales: {
xAxes: [{
type: "category",
}],
yAxes: [{
type: "linear",
}],
},
};
Chart.Type.extend({
name: "Line",
defaults: defaultConfig,
initialize: function() {
this.elementController = new Chart.RectangularElementController(this);
this.canvasController = new Chart.RectangularCanvasController(this, this.elementController);
// Create a new line and its points for each dataset and piece of data
helpers.each(this.data.datasets, function(dataset, datasetIndex) {
this.elementController.addLine(dataset, datasetIndex);
helpers.each(dataset.data, function(dataPoint, index) {
this.elementController.addPoint(dataset, datasetIndex, index);
}, this);
// The line chart onlty supports a single x axis because the x axis is always a dataset axis
if (!dataset.xAxisID) {
dataset.xAxisID = this.options.scales.xAxes[0].id;
}
if (!dataset.yAxisID) {
dataset.yAxisID = this.options.scales.yAxes[0].id;
}
}, this);
this.canvasController.initialize();
},
draw: function(ease) {
var easingDecimal = ease || 1;
this.clear();
// Draw all the scales
helpers.each(this.scales, function(scale) {
scale.draw(this.chartArea);
}, this);
// reverse for-loop for proper stacking
for (var i = this.data.datasets.length - 1; i >= 0; i--) {
var dataset = this.data.datasets[i];
// Transition Point Locations
helpers.each(dataset.metaData, function(point, index) {
point.transition(easingDecimal);
}, this);
// Transition and Draw the line
dataset.metaDataset.transition(easingDecimal).draw();
// Draw the points
helpers.each(dataset.metaData, function(point) {
point.draw();
});
}
// Finally draw the tooltip
this.tooltip.transition(easingDecimal).draw();
},
});
}).call(this);

331
src/controllers/controller.bar.js
View File

@ -6,6 +6,28 @@
Chart = root.Chart,
helpers = Chart.helpers;
Chart.defaults.bar = {
hover: {
mode: "label"
},
scales: {
xAxes: [{
type: "category",
categorySpacing: 10,
spacing: 1,
// grid line settings
gridLines: {
offsetGridLines: true,
},
}],
yAxes: [{
type: "linear",
}],
},
};
Chart.controllers.bar = function(chart, datasetIndex) {
this.initialize.call(this, chart, datasetIndex);
};
@ -108,310 +130,19 @@
setHoverStyle: function(rectangle) {
var dataset = this.chart.data.datasets[rectangle._datasetIndex];
var index = rectangle._index;
// eachLine: function eachLine(callback) {
// helpers.each(this.chart.data.datasets, function(dataset, datasetIndex) {
// if (dataset.metaDataset && dataset.metaDataset instanceof Chart.Line) {
// callback.call(this, dataset, datasetIndex);
// }
// }, this);
// },
// addLine: function addLine(dataset, datasetIndex) {
// if (dataset) {
// dataset.metaDataset = new Chart.Line({
// _chart: this.chart.chart,
// _datasetIndex: datasetIndex,
// _points: dataset.metaData,
// });
// }
// },
// addPoint: function addPoint(dataset, datasetIndex, index) {
// if (dataset) {
// dataset.metaData = dataset.metaData || new Array(this.chart.data.datasets[datasetIndex].data.length);
// if (index < dataset.metaData.length) {
// dataset.metaData[index] = new Chart.Point({
// _datasetIndex: datasetIndex,
// _index: index,
// _chart: this.chart.chart,
// _model: {
// x: 0,
// y: 0,
// },
// });
// }
// }
// },
// resetElements: function resetElements() {
// helpers.each(this.chart.data.datasets, function(dataset, datasetIndex) {
// // All elements must be the same type for the given dataset so we are fine to check just the first one
// if (dataset.metaData[0] instanceof Chart.Point) {
// // Have points. Update all of them
// this.resetDatasetPoints(dataset, datasetIndex);
// } else if (dataset.metaData[0] instanceof Chart.Rectangle) {
// // Have rectangles (bars)
// this.resetDatasetRectangles(dataset, datasetIndex);
// }
// }, this);
// },
// resetDatasetPoints: function resetDatasetPoints(dataset, datasetIndex) {
// helpers.each(dataset.metaData, function(point, index) {
// var xScale = this.getScaleForId(this.chart.data.datasets[datasetIndex].xAxisID);
// var yScale = this.getScaleForId(this.chart.data.datasets[datasetIndex].yAxisID);
// var yScalePoint;
// if (yScale.min < 0 && yScale.max < 0) {
// // all less than 0. use the top
// yScalePoint = yScale.getPixelForValue(yScale.max);
// } else if (yScale.min > 0 && yScale.max > 0) {
// yScalePoint = yScale.getPixelForValue(yScale.min);
// } else {
// yScalePoint = yScale.getPixelForValue(0);
// }
// helpers.extend(point, {
// // Utility
// _chart: this.chart.chart, //WTF
// _xScale: xScale,
// _yScale: yScale,
// _datasetIndex: datasetIndex,
// _index: index,
// // Desired view properties
// _model: {
// x: xScale.getPointPixelForValue(this.chart.data.datasets[datasetIndex].data[index], index, datasetIndex),
// y: yScalePoint,
// },
// });
// this.updatePointElementAppearance(point, datasetIndex, index);
// }, this);
// this.updateBezierControlPoints(dataset);
// },
// resetDatasetRectangles: function resetDatasetRectangles(dataset, datasetIndex) {
// },
// resetElementAppearance: function(element, datasetIndex, index) {
// if (element instanceof Chart.Point) {
// this.updatePointElementAppearance(element, datasetIndex, index);
// } else if (element instanceof Chart.Rectangle) {
// this.updateRectangleElementAppearance(element, datasetIndex, index);
// }
// },
// updateElements: function updateElements() {
// // Update the lines
// this.updateLines();
// helpers.each(this.chart.data.datasets, function(dataset, datasetIndex) {
// // All elements must be the same type for the given dataset so we are fine to check just the first one
// if (dataset.metaData[0] instanceof Chart.Point) {
// // Have points. Update all of them
// this.updatePoints(dataset, datasetIndex);
// } else if (dataset.metaData[0] instanceof Chart.Rectangle) {
// // Have rectangles (bars)
// this.updateRectangles(dataset, datasetIndex);
// }
// }, this);
// },
// updateLines: function updateLines() {
// this.eachLine(function(dataset, datasetIndex) {
// var yScale = this.getScaleForId(dataset.yAxisID);
// var scaleBase;
// if (yScale.min < 0 && yScale.max < 0) {
// scaleBase = yScale.getPixelForValue(yScale.max);
// } else if (yScale.min > 0 && yScale.max > 0) {
// scaleBase = yScale.getPixelForValue(yScale.min);
// } else {
// scaleBase = yScale.getPixelForValue(0);
// }
// helpers.extend(dataset.metaDataset, {
// // Utility
// _scale: yScale,
// _datasetIndex: datasetIndex,
// // Data
// _children: dataset.metaData,
// // Model
// _model: {
// // Appearance
// tension: dataset.metaDataset.custom && dataset.metaDataset.custom.tension ? dataset.metaDataset.custom.tension : (dataset.tension || this.chart.options.elements.line.tension),
// backgroundColor: dataset.metaDataset.custom && dataset.metaDataset.custom.backgroundColor ? dataset.metaDataset.custom.backgroundColor : (dataset.backgroundColor || this.chart.options.elements.line.backgroundColor),
// borderWidth: dataset.metaDataset.custom && dataset.metaDataset.custom.borderWidth ? dataset.metaDataset.custom.borderWidth : (dataset.borderWidth || this.chart.options.elements.line.borderWidth),
// borderColor: dataset.metaDataset.custom && dataset.metaDataset.custom.borderColor ? dataset.metaDataset.custom.borderColor : (dataset.borderColor || this.chart.options.elements.line.borderColor),
// fill: dataset.metaDataset.custom && dataset.metaDataset.custom.fill ? dataset.metaDataset.custom.fill : (dataset.fill !== undefined ? dataset.fill : this.chart.options.elements.line.fill),
// skipNull: dataset.skipNull !== undefined ? dataset.skipNull : this.chart.options.elements.line.skipNull,
// drawNull: dataset.drawNull !== undefined ? dataset.drawNull : this.chart.options.elements.line.drawNull,
// // Scale
// scaleTop: yScale.top,
// scaleBottom: yScale.bottom,
// scaleZero: scaleBase,
// },
// });
// dataset.metaDataset.pivot();
// });
// },
// updatePoints: function updatePoints(dataset, datasetIndex) {
// helpers.each(dataset.metaData, function(point, index) {
// var xScale = this.getScaleForId(this.chart.data.datasets[datasetIndex].xAxisID);
// var yScale = this.getScaleForId(this.chart.data.datasets[datasetIndex].yAxisID);
// helpers.extend(point, {
// // Utility
// _chart: this.chart.chart,
// _xScale: xScale,
// _yScale: yScale,
// _datasetIndex: datasetIndex,
// _index: index,
// // Desired view properties
// _model: {
// x: xScale.getPointPixelForValue(this.chart.data.datasets[datasetIndex].data[index], index, datasetIndex),
// y: yScale.getPointPixelForValue(this.chart.data.datasets[datasetIndex].data[index], index, datasetIndex),
// },
// });
// this.updatePointElementAppearance(point, datasetIndex, index);
// }, this);
// this.updateBezierControlPoints(dataset);
// },
// updatePointElementAppearance: function updatePointElementAppearance(point, datasetIndex, index) {
// helpers.extend(point._model, {
// // Appearance
// tension: point.custom && point.custom.tension ? point.custom.tension : this.chart.options.elements.line.tension,
// radius: point.custom && point.custom.radius ? point.custom.radius : helpers.getValueAtIndexOrDefault(this.chart.data.datasets[datasetIndex].radius, index, this.chart.options.elements.point.radius),
// backgroundColor: point.custom && point.custom.backgroundColor ? point.custom.backgroundColor : helpers.getValueAtIndexOrDefault(this.chart.data.datasets[datasetIndex].pointBackgroundColor, index, this.chart.options.elements.point.backgroundColor),
// borderColor: point.custom && point.custom.borderColor ? point.custom.borderColor : helpers.getValueAtIndexOrDefault(this.chart.data.datasets[datasetIndex].pointBorderColor, index, this.chart.options.elements.point.borderColor),
// borderWidth: point.custom && point.custom.borderWidth ? point.custom.borderWidth : helpers.getValueAtIndexOrDefault(this.chart.data.datasets[datasetIndex].pointBorderWidth, index, this.chart.options.elements.point.borderWidth),
// skip: this.chart.data.datasets[datasetIndex].data[index] === null,
// // Tooltip
// hitRadius: point.custom && point.custom.hitRadius ? point.custom.hitRadius : helpers.getValueAtIndexOrDefault(this.chart.data.datasets[datasetIndex].hitRadius, index, this.chart.options.elements.point.hitRadius),
// });
// },
// setElementHoverStyle: function setElementHoverStyle(element) {
// if (element instanceof Chart.Point) {
// this.setPointHoverStyle(element);
// } else if (element instanceof Chart.Rectangle) {
// this.setRectangleHoverStyle(element);
// }
// },
// setPointHoverStyle: function setPointHoverStyle(point) {
// var dataset = this.chart.data.datasets[point._datasetIndex];
// var index = point._index;
// point._model.radius = point.custom && point.custom.radius ? point.custom.radius : helpers.getValueAtIndexOrDefault(dataset.pointHoverRadius, index, this.chart.options.elements.point.hoverRadius);
// point._model.backgroundColor = point.custom && point.custom.hoverBackgroundColor ? point.custom.hoverBackgroundColor : helpers.getValueAtIndexOrDefault(dataset.pointHoverBackgroundColor, index, helpers.color(point._model.backgroundColor).saturate(0.5).darken(0.1).rgbString());
// point._model.borderColor = point.custom && point.custom.hoverBorderColor ? point.custom.hoverBorderColor : helpers.getValueAtIndexOrDefault(dataset.pointHoverBorderColor, index, helpers.color(point._model.borderColor).saturate(0.5).darken(0.1).rgbString());
// point._model.borderWidth = point.custom && point.custom.hoverBorderWidth ? point.custom.hoverBorderWidth : helpers.getValueAtIndexOrDefault(dataset.pointBorderWidth, index, point._model.borderWidth);
// },
// setHoverStyle: function(rectangle) {
// var dataset = this.chart.data.datasets[rectangle._datasetIndex];
// var index = rectangle._index;
// rectangle._model.backgroundColor = rectangle.custom && rectangle.custom.hoverBackgroundColor ? rectangle.custom.hoverBackgroundColor : helpers.getValueAtIndexOrDefault(dataset.hoverBackgroundColor, index, helpers.color(rectangle._model.backgroundColor).saturate(0.5).darken(0.1).rgbString());
// rectangle._model.borderColor = rectangle.custom && rectangle.custom.hoverBorderColor ? rectangle.custom.hoverBorderColor : helpers.getValueAtIndexOrDefault(dataset.hoverBorderColor, index, helpers.color(rectangle._model.borderColor).saturate(0.5).darken(0.1).rgbString());
// rectangle._model.borderWidth = rectangle.custom && rectangle.custom.hoverBorderWidth ? rectangle.custom.hoverBorderWidth : helpers.getValueAtIndexOrDefault(dataset.borderWidth, index, rectangle._model.borderWidth);
// },
// updateBezierControlPoints: function updateBezierControlPoints(dataset) {
// // Update control points for the bezier curve
// helpers.each(dataset.metaData, function(point, index) {
// var controlPoints = helpers.splineCurve(
// this.previousPoint(dataset.metaData, index)._model,
// point._model,
// this.nextPoint(dataset.metaData, index)._model,
// point._model.tension
// );
// point._model.controlPointPreviousX = controlPoints.previous.x;
// point._model.controlPointNextX = controlPoints.next.x;
// // Prevent the bezier going outside of the bounds of the graph
// // Cap puter bezier handles to the upper/lower scale bounds
// if (controlPoints.next.y > this.chart.chartArea.bottom) {
// point._model.controlPointNextY = this.chart.chartArea.bottom;
// } else if (controlPoints.next.y < this.chart.chartArea.top) {
// point._model.controlPointNextY = this.chart.chartArea.top;
// } else {
// point._model.controlPointNextY = controlPoints.next.y;
// }
// // Cap inner bezier handles to the upper/lower scale bounds
// if (controlPoints.previous.y > this.chart.chartArea.bottom) {
// point._model.controlPointPreviousY = this.chart.chartArea.bottom;
// } else if (controlPoints.previous.y < this.chart.chartArea.top) {
// point._model.controlPointPreviousY = this.chart.chartArea.top;
// } else {
// point._model.controlPointPreviousY = controlPoints.previous.y;
// }
// // Now pivot the point for animation
// point.pivot();
// }, this);
// },
getElementsAtEvent: function(e) {
var elementsArray = [],
eventPosition = helpers.getRelativePosition(e),
datasetIterator = function(dataset) {
elementsArray.push(dataset.metaData[elementIndex]);
},
elementIndex;
for (var datasetIndex = 0; datasetIndex < this.chart.data.datasets.length; datasetIndex++) {
for (elementIndex = 0; elementIndex < this.chart.data.datasets[datasetIndex].metaData.length; elementIndex++) {
if (this.chart.data.datasets[datasetIndex].metaData[elementIndex].inGroupRange(eventPosition.x, eventPosition.y)) {
helpers.each(this.chart.data.datasets, datasetIterator);
}
}
}
return elementsArray.length ? elementsArray : [];
rectangle._model.backgroundColor = rectangle.custom && rectangle.custom.hoverBackgroundColor ? rectangle.custom.hoverBackgroundColor : helpers.getValueAtIndexOrDefault(dataset.hoverBackgroundColor, index, helpers.color(rectangle._model.backgroundColor).saturate(0.5).darken(0.1).rgbString());
rectangle._model.borderColor = rectangle.custom && rectangle.custom.hoverBorderColor ? rectangle.custom.hoverBorderColor : helpers.getValueAtIndexOrDefault(dataset.hoverBorderColor, index, helpers.color(rectangle._model.borderColor).saturate(0.5).darken(0.1).rgbString());
rectangle._model.borderWidth = rectangle.custom && rectangle.custom.hoverBorderWidth ? rectangle.custom.hoverBorderWidth : helpers.getValueAtIndexOrDefault(dataset.borderWidth, index, rectangle._model.borderWidth);
},
// // Get the single element that was clicked on
// // @return : An object containing the dataset index and element index of the matching element. Also contains the rectangle that was drawn
getElementAtEvent: function(e) {
var element = [];
var eventPosition = helpers.getRelativePosition(e);
removeHoverStyle: function(rectangle) {
// TODO
}
for (var datasetIndex = 0; datasetIndex < this.chart.data.datasets.length; ++datasetIndex) {
for (var elementIndex = 0; elementIndex < this.chart.data.datasets[datasetIndex].metaData.length; ++elementIndex) {
if (this.chart.data.datasets[datasetIndex].metaData[elementIndex].inRange(eventPosition.x, eventPosition.y)) {
element.push(this.chart.data.datasets[datasetIndex].metaData[elementIndex]);
return element;
}
}
}
return [];
},
});

4
src/charts/chart.doughnut.js → src/controllers/controller.doughnut.js
View File

@ -1,6 +1,8 @@
(function() {
"use strict";
return;
var root = this,
Chart = root.Chart,
//Cache a local reference to Chart.helpers
@ -347,7 +349,7 @@
var location = helpers.getRelativePosition(e);
this.eachElement(function(slice, index) {
if (slice.inGroupRange(location.x, location.y)) {
if (slice.inLabelRange(location.x, location.y)) {
elements.push(slice);
}
}, this);

200
src/controllers/controller.line.js
View File

@ -6,6 +6,22 @@
Chart = root.Chart,
helpers = Chart.helpers;
Chart.defaults.line = {
hover: {
mode: "label"
},
scales: {
xAxes: [{
type: "category",
}],
yAxes: [{
type: "linear",
}],
},
};
Chart.controllers.line = function(chart, datasetIndex) {
this.initialize.call(this, chart, datasetIndex);
};
@ -187,183 +203,21 @@
});
},
setHoverStyle: function(point) {
// Point
var dataset = this.chart.data.datasets[point._datasetIndex];
var index = point._index;
// eachLine: function eachLine(callback) {
// helpers.each(this.chart.data.datasets, function(dataset, datasetIndex) {
// if (dataset.metaDataset && dataset.metaDataset instanceof Chart.Line) {
// callback.call(this, dataset, datasetIndex);
// }
// }, this);
// },
// addPoint: function addPoint(dataset, datasetIndex, index) {
// if (dataset) {
// dataset.metaData = dataset.metaData || new Array(this.chart.data.datasets[datasetIndex].data.length);
// if (index < dataset.metaData.length) {
// dataset.metaData[index] = new Chart.Point({
// _datasetIndex: datasetIndex,
// _index: index,
// _chart: this.chart.chart,
// _model: {
// x: 0,
// y: 0,
// },
// });
// }
// }
// },
// resetElements: function resetElements() {
// helpers.each(this.chart.data.datasets, function(dataset, datasetIndex) {
// // All elements must be the same type for the given dataset so we are fine to check just the first one
// if (dataset.metaData[0] instanceof Chart.Point) {
// // Have points. Update all of them
// this.resetDatasetPoints(dataset, datasetIndex);
// } else if (dataset.metaData[0] instanceof Chart.Rectangle) {
// // Have rectangles (lines)
// this.resetDatasetRectangles(dataset, datasetIndex);
// }
// }, this);
// },
// resetDatasetPoints: function resetDatasetPoints(dataset, datasetIndex) {
// helpers.each(dataset.metaData, function(point, index) {
// var xScale = this.getScaleForId(this.chart.data.datasets[datasetIndex].xAxisID);
// var yScale = this.getScaleForId(this.chart.data.datasets[datasetIndex].yAxisID);
// var yScalePoint;
// if (yScale.min < 0 && yScale.max < 0) {
// // all less than 0. use the top
// yScalePoint = yScale.getPixelForValue(yScale.max);
// } else if (yScale.min > 0 && yScale.max > 0) {
// yScalePoint = yScale.getPixelForValue(yScale.min);
// } else {
// yScalePoint = yScale.getPixelForValue(0);
// }
// helpers.extend(point, {
// // Utility
// _chart: this.chart.chart, //WTF
// _xScale: xScale,
// _yScale: yScale,
// _datasetIndex: datasetIndex,
// _index: index,
// // Desired view properties
// _model: {
// x: xScale.getPointPixelForValue(this.chart.data.datasets[datasetIndex].data[index], index, datasetIndex),
// y: yScalePoint,
// },
// });
// this.updatePointElementAppearance(point, datasetIndex, index);
// }, this);
// this.updateBezierControlPoints(dataset);
// },
// resetDatasetRectangles: function resetDatasetRectangles(dataset, datasetIndex) {
// },
// resetElementAppearance: function(element, datasetIndex, index) {
// if (element instanceof Chart.Point) {
// this.updatePointElementAppearance(element, datasetIndex, index);
// } else if (element instanceof Chart.Rectangle) {
// this.updateRectangleElementAppearance(element, datasetIndex, index);
// }
// },
// updateElements: function updateElements() {
// // Update the lines
// this.updateLines();
// helpers.each(this.chart.data.datasets, function(dataset, datasetIndex) {
// // All elements must be the same type for the given dataset so we are fine to check just the first one
// if (dataset.metaData[0] instanceof Chart.Point) {
// // Have points. Update all of them
// this.updatePoints(dataset, datasetIndex);
// } else if (dataset.metaData[0] instanceof Chart.Rectangle) {
// // Have rectangles (lines)
// this.updateRectangles(dataset, datasetIndex);
// }
// }, this);
// },
// setElementHoverStyle: function setElementHoverStyle(element) {
// if (element instanceof Chart.Point) {
// this.setPointHoverStyle(element);
// } else if (element instanceof Chart.Rectangle) {
// this.setRectangleHoverStyle(element);
// }
// },
// setPointHoverStyle: function setPointHoverStyle(point) {
// var dataset = this.chart.data.datasets[point._datasetIndex];
// var index = point._index;
// point._model.radius = point.custom && point.custom.radius ? point.custom.radius : helpers.getValueAtIndexOrDefault(dataset.pointHoverRadius, index, this.chart.options.elements.point.hoverRadius);
// point._model.backgroundColor = point.custom && point.custom.hoverBackgroundColor ? point.custom.hoverBackgroundColor : helpers.getValueAtIndexOrDefault(dataset.pointHoverBackgroundColor, index, helpers.color(point._model.backgroundColor).saturate(0.5).darken(0.1).rgbString());
// point._model.borderColor = point.custom && point.custom.hoverBorderColor ? point.custom.hoverBorderColor : helpers.getValueAtIndexOrDefault(dataset.pointHoverBorderColor, index, helpers.color(point._model.borderColor).saturate(0.5).darken(0.1).rgbString());
// point._model.borderWidth = point.custom && point.custom.hoverBorderWidth ? point.custom.hoverBorderWidth : helpers.getValueAtIndexOrDefault(dataset.pointBorderWidth, index, point._model.borderWidth);
// },
// setHoverStyle: function(rectangle) {
// var dataset = this.chart.data.datasets[rectangle._datasetIndex];
// var index = rectangle._index;
// rectangle._model.backgroundColor = rectangle.custom && rectangle.custom.hoverBackgroundColor ? rectangle.custom.hoverBackgroundColor : helpers.getValueAtIndexOrDefault(dataset.hoverBackgroundColor, index, helpers.color(rectangle._model.backgroundColor).saturate(0.5).darken(0.1).rgbString());
// rectangle._model.borderColor = rectangle.custom && rectangle.custom.hoverBorderColor ? rectangle.custom.hoverBorderColor : helpers.getValueAtIndexOrDefault(dataset.hoverBorderColor, index, helpers.color(rectangle._model.borderColor).saturate(0.5).darken(0.1).rgbString());
// rectangle._model.borderWidth = rectangle.custom && rectangle.custom.hoverBorderWidth ? rectangle.custom.hoverBorderWidth : helpers.getValueAtIndexOrDefault(dataset.borderWidth, index, rectangle._model.borderWidth);
// },
getElementsAtEvent: function(e) {
var elementsArray = [],
eventPosition = helpers.getRelativePosition(e),
datasetIterator = function(dataset) {
elementsArray.push(dataset.metaData[elementIndex]);
},
elementIndex;
for (var datasetIndex = 0; datasetIndex < this.chart.data.datasets.length; datasetIndex++) {
for (elementIndex = 0; elementIndex < this.chart.data.datasets[datasetIndex].metaData.length; elementIndex++) {
if (this.chart.data.datasets[datasetIndex].metaData[elementIndex].inGroupRange(eventPosition.x, eventPosition.y)) {
helpers.each(this.chart.data.datasets, datasetIterator);
}
}
}
return elementsArray.length ? elementsArray : [];
point._model.radius = point.custom && point.custom.radius ? point.custom.radius : helpers.getValueAtIndexOrDefault(dataset.pointHoverRadius, index, this.chart.options.elements.point.hoverRadius);
point._model.backgroundColor = point.custom && point.custom.hoverBackgroundColor ? point.custom.hoverBackgroundColor : helpers.getValueAtIndexOrDefault(dataset.pointHoverBackgroundColor, index, helpers.color(point._model.backgroundColor).saturate(0.5).darken(0.1).rgbString());
point._model.borderColor = point.custom && point.custom.hoverBorderColor ? point.custom.hoverBorderColor : helpers.getValueAtIndexOrDefault(dataset.pointHoverBorderColor, index, helpers.color(point._model.borderColor).saturate(0.5).darken(0.1).rgbString());
point._model.borderWidth = point.custom && point.custom.hoverBorderWidth ? point.custom.hoverBorderWidth : helpers.getValueAtIndexOrDefault(dataset.pointBorderWidth, index, point._model.borderWidth);
},
// // Get the single element that was clicked on
// // @return : An object containing the dataset index and element index of the matching element. Also contains the rectangle that was drawn
getElementAtEvent: function(e) {
var element = [];
var eventPosition = helpers.getRelativePosition(e);
removeHoverStyle: function(point) {
// TODO
}
for (var datasetIndex = 0; datasetIndex < this.chart.data.datasets.length; ++datasetIndex) {
for (var elementIndex = 0; elementIndex < this.chart.data.datasets[datasetIndex].metaData.length; ++elementIndex) {
if (this.chart.data.datasets[datasetIndex].metaData[elementIndex].inRange(eventPosition.x, eventPosition.y)) {
element.push(this.chart.data.datasets[datasetIndex].metaData[elementIndex]);
return element;
}
}
}
return [];
},
});

4
src/charts/chart.polarArea.js → src/controllers/controller.polarArea.js
View File

@ -1,6 +1,8 @@
(function() {
"use strict";
return;
var root = this,
Chart = root.Chart,
//Cache a local reference to Chart.helpers
@ -335,7 +337,7 @@
var location = helpers.getRelativePosition(e);
this.eachElement(function(slice, index) {
if (slice.inGroupRange(location.x, location.y)) {
if (slice.inLabelRange(location.x, location.y)) {
elements.push(slice);
}
}, this);

4
src/charts/chart.radar.js → src/controllers/controller.radar.js
View File

@ -1,6 +1,8 @@
(function() {
"use strict";
return;
var root = this,
Chart = root.Chart,
helpers = Chart.helpers;
@ -135,7 +137,7 @@
this.scale.calculateRange();
this.scale.generateTicks();
this.scale.buildYLabels();
Chart.scaleService.fitScalesForChart(this, this.chart.width, this.chart.height);
// Update the lines

2
src/charts/chart.scatter.js → src/controllers/controller.scatter.js
View File

@ -1,6 +1,8 @@
(function() {
"use strict";
return;
var root = this,
Chart = root.Chart,
helpers = Chart.helpers;

118
src/core/core.controller.js
View File

@ -118,29 +118,29 @@
},
buildControllers: function() {
this.eachDataset(function(dataset, datasetIndex) {
helpers.each(this.data.datasets, function(dataset, datasetIndex) {
var type = dataset.type || this.config.type;
if (dataset.controller) {
dataset.controller.updateIndex(datasetIndex);
return;
}
dataset.controller = new Chart.controllers[type](this, datasetIndex);
});
}, this);
},
resetElements: function resetElements() {
this.eachDataset(function(dataset, datasetIndex) {
helpers.each(this.data.datasets, function(dataset, datasetIndex) {
dataset.controller.reset();
});
}, this);
},
update: function update(animationDuration) {
// This will loop through any data and do the appropriate element update for the type
Chart.scaleService.fitScalesForChart(this, this.chart.width, this.chart.height);
this.eachDataset(function(dataset, datasetIndex) {
helpers.each(this.data.datasets, function(dataset, datasetIndex) {
dataset.controller.update();
});
}, this);
this.render(animationDuration);
},
@ -195,90 +195,48 @@
eachValue: function eachValue(callback) {
helpers.each(this.data.datasets, function(dataset, datasetIndex) {
helpers.each(dataset.data, callback, this, datasetIndex);
}, this);
},
eachElement: function eachElement(callback) {
helpers.each(this.data.datasets, function(dataset, datasetIndex) {
helpers.each(dataset.metaData, callback, this, dataset.metaData, datasetIndex);
}, this);
},
eachDataset: function eachDataset(callback) {
helpers.each(this.data.datasets, callback, this);
},
// 2 helper functions to get next/previous elements in datasets
nextElement: function nextElement(datasets, index, loop) {
if (this.loop) {
return dataset[index + 1] || dataset[0];
}
return datasets[index + 1] || datasets[index];
},
previousElement: function previousElement(datasets, index, loop) {
if (this.loop) {
return dataset[index - 1] || dataset[dataset.length - 1];
}
return datasets[index - 1] || datasets[index];
},
// Get the single element that was clicked on
// @return : An object containing the dataset index and element index of the matching element. Also contains the rectangle that was draw
getElementAtEvent: function getElementAtEvent(e) {
getElementAtEvent: function(e) {
var element = [];
var eventPosition = helpers.getRelativePosition(e);
var element = [];
for (var datasetIndex = 0; datasetIndex < this.data.datasets.length; ++datasetIndex) {
for (var elementIndex = 0; elementIndex < this.data.datasets[datasetIndex].metaData.length; ++elementIndex) {
if (this.data.datasets[datasetIndex].metaData[elementIndex].inRange(eventPosition.x, eventPosition.y)) {
element.push(this.data.datasets[datasetIndex].metaData[elementIndex]);
helpers.each(this.data.datasets, function(dataset, datasetIndex) {
helpers.each(dataset.metaData, function(element, index) {
if (this.chart.data.datasets[datasetIndex].metaData[elementIndex].inRange(eventPosition.x, eventPosition.y)) {
element.push(this.chart.data.datasets[datasetIndex].metaData[elementIndex]);
return element;
}
}
}
}, this);
}, this);
return [];
},
getElementsAtEvent: function getElementsAtEvent(e) {
getElementsAtEvent: function(e) {
var eventPosition = helpers.getRelativePosition(e);
var elementsArray = [];
var elementsArray = [],
eventPosition = helpers.getRelativePosition(e),
datasetIterator = function(dataset) {
elementsArray.push(dataset.metaData[elementIndex]);
},
elementIndex;
for (var datasetIndex = 0; datasetIndex < this.data.datasets.length; datasetIndex++) {
for (elementIndex = 0; elementIndex < this.data.datasets[datasetIndex].metaData.length; elementIndex++) {
if (this.data.datasets[datasetIndex].metaData[elementIndex].inGroupRange(eventPosition.x, eventPosition.y)) {
helpers.each(this.data.datasets, datasetIterator);
helpers.each(this.data.datasets, function(dataset, datasetIndex) {
helpers.each(dataset.metaData, function(element, index) {
if (element.inRange(eventPosition.x, eventPosition.y)) {
elementsArray.push(element);
}
}
}
}, this);
}, this);
return elementsArray.length ? elementsArray : [];
return elementsArray;
},
getDatasetAtEvent: function getDatasetAtEvent(e) {
getDatasetAtEvent: function(e) {
var eventPosition = helpers.getRelativePosition(e);
var elementsArray = [];
var elementsArray = [],
eventPosition = helpers.getRelativePosition(e),
datasetIterator = function(dataset) {
elementsArray.push(dataset.metaData[elementIndex]);
},
elementIndex;
for (var datasetIndex = 0; datasetIndex < this.data.datasets.length; datasetIndex++) {
for (elementIndex = 0; elementIndex < this.data.datasets[datasetIndex].metaData.length; elementIndex++) {
if (this.data.datasets[datasetIndex].metaData[elementIndex].inGroupRange(eventPosition.x, eventPosition.y)) {
helpers.each(this.data.datasets, datasetIterator);
for (var datasetIndex = 0; datasetIndex < this.chart.data.datasets.length; datasetIndex++) {
for (elementIndex = 0; elementIndex < this.chart.data.datasets[datasetIndex].metaData.length; elementIndex++) {
if (this.chart.data.datasets[datasetIndex].metaData[elementIndex].inLabelRange(eventPosition.x, eventPosition.y)) {
helpers.each(this.chart.data.datasets, datasetIterator);
}
}
}
@ -338,11 +296,11 @@
this.active = function() {
switch (this.options.hover.mode) {
case 'single':
return this.elementController.getElementAtEvent(e);
return this.getElementAtEvent(e);
case 'label':
return this.elementController.getElementsAtEvent(e);
return this.getElementsAtEvent(e);
case 'dataset':
return this.elementController.getDatasetAtEvent(e);
return this.getDatasetAtEvent(e);
default:
return e;
}
@ -366,11 +324,11 @@
if (this.lastActive.length) {
switch (this.options.hover.mode) {
case 'single':
this.elementController.resetElementAppearance(this.lastActive[0], this.lastActive[0]._datasetIndex, this.lastActive[0]._index);
this.data.datasets[this.lastActive[0]._datasetIndex].controller.removeHoverStyle(this.lastActive[0], this.lastActive[0]._datasetIndex, this.lastActive[0]._index);
break;
case 'label':
for (var i = 0; i < this.lastActive.length; i++) {
this.elementController.resetElementAppearance(this.lastActive[i], this.lastActive[i]._datasetIndex, this.lastActive[i]._index);
this.data.datasets[this.lastActive[0]._datasetIndex].controller.removeHoverStyle(this.lastActive[i], this.lastActive[i]._datasetIndex, this.lastActive[i]._index);
}
break;
case 'dataset':
@ -384,11 +342,11 @@
if (this.active.length && this.options.hover.mode) {
switch (this.options.hover.mode) {
case 'single':
this.elementController.setElementHoverStyle(this.active[0]);
this.data.datasets[this.active[0]._datasetIndex].controller.setHoverStyle(this.active[0]);
break;
case 'label':
for (var i = 0; i < this.active.length; i++) {
this.elementController.setElementHoverStyle(this.active[i]);
this.data.datasets[this.active[0]._datasetIndex].controller.setHoverStyle(this.active[i]);
}
break;
case 'dataset':

2
src/elements/element.arc.js
View File

@ -24,7 +24,7 @@
};
Chart.Arc = Chart.Element.extend({
inGroupRange: function(mouseX) {
inLabelRange: function(mouseX) {
var vm = this._view;
if (vm) {

2
src/elements/element.point.js
View File

@ -35,7 +35,7 @@
var hoverRange = vm.hitRadius + vm.radius;
return ((Math.pow(mouseX - vm.x, 2) + Math.pow(mouseY - vm.y, 2)) < Math.pow(hoverRange, 2));
},
inGroupRange: function(mouseX) {
inLabelRange: function(mouseX) {
var vm = this._view;
if (vm) {

2
src/elements/element.rectangle.js
View File

@ -61,7 +61,7 @@
return (mouseX >= vm.x - vm.width / 2 && mouseX <= vm.x + vm.width / 2) && (mouseY >= vm.base && mouseY <= vm.y);
}
},
inGroupRange: function(mouseX) {
inLabelRange: function(mouseX) {
var vm = this._view;
return (mouseX >= vm.x - vm.width / 2 && mouseX <= vm.x + vm.width / 2);
},