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

Use isPointInside function for both graphs and axis #14222

Merged
merged 2 commits into from
Aug 19, 2024

Conversation

JCQuintas
Copy link
Member

  • This normalises the code to use the same logic in both instances.
  • It also fixes an issue where the axis would show before the datapoint, even though the were displayed in the same line.
import * as React from 'react';
import { ScatterChartPro, ZoomData } from '@mui/x-charts-pro';

export default function AreaBaseline() {
  const [scatterZoom, setScatterZoom] = React.useState<ZoomData[]>([
    { axisId: 'b11', start: 11, end: 49 },
  ]);

  return (
      <ScatterChartPro
        xAxis={[{ id: 'b11', zoom: true }]}
        series={[
          {
            data: [
              { id: 0, x: 1, y: 100 },
              { id: 2, x: 5, y: 200 },
              { id: 3, x: 10, y: 300 },
              { id: 4, x: 15, y: 400 },
              { id: 5, x: 20, y: 500 },
            ],
          },
        ]}
        zoom={scatterZoom}
        onZoomChange={setScatterZoom}
        width={500}
        height={300}
        leftAxis={{}}
        rightAxis={{}}
        topAxis={{}}
        bottomAxis={{}}
      />
      <ScatterChartPro
        yAxis={[{ id: 'b11', zoom: true }]}
        series={[
          {
            data: [
              { id: 0, x: 1, y: 100 },
              { id: 2, x: 5, y: 200 },
              { id: 3, x: 10, y: 300 },
              { id: 4, x: 15, y: 400 },
              { id: 5, x: 20, y: 500 },
            ],
          },
        ]}
        leftAxis={{}}
        rightAxis={{}}
        topAxis={{}}
        bottomAxis={{}}
        zoom={scatterZoom}
        onZoomChange={setScatterZoom}
        width={500}
        height={300}
      />
  );
}

@JCQuintas JCQuintas marked this pull request as ready for review August 15, 2024 13:28
@JCQuintas JCQuintas self-assigned this Aug 15, 2024
@JCQuintas JCQuintas added bug 🐛 Something doesn't work component: charts This is the name of the generic UI component, not the React module! labels Aug 15, 2024
@mui-bot
Copy link

mui-bot commented Aug 15, 2024

Deploy preview: https://deploy-preview-14222--material-ui-x.netlify.app/

Generated by 🚫 dangerJS against 37bc0d7

Copy link

codspeed-hq bot commented Aug 15, 2024

CodSpeed Performance Report

Merging #14222 will not alter performance

Comparing JCQuintas:fix-is-point-inside-offsets (37bc0d7) with master (c911ad5)

Summary

✅ 3 untouched benchmarks

Comment on lines 220 to 221
const showTick = isPointInside({ x: offset }, { direction: 'x' });
const showTickLabel = isPointInside({ x: offset + xTickLabel }, { direction: 'x' });
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not sure if it matters much, but the shape { x?: number, y:? number } is un-monomorphizing the isPointInside function. If it's a hot function, could be worth to pass a placeholder value like { x: offset, y: -1 }.

Copy link
Member

@alexfauquette alexfauquette left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM. Feel free to implement Romain proposal. It's true that this function might be called a lot

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug 🐛 Something doesn't work component: charts This is the name of the generic UI component, not the React module!
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants