feat: Zoom and navigator

.gitignore

@@ -7,3 +7,5 @@ dist
 /src/test-utils/selectors/**/*.ts
 !/src/test-utils/selectors/index.ts
 .DS_STORE
+.idea
+.vscode

pages/01-cartesian-chart/axes-and-thresholds.page.tsx

@@ -77,6 +77,9 @@ export default function () {
           <CategoryDatetime />
         </PageSection>
       </div>
+      <PageSection title="Datetime X, linear Y — Zoom with navigator">
+        <DatetimeLinearWithZoom />
+      </PageSection>
     </Page>
   );
 }
@@ -688,3 +691,34 @@ function CategoryDatetime() {
     />
   );
 }
+
+// Zoom demo: drag-to-zoom on x-axis + keyboard zoom (Shift+Arrow to select, Enter/release to zoom).
+function DatetimeLinearWithZoom() {
+  const { chartProps } = useChartSettings();
+
+  const now = new Date();
+  const seriesData = range(0, 100).map((i) => ({
+    x: addDays(now, i).getTime(),
+    y: Math.floor((pseudoRandom() + i / 50) * 100),
+  }));
+
+  return (
+    <CartesianChart
+      {...chartProps.cartesian}
+      chartHeight={400}
+      legend={{ enabled: true }}
+      zoom={{ type: "x" }}
+      series={[
+        { type: "area", name: "Requests", data: seriesData },
+        {
+          type: "spline",
+          name: "Avg latency",
+          data: seriesData.map((d) => ({ x: d.x, y: d.y * 0.6 + Math.floor(pseudoRandom() * 20) })),
+        },
+        { type: "y-threshold", name: "SLA limit", value: 150 },
+      ]}
+      xAxis={{ title: "Time", type: "datetime", valueFormatter: dateFormatter }}
+      yAxis={{ title: "Count", type: "linear" }}
+    />
+  );
+}

pages/common/use-highcharts.ts

@@ -12,7 +12,13 @@ export function useHighcharts({
   solidgauge = false,
   boost = false,
   heatmap = false,
-}: { more?: boolean; xrange?: boolean; solidgauge?: boolean; boost?: boolean; heatmap?: boolean } = {}) {
+}: {
+  more?: boolean;
+  xrange?: boolean;
+  solidgauge?: boolean;
+  boost?: boolean;
+  heatmap?: boolean;
+} = {}) {
   const [highcharts, setHighcharts] = useState<null | typeof Highcharts>(null);
 
   useEffect(() => {

src/__tests__/__snapshots__/documenter.test.ts.snap

@@ -21,6 +21,15 @@ exports[`definition for cartesian-chart matches the snapshot > cartesian-chart 1
       "detailType": "{ visibleSeries: Array<string>; }",
       "name": "onVisibleSeriesChange",
     },
+    {
+      "cancelable": false,
+      "description": "Called when the visible zoom range changes due to user interaction (drag-to-zoom,
+navigator handles, or reset zoom).
+
+The detail contains \`startValue\` and \`endValue\` (epoch timestamps for datetime axes),
+or \`null\` when zoom is reset to the full range.",
+      "name": "onZoomChange",
+    },
   ],
   "functions": [
     {
@@ -162,6 +171,11 @@ Supported Highcharts versions: 12.",
             "optional": true,
             "type": "string",
           },
+          {
+            "name": "resetZoomText",
+            "optional": true,
+            "type": "string",
+          },
           {
             "name": "seriesFilterLabel",
             "optional": true,
@@ -187,6 +201,21 @@ Supported Highcharts versions: 12.",
             "optional": true,
             "type": "string",
           },
+          {
+            "name": "zoomControlsAriaLabel",
+            "optional": true,
+            "type": "string",
+          },
+          {
+            "name": "zoomLiveAnnouncementText",
+            "optional": true,
+            "type": "string",
+          },
+          {
+            "name": "zoomResetLiveAnnouncementText",
+            "optional": true,
+            "type": "string",
+          },
         ],
         "type": "object",
       },
@@ -620,6 +649,40 @@ applies to the tooltip points values.",
       "optional": true,
       "type": "CartesianChartProps.YAxisOptions | [CartesianChartProps.YAxisWithId, CartesianChartProps.YAxisWithId]",
     },
+    {
+      "description": "Enables drag-to-zoom on the x-axis. When enabled, users can click and drag on the chart
+to select a range, which zooms the chart to that range. Highcharts shows a "Reset zoom"
+button to restore the original view.
+
+Supported options:
+* \`type\` (optional, "x") - The axis to zoom on. Currently only "x" is supported.",
+      "inlineType": {
+        "name": "CartesianChartProps.ZoomOptions",
+        "properties": [
+          {
+            "name": "hideResetButton",
+            "optional": true,
+            "type": "boolean",
+          },
+          {
+            "inlineType": {
+              "name": "x",
+              "type": "union",
+              "values": [
+                "x",
+              ],
+            },
+            "name": "type",
+            "optional": true,
+            "type": "string",
+          },
+        ],
+        "type": "object",
+      },
+      "name": "zoom",
+      "optional": true,
+      "type": "CartesianChartProps.ZoomOptions",
+    },
   ],
   "regions": [
     {