@pie-lib/graphing 2.4.2-next.26 → 2.4.3-next.118

package/src/tools/ray/component.jsx

@@ -5,6 +5,7 @@ import { ArrowMarker, genUid } from '../shared/arrow-head';
 import { trig, types } from '@pie-lib/plot';
 import { withStyles } from '@material-ui/core/styles';
 import classNames from 'classnames';
+import { thinnerShapesNeeded, getAdjustedGraphLimits } from '../../utils';
 
 const markerId = genUid();
 
@@ -18,16 +19,19 @@ const rayStyles = theme => ({
   incorrect: styles.incorrect(theme, 'stroke'),
   incorrectArrow: styles.incorrect(theme)
 });
+
 export const RayLine = props => {
   const { graphProps, from, to, classes, disabled, correctness, className, ...rest } = props;
   const { scale } = graphProps;
-  const [aToB] = trig.edges(graphProps.domain, graphProps.range)(from, to);
+  const { domain, range } = getAdjustedGraphLimits(graphProps);
+  const [aToB] = trig.edges(domain, range)(from, to);
   const suffix = correctness || (disabled && 'disabled') || 'enabled';
 
   return (
     <g>
       <defs>
         <ArrowMarker
+          size={thinnerShapesNeeded(graphProps) ? 4 : 5}
           id={`${props.markerId || markerId}-${suffix}`}
           className={classNames(classes[`${suffix}Arrow`])}
         />

package/src/tools/shared/point/arrow.jsx

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { types } from '@pie-lib/plot';
 import { ArrowHead } from '../arrow-head';
+import { thinnerShapesNeeded } from '../../../utils';
 
 export default class Arrow extends React.Component {
   static propTypes = {
@@ -48,7 +49,7 @@ export default class Arrow extends React.Component {
       ...rest
     } = this.props;
 
-    const size = 14;
+    const size = thinnerShapesNeeded(graphProps) ? 12 : 14;
     const { scale } = graphProps;
 
     const scaledX = scale.x(x);

package/src/tools/shared/point/base-point.jsx

@@ -4,6 +4,7 @@ import classNames from 'classnames';
 import { types } from '@pie-lib/plot';
 import CoordinatesLabel from '../../../coordinates-label';
 import ReactDOM from 'react-dom';
+import { thinnerShapesNeeded } from '../../../utils';
 
 export class RawBp extends React.Component {
   static propTypes = {
@@ -38,6 +39,7 @@ export class RawBp extends React.Component {
     } = this.props;
     const { showCoordinates } = this.state;
     const { scale } = graphProps;
+    const r = thinnerShapesNeeded(graphProps) ? 5 : 7;
 
     return (
       <g
@@ -51,7 +53,7 @@ export class RawBp extends React.Component {
         onMouseLeave={() => this.setState({ showCoordinates: false })}
         {...rest}
       >
-        <circle r="7" cx={scale.x(x)} cy={scale.y(y)} />
+        <circle r={r} cx={scale.x(x)} cy={scale.y(y)} />
         {labelNode &&
           coordinatesOnHover &&
           showCoordinates &&

package/src/utils.js

@@ -132,3 +132,46 @@ export const equalPoints = (p1, p2) =>
       y: roundNumber(p2.y)
     }
   );
+
+const getDistanceBetweenTicks = (axis, size) => {
+  const { min, max, step } = axis;
+  const nbOfTicks = (max - min) / step;
+
+  return size / nbOfTicks;
+};
+
+export const thinnerShapesNeeded = graphProps => {
+  const {
+    domain,
+    range,
+    size: { width, height }
+  } = graphProps;
+
+  // 14 is the default width of a point
+  return getDistanceBetweenTicks(domain, width) < 14 || getDistanceBetweenTicks(range, height) < 14;
+};
+
+export const getAdjustedGraphLimits = graphProps => {
+  const {
+    domain,
+    range,
+    size: { width, height }
+  } = graphProps;
+  const domainTicksDistance = getDistanceBetweenTicks(domain, width);
+  const rangeTicksDistance = getDistanceBetweenTicks(range, height);
+
+  // 15 is the distance required for the arrow to extend the graph
+  const domainPadding = domain.step / (domainTicksDistance / 15);
+  const rangePadding = range.step / (rangeTicksDistance / 15);
+
+  return {
+    domain: {
+      min: domain.min - domainPadding,
+      max: domain.max + domainPadding
+    },
+    range: {
+      min: range.min - rangePadding,
+      max: range.max + rangePadding
+    }
+  };
+};