React-vis: PropTypes warnings when using time series with Date objects

[agwells]

I recently upgraded from React-Vis 1.11.2 to 1.11.5, and started getting PropTypes warnings on all my components where I provide a tickValues prop (VerticalGridLines, XAxis, and their GridLines and Axis child components)

Warning: Failed prop type: Invalid prop `tickValues[0]` supplied to `VerticalGridLines`

It looks like the problem is this change from October 2018: https://github.com/uber/react-vis/pull/977/files . It changed the tickValues proptype from "array" to "array of numbers or strings". However, I'm plotting a time series, using JS Date objects as my values, so it fails PropType validation.

I can work around this by turning my Dates into epoch numbers, but I thought Date was a supported value format for time series? The docs don't directly say if this is so, but they link to d3.scaleTime(), which uses Date as the underlying value format: https://github.com/d3/d3-scale/blob/master/README.md#time-scales

[mcnuttandrew]

That is a totally reasonable input, my bad for not including. I would gleefully accept a PR that addressed this error.

[agwells]

Cheers, I'll put together a PR. I just wanted to check first whether Date objects are a supported value type. :)

[agwells]

Okay, I finally got around to making a pull request! I've also added a note to the docs confirming that a time series can accept values as numbers or Date objects.

[andredornas]

Any prediction of when this fix will come out in a release?

[saramendeschaves]

Hello, any news about when this fix will come out in a release? I am having the same problem. Thanks a lot.

[agwells]

The pull request is there, but the blocker is that the reviewer would like to see some automated tests for it. And since there aren't (or at least, there weren't in January) any existing tests I could easily modify for this purpose, I'd have to write something from scratch. That would be a much larger effort than the bug fix itself, and honestly I'm unlikely to be able to find the time for it.

In the meantime, in my project I've just worked around this issue in two ways:

1. For props other than the main data prop, I just pass in integers instead of Date objects (e.g. myDate.valueOf(). I've found this is actually required for some props, such as the domain props, which do math operations that assume the values are integers.
2. I've also found there are a few components that even have incorrect proptypes for data! For those, I use the rather hacky approach of extending the component and overriding the proptypes, something like this:

import {
  LabelSeries as BaseLabelSeries,
  CustomSVGSeries as BaseCustomSVGSeries,
} from 'react-vis';

// HACK: To bypass incorrect proptypes on some of React-Vis's components,
// (Specifically, typing 'props.data[].x' as 'string | number', when 'Date' is also allowed)
// we use our own subclasses that don't have any PropTypes.
class LabelSeries extends BaseLabelSeries {
  static defaultProps = BaseLabelSeries.defaultProps;
  static displayName = 'LabelSeries';
  static propTypes = {};
}

class CustomSVGSeries extends BaseCustomSVGSeries {
  static defaultProps = BaseCustomSVGSeries.defaultProps;
  static displayName = 'CustomSVGSeries';
  static propTypes = {};
}