React-native-svg-charts: Decorator example code does not calculate valid x/y coordinates when used with scale-time example

[zeroed-tech]

What is the problem?

Decorator example code does not calculate valid x/y coordinates when used with scale-time example

When does it happen?

Whenever the graph renders

What platform?

• [?] iOS
• [X] Android

react-native version: 0.xx
react-native-svg-charts version: x.x.x
react-native-svg version: x.x.x
^Current NPM

Code to reproduce

https://snack.expo.io/Sk9fpWzJL

The above example shows both a regular graph and a time series graph (both are just the examples from the examples repo) on the same screen with each calling a slightly modified version of the decorator function from the decorators example (just to add logging).

This code produces the following output:

RegularGraph: X: 0 Y: 138.57142857142858 RegularGraph: X: 64.8 Y: 190 RegularGraph: X: 129.6 Y: 10 RegularGraph: X: 194.4 Y: 190 RegularGraph: X: 259.2 Y: 74.28571428571428 RegularGraph: X: 324 Y: 177.14285714285714 TimeGraph: X: -7573302.000000001 Y: NaN TimeGraph: X: -7573301.999995001 Y: NaN TimeGraph: X: -7573301.99999 Y: NaN TimeGraph: X: -7573301.999985 Y: NaN TimeGraph: X: -7573301.99998 Y: NaN TimeGraph: X: -7573301.9999750005 Y: NaN

As can be seen from the above logging the regular graph is outputting sane coordinates where as the time series graph is outputting massively negative and invalid numbers.

Is there a proper way to use decorators on graphs that are scaled by time? I assume the decorator is just receiving the wrong scale functions to calculate the coordinates that are being output but I'm fairly new to the world of JS and tracking down something like this is still a bit beyond me.

[zeroed-tech]

So this may not have actually been a bug, just me misinterpreting how to use the decorator.
Using the a value of cx={x(value.date)} appears to work for me. Sorry if I wasted anyones time with this

[ctohster]

I can't get this to work either, do you have an example of your working code?

[zeroed-tech]

Sure, this should be all the relevant parts. If not I found a working example which I based this off in one of the comments on another issue which you should be able to track down
```Decorator = ({x, y, data}) => {
return data.map((value, index) => (
key={index}
cx={x(value.date)}
cy={y(value.value)}
r={4}
stroke={'rgb(134, 255, 244)'}
fill={'black'}
/>
));
};

Line = ({line}) => (

);

render() {
const contentInset = {top: 20, bottom: 20, left: 10, right: 10};

return (
  <BaseScreen>
    <View style={{flex: 1, flexDirection: 'row'}}>
      <YAxis
        style={{
          marginBottom: verticalContentInset.bottom,
        }}
        data={this.state.logPoints}
        contentInset={contentInset}
        numberOfTicks={4}
        yAccessor={({item}) => item.value}
        formatLabel={(value, index) =>
          `${value} ${this.state.user.weightUnit ? 'kg' : 'lb'}`
        }
        svg={{
          fill: 'rgba(255, 255, 255, 1)',
          fontSize: 10,
          fontWeight: 'bold',
        }}
      />
      <View style={{flexDirection: 'column', flex: 5}}>
        <AreaChart
          style={{flex: 1}}
          data={this.state.logPoints}
          yAccessor={({item}) => item.value}
          xAccessor={({item}) => item.date}
          yMin={this.state.weightMin}
          yMax={this.state.weightMax}
          svg={{fill: 'rgba(134, 255, 244, 0.5)'}}
          contentInset={contentInset}>
          <Grid />
          <this.Line />
          <this.Decorator />
        </AreaChart>
        <XAxis
          data={this.state.logPoints}
          svg={{
            fill: 'rgba(255, 255, 255, 1)',
            fontSize: 10,
            fontWeight: 'bold',
            rotation: 20,
            originY: 30,
            y: 5,
          }}
          xAccessor={({item}) => item.date}
          scale={scale.scaleTime}
          numberOfTicks={
            (this.state.logPoints != null && this.state.logPoints.length) >
            16
              ? 16
              : this.state.logPoints.length
          }
          style={{
            height: xAxisHeight,
          }}
          contentInset={contentInset}
          formatLabel={value => {
            return moment.unix(value.getTime() / 1000).format('DD/MM');
          }}
        />
      </View>
    </View>
  </BaseScreen>
);

}
}

```

[ctohster]

thanks! got it to work