Add support for inlining multiple text and passing an array via the lineHeight prop. Features for #893, #902, and #904.

[parkerziegler]

This PR accomplishes three tasks, related to issues #893, #902, and #904.

Issue #893: Allow VictoryLabel to render multiple text inline

The first portion of this PR adds support for a boolean inline prop, which specifies that labels passed as an array in VictoryLabel's text prop should be rendered inline. To do this, we simply return undefined for the x and dy attributes if inline is true. This allows the dx prop to specify the relative spacing of inlined <tspan /> elements. For example, this code:

import React from "react";
import { VictoryLabel } from "../src/index";
import data from "../src/victory-util/data";

export default class App extends React.Component {
  render() {

    const example = ["hello", "Formidable", "Labs"];

    return (
      <div className="demo">
        <p>
          VictoryLabel demo! The little circles show the anchor points for
          each label.
        </p>
        <svg width="600" height="1800" style={{ border: "1px solid #ccc", padding: 40 }}>

          <circle cx="300" cy="0" r="2" fill="red"/>
          <VictoryLabel x={300} y={0} textAnchor="end" verticalAnchor="middle"
            text={"Victory is awesome.\nThis is inline styling for <tspan>. Woohoo!"} inline
          />

          <circle cx="300" cy="150" r="2" fill="red"/>
          <VictoryLabel x={300} y={150} textAnchor="start" verticalAnchor="middle"
            text={[ '% of target', '44% for 2017' ]}
            style={[{ fill: '#000' }, { fill: '#6128ff' }]} inline dx={25}
          />

          <circle cx="300" cy="300" r="2" fill="red"/>
          <VictoryLabel x={300} y={300} textAnchor="start" verticalAnchor="start"
            text={example} inline dx={"10"}
          />
        </svg>
      </div>
    );
  }
}

will render:

We could also consider doing some more explicit styling for inlined labels – this solution just takes advantage of svg's default inline display for <tspan />s inside of <text />.

Issue #902: For a multiline VictoryLabel, I would like to have different lineHeights per line.

The second portion of this PR adds support for passing a number[] or string[] as a valid lineHeight prop. To do this, we check if lineHeight is passed as an array and, if so, average the lineHeight of the current and previous index (similar to how we average fontSize) in order to calculate the proper dy attribute for each <tspan />. For example, the following code:

<circle cx="0" cy="2000" r="2" fill="red"/>
<VictoryLabel
         x={0} y={2000}
         text={["Victory is awesome.", "We can even specify", "a lineHeight array!", "Just like this!"]}
         style={[{ fontSize: 50, fill: "green" }, { fontSize: 60 }, { fontSize: 30 }, { fontSize: 30 }]}
         lineHeight={[1.22, 2, 3, 1]}
        verticalAnchor="start"
/>

will render:

We may want to revisit how this interacts with verticalTextAnchor – we use the first lineHeight, similar to how we use the first fontSize, to determine the dy attribute of the <text /> container itself.

Issue #904 Empty arrays for VictoryLabel's style prop cause an error

There are now checks for a user passing empty arrays into both the style and lineHeight props. If an empty array gets passed into style, we default to defaultStyles. If an empty array gets passed into lineHeight, we default to using 1 as the lineHeight.

[boygirl]

@parkerziegler this looks good to me. Can you add your example to the demo page?

[parkerziegler]

@boygirl Added the examples to the bottom of victory-label-demo.js.

[david-davidson]

Nice! 👏

[parkerziegler]

@boygirl @david-davidson Just updated the main comment for the PR. Should fix #893 and #902 together. Let me know if there are any issues. Both features have examples in the demo app.

[ryan-roemer]

Do we need to detect/handle empty arrays? (Same question for existing style var too)

[boygirl]

I suppose for completeness sake we should, but in both of those cases, that would only happen if a user explicitly added the prop like lineHeight={[]}. That would technically be allowed by the prop definition, but doesn't make any intuitive sense. I think it's a highly unlikely edge case to hit, but I agree that it's bad practice to trust the user to not break things.

[boygirl]

@parkerziegler can you add a fallback for empty arrays for lineHeight in this PR. I'll create a new issue for styles

[parkerziegler]

@boygirl @ryan-roemer Sure thing, I'll do it first thing when I get in tomorrow.

[parkerziegler]

@ryan-roemer I think I'm pretty much all set to push the changes. We fallback to default values for both style and lineHeight if empty arrays are passed for those props. Should I add a console.warn just to let users know this is not a recommended practice?

[boygirl]

@parkerziegler code looks good, but please lint the changes you added to the demo

[parkerziegler]

@boygirl This should be updated. I added 4 test cases to cover the issues in victory-label.spec.js. They all pass, and the linting passes as well. For reference:
.