Allow a markType function to be passed to MarkSeries to enable custom…

… marks
uber · May 12, 2017 · 2af31bd · 2af31bd
1 parent e034645
commit 2af31bd
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 1 deletion.
diff --git a/showcase/plot/scatterplot.js b/showcase/plot/scatterplot.js
@@ -40,6 +40,7 @@ export default class Example extends React.Component {
         <XAxis />
         <YAxis />
         <MarkSeries
+          {...this.props}
           className="mark-series-example"
           strokeWidth={2}
           sizeRange={[5, 15]}

diff --git a/src/plot/series/mark-series.js b/src/plot/series/mark-series.js
@@ -35,7 +35,7 @@ class MarkSeries extends AbstractSeries {
 
   render() {
     const {
-      animation, className, data, marginLeft, marginTop, strokeWidth, style
+      animation, className, data, marginLeft, marginTop, markType, strokeWidth, style
     } = this.props;
     if (!data) {
       return null;
@@ -78,6 +78,10 @@ class MarkSeries extends AbstractSeries {
             onMouseOver: e => this._valueMouseOverHandler(d, e),
             onMouseOut: e => this._valueMouseOutHandler(d, e)
           };
+
+          if (typeof markType === 'function') {
+            return markType({attrs, d});
+          }
           return <circle {...attrs} />;
         })}
       </g>
@@ -88,6 +92,7 @@ class MarkSeries extends AbstractSeries {
 MarkSeries.displayName = 'MarkSeries';
 MarkSeries.propTypes = {
   ...AbstractSeries.propTypes,
+  markType: PropTypes.func,
   strokeWidth: PropTypes.number
 };
 export default MarkSeries;
diff --git a/tests/components/mark-series-tests.js b/tests/components/mark-series-tests.js
@@ -16,6 +16,14 @@ test('MarkSeries: Showcase Example - Scatterplot', t => {
   t.end();
 });
 
+test('MarkSeries: Showcase Example - Scatterplot with custom markType', t => {
+  const $ = mount(<Scatterplot markType={({attrs, d}) => <rect /> } />);
+  t.equal($.text(), '1.01.52.02.53.068101214', 'should fine the right text content');
+  t.equal($.find('.rv-xy-plot__series--mark rect').length, 5, 'should find the right number of rect');
+  t.equal($.find('.mark-series-example').length, 1, 'should find the right number of custom named series');
+  t.end();
+});
+
 test('MarkSeries: Showcase Example - Dynamic Crosshair Scatterplot', t => {
   const $ = mount(<DynamicCrosshairScatterplot />);
   // NOTE: Point 0 (P0) and Point 1 (P1) are vertically aligned