Add ability to customize points in a series

lib/morris.line.coffee

@@ -62,6 +62,23 @@ class Morris.Line
       '#cb4b4b'
       '#9440ed'
     ]
+    pointWidths: [
+      1
+      1
+      1
+      1
+      1
+      1
+    ]
+    pointStrokeColors: [
+      '#ffffff'
+      '#ffffff'
+      '#ffffff'
+      '#ffffff'
+      '#ffffff'
+      '#ffffff'
+      '#ffffff'
+    ]
     ymax: 'auto'
     ymin: 'auto 0'
     marginTop: 25
@@ -297,9 +314,11 @@ class Morris.Line
         else
           circle = @r.circle(c.x, c.y, @options.pointSize)
             .attr('fill', @colorForSeries(i))
-            .attr('stroke-width', 1)
+            .attr('stroke-width', @strokeWidthForSeries(i))
-            .attr('stroke', '#ffffff')
+            .attr('stroke', @strokeForSeries(i))
         @seriesPoints[i].push(circle)
+        console.log @strokeWidthForSeries(i)
+        console.log @strokeForSeries(i)
 
   # create a path for a data series
   #
@@ -435,6 +454,14 @@ class Morris.Line
   colorForSeries: (index) ->
     @options.lineColors[index % @options.lineColors.length]
 
+  # @private
+  strokeWidthForSeries: (index) ->
+    @options.pointWidths[index % @options.pointWidths.length]
+
+  # @private
+  strokeForSeries: (index) ->
+    @options.pointStrokeColors[index % @options.pointStrokeColors.length]
+
 
 # Parse a date into a javascript timestamp
 #

morris.js

@@ -353,6 +353,8 @@
       lineWidth: 3,
       pointSize: 4,
       lineColors: ['#0b62a4', '#7A92A3', '#4da74d', '#afd8f8', '#edc240', '#cb4b4b', '#9440ed'],
+      pointWidths: [1, 1, 1, 1, 1, 1],
+      pointStrokeColors: ['#ffffff', '#ffffff', '#ffffff', '#ffffff', '#ffffff', '#ffffff', '#ffffff'],
       ymax: 'auto',
       ymin: 'auto 0',
       marginTop: 25,
@@ -636,9 +638,11 @@
             if (c === null) {
               circle = null;
             } else {
-              circle = this.r.circle(c.x, c.y, this.options.pointSize).attr('fill', this.colorForSeries(i)).attr('stroke-width', 1).attr('stroke', '#ffffff');
+              circle = this.r.circle(c.x, c.y, this.options.pointSize).attr('fill', this.colorForSeries(i)).attr('stroke-width', this.strokeWidthForSeries(i)).attr('stroke', this.strokeForSeries(i));
             }
-            _results1.push(this.seriesPoints[i].push(circle));
+            this.seriesPoints[i].push(circle);
+            console.log(this.strokeWidthForSeries(i));
+            _results1.push(console.log(this.strokeForSeries(i)));
           }
           return _results1;
         }).call(this));
@@ -799,6 +803,14 @@
       return this.options.lineColors[index % this.options.lineColors.length];
     };
 
+    Line.prototype.strokeWidthForSeries = function(index) {
+      return this.options.pointWidths[index % this.options.pointWidths.length];
+    };
+
+    Line.prototype.strokeForSeries = function(index) {
+      return this.options.pointStrokeColors[index % this.options.pointStrokeColors.length];
+    };
+
     return Line;
 
   })();

spec/lib/line_spec.coffee

@@ -29,3 +29,20 @@ describe 'Morris.Line', ->
         labels: ['dontcare']
       )
     fn.should.throw(/Graph placeholder not found./)
+
+  it 'should make point styles user accessible', ->
+    my_data = [{x: 1, y: 1}, {x: 2, y: 2}]
+    red = '#ff0000'
+    blue = '#0000ff'
+    chart = Morris.Line
+      element: 'graph'
+      data: my_data
+      xkey: 'x'
+      ykeys: ['y']
+      labels: ['dontcare']
+      pointStrokeColors: [red, blue]
+      pointWidths: [1, 2]
+    chart.strokeWidthForSeries(0).should.equal 1
+    chart.strokeForSeries(0).should.equal red
+    chart.strokeWidthForSeries(1).should.equal 2
+    chart.strokeForSeries(1).should.equal blue