Still a resize bug after 0.4.8...

[mariusk]

There's still a resize bug in there, but I have no idea whether it is related to D3 itself or this component (see attached screenshot). It's harder to provoke on desktop, but on an Android phone it manifests itself every time when switching from portrait to landscape.

As you can see from the screenshot, the inner g element that contains the actual graph does not resize correctly, while the rest of the graph does (axis and outer elements). A simple workaround is to set a "key" attribute with a "current timestamp", forcing React to recreate the graph element in the DOM on each (size related) update, but that's doing a lot more work than strictly necessary.

[codesuki]

Hey thanks for the report!
The graph should fill out the whole axis right?
And this happens if you resize the parent component?
I will check it out tomorrow when I am back at work.

[mariusk]

Yes, the graph should fill out the whole axis, and yes, it happens when the parent resizes. The axis resizes correctly, but not all the children (which my highlight shows). Thanks.

[codesuki]

I am looking at the code here but didn't find anything yet.
BTW did you use the default scales or provide your own ones? I think I found a (not related problem) there too hehe.
Since when you pass a timestamp the problem is fixed that means the data is correct but it doesn't get re-rendered I guess?
Need to find a way to replicate this.

[mariusk]

I make my own scales. The graph is actually data from the three last years, where I modify the previous years to set them the same as the latest year, so the scale is always one full year. And yes, the timestamps are correct. If I keep resizing (back to portrait on mobiles for instance) it renders correctly again. The way I've worked around this bug in my current app is I set a timestamp as the key for the graph element, so whenever resize events happens the graph will get recreated (forcefully). I do not currently have a minimal example demonstrating the problem. Not yet at least.

[mariusk]

FWIW, here's the actual code that create the structure that is fed straight into LineChart:

  createCharts: function(datas, width) {
    if (!width)
      return null;
    let firstSet = datas[0];
    let lastSet = datas[datas.length-1];
    const rmargin = 0;
    const lmargin = 26;
    const lastdate = lastSet.values[ lastSet.values.length-1 ].x;
    const endDate = new Date(lastdate.getFullYear(), 11, 31, 23, 59, 59);
    const startDate = new Date(lastdate.getFullYear(), 0, 1);
    let xScale = d3.time.scale().domain([startDate,
                                         endDate])
          .range([0, width-lmargin-rmargin]);


    let colors = d3.scale.ordinal()
          .domain(this.state.chart_wl_keys)
          .range(['#ffe0e0', '#ffb0b0', '#ff0000']);

    let chart_wl = {
      data: datas,
      margin: {top: 10, bottom: 50, left: lmargin, right: rmargin},
      width: width,
      height: 180,
      xScale: xScale,
      key: (new Date()).getTime(),
      stroke: {strokeWidth: '3', strokeLinecap: 'round'},
      colorScale: colors,
      xAxis: {tickValues: xScale.ticks(d3.time.month, 1),
              tickFormat: d3.time.format("%b")}
    };

    return chart_wl;
  },

This gets called after each update with the updated width parameter.