add victory-legend, fix label spacing

demo/demo.js

@@ -29,6 +29,7 @@ import {
   VictoryCursorContainer,
   VictoryPie,
   VictoryLabel,
+  VictoryLegend,
   createContainer
 } from "victory-native";
 
@@ -63,6 +64,51 @@ const candleData = [
   { x: 8, open: 80, close: 81, high: 83, low: 75 }
 ];
 
+const legendData = [{
+  name: "Series 1",
+  symbol: {
+    type: "circle",
+    fill: "green"
+  }
+}, {
+  name: "Long Series Name",
+  symbol: {
+    type: "triangleUp",
+    fill: "blue"
+  }
+}, {
+  name: "Series 3",
+  symbol: {
+    type: "diamond",
+    fill: "pink"
+  }
+}, {
+  name: "Series 4",
+  symbol: {
+    type: "plus"
+  }
+}, {
+  name: "Series 5",
+  symbol: {
+    type: "star",
+    fill: "red"
+  },
+  labels: {
+    fill: "purple"
+  }
+}, {
+  name: "Series 6",
+  symbol: {
+    type: "circle",
+    fill: "orange"
+  },
+  labels: {
+    fill: "blue"
+  }
+}];
+
+const legendStyle = { parent: { marginBottom: 20 } };
+
 const VictoryZoomVoronoiContainer = createContainer("zoom", "voronoi");
 
 export default class Demo extends Component {
@@ -138,6 +184,17 @@ export default class Demo extends Component {
         <Text style={styles.text}>{"Native"}</Text>
         <Text style={styles.text}>{"Demo\n"}</Text>
 
+        <VictoryLegend
+          data={legendData}
+          style={legendStyle}
+        />
+        <VictoryLegend
+          data={legendData}
+          itemsPerRow={4}
+          orientation="horizontal"
+          style={legendStyle}
+        />
+
         <VictoryChart polar theme={VictoryTheme.material}>
           <VictoryBar
             style={{ data: { fill: "tomato", opacity: 0.5 } }}

lib/components/victory-label.js

@@ -29,7 +29,8 @@ export default class extends VictoryLabel {
           const lastStyle = NativeHelpers.getStyle(this.style[i - 1] || this.style[0]);
           const fontSize = (style.fontSize + lastStyle.fontSize) / 2;
           const textAnchor = style.textAnchor || this.textAnchor;
-          const dy = i ? (this.lineHeight * fontSize) : 0;
+          const lineOffset = i ? fontSize : 0;
+          const dy = this.dy - fontSize + lineOffset;
           return (
             <TSpan key={i} x={x} y={y} dy={dy} dx={this.dx} {...style} textAnchor={textAnchor}>
               {line}

lib/components/victory-legend.js

@@ -0,0 +1,36 @@
+import React from "react";
+import { G } from "react-native-svg";
+import { VictoryLegend } from "victory-core/src";
+import { Dimensions } from "react-native";
+import VictoryLabel from "./victory-label";
+import VictoryContainer from "./victory-container";
+import { Point, NativeHelpers } from "../index";
+
+export default class extends VictoryLegend {
+  static defaultProps = {
+    ...VictoryLegend.defaultProps,
+    containerComponent: <VictoryContainer/>,
+    dataComponent: <Point/>,
+    groupComponent: <G/>,
+    labelComponent: <VictoryLabel/>,
+    width: Dimensions.get("window").width
+  };
+
+  renderGroup(props, children) {
+    const { groupComponent, height, parentStyles, standalone, width, x, y } = props;
+    let groupProps = { role: "presentation" };
+    const styles = NativeHelpers.getStyle(parentStyles);
+
+    if (!standalone) {
+      groupProps = {
+        height,
+        width,
+        translateX: x,
+        translateY: y,
+        ...styles,
+        ...groupProps
+      };
+    }
+    return React.cloneElement(groupComponent, groupProps, children);
+  }
+}

lib/index.js

@@ -42,6 +42,7 @@ export { voronoiContainerMixin } from "./components/victory-voronoi-container";
 export { selectionContainerMixin } from "./components/victory-selection-container";
 export { brushContainerMixin } from "./components/victory-brush-container";
 export { default as VictoryLabel } from "./components/victory-label";
+export { default as VictoryLegend } from "./components/victory-legend";
 export { default as NativeHelpers } from "./helpers/native-helpers";
 export { default as NativeZoomHelpers } from "./helpers/native-zoom-helpers";