Skip to content

Commit

Permalink
Merge pull request #1208 from etimberg/feature/v2.0-scale-refactor
Browse files Browse the repository at this point in the history 
Radial scale improvements
  • Loading branch information
@etimberg
etimberg committed Jun 13, 2015
2 parents 41bac83 + 8c34bdb commit 253158c
Show file tree
Hide file tree
Showing 4 changed files with 28 additions and 19 deletions.
2 changes: 1 addition & 1 deletion src/charts/chart.polarArea.js
View file
Expand Up @@ -141,7 +141,7 @@
x: this.chart.width / 2,
y: this.chart.height / 2,
innerRadius: 0,
outerRadius: this.scale.calculateCenterOffset(value),
outerRadius: this.scale.getDistanceFromCenterForValue(value),
startAngle: startAngle,
endAngle: endAngle,

Expand Down
13 changes: 9 additions & 4 deletions src/charts/chart.radar.js
View file
Expand Up @@ -131,18 +131,23 @@
}, this);
},
update: function(animationDuration) {
this.scale.setScaleSize();
this.scale.calculateRange();
this.scale.generateTicks();
this.scale.buildYLabels();

Chart.scaleService.fitScalesForChart(this, this.chart.width, this.chart.height);

// Update the lines
this.eachDataset(function(dataset, datasetIndex) {
var scaleBase;

if (this.scale.min < 0 && this.scale.max < 0) {
scaleBase = this.scale.getPointPosition(0, this.scale.max);
scaleBase = this.scale.getPointPositionForValue(0, this.scale.max);
} else if (this.scale.min > 0 && this.scale.max > 0) {
scaleBase = this.scale.getPointPosition(0, this.scale.min);
scaleBase = this.scale.getPointPositionForValue(0, this.scale.min);
} else {
scaleBase = this.scale.getPointPosition(0, 0);
scaleBase = this.scale.getPointPositionForValue(0, 0);
}

helpers.extend(dataset.metaDataset, {
Expand Down Expand Up @@ -175,7 +180,7 @@

// Update the points
this.eachElement(function(point, index, dataset, datasetIndex) {
var pointPosition = this.scale.getPointPosition(index, this.scale.calculateCenterOffset(this.data.datasets[datasetIndex].data[index]));
var pointPosition = this.scale.getPointPositionForValue(index, this.data.datasets[datasetIndex].data[index]);

helpers.extend(point, {
// Utility
Expand Down
2 changes: 1 addition & 1 deletion src/scales/scale.linear.js
View file
Expand Up @@ -133,7 +133,7 @@

if (this.options.labels.userCallback) {
// If the user provided a callback for label generation, use that as first priority
label = this.options.lables.userCallback(tick, index, ticks);
label = this.options.labels.userCallback(tick, index, ticks);
} else if (this.options.labels.template) {
// else fall back to the template string
label = helpers.template(this.options.labels.template, {
Expand Down
30 changes: 17 additions & 13 deletions src/scales/scale.radialLinear.js
View file
Expand Up @@ -71,11 +71,6 @@
this.size = helpers.min([this.height, this.width]);
this.drawingArea = (this.options.display) ? (this.size / 2) - (this.options.labels.fontSize / 2 + this.options.labels.backdropPaddingY) : (this.size / 2);
},
calculateCenterOffset: function(value) {
// Take into account half font size + the yPadding of the top value
var scalingFactor = this.drawingArea / (this.max - this.min);
return (value - this.min) * scalingFactor;
},
update: function() {
if (!this.options.lineArc) {
this.setScaleSize();
Expand Down Expand Up @@ -323,37 +318,46 @@

return index * angleMultiplier - (Math.PI / 2);
},
getDistanceFromCenterForValue: function(value) {
// Take into account half font size + the yPadding of the top value
var scalingFactor = this.drawingArea / (this.max - this.min);
return (value - this.min) * scalingFactor;
},
getPointPosition: function(index, distanceFromCenter) {
var thisAngle = this.getIndexAngle(index);
return {
x: (Math.cos(thisAngle) * distanceFromCenter) + this.xCenter,
y: (Math.sin(thisAngle) * distanceFromCenter) + this.yCenter
};
},
getPointPositionForValue: function(index, value) {
return this.getPointPosition(index, this.getDistanceFromCenterForValue(value));
},
draw: function() {
if (this.options.display) {
var ctx = this.ctx;
helpers.each(this.yLabels, function(label, index) {
// Don't draw a centre value
if (index > 0) {
var yCenterOffset = index * (this.drawingArea / Math.max(this.ticks.length, 1)),
yHeight = this.yCenter - yCenterOffset,
pointPosition;
var yCenterOffset = this.getDistanceFromCenterForValue(this.ticks[index]);
var yHeight = this.yCenter - yCenterOffset;

// Draw circular lines around the scale
if (this.options.gridLines.show) {
ctx.strokeStyle = this.options.gridLines.color;
ctx.lineWidth = this.options.gridLines.lineWidth;

if (this.options.lineArc) {
// Draw circular arcs between the points
ctx.beginPath();
ctx.arc(this.xCenter, this.yCenter, yCenterOffset, 0, Math.PI * 2);
ctx.closePath();
ctx.stroke();
} else {
// Draw straight lines connecting each index
ctx.beginPath();
for (var i = 0; i < this.valuesCount; i++) {
pointPosition = this.getPointPosition(i, this.calculateCenterOffset(this.ticks[index]));
var pointPosition = this.getPointPosition(i, this.getDistanceFromCenterForValue(this.ticks[index]));
if (i === 0) {
ctx.moveTo(pointPosition.x, pointPosition.y);
} else {
Expand All @@ -368,14 +372,14 @@
if (this.options.labels.show) {
ctx.font = helpers.fontString(this.options.labels.fontSize, this.options.labels.fontStyle, this.options.labels.fontFamily);

if (this.showLabelBackdrop) {
if (this.options.labels.showLabelBackdrop) {
var labelWidth = ctx.measureText(label).width;
ctx.fillStyle = this.options.labels.backdropColor;
ctx.fillRect(
this.xCenter - labelWidth / 2 - this.options.labels.backdropPaddingX,
yHeight - this.fontSize / 2 - this.options.labels.backdropPaddingY,
labelWidth + this.options.labels.backdropPaddingX * 2,
this.options.labels.fontSize + this.options.lables.backdropPaddingY * 2
this.options.labels.fontSize + this.options.labels.backdropPaddingY * 2
);
}

Expand All @@ -393,15 +397,15 @@

for (var i = this.valuesCount - 1; i >= 0; i--) {
if (this.options.angleLines.show) {
var outerPosition = this.getPointPosition(i, this.calculateCenterOffset(this.max));
var outerPosition = this.getPointPosition(i, this.getDistanceFromCenterForValue(this.max));
ctx.beginPath();
ctx.moveTo(this.xCenter, this.yCenter);
ctx.lineTo(outerPosition.x, outerPosition.y);
ctx.stroke();
ctx.closePath();
}
// Extra 3px out for some label spacing
var pointLabelPosition = this.getPointPosition(i, this.calculateCenterOffset(this.max) + 5);
var pointLabelPosition = this.getPointPosition(i, this.getDistanceFromCenterForValue(this.max) + 5);
ctx.font = helpers.fontString(this.options.pointLabels.fontSize, this.options.pointLabels.fontStyle, this.options.pointLabels.fontFamily);
ctx.fillStyle = this.options.pointLabels.fontColor;

Expand Down

0 comments on commit 253158c

Please sign in to comment.