Problem: Unable to use DataTransform in Component

[trevorbernard]

Console output:

DataTransform.componentWillReceiveProps
bundle.js:83508 Uncaught TypeError: Cannot read property 'config' of undefined

This is the line:

var beginIndex = _utilsUtils2["default"].getClosestItemIndexes(dataForInterval, mainChartData.config.accessors.xAccessor(plotData[0]), mainChartData.config.accessors.xAccessor).left;

This is the code:

            <ChartCanvas width={this.state.width} height={400} margin={{left: 35, right: 50, top:10, bottom: 30}}
                         data={candles}>
              <DataTransform transformType="stockscale">
                <Chart id={1}>
                  <XAxis axisAt="bottom" orient="bottom" ticks={6}/>
                  <YAxis axisAt="left" orient="left" ticks={5}/>
                  <DataSeries yAccessor={CandlestickSeries.yAccessor} xAccessor={(d) => d.date}>
                    <CandlestickSeries />
                  </DataSeries>
                </Chart>
              </DataTransform>
            </ChartCanvas>

and this is my superagent rest call:

    request
      .get(config.api_url + '/candles')
      .accept('application/json')
      .query({
        start: start.format(),
        end: end.format(),
        granularity: granularity
      })
      .end(function (err, res) {
        if (res.ok) {
          var data = res.body;
          var candles = [];
          data.map(d => {
            candles.push({
              date: new Date(d.timestamp),
              open: d.open,
              high: d.high,
              low: d.low,
              close: d.close,
              volume: d.volume
            });
          });
          this.setState({candles: candles});
        }
      }.bind(this));

[rrag]

This error on the 0.1.x and fixed it in the 0.2 branch. Let me see if I can cherry pick that commit over to master.

[rrag]

should be fixed now. Thanks for the defect

[trevorbernard]

That fixed my issue but another one is cropped up. You can view it here: http://imgur.com/4vJoFyr

When I don't have a DataTransform it displays fine and the xaxis doesn't "tick"

This is what I see in the logs

DataTransform.componentWillReceiveProps
bundle.js:82387 Uncaught TypeError: Cannot read property 'idx' of undefined

[rrag]

Can you create this in a plunkr. It appears you have intra day data. stockscale currently supports only end of day data.

[rrag]

can you try to remove the xAccessor={(d) => d.date} in your DataSeries and try

like https://gist.github.com/rrag/1eac0cb78f27b31415ac#file-candlestickstockscalechart-jsx
Line 29

[trevorbernard]

Ok, will try. I was AFK this morning. I'll keep you posted

[trevorbernard]

http://plnkr.co/edit/2vRRTjfkxqi8FpQSfOcW?p=preview

I can change the interval from minutes, hours, days, weeks and months. I can see why some settings won't work from your previous comment. But the same thing still happens even if I choose day interval. But I can't recreate it in plunker.

[rrag]

the problem with

Uncaught TypeError: Cannot read property 'idx' of undefined

is because of stockscale creating an xScale based on xAccessor of d => d.idx and DataSeries overwriting it with the xAccessor with d => d.date.

There should be a better error message or warning

[rrag]

@trevorbernard any luck with the problem? let me know how I can help.

[trevorbernard]

Not much luck though I didn't spend much time looking into this issue. I might spend some time looking at this over the weekend. Also, if you want, we can take this offline. My email is on my github profile.

Best,
Trev

[rrag]

Does not appear to be a problem. I can use DataTransform

Also DataTransform is going away in 0.2, the docs for 0.2 are in progress, and you can see them in the v0.2 branch.