Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

X Linear scale wrongly compute ticks #364

Closed
markov00 opened this issue Aug 30, 2019 · 1 comment · Fixed by #384
Closed

X Linear scale wrongly compute ticks #364

markov00 opened this issue Aug 30, 2019 · 1 comment · Fixed by #384
Assignees
Labels
:axis Axis related issue bug Something isn't working :data Data/series/scales related issue released Issue released publicly

Comments

@markov00
Copy link
Member

Describe the bug
The x scale compute uneven ticks for simple x linear charts:

To Reproduce
Use the following chart in the playground:

const data = [
      { x: 7.053400039672852, y: 1.019049570549345, dataMin: 7.053400039672852, dataMax: 14.680128231140726, percent: 10 },
      { x: 16.8664653595564, y: 1.5285743558240172, dataMin: 14.680128231140726, dataMax: 20.721481475600584, percent: 15 },
      { x: 26.67953067943995, y: 0.5095247852746725, dataMin: 20.721481475600584, dataMax: 31.134000474396174, percent: 5 },
      { x: 36.4925959993235, y: 0.12998767296647204, dataMin: 31.134000474396174, dataMax: 74.95778185805996, percent: 5 },
      { x: 74.95778185805996, y: 0.3718786139686189, dataMin: 74.95778185805996, dataMax: 88.40302934524654, percent: 5 },
      { x: 88.40302934524654, y: 0.14487824285108267, dataMin: 88.40302934524654, dataMax: 122.9147676270215, percent: 5 },
      { x: 122.9147676270215, y: 0.07890686802154025, dataMin: 122.9147676270215, dataMax: 186.28060795710638, percent: 5 },
      { x: 186.28060795710638, y: 0.4344198127360625, dataMin: 186.28060795710638, dataMax: 197.79021192408248, percent: 5 },
      { x: 197.79021192408248, y: 0.47910304703632484, dataMin: 197.79021192408248, dataMax: 208.22638015747071, percent: 5 },
      { x: 208.22638015747071, y: 0.15180409193531094, dataMin: 208.22638015747071, dataMax: 241.16356871580467, percent: 5 },
      { x: 241.16356871580467, y: 0.0778711327650822, dataMin: 241.16356871580467, dataMax: 305.3722147500643, percent: 5 },
      { x: 305.3722147500643, y: 0.05038552439310782, dataMin: 305.3722147500643, dataMax: 404.60706563679923, percent: 5 },
      { x: 404.60706563679923, y: 0.04950569918337908, dataMin: 404.60706563679923, dataMax: 505.60553818596964, percent: 5 },
      { x: 505.60553818596964, y: 0.010256529428346779, dataMin: 505.60553818596964, dataMax: 993.0998738606771, percent: 5 },
      { x: 993.0998738606771, y: 0.06490505477669992, dataMin: 993.0998738606771, dataMax: 1070.1354763603908, percent: 5 },
      { x: 1070.1354763603908, y: 0, dataMin: 993.0998738606771, dataMax: 1070.1354763603908, percent: 5 },
    ]
    return (
      <Fragment>
        <div className="chart">
          <Chart>
            <Axis
              id={getAxisId('bottom')}
              position={Position.Bottom}
              tickFormat={d => d.toFixed(0)}
              ticks={5}

            />
            <Axis
              id={getAxisId('left')}
              position={Position.Left}
              tickFormat={d => d.toFixed(1)}
              hide={true}
            />
            <AreaSeries
              id={getSpecId('aaa')}
              name={'aaa'}
              xScaleType={ScaleType.Linear}
              yScaleType={ScaleType.Linear}
              xAccessor="x"
              yAccessors={['y']}
              data={data}
              curve={CurveType.CURVE_STEP_AFTER}
            />
          </Chart>
        </div>
      </Fragment>
    );

Expected behavior
The ticks should be evenly distributed 0, 10, 15 etc

Screenshot 2019-08-30 at 16 29 01

Screenshots
This is the current output
Screenshot 2019-08-30 at 16 28 04

Version (please complete the following information):

  • OS: all
  • Browser: all
  • Elastic Charts: 11.x

Additional context
Seems that for area/line chart the minInterval is computed and used in the continuous scale ticks. I think we use this only for band linear charts

if (this.minInterval > 0) {
        const intervalCount = Math.floor((this.domain[1] - this.domain[0]) / this.minInterval);
        this.tickValues = new Array(intervalCount + 1).fill(0).map((d, i) => {
          return this.domain[0] + i * this.minInterval;
        });
      } else {

Errors in browser console
n/a

Kibana Cross Issues
n/a

Checklist

  • [ ] every related Kibana issue is listed under Kibana Cross Issues list
  • [ ] kibana cross issue tag is associated to the issue if any kibana cross issue is present
@markov00 markov00 added bug Something isn't working :data Data/series/scales related issue :axis Axis related issue labels Aug 30, 2019
@nickofthyme nickofthyme self-assigned this Sep 13, 2019
@markov00
Copy link
Member Author

🎉 This issue has been resolved in version 13.0.1 🎉

The release is available on:

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
:axis Axis related issue bug Something isn't working :data Data/series/scales related issue released Issue released publicly
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants