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

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
• 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: 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

[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

    return data.map((value, index) => (
      <Circle
        key={index}
        cx={x(value.date)}
        cy={y(value.value)}
        r={4}
        stroke={'rgb(134, 255, 244)'}
        fill={'black'}
      />
    ));
  };

  Line = ({line}) => (
    <Path d={line} stroke={'rgba(134, 255, 244)'} fill={'none'} />
  );

  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>
    );
  }
}