new(vx-legend): add Line, legendLabelProps, more props in renderShape

packages/vx-legend/src/legends/Legend/LegendLabel.tsx

@@ -1,21 +1,24 @@
 import React from 'react';
 
-export type LegendLabelProps = {
+export type LegendLabelOwnProps = {
   align?: string;
   label?: React.ReactNode;
   flex?: string | number;
   margin?: string | number;
   children?: React.ReactNode;
 };
 
+export type LegendLabelProps = LegendLabelOwnProps &
+  Omit<React.HTMLProps<HTMLDivElement>, keyof LegendLabelOwnProps>;
+
 export default function LegendLabel({
   flex = '1',
   label,
   margin = '5px 0',
   align = 'left',
   children,
   ...restProps
-}: LegendLabelProps & Omit<React.HTMLProps<HTMLDivElement>, keyof LegendLabelProps>) {
+}: LegendLabelProps) {
   return (
     <div
       className="vx-legend-label"

packages/vx-legend/src/legends/Legend/LegendShape.tsx

@@ -5,6 +5,8 @@ import { FormattedLabel, LegendShape as LegendShapeType } from '../../types';
 
 export type LegendShapeProps<Data, Output> = {
   label: FormattedLabel<Data, Output>;
+  item: Data;
+  itemIndex: number;
   margin?: string | number;
   shape?: LegendShapeType<Data, Output>;
   fill?: (label: FormattedLabel<Data, Output>) => any;
@@ -20,6 +22,8 @@ export default function LegendShape<Data, Output>({
   height,
   margin,
   label,
+  item,
+  itemIndex,
   fill,
   size,
   shapeStyle,
@@ -36,6 +40,8 @@ export default function LegendShape<Data, Output>({
     >
       {renderShape<Data, Output>({
         shape,
+        item,
+        itemIndex,
         label,
         width,
         height,

packages/vx-legend/src/legends/Legend/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import cx from 'classnames';
 import LegendItem from './LegendItem';
-import LegendLabel from './LegendLabel';
+import LegendLabel, { LegendLabelProps } from './LegendLabel';
 import LegendShape from './LegendShape';
 import valueOrIdentity, { valueOrIdentityString } from '../../util/valueOrIdentity';
 import labelTransformFactory from '../../util/labelTransformFactory';
@@ -55,6 +55,8 @@ export type LegendProps<Datum, Output, Scale = ScaleType<Datum, Output>> = {
   labelFormat?: LabelFormatter<Datum>;
   /** Given the legend scale and labelFormatter, returns a label with datum, index, value, and label. */
   labelTransform?: LabelFormatterFactory<Datum, Output, Scale>;
+  /** Additional props to be set on LegendLabel. */
+  legendLabelProps?: Partial<LegendLabelProps>;
 };
 
 const defaultStyle = {
@@ -81,6 +83,7 @@ export default function Legend<Datum, Output, Scale = ScaleType<Datum, Output>>(
   itemMargin = '0',
   direction = 'column',
   itemDirection = 'row',
+  legendLabelProps,
   children,
   ...legendItemProps
 }: LegendProps<Datum, Output, Scale>) {
@@ -112,6 +115,8 @@ export default function Legend<Datum, Output, Scale = ScaleType<Datum, Output>>(
             height={shapeHeight}
             width={shapeWidth}
             margin={shapeMargin}
+            item={domain[i]}
+            itemIndex={i}
             label={label}
             fill={fill}
             size={size}
@@ -122,6 +127,7 @@ export default function Legend<Datum, Output, Scale = ScaleType<Datum, Output>>(
             flex={labelFlex}
             margin={labelMargin}
             align={labelAlign}
+            {...legendLabelProps}
           />
         </LegendItem>
       ))}

packages/vx-legend/src/shapes/Circle.tsx

@@ -16,7 +16,7 @@ export default function ShapeCircle({ fill, width, height, style }: ShapeCircleP
   return (
     <svg width={size} height={size}>
       <Group top={radius} left={radius}>
-        <circle r={radius} fill={String(fill)} style={style} />
+        <circle r={radius} fill={fill} style={style} />
       </Group>
     </svg>
   );

packages/vx-legend/src/shapes/Line.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { Group } from '@vx/group';
+
+export type ShapeShapeLineProps = {
+  fill?: string;
+  width?: string | number;
+  height?: string | number;
+  style?: React.CSSProperties;
+};
+
+export default function ShapeLine({ fill, width, height, style }: ShapeShapeLineProps) {
+  const cleanHeight = typeof height === 'string' || typeof height === 'undefined' ? 0 : height;
+  const lineThickness = typeof style?.strokeWidth === 'number' ? style?.strokeWidth : 2;
+  return (
+    <svg width={width} height={height}>
+      <Group top={cleanHeight / 2 - lineThickness / 2}>
+        <line
+          x1={0}
+          x2={width}
+          y1={0}
+          y2={0}
+          stroke={fill}
+          strokeWidth={lineThickness}
+          style={style}
+        />
+      </Group>
+    </svg>
+  );
+}

packages/vx-legend/src/types/index.ts

@@ -51,16 +51,18 @@ export type ItemTransformer<Datum, Output> = (
 export type RenderShapeProvidedProps<Data, Output> = {
   width?: string | number;
   height?: string | number;
-  label?: FormattedLabel<Data, Output>;
+  label: FormattedLabel<Data, Output>;
+  item: Data;
+  itemIndex: number;
   fill?: string;
   size?: string | number;
-  // TODO: ideally this would support SVGProps, but this is invalid for Rect/Circle shapes
   style?: React.CSSProperties;
 };
 
 export type LegendShape<Data, Output> =
   | 'rect'
   | 'circle'
+  | 'line'
   | React.FC<RenderShapeProvidedProps<Data, Output>>
   | React.ComponentClass<RenderShapeProvidedProps<Data, Output>>;
 

packages/vx-legend/src/util/renderShape.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import RectShape from '../shapes/Rect';
 import CircleShape from '../shapes/Circle';
+import LineShape from '../shapes/Line';
 
 import {
   LegendShape,
@@ -14,6 +15,8 @@ import {
 type RenderShapeArgs<Data, Output> = {
   shape?: LegendShape<Data, Output>;
   label: FormattedLabel<Data, Output>;
+  item: Data;
+  itemIndex: number;
   fill?: FillAccessor<Data, Output>;
   size?: SizeAccessor<Data, Output>;
   shapeStyle?: ShapeStyleAccessor<Data, Output>;
@@ -30,22 +33,29 @@ export default function renderShape<Data, Output>({
   width,
   height,
   label,
+  item,
+  itemIndex,
   shapeStyle = NO_OP,
 }: RenderShapeArgs<Data, Output>) {
   const props: RenderShapeProvidedProps<Data, Output> = {
     width,
     height,
+    item,
+    itemIndex,
     label,
     fill: fill({ ...label }),
     size: size({ ...label }),
     style: shapeStyle({ ...label }),
   };
 
   if (typeof shape === 'string') {
-    if (shape === 'rect') {
-      return React.createElement(RectShape, props);
+    if (shape === 'circle') {
+      return React.createElement(CircleShape, props);
     }
-    return React.createElement(CircleShape, props);
+    if (shape === 'line') {
+      return React.createElement(LineShape, props);
+    }
+    return React.createElement(RectShape, props);
   }
   if (React.isValidElement(shape)) {
     return React.cloneElement(shape, props);

packages/vx-legend/test/Legend.test.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { shallow } from 'enzyme';
 import { scaleLinear } from '@vx/scale';
 
-import { Legend } from '../src';
+import { Legend, LegendLabel } from '../src';
 
 const defaultProps = {
   scale: scaleLinear<number>({
@@ -39,4 +39,11 @@ describe('<Legend />', () => {
       flexDirection: 'row',
     });
   });
+
+  test('it should pass through legendLabelProps to legend labels', () => {
+    const style = { fontFamily: 'Comic Sans' };
+    const wrapper = shallow(<Legend {...defaultProps} legendLabelProps={{ style }} />);
+    const label = wrapper.find(LegendLabel).first();
+    expect(label.prop('style')).toEqual(style);
+  });
 });