Whitelist style attributes on data objects

[amaschas]

I'm having difficulty determining why this is, but I'm passing a data array (array of objects) to a bar chart, and I get this error:

Warning: a path tag (owner: Bar) was passed a numeric string value for CSS property TotalAcquired (value: 38) which will be treated as a unitless number in a future version of React.

When I try to debug, I find that the individual bars are being passed the values from my data array as styles. Those styles never end up getting applied to the resulting component, I'm guessing because they're not valid CSS, but React still complains about the unitless numbers. My implementation looks vaguely like this, (the dataTitle key ends up populating a custom tooltip):

const bars = [
  {
    TotalAcquired: "38",
    dataTitle: "Total Subscribers",
    date: "2017-02-01" 
  },
  {
    TotalAcquired: "47",
    dataTitle: "Total Subscribers",
    date: "2017-02-02" 
  },
  ...
]

<VictoryBar
  data={bars}
  x={datum => new Date(datum['date'])}
  y={datum => parseInt(datum['TotalAcquired'], 10)}
/>

[d4ncer]

I'm having the same issue.

[chrisbolin]

@boygirl i added this to #642. I think the fix we make for this issue should hopefully cover the others mentioned as well.

[boygirl]

Implementation:

Add a style helper that takes an object, and returns a new object with only valid svg style attributes from the original object.

We will need to add a manual list of all camelCased svg style attributes.