fix(brush): upper bound for selection (#5044)

__tests__/integration/api-chart-emit-brush-highlight-x.spec.ts

@@ -0,0 +1,27 @@
+import { chartEmitBrushHighlightX as render } from '../plots/api/chart-emit-brush-highlight-x';
+import { createNodeGCanvas } from './utils/createNodeGCanvas';
+import { sleep } from './utils/sleep';
+import { kebabCase } from './utils/kebabCase';
+import './utils/useSnapshotMatchers';
+
+describe('chart.options.autoFit', () => {
+  const dir = `${__dirname}/snapshots/api/${kebabCase(render.name)}`;
+  const canvas = createNodeGCanvas(800, 500);
+
+  it('chart({ autoFit: true }) should fit parent container', async () => {
+    const { highlighted, finished, button } = render({
+      canvas,
+      container: document.createElement('div'),
+    });
+    await finished;
+
+    button.dispatchEvent(new CustomEvent('click'));
+    await highlighted;
+    await sleep(20);
+    await expect(canvas).toMatchCanvasSnapshot(dir, 'step0');
+  });
+
+  afterAll(() => {
+    canvas?.destroy();
+  });
+});

__tests__/plots/api/chart-emit-brush-highlight-x.ts

@@ -0,0 +1,67 @@
+import { Chart } from '../../../src';
+
+export function chartEmitBrushHighlightX(context) {
+  const { container, canvas } = context;
+
+  // button
+  const button = document.createElement('button');
+  button.innerText = 'Highlight';
+  container.appendChild(button);
+
+  // wrapperDiv
+  const wrapperDiv = document.createElement('div');
+  container.appendChild(wrapperDiv);
+
+  const chart = new Chart({
+    theme: 'classic',
+    container: wrapperDiv,
+    paddingBottom: 120,
+    width: 1000,
+    canvas,
+  });
+
+  chart.data([
+    { date: '2001-01', value: 100 },
+    { date: '2001-02', value: 400 },
+    { date: '2001-03', value: 500 },
+    { date: '2001-04', value: 600 },
+    { date: '2001-05', value: 300 },
+    { date: '2001-06', value: 600 },
+    { date: '2001-07', value: 300 },
+    { date: '2001-08', value: 600 },
+    { date: '2001-09', value: 109 },
+    { date: '2001-10', value: 100 },
+    { date: '2001-11', value: 102 },
+    { date: '2001-12', value: 103 },
+    { date: '2002-01', value: 102 },
+    { date: '2002-02', value: 101 },
+    { date: '2002-03', value: 200 },
+    { date: '2002-04', value: 500 },
+    { date: '2002-05', value: 100 },
+    { date: '2002-06', value: 100 },
+    { date: '2002-07', value: 102 },
+    { date: '2002-08', value: 109 },
+  ]);
+
+  chart
+    .interval()
+    .encode('x', 'date')
+    .encode('y', 'value')
+    .axis('x', { style: { labelTransform: 'rotate(90deg)' } })
+    .interaction('brushXHighlight', true);
+
+  const finished = chart.render();
+
+  let resolve;
+  const highlighted = new Promise((r) => (resolve = r));
+
+  button.onclick = () => {
+    const X = ['2001-01', '2001-03'];
+    chart.emit('brush:highlight', {
+      data: { selection: [X, [-Infinity, Infinity]] },
+    });
+    resolve();
+  };
+
+  return { chart, button, finished, highlighted };
+}

__tests__/plots/api/index.ts

@@ -22,3 +22,4 @@ export { chartEmitSeriesTooltip } from './chart-emit-series-tooltip';
 export { chartEmitPieTooltip } from './chart-emit-pie-tooltip';
 export { chartRenderUpdateAttributes } from './chart-render-update-attributes';
 export { chartRenderUpdateNonAnimation } from './chart-render-update-non-animation';
+export { chartEmitBrushHighlightX } from './chart-emit-brush-highlight-x';

src/utils/scale.ts

@@ -47,7 +47,11 @@ export function pixelsOf(selection, scale, coordinate) {
   const [[minX, maxX], [minY, maxY]] = selection;
   const { x: scaleX, y: scaleY } = scale;
   const p0 = [scaleX.map(minX), scaleY.map(minY)];
-  const p1 = [scaleX.map(maxX), scaleY.map(maxY)];
+  const maybeStep = (scale) => (scale.getStep ? scale.getStep() : 0);
+  const p1 = [
+    scaleX.map(maxX) + maybeStep(scaleX),
+    scaleY.map(maxY) + maybeStep(scaleY),
+  ];
   const [x, y] = coordinate.map(p0);
   const [x1, y1] = coordinate.map(p1);
   return [x, y, x1, y1];