Skip to content

Commit

Permalink
fix(crosshair): adjust band position for rotation (#220)
Browse files Browse the repository at this point in the history
  • Loading branch information
@emmacunningham
emmacunningham authored Jun 6, 2019
1 parent efcde34 commit ac02021
Show file tree
Hide file tree
Showing 5 changed files with 116 additions and 41 deletions.
2 changes: 1 addition & 1 deletion src/state/chart_state.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -292,7 +292,7 @@ export class ChartStore {
const updatedCursorBand = getCursorBandPosition(
this.chartRotation,
this.chartDimensions,
this.cursorPosition,
{ x: xAxisCursorPosition, y: yAxisCursorPosition},
this.isTooltipSnapEnabled.get(),
this.xScale,
this.geometriesIndexKeys,
Expand Down
67 changes: 34 additions & 33 deletions src/state/crosshair_utils.linear_snap.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -453,8 +453,9 @@ describe('Crosshair utils linear scale', () => {
[0, 1, 2],
1,
);

expect(bandPosition).toEqual({
left: 0,
left: 120,
top: 0,
height: 100,
width: 1,
Expand All @@ -472,7 +473,7 @@ describe('Crosshair utils linear scale', () => {
1,
);
expect(bandPosition).toEqual({
left: 0,
left: 120,
top: 0,
height: 100,
width: 1,
Expand All @@ -490,7 +491,7 @@ describe('Crosshair utils linear scale', () => {
1,
);
expect(bandPosition).toEqual({
left: 40,
left: 80,
top: 0,
height: 100,
width: 1,
Expand All @@ -508,7 +509,7 @@ describe('Crosshair utils linear scale', () => {
1,
);
expect(bandPosition).toEqual({
left: 90,
left: 30,
top: 0,
height: 100,
width: 1,
Expand Down Expand Up @@ -544,7 +545,7 @@ describe('Crosshair utils linear scale', () => {
1,
);
expect(bandPosition).toEqual({
left: 0,
left: 120,
top: 0,
height: 100,
width: 1,
Expand All @@ -562,7 +563,7 @@ describe('Crosshair utils linear scale', () => {
1,
);
expect(bandPosition).toEqual({
left: 0,
left: 120,
top: 0,
height: 100,
width: 1,
Expand All @@ -580,7 +581,7 @@ describe('Crosshair utils linear scale', () => {
1,
);
expect(bandPosition).toEqual({
left: 0,
left: 120,
top: 0,
height: 100,
width: 1,
Expand Down Expand Up @@ -616,7 +617,7 @@ describe('Crosshair utils linear scale', () => {
1,
);
expect(bandPosition).toEqual({
left: 120,
left: 0,
top: 0,
height: 100,
width: 1,
Expand Down Expand Up @@ -671,7 +672,7 @@ describe('Crosshair utils linear scale', () => {
);
expect(bandPosition).toEqual({
left: 0,
top: 0,
top: 45,
height: 1,
width: 120,
});
Expand All @@ -689,7 +690,7 @@ describe('Crosshair utils linear scale', () => {
);
expect(bandPosition).toEqual({
left: 0,
top: 40,
top: 0,
height: 1,
width: 120,
});
Expand All @@ -707,7 +708,7 @@ describe('Crosshair utils linear scale', () => {
);
expect(bandPosition).toEqual({
left: 0,
top: 90,
top: 0,
height: 1,
width: 120,
});
Expand Down Expand Up @@ -761,7 +762,7 @@ describe('Crosshair utils linear scale', () => {
);
expect(bandPosition).toEqual({
left: 0,
top: 0,
top: 60,
height: 1,
width: 120,
});
Expand Down Expand Up @@ -797,7 +798,7 @@ describe('Crosshair utils linear scale', () => {
);
expect(bandPosition).toEqual({
left: 0,
top: 60,
top: 0,
height: 1,
width: 120,
});
Expand All @@ -815,7 +816,7 @@ describe('Crosshair utils linear scale', () => {
);
expect(bandPosition).toEqual({
left: 0,
top: 120,
top: 0,
height: 1,
width: 120,
});
Expand Down Expand Up @@ -851,7 +852,7 @@ describe('Crosshair utils linear scale', () => {
);
expect(bandPosition).toEqual({
left: 0,
top: 0,
top: 100,
height: 1,
width: 120,
});
Expand All @@ -869,7 +870,7 @@ describe('Crosshair utils linear scale', () => {
);
expect(bandPosition).toEqual({
left: 0,
top: 0,
top: 55,
height: 1,
width: 120,
});
Expand All @@ -887,7 +888,7 @@ describe('Crosshair utils linear scale', () => {
);
expect(bandPosition).toEqual({
left: 0,
top: 40,
top: 100,
height: 1,
width: 120,
});
Expand All @@ -905,7 +906,7 @@ describe('Crosshair utils linear scale', () => {
);
expect(bandPosition).toEqual({
left: 0,
top: 90,
top: 100,
height: 1,
width: 120,
});
Expand Down Expand Up @@ -941,7 +942,7 @@ describe('Crosshair utils linear scale', () => {
);
expect(bandPosition).toEqual({
left: 0,
top: 0,
top: 100,
height: 1,
width: 120,
});
Expand All @@ -959,7 +960,7 @@ describe('Crosshair utils linear scale', () => {
);
expect(bandPosition).toEqual({
left: 0,
top: 0,
top: 40,
height: 1,
width: 120,
});
Expand All @@ -977,7 +978,7 @@ describe('Crosshair utils linear scale', () => {
);
expect(bandPosition).toEqual({
left: 0,
top: 0,
top: 100,
height: 1,
width: 120,
});
Expand All @@ -995,7 +996,7 @@ describe('Crosshair utils linear scale', () => {
);
expect(bandPosition).toEqual({
left: 0,
top: 60,
top: 100,
height: 1,
width: 120,
});
Expand All @@ -1013,7 +1014,7 @@ describe('Crosshair utils linear scale', () => {
);
expect(bandPosition).toEqual({
left: 0,
top: 120,
top: 100,
height: 1,
width: 120,
});
Expand Down Expand Up @@ -1156,7 +1157,7 @@ describe('Crosshair utils linear scale', () => {
1,
);
expect(bandPosition).toEqual({
left: 0,
left: 80,
top: 0,
height: 100,
width: 40,
Expand All @@ -1174,7 +1175,7 @@ describe('Crosshair utils linear scale', () => {
1,
);
expect(bandPosition).toEqual({
left: 0,
left: 80,
top: 0,
height: 100,
width: 40,
Expand Down Expand Up @@ -1210,7 +1211,7 @@ describe('Crosshair utils linear scale', () => {
1,
);
expect(bandPosition).toEqual({
left: 80,
left: 0,
top: 0,
height: 100,
width: 40,
Expand Down Expand Up @@ -1265,7 +1266,7 @@ describe('Crosshair utils linear scale', () => {
);
expect(bandPosition).toEqual({
left: 0,
top: 0,
top: 40,
height: 40,
width: 120,
});
Expand All @@ -1283,7 +1284,7 @@ describe('Crosshair utils linear scale', () => {
);
expect(bandPosition).toEqual({
left: 0,
top: 40,
top: 0,
height: 40,
width: 120,
});
Expand All @@ -1301,7 +1302,7 @@ describe('Crosshair utils linear scale', () => {
);
expect(bandPosition).toEqual({
left: 0,
top: 80,
top: 0,
height: 40,
width: 120,
});
Expand Down Expand Up @@ -1337,7 +1338,7 @@ describe('Crosshair utils linear scale', () => {
);
expect(bandPosition).toEqual({
left: 0,
top: 0,
top: 60,
height: 40,
width: 120,
});
Expand All @@ -1355,7 +1356,7 @@ describe('Crosshair utils linear scale', () => {
);
expect(bandPosition).toEqual({
left: 0,
top: 0,
top: 20,
height: 40,
width: 120,
});
Expand All @@ -1373,7 +1374,7 @@ describe('Crosshair utils linear scale', () => {
);
expect(bandPosition).toEqual({
left: 0,
top: 40,
top: 60,
height: 40,
width: 120,
});
Expand All @@ -1391,7 +1392,7 @@ describe('Crosshair utils linear scale', () => {
);
expect(bandPosition).toEqual({
left: 0,
top: 80,
top: 60,
height: 40,
width: 120,
});
Expand Down
25 changes: 20 additions & 5 deletions src/state/crosshair_utils.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ export function getSnapPosition(
if (position === undefined) {
return;
}

if (scale.bandwidth > 0) {
const band = scale.bandwidth / (1 - scale.barsPadding);
const halfPadding = (band - scale.bandwidth) / 2;
Expand Down Expand Up @@ -72,29 +73,43 @@ export function getCursorBandPosition(
): Dimensions | undefined {
const { top, left, width, height } = chartDimensions;
const { x, y } = cursorPosition;
if (x > width || y > height || x < 0 || y < 0) {
const isHorizontalRotated = isHorizontalRotation(chartRotation);

const chartWidth = isHorizontalRotated ? width : height;
const chartHeight = isHorizontalRotated ? height : width;
if (x > chartWidth || y > chartHeight || x < 0 || y < 0) {
return;
}
const isHorizontalRotated = isHorizontalRotation(chartRotation);
const invertedValue = xScale.invertWithStep(isHorizontalRotated ? x : y, data);

const invertedValue = xScale.invertWithStep(x, data);

if (invertedValue == null) {
return;
}
const snappedPosition = getSnapPosition(invertedValue, xScale, totalBarsInCluster);
if (!snappedPosition) {
return;
}

const { position, band } = snappedPosition;
const bandOffset = xScale.bandwidth > 0 ? band : 0;

if (isHorizontalRotated) {
const adjustedLeft = snapEnabled ? position : x;
const leftPosition = chartRotation === 0 ? left + adjustedLeft : left + width - adjustedLeft - bandOffset;

return {
top,
left: left + (snapEnabled ? position : x),
left: leftPosition,
width: band,
height,
};
} else {
const adjustedTop = snapEnabled ? position : x;
const topPosition = chartRotation === 90 ? top + adjustedTop : height + top - adjustedTop - bandOffset;

return {
top: top + (snapEnabled ? position : y),
top: topPosition,
left,
width,
height: band,
Expand Down
Loading

0 comments on commit ac02021

Please sign in to comment.