From 7071df16d4abc08d8312f2105d74b3a7f486d045 Mon Sep 17 00:00:00 2001
From: Keith Luchtel <keith@keithluchtel.com>
Date: Wed, 20 Nov 2024 10:47:37 -0600
Subject: [PATCH] Add more documentation to pan zoom

---
 website/docs/pan-zoom.mdx | 36 +++++++++++++++++++++++++++++++++++-
 1 file changed, 35 insertions(+), 1 deletion(-)

diff --git a/website/docs/pan-zoom.mdx b/website/docs/pan-zoom.mdx
index 2b211fdb..51d72180 100644
--- a/website/docs/pan-zoom.mdx
+++ b/website/docs/pan-zoom.mdx
@@ -56,7 +56,7 @@ return (
 }
 ```
 
-### Configuration
+## Configuration
 
 You can customize the pan gesture behavior using the `transformConfig` prop:
 
@@ -72,3 +72,37 @@ You can customize the pan gesture behavior using the `transformConfig` prop:
   {/* chart content */}
 </CartesianChart>
 ```
+
+## Utility Functions
+
+Several utility functions are available to help work with chart transformations:
+
+### getTransformComponents
+
+Extracts the scale and translation components from a transformation matrix:
+
+```ts
+const { scaleX, scaleY, translateX, translateY } = getTransformComponents(matrix);
+```
+
+### setScale
+
+Updates the scale components of a transformation matrix:
+
+```ts
+// Set uniform scale
+const newMatrix = setScale(matrix, 2.0); // scales both X and Y by 2.0
+
+// Set different X and Y scales
+const newMatrix = setScale(matrix, 2.0, 1.5); // scaleX = 2.0, scaleY = 1.5
+```
+
+### setTranslate
+
+Updates the translation components of a transformation matrix:
+
+```ts
+const newMatrix = setTranslate(matrix, 100, 50); // moves 100 units in X, 50 in Y
+```
+
+These utility functions are particularly useful when you need to programmatically modify chart transformations or read the current transformation state.
\ No newline at end of file