updated example for panning

packages/terra-graphs-docs/src/terra-dev-site/test/graphs/General/Axes/AllowCalibrationEnabledTimeseriesXAxisTicksRotated.test.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import Button from 'terra-button/lib/Button';
 import Carbon from '@cerner/carbon-graphs/lib/js/carbon';
 import utils from '@cerner/carbon-graphs/lib/js/helpers/utils';
 import '@cerner/terra-graphs-docs/lib/terra-graphs-src/components/Graph.module.scss';
@@ -13,15 +14,56 @@ Please refer to the documentation below to see the graphConfig and data objects
 
 const graphConfig = utils.deepClone(getConfig('#allowCalibrationXTimeseriesTicksRotated'));
 const dataset = utils.deepClone(exampleData);
+const initialState = {
+  initial: 0,
+  factor: 3,
+};
+
+let graph;
 
 const AllowCalibrationExample = () => {
   React.useEffect(() => {
-    const graph = Carbon.api.graph(graphConfig);
+    graph = Carbon.api.graph(graphConfig);
     graph.loadContent(Carbon.api.line(dataset));
   }, []);
 
+  const reducer = (panState, action) => {
+    let hour;
+
+    switch (action.type) {
+      case 'panLeft':
+        hour = panState.initial - panState.factor;
+        break;
+      case 'panRight':
+        hour = panState.initial + panState.factor;
+        break;
+      default:
+        return panState;
+    }
+
+    return {
+      initial: hour,
+      factor: panState.factor,
+    };
+  };
+
+  const [panState, dispatch] = React.useReducer(reducer, initialState);
+
+  React.useLayoutEffect(() => {
+    if (!graph) { return; }
+
+    graph.config.axis.x.lowerLimit = new Date(2016, 0, 1, panState.initial).toISOString();
+    graph.config.axis.x.upperLimit = new Date(2016, 0, 2, panState.initial).toISOString();
+
+    graph.reflowMultipleDatasets();
+  }, [panState.initial]);
+
   return (
-    <ExampleGraphContainer id="allowCalibrationXTimeseriesTicksRotated" />
+    <>
+      <Button className="button-pan-left" text="<" onClick={() => dispatch({ type: 'panLeft' })} />
+      <Button className="button-pan-right" text=">" onClick={() => dispatch({ type: 'panRight' })} />
+      <ExampleGraphContainer id="allowCalibrationXTimeseriesTicksRotated" />
+    </>
   );
 };