Fixes RadarChart axes (#796)

[NoobCIT]

I ran into the same issue (#796). The RadarChart axes does not show or is displayed incorrectly (ex. wrong number of ticks) depending on what the startingAngle is. Rotating your graph a certain degree can cause these problems, because JavaScript's trigonometric functions (ex. Math.sin & Math.cos) can return numbers with floating point errors (see table below). These floating point numbers can cause calculation errors.

Trig Function	Angle	JavaScript Value	True Value
sin	PI	1.2246467991473532e-16	0
cos	PI/3	0.5000000000000001	0.5

Shown below is what I used for my RadarChart.

class App extends Component {
  render() {
    const RADAR_PROPS = {
      data: [{
        C: 30,
        VisualBasics: 60,
        Excel: 40,
        Access: 40
      }],
      domains: [
        {name: 'C', domain: [0, 100]},
        {name: 'VisualBasics', domain: [0, 100]},
        {name: 'Excel', domain: [0, 100]},
        {name: 'Access', domain: [0, 100]}
      ],
      height: 300,
      width: 400,
    };
    return (
      <div>
        <RadarChart
          data={RADAR_PROPS.data}
          domains={RADAR_PROPS.domains}
          height={RADAR_PROPS.height}
          width={RADAR_PROPS.height}
          startingAngle={Math.PI/4}
          className='overflow-okay horizontally-centered'
          style={{
              labels: {
                  fontSize: 13
              },
              polygons: {
                  fillOpacity: 0.1,
                  strokeOpacity: 1,
                  strokeWidth: 0.5,
              },
          }}
        />
      </div>
    );
  }
}

For the src/utils/axis-utils.js, I wanted to make sure the axes displayed the correct number of ticks, because there could be cases where maybe more ticks would be generated than what was specified. Let me know what you think. Thanks.

[jckr]

thanks @NoobCIT !

[mcnuttandrew]

I actually would like to see a follow up to this with some tests, there's some behavior in there that i'm not 100% sure about.

• I get that you are basically just doing rounding, but could you do it more explicitly?
• It's not clear that this change in functionality addresses the issue, would you mind writing a test to reproduce the described issue so we don't back slide in future iterations?

[NoobCIT]

@mcnuttandrew , yeah I'll look into it.