add stroke properties to discrete color legend (uber#860) (uber#994)

* add stroke properties to discrete color legend (uber#860) strokeDasharray, strokeStyle, strokeWidth * update tests for discrete color legend update tests to use svg properties, add tests for stroke dasharray and stroke width, and filter out unused styles
ayarcohaila · Oct 8, 2018 · 684022a · 684022a
1 parent 1aa2290
commit 684022a
Show file tree

Hide file tree

Showing 6 changed files with 60 additions and 19 deletions.
diff --git a/docs/legends.md b/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)`

diff --git a/showcase/legends/searchable-discrete-color.js b/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'}

diff --git a/src/legends/discrete-color-legend-item.js b/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,
@@ -38,12 +46,21 @@ function DiscreteColorLegendItem({
   if (onClick) {
     className += ' clickable';
   }
+  const strokeDasharrayStyle = STROKE_STYLES[strokeStyle] || strokeDasharray;
   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 ? {strokeWidth} : {}),
+            ...(strokeDasharrayStyle ? {strokeDasharray: strokeDasharrayStyle} : {}),
+            stroke: disabled ? null : color
+          }}
+
+        />
+      </svg>
       <span className="rv-discrete-color-legend-item__title">{title}</span>
     </div>
   );
@@ -56,10 +73,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';
 

diff --git a/src/legends/discrete-color-legend.js b/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}

diff --git a/src/styles/legends.scss b/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 {

diff --git a/tests/components/legends-tests.js b/tests/components/legends-tests.js
@@ -76,19 +76,19 @@ test('Discrete Legends', t => {
 
   t.deepEqual(
     mount(<HorizontalDiscreteLegend />)
-      .find('.rv-discrete-color-legend-item__color')
+      .find('.rv-discrete-color-legend-item__color__path')
       .first()
       .props().style,
-    {background: '#12939A'},
+    {stroke: '#12939A'},
     'normal discrete legend uses default palette'
   );
 
   t.deepEqual(
     mount(<HorizontalDiscreteCustomPalette />)
-      .find('.rv-discrete-color-legend-item__color')
+      .find('.rv-discrete-color-legend-item__color__path')
       .first()
       .props().style,
-    {background: '#6588cd'},
+    {stroke: '#6588cd'},
     'custom discrete legend uses custom palette'
   );
 
@@ -103,6 +103,20 @@ test('Discrete Legends', t => {
     7,
     'should find the right number of element for the searchable legends'
   );
+  t.deepEqual(
+    $.find('.rv-discrete-color-legend-item__color__path')
+      .first()
+      .props().style,
+    {strokeDasharray: '6, 2', stroke: '#3a3'},
+    'should find the default dashed dasharray style'
+  );
+  t.deepEqual(
+    $.find('.rv-discrete-color-legend-item__color__path')
+      .at(3)
+      .props().style,
+    {strokeWidth: 6, stroke: '#f93'},
+    'should find the specified stroke width'
+  );
   $.find('.rv-search-wrapper__form__input').simulate('change', {
     target: {value: 'egg'}
   });
@@ -135,9 +149,9 @@ test('Discrete Legends', t => {
 
 test('Discrete Legends Showcase: HorizontalDiscreteCustomPalette', t => {
   const $ = mount(<HorizontalDiscreteCustomPalette />);
-  const colors = $.find('.rv-discrete-color-legend-item__color')
+  const colors = $.find('.rv-discrete-color-legend-item__color__path')
     .map(colorBrick => {
-      return colorBrick.props().style.background;
+      return colorBrick.props().style.stroke;
     })
     .join(' ');