mirror of
https://github.com/morrisjs/morris.js.git
synced 2024-11-10 21:36:34 +01:00
Merge branch, and merge with previous changes.
Previous point-width work by other contributors conflicted, so have tied the two changes and sets of tests together. Have also slightly changed some variable / config names to read easier. Merge branch 'master' of https://github.com/dgilperez/morris.js into dgilperez-master Conflicts: lib/morris.line.coffee morris.js morris.min.js
This commit is contained in:
Olly Smith
commit
0e8c0f49b6
@ -7,12 +7,6 @@ class Morris.Line extends Morris.Grid
|
||||
|
||||
init: ->
|
||||
# Some instance variables for later
|
||||
@pointGrow = []
|
||||
@pointShrink = []
|
||||
for pointSize in @options.pointSizes
|
||||
@pointGrow.push Raphael.animation r: pointSize + 3, 25, 'linear'
|
||||
@pointShrink.push Raphael.animation r: pointSize, 25, 'linear'
|
||||
|
||||
if @options.hideHover isnt 'always'
|
||||
@hover = new Morris.Hover(parent: @el)
|
||||
@on('hovermove', @onHoverMove)
|
||||
@ -23,7 +17,7 @@ class Morris.Line extends Morris.Grid
|
||||
#
|
||||
defaults:
|
||||
lineWidth: 3
|
||||
pointSizes: [4]
|
||||
pointSize: 4
|
||||
lineColors: [
|
||||
'#0b62a4'
|
||||
'#7A92A3'
|
||||
@ -33,7 +27,7 @@ class Morris.Line extends Morris.Grid
|
||||
'#cb4b4b'
|
||||
'#9440ed'
|
||||
]
|
||||
pointWidths: [1]
|
||||
pointStrokeWidths: [1]
|
||||
pointStrokeColors: ['#ffffff']
|
||||
pointFillColors: []
|
||||
smooth: true
|
||||
@ -201,13 +195,13 @@ class Morris.Line extends Morris.Grid
|
||||
for row in @data
|
||||
circle = null
|
||||
if row._y[index]?
|
||||
circle = @drawLinePoint(row._x, row._y[index], @options.pointSizes[index % @options.pointSizes.length], @colorFor(row, index, 'point'), index)
|
||||
circle = @drawLinePoint(row._x, row._y[index], @colorFor(row, index, 'point'), index)
|
||||
@seriesPoints[index].push(circle)
|
||||
|
||||
_drawLineFor: (index) ->
|
||||
path = @paths[index]
|
||||
if path isnt null
|
||||
@drawLinePath path, @colorFor(null, index, 'line')
|
||||
@drawLinePath path, @colorFor(null, index, 'line'), index
|
||||
|
||||
# create a path for a data series
|
||||
#
|
||||
@ -262,11 +256,11 @@ class Morris.Line extends Morris.Grid
|
||||
if @prevHilight isnt null and @prevHilight isnt index
|
||||
for i in [0..@seriesPoints.length-1]
|
||||
if @seriesPoints[i][@prevHilight]
|
||||
@seriesPoints[i][@prevHilight].animate @pointShrink[i]
|
||||
@seriesPoints[i][@prevHilight].animate @pointShrinkSeries(i)
|
||||
if index isnt null and @prevHilight isnt index
|
||||
for i in [0..@seriesPoints.length-1]
|
||||
if @seriesPoints[i][index]
|
||||
@seriesPoints[i][index].animate @pointGrow[i]
|
||||
@seriesPoints[i][index].animate @pointGrowSeries(i)
|
||||
@prevHilight = index
|
||||
|
||||
colorFor: (row, sidx, type) ->
|
||||
@ -284,25 +278,47 @@ class Morris.Line extends Morris.Grid
|
||||
.attr('font-weight', @options.gridTextWeight)
|
||||
.attr('fill', @options.gridTextColor)
|
||||
|
||||
drawLinePath: (path, lineColor) ->
|
||||
drawLinePath: (path, lineColor, lineIndex) ->
|
||||
@raphael.path(path)
|
||||
.attr('stroke', lineColor)
|
||||
.attr('stroke-width', @options.lineWidth)
|
||||
.attr('stroke-width', @lineWidthForSeries(lineIndex))
|
||||
|
||||
drawLinePoint: (xPos, yPos, size, pointColor, lineIndex) ->
|
||||
@raphael.circle(xPos, yPos, size)
|
||||
drawLinePoint: (xPos, yPos, pointColor, lineIndex) ->
|
||||
@raphael.circle(xPos, yPos, @pointSizeForSeries(lineIndex))
|
||||
.attr('fill', pointColor)
|
||||
.attr('stroke-width', @strokeWidthForSeries(lineIndex))
|
||||
.attr('stroke', @strokeForSeries(lineIndex))
|
||||
.attr('stroke-width', @pointStrokeWidthForSeries(lineIndex))
|
||||
.attr('stroke', @pointStrokeColorForSeries(lineIndex))
|
||||
|
||||
# @private
|
||||
strokeWidthForSeries: (index) ->
|
||||
@options.pointWidths[index % @options.pointWidths.length]
|
||||
pointStrokeWidthForSeries: (index) ->
|
||||
@options.pointStrokeWidths[index % @options.pointStrokeWidths.length]
|
||||
|
||||
# @private
|
||||
strokeForSeries: (index) ->
|
||||
pointStrokeColorForSeries: (index) ->
|
||||
@options.pointStrokeColors[index % @options.pointStrokeColors.length]
|
||||
|
||||
# @private
|
||||
lineWidthForSeries: (index) ->
|
||||
if (@options.lineWidth instanceof Array)
|
||||
@options.lineWidth[index % @options.lineWidth.length]
|
||||
else
|
||||
@options.lineWidth
|
||||
|
||||
# @private
|
||||
pointSizeForSeries: (index) ->
|
||||
if (@options.pointSize instanceof Array)
|
||||
@options.pointSize[index % @options.pointSize.length]
|
||||
else
|
||||
@options.pointSize
|
||||
|
||||
# @private
|
||||
pointGrowSeries: (index) ->
|
||||
Raphael.animation r: @pointSizeForSeries(index) + 3, 25, 'linear'
|
||||
|
||||
# @private
|
||||
pointShrinkSeries: (index) ->
|
||||
Raphael.animation r: @pointSizeForSeries(index), 25, 'linear'
|
||||
|
||||
# generate a series of label, timestamp pairs for x-axis labels
|
||||
#
|
||||
# @private
|
||||
|
||||
67
morris.js
67
morris.js
@ -701,19 +701,6 @@
|
||||
}
|
||||
|
||||
Line.prototype.init = function() {
|
||||
var pointSize, _i, _len, _ref;
|
||||
this.pointGrow = [];
|
||||
this.pointShrink = [];
|
||||
_ref = this.options.pointSizes;
|
||||
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
|
||||
pointSize = _ref[_i];
|
||||
this.pointGrow.push(Raphael.animation({
|
||||
r: pointSize + 3
|
||||
}, 25, 'linear'));
|
||||
this.pointShrink.push(Raphael.animation({
|
||||
r: pointSize
|
||||
}, 25, 'linear'));
|
||||
}
|
||||
if (this.options.hideHover !== 'always') {
|
||||
this.hover = new Morris.Hover({
|
||||
parent: this.el
|
||||
@ -726,9 +713,9 @@
|
||||
|
||||
Line.prototype.defaults = {
|
||||
lineWidth: 3,
|
||||
pointSizes: [4],
|
||||
pointSize: 4,
|
||||
lineColors: ['#0b62a4', '#7A92A3', '#4da74d', '#afd8f8', '#edc240', '#cb4b4b', '#9440ed'],
|
||||
pointWidths: [1],
|
||||
pointStrokeWidths: [1],
|
||||
pointStrokeColors: ['#ffffff'],
|
||||
pointFillColors: [],
|
||||
smooth: true,
|
||||
@ -973,7 +960,7 @@
|
||||
row = _ref[_i];
|
||||
circle = null;
|
||||
if (row._y[index] != null) {
|
||||
circle = this.drawLinePoint(row._x, row._y[index], this.options.pointSizes[index % this.options.pointSizes.length], this.colorFor(row, index, 'point'), index);
|
||||
circle = this.drawLinePoint(row._x, row._y[index], this.colorFor(row, index, 'point'), index);
|
||||
}
|
||||
_results.push(this.seriesPoints[index].push(circle));
|
||||
}
|
||||
@ -984,7 +971,7 @@
|
||||
var path;
|
||||
path = this.paths[index];
|
||||
if (path !== null) {
|
||||
return this.drawLinePath(path, this.colorFor(null, index, 'line'));
|
||||
return this.drawLinePath(path, this.colorFor(null, index, 'line'), index);
|
||||
}
|
||||
};
|
||||
|
||||
@ -1060,14 +1047,14 @@
|
||||
if (this.prevHilight !== null && this.prevHilight !== index) {
|
||||
for (i = _i = 0, _ref = this.seriesPoints.length - 1; 0 <= _ref ? _i <= _ref : _i >= _ref; i = 0 <= _ref ? ++_i : --_i) {
|
||||
if (this.seriesPoints[i][this.prevHilight]) {
|
||||
this.seriesPoints[i][this.prevHilight].animate(this.pointShrink[i]);
|
||||
this.seriesPoints[i][this.prevHilight].animate(this.pointShrinkSeries(i));
|
||||
}
|
||||
}
|
||||
}
|
||||
if (index !== null && this.prevHilight !== index) {
|
||||
for (i = _j = 0, _ref1 = this.seriesPoints.length - 1; 0 <= _ref1 ? _j <= _ref1 : _j >= _ref1; i = 0 <= _ref1 ? ++_j : --_j) {
|
||||
if (this.seriesPoints[i][index]) {
|
||||
this.seriesPoints[i][index].animate(this.pointGrow[i]);
|
||||
this.seriesPoints[i][index].animate(this.pointGrowSeries(i));
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1088,22 +1075,50 @@
|
||||
return this.raphael.text(xPos, yPos, text).attr('font-size', this.options.gridTextSize).attr('font-family', this.options.gridTextFamily).attr('font-weight', this.options.gridTextWeight).attr('fill', this.options.gridTextColor);
|
||||
};
|
||||
|
||||
Line.prototype.drawLinePath = function(path, lineColor) {
|
||||
return this.raphael.path(path).attr('stroke', lineColor).attr('stroke-width', this.options.lineWidth);
|
||||
Line.prototype.drawLinePath = function(path, lineColor, lineIndex) {
|
||||
return this.raphael.path(path).attr('stroke', lineColor).attr('stroke-width', this.lineWidthForSeries(lineIndex));
|
||||
};
|
||||
|
||||
Line.prototype.drawLinePoint = function(xPos, yPos, size, pointColor, lineIndex) {
|
||||
return this.raphael.circle(xPos, yPos, size).attr('fill', pointColor).attr('stroke-width', this.strokeWidthForSeries(lineIndex)).attr('stroke', this.strokeForSeries(lineIndex));
|
||||
Line.prototype.drawLinePoint = function(xPos, yPos, pointColor, lineIndex) {
|
||||
return this.raphael.circle(xPos, yPos, this.pointSizeForSeries(lineIndex)).attr('fill', pointColor).attr('stroke-width', this.pointStrokeWidthForSeries(lineIndex)).attr('stroke', this.pointStrokeColorForSeries(lineIndex));
|
||||
};
|
||||
|
||||
Line.prototype.strokeWidthForSeries = function(index) {
|
||||
return this.options.pointWidths[index % this.options.pointWidths.length];
|
||||
Line.prototype.pointStrokeWidthForSeries = function(index) {
|
||||
return this.options.pointStrokeWidths[index % this.options.pointStrokeWidths.length];
|
||||
};
|
||||
|
||||
Line.prototype.strokeForSeries = function(index) {
|
||||
Line.prototype.pointStrokeColorForSeries = function(index) {
|
||||
return this.options.pointStrokeColors[index % this.options.pointStrokeColors.length];
|
||||
};
|
||||
|
||||
Line.prototype.lineWidthForSeries = function(index) {
|
||||
if (this.options.lineWidth instanceof Array) {
|
||||
return this.options.lineWidth[index % this.options.lineWidth.length];
|
||||
} else {
|
||||
return this.options.lineWidth;
|
||||
}
|
||||
};
|
||||
|
||||
Line.prototype.pointSizeForSeries = function(index) {
|
||||
if (this.options.pointSize instanceof Array) {
|
||||
return this.options.pointSize[index % this.options.pointSize.length];
|
||||
} else {
|
||||
return this.options.pointSize;
|
||||
}
|
||||
};
|
||||
|
||||
Line.prototype.pointGrowSeries = function(index) {
|
||||
return Raphael.animation({
|
||||
r: this.pointSizeForSeries(index) + 3
|
||||
}, 25, 'linear');
|
||||
};
|
||||
|
||||
Line.prototype.pointShrinkSeries = function(index) {
|
||||
return Raphael.animation({
|
||||
r: this.pointSizeForSeries(index)
|
||||
}, 25, 'linear');
|
||||
};
|
||||
|
||||
return Line;
|
||||
|
||||
})(Morris.Grid);
|
||||
|
||||
2
morris.min.js
vendored
2
morris.min.js
vendored
File diff suppressed because one or more lines are too long
@ -23,12 +23,12 @@ describe 'Morris.Line', ->
|
||||
ykeys: ['y']
|
||||
labels: ['dontcare']
|
||||
pointStrokeColors: [red, blue]
|
||||
pointWidths: [1, 2]
|
||||
pointStrokeWidths: [1, 2]
|
||||
pointFillColors: [null, red]
|
||||
chart.strokeWidthForSeries(0).should.equal 1
|
||||
chart.strokeForSeries(0).should.equal red
|
||||
chart.strokeWidthForSeries(1).should.equal 2
|
||||
chart.strokeForSeries(1).should.equal blue
|
||||
chart.pointStrokeWidthForSeries(0).should.equal 1
|
||||
chart.pointStrokeColorForSeries(0).should.equal red
|
||||
chart.pointStrokeWidthForSeries(1).should.equal 2
|
||||
chart.pointStrokeColorForSeries(1).should.equal blue
|
||||
chart.colorFor(chart.data[0], 0, 'point').should.equal chart.colorFor(chart.data[0], 0, 'line')
|
||||
chart.colorFor(chart.data[1], 1, 'point').should.equal red
|
||||
|
||||
@ -114,6 +114,11 @@ describe 'Morris.Line', ->
|
||||
Morris.Line @defaults
|
||||
shouldHavePath /(M[\d\.]+,[\d\.]+C[\d\.]+(,[\d\.]+){5}){2}/
|
||||
|
||||
it 'should make line width customizable', ->
|
||||
chart = Morris.Line $.extend(@defaults, lineWidth: [1, 2])
|
||||
chart.lineWidthForSeries(0).should.equal 1
|
||||
chart.lineWidthForSeries(1).should.equal 2
|
||||
|
||||
describe '#createPath', ->
|
||||
|
||||
it 'should generate a smooth line', ->
|
||||
@ -175,13 +180,13 @@ describe 'Morris.Line', ->
|
||||
labels: ['Y', 'Z']
|
||||
lineColors: [ '#0b62a4', '#7a92a3']
|
||||
lineWidth: 3
|
||||
pointWidths: [5]
|
||||
pointStrokeWidths: [5]
|
||||
pointStrokeColors: ['#ffffff']
|
||||
gridLineColor: '#aaa'
|
||||
gridStrokeWidth: 0.5
|
||||
gridTextColor: '#888'
|
||||
gridTextSize: 12
|
||||
pointSizes: [5]
|
||||
pointSize: [5]
|
||||
|
||||
it 'should have circles with configured fill color', ->
|
||||
chart = Morris.Line $.extend {}, defaults
|
||||
|
||||
Loading…
Reference in New Issue
Block a user