add stroke properties to discrete color legend (#860)

docs/legends.md

@@ -18,8 +18,8 @@ Currently following types of legends are supported:
 <!-- INJECT:"VerticalDiscreteColorLegendExampleWithLink" -->
 
 #### items (required)
-Type: `Array<string|{title: string, color: String, disabled: boolean}|react element>`
-Array of items that should be shown on the legend. The array should consist from either objects (`title`, optional `color` and optional `disabled` flag) or strings (treated as titles).
+Type: `Array<string|{title: string, color: String, strokeDasharray: string, strokeStyle: string, strokeWidth: number, disabled: boolean}|react element>`
+Array of items that should be shown on the legend. The array should consist from either objects (`title`, optional `color`, optional `strokeDasharray`, optional `strokeStyle`, optional `strokeWidth`, and optional `disabled` flag) or strings (treated as titles). The stroke properties should match those in your series (see [line series](line-mark-series.md))
 
 #### orientation (optional)
 Type: `(vertical|horizontal)`

showcase/legends/searchable-discrete-color.js

@@ -27,10 +27,10 @@ export default class Example extends React.Component {
     super(props);
     this.state = {
       items: [
-        {title: 'Apples', color: '#3a3'},
+        {title: 'Apples', color: '#3a3', strokeStyle: "dashed"},
         {title: 'Bananas', color: '#fc0'},
         {title: 'Blueberries', color: '#337'},
-        {title: 'Carrots', color: '#f93'},
+        {title: 'Carrots', color: '#f93', strokeWidth: 6},
         {title: 'Eggplants', color: '#337'},
         {title: 'Limes', color: '#cf3'},
         {title: 'Potatoes', color: '#766'}

src/legends/discrete-color-legend-item.js

@@ -22,8 +22,16 @@ import React from 'react';
 
 import PropTypes from 'prop-types';
 
+const STROKE_STYLES = {
+  dashed: '6, 2',
+  solid: null
+};
+
 function DiscreteColorLegendItem({
   color,
+  strokeDasharray,
+  strokeStyle,
+  strokeWidth,
   disabled,
   onClick,
   orientation,
@@ -40,10 +48,18 @@ function DiscreteColorLegendItem({
   }
   return (
     <div {...{className, onClick, onMouseEnter, onMouseLeave}}>
-      <span
-        className="rv-discrete-color-legend-item__color"
-        style={disabled ? null : {background: color}}
-      />
+      <svg className="rv-discrete-color-legend-item__color" height={2} width={14}>
+        <path
+          className="rv-discrete-color-legend-item__color__path"
+          d="M 0, 1 L 14, 1"
+          style={{
+            strokeWidth,
+            strokeDasharray: STROKE_STYLES[strokeStyle] || strokeDasharray,
+            stroke: disabled ? null : color
+          }}
+
+        />
+      </svg>
       <span className="rv-discrete-color-legend-item__title">{title}</span>
     </div>
   );
@@ -56,10 +72,14 @@ DiscreteColorLegendItem.propTypes = {
   onClick: PropTypes.func,
   onMouseEnter: PropTypes.func,
   onMouseLeave: PropTypes.func,
-  orientation: PropTypes.oneOf(['vertical', 'horizontal']).isRequired
+  orientation: PropTypes.oneOf(['vertical', 'horizontal']).isRequired,
+  strokeDasharray: PropTypes.string,
+  strokeWidth: PropTypes.number,
+  strokeStyle: PropTypes.oneOf(Object.keys(STROKE_STYLES))
 };
 DiscreteColorLegendItem.defaultProps = {
-  disabled: false
+  disabled: false,
+  strokeStyle: 'solid'
 };
 DiscreteColorLegendItem.displayName = 'DiscreteColorLegendItem';
 

src/legends/discrete-color-legend.js

@@ -45,6 +45,9 @@ function DiscreteColorLegend({
         <DiscreteColorLegendItem
           title={item.title ? item.title : item}
           color={item.color ? item.color : colors[i % colors.length]}
+          strokeDasharray={item.strokeDasharray}
+          strokeStyle={item.strokeStyle}
+          strokeWidth={item.strokeWidth}
           disabled={Boolean(item.disabled)}
           orientation={orientation}
           key={i}

src/styles/legends.scss

@@ -27,11 +27,14 @@ $rv-legend-disabled-color: #b8b8b8;
 }
 
 .rv-discrete-color-legend-item__color {
-  background: #dcdcdc;
   display: inline-block;
-  height: 2px;
   vertical-align: middle;
-  width: 14px;
+  overflow: visible;
+}
+
+.rv-discrete-color-legend-item__color__path {
+  stroke: #dcdcdc;
+  stroke-width: 2px;
 }
 
 .rv-discrete-color-legend-item__title {