Improvement/legend

demo/victory-legend-demo.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { VictoryLegend } from "../src/index";
+import { VictoryLegend, VictoryLabel, Border } from "../src/index";
 
 const containerStyle = {
   display: "flex",
@@ -9,42 +9,55 @@ const containerStyle = {
   justifyContent: "center"
 };
 
-const legendStyle = { parent: { border: "1px solid #ccc", margin: "2%", maxHeight: 300 } };
+const legendStyle = {
+  labels: { fontSize: 14, fontFamily: "Palatino" },
+  border: { stroke: "black", strokeWidth: 2 },
+  title: { padding: 5, fill: "red" }
+};
+
+const symbolSize = 5;
+const symbolSpacer = 10;
 const data = [{
   name: "Series 1",
   symbol: {
+    size: symbolSize,
     type: "circle",
     fill: "green"
   }
 }, {
-  name: "Long Series Name",
+  name: "Long Series Name -- so long",
   symbol: {
+    size: symbolSize,
     type: "triangleUp",
     fill: "blue"
   }
 }, {
   name: "Series 3",
   symbol: {
+    size: symbolSize,
     type: "diamond",
     fill: "pink"
   }
 }, {
   name: "Series 4",
   symbol: {
+    size: symbolSize,
     type: "plus"
   }
 }, {
   name: "Series 5",
   symbol: {
+    size: symbolSize,
     type: "star",
     fill: "red"
   },
   labels: {
     fill: "purple"
   }
 }, {
-  name: "Series 6",
+  name: "Series 6: also quite long",
   symbol: {
+    size: symbolSize,
     type: "circle",
     fill: "orange"
   },
@@ -56,14 +69,19 @@ const data = [{
 const LegendDemo = () => (
   <div className="demo" style={containerStyle}>
     <svg
-      height={150}
-      width={150}
+      height={500}
+      width={1000}
       style={{ border: "1px solid #ccc", margin: "2%" }}
     >
       <VictoryLegend
         standalone={false}
+        x={25} y={20}
+        itemsPerRow={2}
+        title={["My Legend title", "with some explanatory substitle"]}
         data={data}
+        symbolSpacer={symbolSpacer}
         style={legendStyle}
+        titleComponent={<VictoryLabel style={[{ fontSize: 20 }, { fontSize: 10 }]}/>}
         events={[{
           target: "data",
           eventHandlers: {
@@ -75,24 +93,59 @@ const LegendDemo = () => (
           }
         }]}
       />
-    </svg>
-    <svg
-      height={100}
-      width={244}
-      style={{ border: "1px solid #ccc", margin: "2%" }}
-    >
       <VictoryLegend
+        standalone={false}
+        titleOrientation="right"
+        centerTitle
+        title={["TITLE"]}
+        x={25} y={150}
+        gutter={30}
+        symbolSpacer={symbolSpacer}
+        itemsPerRow={3}
         data={data}
-        padding={15}
+        style={legendStyle}
+      />
+
+      <VictoryLegend
+        orientation="horizontal"
+        titleOrientation="left"
+        title={["TITLE"]}
+        standalone={false}
+        x={25} y={300}
+        symbolSpacer={symbolSpacer}
+        gutter={30}
         itemsPerRow={3}
+        data={data}
+        style={legendStyle}
+      />
+
+      <VictoryLegend
+        standalone={false}
+        x={600} y={20}
+        titleOrientation="bottom"
+        title={["TITLE", "subtitle", "more"]}
+        symbolSpacer={symbolSpacer}
+        gutter={30}
+        data={data}
+        style={legendStyle}
+      />
+      <VictoryLegend
+        orientation="horizontal"
         standalone={false}
-        style={{ labels: { fill: "darkgray" } }}
+        x={25} y={400}
+        gutter={30}
+        data={data}
+        style={legendStyle}
       />
     </svg>
     <VictoryLegend
+      borderComponent={<Border width={430} height={110}/>}
+      centerTitle
+      title={["TITLE"]}
+      gutter={30}
+      symbolSpacer={symbolSpacer}
+      itemsPerRow={3}
       data={data}
-      itemsPerRow={4}
-      orientation="horizontal"
       style={legendStyle}
     />
   </div>

src/index.js

@@ -12,6 +12,7 @@ export { default as Portal } from "./victory-portal/portal";
 export { default as Arc } from "./victory-primitives/arc";
 export { default as Area } from "./victory-primitives/area";
 export { default as Bar } from "./victory-primitives/bar";
+export { default as Border } from "./victory-primitives/border";
 export { default as Candle } from "./victory-primitives/candle";
 export { default as ClipPath } from "./victory-primitives/clip-path";
 export { default as Curve } from "./victory-primitives/curve";

src/victory-label/victory-label.js

@@ -187,7 +187,8 @@ export default class VictoryLabel extends React.Component {
   }
 
   getDy(props, style, content, lineHeight) { //eslint-disable-line max-params
-    const fontSize = style[0].fontSize;
+    style = Array.isArray(style) ? style[0] : style;
+    const fontSize = style.fontSize;
     const datum = props.datum || props.data;
     const dy = props.dy ? Helpers.evaluateProp(props.dy, datum) : 0;
     const length = content.length;