Add pan capability to charts

[djbarnwal]

Checklist

• Manual verification
• Unit test coverage
• E2E test coverage
• Needs manual QA?

Closes #4131

Details

Adds Pan interaction to chart using icon button and left-right key press

Steps to Verify

1. On a dashboard hover over a chart and click the arrow icons
2. The arrow icons should only allow to pan within all time range of the data.

[briangregoryholmes]

Seems to function well. I do have a question about the implementation, though.

Could you not replace the isRangeValid and canPanLeft/canPanRight with something like this:

$: startRange = $timeControlsStore?.allTimeRange?.start;
$: endRange = $timeControlsStore?.allTimeRange?.end;
$: selectedStart = $timeControlsStore.selectedTimeRange?.start;
$: selectedEnd = $timeControlsStore.selectedTimeRange?.end;

$: canPan = {
  left:
    (selectedStart?.getTime() || Infinity) >=
    (startRange?.getTime() || -Infinity),
  right:
    (selectedEnd?.getTime() || -Infinity) <=
    (endRange?.getTime() || Infinity),
};

That seems to be giving me the same results.

It would be great to hoist this out of the component, too. It only needs to be calculated once, but it's actually being recalculated every time you hover over the chart (though this is mostly because of the hovering check on line 60/61).

Also, we should put the select-none class on the MeasureChart div wrapper.

[briangregoryholmes]

@djbarnwal Looks good! Approved, but I'll let you merge in case you're still finishing up the testing tasks.

[djbarnwal]

There's some more changes coming in for Chart interactions. I would merge this now and make the changes in the a later PR.