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.

Sign up for GitHub

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

Add support for step, curve, and line links. Issue #174 #194

Merged
merged 1 commit into from
Nov 13, 2017
Merged

Add support for step, curve, and line links. Issue #174 #194

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 12 additions & 3 deletions packages/vx-shape/src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,18 @@ export { default as Pie } from './shapes/Pie';
export { default as Line } from './shapes/Line';
export { default as LinePath } from './shapes/LinePath';
export { default as LineRadial } from './shapes/LineRadial';
export { default as LinkHorizontal } from './shapes/LinkHorizontal';
export { default as LinkVertical } from './shapes/LinkVertical';
export { default as LinkRadial } from './shapes/LinkRadial';
export { default as LinkHorizontal } from './shapes/link/diagonal/LinkHorizontal';
export { default as LinkVertical } from './shapes/link/diagonal/LinkVertical';
export { default as LinkRadial } from './shapes/link/diagonal/LinkRadial';
Copy link
Member

Choose a reason for hiding this comment

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

Will probably need to export ./shapes/link/diagonal/{LinkHorizontal, LinkVertical, LinkRadial} from ./shapes/{LinkHorizontal, LinkVertical, LinkRadial} else it's a breaking change for folks deep linking to the components

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

I tried to fix this but was running into problems (I don't know if it was from Lerna or something else).

For example, I recreated src/shapes/LinkHorizontal.js and added export * from './link/diagonal/LinkHorizontal'; to re-export from this location, but when I tried up update the reference in vx-demo tree.js from

import { LinkHorizontal } from '@vx/shape';

to

import LinkHorizontal from '@vx/shape/shapes/LinkHorizontal'

I'm getting a dependency error.

image

I tried running npm run build within vx-shape and restarting npm run dev on `vx-demo.

Any ideas?

Copy link
Member

@hshoff hshoff Nov 13, 2017 •
edited
Loading

Choose a reason for hiding this comment

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

does this work?

// src/shapes/LinkHorizontal.js
export { default as LinkHorizontal } from './shapes/link/diagonal/LinkHorizontal';

then run npm run build in vx-shape again

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

It does not.

After that change, I also tried importing using

import LinkHorizontal from '@vx/shape/shapes/LinkHorizontal'

and

import LinkHorizontal from '@vx/shape/LinkHorizontal'

Copy link
Member

Choose a reason for hiding this comment

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

No worries, i'll take a look after merging.

export { default as LinkHorizontalCurve } from './shapes/link/curve/LinkHorizontalCurve';
export { default as LinkVerticalCurve } from './shapes/link/curve/LinkVerticalCurve';
export { default as LinkRadialCurve } from './shapes/link/curve/LinkRadialCurve';
export { default as LinkHorizontalLine } from './shapes/link/line/LinkHorizontalLine';
export { default as LinkVerticalLine } from './shapes/link/line/LinkVerticalLine';
export { default as LinkRadialLine } from './shapes/link/line/LinkRadialLine';
export { default as LinkHorizontalStep } from './shapes/link/step/LinkHorizontalStep';
export { default as LinkVerticalStep } from './shapes/link/step/LinkVerticalStep';
export { default as LinkRadialStep } from './shapes/link/step/LinkRadialStep';
export { default as Area } from './shapes/Area';
export { default as AreaClosed } from './shapes/AreaClosed';
export { default as AreaStack } from './shapes/AreaStack';
Expand Down
46 changes: 46 additions & 0 deletions packages/vx-shape/src/shapes/link/curve/LinkHorizontalCurve.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
import React from 'react';
import cx from 'classnames';
import PropTypes from 'prop-types';
import { pointRadial } from 'd3-shape';
import additionalProps from '../../../util/additionalProps';

LinkHorizontalCurve.propTypes = {
innerRef: PropTypes.func
};

export default function LinkHorizontalCurve({
className,
innerRef,
data,
x = d => d.y,
y = d => d.x,
...restProps
}) {

const curve = (source, target) => {
const sx = x(source);
const sy = y(source);
const tx = x(target);
const ty = y(target);

const dx = tx - sx;
const dy = ty - sy;
const ix = 0.2 * (dx + dy);
const iy = 0.2 * (dy - dx);

return `M${sx},${sy}
C${sx + ix},${sy + iy}
${tx + iy},${ty - ix}
${tx},${ty}
`;
};

return (
<path
ref={innerRef}
className={cx('vx-link', className)}
d={curve(data.source, data.target)}
{...restProps}
/>
);
}
56 changes: 56 additions & 0 deletions packages/vx-shape/src/shapes/link/curve/LinkRadialCurve.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
import React from 'react';
import cx from 'classnames';
import PropTypes from 'prop-types';
import { pointRadial } from 'd3-shape';
import additionalProps from '../../../util/additionalProps';

LinkRadialCurve.propTypes = {
innerRef: PropTypes.func
};

export default function LinkRadialCurve({
className,
innerRef,
data,
x = d => d.x,
y = d => d.y,
...restProps
}) {

const curve = (source, target) => {
const sa = x(source) - Math.PI / 2;
const sr = y(source);
const ta = x(target) - Math.PI / 2;
const tr = y(target);

const sc = Math.cos(sa);
const ss = Math.sin(sa);
const tc = Math.cos(ta);
const ts = Math.sin(ta);

const sx = sr * sc;
const sy = sr * ss;
const tx = tr * tc;
const ty = tr * ts;

const dx = tx - sx;
const dy = ty - sy;
const ix = 0.2 * (dx + dy);
const iy = 0.2 * (dy - dx);
Copy link
Member

Choose a reason for hiding this comment

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

should the 0.2 be configurable here?

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

I played around with this but I didn't see much benefit as this is being built using cubic bezier curves (C path command) that I ported from Vega. We would probably need to expose both of these 0.2 separately, but I wasn't sure what to call them, etc.

I took a quick stab at using a simpler quadratic curve (Q path command) where a single "midpoint" would define the curve but I was having trouble creating the same curve.

I've kicked around the idea in my head a bit and part of me thinks exposing <HorizontalLink curve={curve} />, <VerticalLink curve={curve} /> and <RadialLink curve={curve} /> and allow passing the curve function similar to show d3-shape does this. This is basically what my line functions are doing, such as...

const step = (source, target) => {
    const sa = x(source) - Math.PI / 2;
    const sr = y(source);
    const ta = x(target) - Math.PI / 2;
    const tr = y(target);

    const sc = Math.cos(sa);
    const ss = Math.sin(sa);
    const tc = Math.cos(ta);
    const ts = Math.sin(ta);
    const sf = Math.abs(ta - sa) > Math.PI ? ta <= sa : ta > sa;
    
    return `
      M${sr * sc},${sr * ss}
      A${sr},${sr} 0 0,${sf ? 1 : 0}
      ${sr * tc},${sr * ts}
      L${tr * tc},${tr * ts}
    `;
  };

I haven't looked to much into the details on how to implement this (looks like you you're supposed to use the custom curves api). This might also be overkill for 2 points...

I still think exposing the simple LinkHorizontalStep is the way to go, this is more for the customization beyond the defaults...


return `M${sx},${sy}
C${sx + ix},${sy + iy}
${tx + iy},${ty - ix}
${tx},${ty}
`;
};

return (
<path
ref={innerRef}
className={cx('vx-link', className)}
d={curve(data.source, data.target)}
{...restProps}
/>
);
}
46 changes: 46 additions & 0 deletions packages/vx-shape/src/shapes/link/curve/LinkVerticalCurve.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
import React from 'react';
import cx from 'classnames';
import PropTypes from 'prop-types';
import { pointRadial } from 'd3-shape';
import additionalProps from '../../../util/additionalProps';

LinkVerticalCurve.propTypes = {
innerRef: PropTypes.func
};

export default function LinkVerticalCurve({
className,
innerRef,
data,
x = d => d.x,
y = d => d.y,
...restProps
}) {

const curve = (source, target) => {
const sx = x(source);
const sy = y(source);
const tx = x(target);
const ty = y(target);

const dx = tx - sx;
const dy = ty - sy;
const ix = 0.2 * (dx + dy);
const iy = 0.2 * (dy - dx);

return `M${sx},${sy}
C${sx + ix},${sy + iy}
${tx + iy},${ty - ix}
${tx},${ty}
`;
};

return (
<path
ref={innerRef}
className={cx('vx-link', className)}
d={curve(data.source, data.target)}
{...restProps}
/>
);
}
2 changes: 1 addition & 1 deletion ...ges/vx-shape/src/shapes/LinkHorizontal.js → ...rc/shapes/link/diagonal/LinkHorizontal.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import React from 'react';
import cx from 'classnames';
import PropTypes from 'prop-types';
import { linkHorizontal } from 'd3-shape';
import additionalProps from '../util/additionalProps';
import additionalProps from '../../../util/additionalProps';

LinkHorizontal.propTypes = {
innerRef: PropTypes.func,
Expand Down
9 changes: 8 additions & 1 deletion packages/vx-shape/src/shapes/LinkRadial.js → ...pe/src/shapes/link/diagonal/LinkRadial.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,16 @@
import React from 'react';
import cx from 'classnames';
import PropTypes from 'prop-types';
import { linkRadial } from 'd3-shape';
import additionalProps from '../util/additionalProps';
import additionalProps from '../../../util/additionalProps';

LinkRadial.propTypes = {
innerRef: PropTypes.func,
};

export default function LinkRadial({
className,
innerRef,
data,
angle = d => d.x,
radius = d => d.y,
Expand All @@ -15,6 +21,7 @@ export default function LinkRadial({
link.radius(radius);
return (
<path
ref={innerRef}
className={cx('vx-link-radius', className)}
d={link(data)}
{...additionalProps(restProps, data)}
Expand Down
2 changes: 1 addition & 1 deletion packages/vx-shape/src/shapes/LinkVertical.js → .../src/shapes/link/diagonal/LinkVertical.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import React from 'react';
import cx from 'classnames';
import PropTypes from 'prop-types';
import { linkVertical } from 'd3-shape';
import additionalProps from '../util/additionalProps';
import additionalProps from '../../../util/additionalProps';

LinkVertical.propTypes = {
innerRef: PropTypes.func,
Expand Down
31 changes: 31 additions & 0 deletions packages/vx-shape/src/shapes/link/line/LinkHorizontalLine.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
import React from 'react';
import cx from 'classnames';
import PropTypes from 'prop-types';
import additionalProps from '../../../util/additionalProps';

LinkHorizontalLine.propTypes = {
innerRef: PropTypes.func
};

export default function LinkHorizontalLine({
className,
innerRef,
data,
x = d => d.y,
y = d => d.x,
...restProps
}) {
const line = (source, target) => `
M${x(source)},${y(source)}
L${x(target)},${y(target)}
`;

return (
<path
ref={innerRef}
className={cx('vx-link', className)}
d={line(data.source, data.target)}
{...restProps}
/>
);
}
45 changes: 45 additions & 0 deletions packages/vx-shape/src/shapes/link/line/LinkRadialLine.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
import React from 'react';
import cx from 'classnames';
import PropTypes from 'prop-types';
import { pointRadial } from 'd3-shape';
import additionalProps from '../../../util/additionalProps';

LinkRadialStep.propTypes = {
innerRef: PropTypes.func
};

export default function LinkRadialStep({
className,
innerRef,
data,
x = d => d.x,
y = d => d.y,
...restProps
}) {

const line = (source, target) => {
const sa = x(source) - Math.PI / 2;
const sr = y(source);
const ta = x(target) - Math.PI / 2;
const tr = y(target);

const sc = Math.cos(sa);
const ss = Math.sin(sa);
const tc = Math.cos(ta);
const ts = Math.sin(ta);

return `
M${sr * sc},${sr * ss}
L${tr * tc},${tr * ts}
`;
};

return (
<path
ref={innerRef}
className={cx('vx-link', className)}
d={line(data.source, data.target)}
{...restProps}
/>
);
}
31 changes: 31 additions & 0 deletions packages/vx-shape/src/shapes/link/line/LinkVerticalLine.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
import React from 'react';
import cx from 'classnames';
import PropTypes from 'prop-types';
import additionalProps from '../../../util/additionalProps';

LinkVerticalLine.propTypes = {
innerRef: PropTypes.func
};

export default function LinkVerticalLine({
className,
innerRef,
data,
x = d => d.x,
y = d => d.y,
...restProps
}) {
const line = (source, target) => `
M${x(source)},${y(source)}
L${x(target)},${y(target)}
`;

return (
<path
ref={innerRef}
className={cx('vx-link', className)}
d={line(data.source, data.target)}
{...restProps}
/>
);
}
35 changes: 35 additions & 0 deletions packages/vx-shape/src/shapes/link/step/LinkHorizontalStep.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
import React from 'react';
import cx from 'classnames';
import PropTypes from 'prop-types';
import additionalProps from '../../../util/additionalProps';

LinkHorizontalStep.propTypes = {
innerRef: PropTypes.func,
percent: PropTypes.number
};

export default function LinkHorizontalStep({
className,
innerRef,
data,
percent = 0.5,
x = d => d.y,
y = d => d.x,
...restProps
}) {
const line = (source, target) => `
M${x(source)},${y(source)}
H${x(source) + (x(target) - x(source)) * percent}
V${y(target)}
H${x(target)}
`;

return (
<path
ref={innerRef}
className={cx('vx-link', className)}
d={line(data.source, data.target)}
{...restProps}
/>
);
}
Loading