fix typos in changelog, example app, library and docs

pweisensee · pweisensee · commit 498da6117095 · 2025-04-04T14:43:19.000-07:00
diff --git a/example/app/scroll.tsx b/example/app/scroll.tsx
@@ -68,16 +68,16 @@ export default function HorizontalScrollPage() {
           }}
         </CartesianChart>
       </View>
-      <Hightlighted viewport={viewport} matrix={state.matrix} />
+      <Highlighted viewport={viewport} matrix={state.matrix} />
     </SafeAreaView>
   );
 }
 
-type HightlightedProps = {
+type HighlightedProps = {
   viewport: Viewport;
   matrix: SharedValue<Matrix4>;
 };
-const Hightlighted = ({ viewport, matrix }: HightlightedProps) => {
+const Highlighted = ({ viewport, matrix }: HighlightedProps) => {
   const font = useFont(inter, 12);
   const [chartBounds, setChartBounds] = React.useState<ChartBounds>({
     left: 0,
diff --git a/lib/CHANGELOG.md b/lib/CHANGELOG.md
@@ -278,7 +278,7 @@
 
 - Adds onChartBoundsChange prop to CartesianChart ([#117](https://github.com/FormidableLabs/victory-native-xl/pull/117))
 
-- Support "misisng data", add `connectMissingData` prop to line/area charts. Allows for null/undefined y-values. ([#129](https://github.com/FormidableLabs/victory-native-xl/pull/129))
+- Support "missing data", add `connectMissingData` prop to line/area charts. Allows for null/undefined y-values. ([#129](https://github.com/FormidableLabs/victory-native-xl/pull/129))
 
 - Include src files in distribution tarball ([#100](https://github.com/FormidableLabs/victory-native-xl/pull/100))
 
@@ -294,7 +294,7 @@
 
 ### Patch Changes
 
-- Support "misisng data", add `connectMissingData` prop to line/area charts. Allows for null/undefined y-values. ([#129](https://github.com/FormidableLabs/victory-native-xl/pull/129))
+- Support "missing data", add `connectMissingData` prop to line/area charts. Allows for null/undefined y-values. ([#129](https://github.com/FormidableLabs/victory-native-xl/pull/129))
 
 ## 40.0.0-next.6
 
diff --git a/lib/src/cartesian/CartesianChart.tsx b/lib/src/cartesian/CartesianChart.tsx
@@ -412,7 +412,7 @@ function CartesianChartContent<
       }
     })
     /**
-     * On start, check if we have any bootstraped updates we need to apply.
+     * On start, check if we have any bootstrapped updates we need to apply.
      */
     .onStart(() => {
       gestureState.value.isGestureActive = true;
diff --git a/lib/src/cartesian/components/AnimatedPath.tsx b/lib/src/cartesian/components/AnimatedPath.tsx
@@ -71,17 +71,17 @@ const syncPropsToSharedValues = (
     keysToRemove.delete(key);
 
     const propVal = props[key];
-    const sharVal = sharedValues[key];
+    const shareVal = sharedValues[key];
 
     // Shared value missing, create it
-    if (!sharVal) {
+    if (!shareVal) {
       sharedValues[key] = isSharedValue(propVal)
         ? propVal
         : makeMutable(propVal);
     }
     // Shared value exists, update it if not already a shared value
     else if (!isSharedValue(propVal)) {
-      sharVal.value = propVal;
+      shareVal.value = propVal;
     }
   }
 
diff --git a/lib/src/cartesian/hooks/useBuildChartAxis.ts b/lib/src/cartesian/hooks/useBuildChartAxis.ts
@@ -19,7 +19,7 @@ import { YAxisDefaults } from "../components/YAxis";
 import { FrameDefaults } from "../components/Frame";
 
 /**
- * This hook builds the chart axes + the surrounding frame based on either the new x, y, frame props, or via backwards compatability for the older axisOptions props and the associated default values it had. The defaults for the former are the new XAxisDefaults, YAxisDefaults, and FrameDefaults, while the defaults for the latter come from the older CartesianAxisDefaultProps.
+ * This hook builds the chart axes + the surrounding frame based on either the new x, y, frame props, or via backwards compatibility for the older axisOptions props and the associated default values it had. The defaults for the former are the new XAxisDefaults, YAxisDefaults, and FrameDefaults, while the defaults for the latter come from the older CartesianAxisDefaultProps.
  *
  * The hook returns a normalized object of `xAxis, yAxes, and frame` objects that are used to determine the axes to render and in the transformInputData function.
  */
diff --git a/lib/src/cartesian/hooks/useStackedAreaPaths.ts b/lib/src/cartesian/hooks/useStackedAreaPaths.ts
@@ -33,7 +33,7 @@ const calculateOffsets = (
     offsets[layerIndex] = currentPoints.map((_, i) => {
       const accumulatedOffset = offsets[layerIndex - 1]?.[i] ?? 0;
       const previousHeightOfPoint = previousPoints[i]?.y ?? 0;
-      // The offset is calculated by starting at the y0 (the bottom-most line of the chart) and then subtract the preceding point's height combined with the accumlation of these values
+      // The offset is calculated by starting at the y0 (the bottom-most line of the chart) and then subtract the preceding point's height combined with the accumulation of these values
       // For example:
       // If we had something like { x: 0, high: 5, med: 4, low: 3 } as a data point and passed this in like points={[points.low, points.med, points.high]}
       // "low" is not offset by anything other than y0, since it is the first area drawn
diff --git a/lib/src/pie/PieLabel.tsx b/lib/src/pie/PieLabel.tsx
@@ -3,7 +3,7 @@ import React, { type ReactNode } from "react";
 import { usePieSliceContext } from "./contexts/PieSliceContext";
 import { getFontGlyphWidth } from "../utils/getFontGlyphWidth";
 
-type LabelPostion = {
+type LabelPosition = {
   x: number;
   y: number;
   midAngle: number;
@@ -14,7 +14,7 @@ export type PieLabelProps = {
   radiusOffset?: number;
   color?: Color;
   text?: string;
-  children?: (position: LabelPostion) => ReactNode;
+  children?: (position: LabelPosition) => ReactNode;
 };
 
 const PieLabel = ({
diff --git a/website/docs/cartesian/bar/bar.md b/website/docs/cartesian/bar/bar.md
@@ -60,7 +60,7 @@ The `roundedCorners` prop allows you to customize the roundedness of each corner
 
 ### `barWidth`
 
-The `barWidth` prop takes a number and sets the width of the bar to that number. If not provided, the default is determined by the `chartBounds` and number of data points. Takes precendence over the `barCount` prop. Use this for the most fine grained control of bar width
+The `barWidth` prop takes a number and sets the width of the bar to that number. If not provided, the default is determined by the `chartBounds` and number of data points. Takes precedence over the `barCount` prop. Use this for the most fine grained control of bar width
 
 ### `barCount`
 
diff --git a/website/docs/cartesian/bar/stacked-bar.md b/website/docs/cartesian/bar/stacked-bar.md
@@ -103,7 +103,7 @@ The `colors` prop takes an array of `Color` values to use for the bars. The orde
 
 ### `barWidth`
 
-The `barWidth` prop takes a number and sets the width of the bar to that number. If not provided, the default is determined by the `chartBounds` and number of data points. Takes precendence over the `barCount` prop. Use this for the most fine grained control of bar width
+The `barWidth` prop takes a number and sets the width of the bar to that number. If not provided, the default is determined by the `chartBounds` and number of data points. Takes precedence over the `barCount` prop. Use this for the most fine grained control of bar width
 
 ### `barCount`
 
diff --git a/website/docs/cartesian/guides/basic-bar-chart.md b/website/docs/cartesian/guides/basic-bar-chart.md
@@ -18,7 +18,7 @@ This guide will show you how to create this bar chart with some customization li
 
   ```tsx
   const data = Array.from({ length: 6 }, (_, index) => ({
-      // Starting at 1 for Jaunary
+      // Starting at 1 for January
       month: index + 1,
       // Randomizing the listen count between 100 and 50
       listenCount: Math.floor(Math.random() * (100 - 50 + 1)) + 50,
diff --git a/website/docs/getting-started.mdx b/website/docs/getting-started.mdx
@@ -159,7 +159,7 @@ function MyChart() {
 // ...
 ```
 
-Then we'll create a `ToolTip` component that uses some Reanimaed `SharedValue`s from our `state` variable.
+Then we'll create a `ToolTip` component that uses some Reanimated `SharedValue`s from our `state` variable.
 
 ```tsx
 import type { SharedValue } from "react-native-reanimated";
diff --git a/website/docs/polar/pie/pie-charts.md b/website/docs/polar/pie/pie-charts.md
@@ -69,7 +69,7 @@ A `number` which defines the starting angle of the chart. Changing this prop wil
 
 ### `size`
 
-A `number` which defines the size of the chart. This defaults to the canvas' width and height. This can be overriden with this prop (in case you want to position labels outside the chart, for example)
+A `number` which defines the size of the chart. This defaults to the canvas' width and height. This can be overridden with this prop (in case you want to position labels outside the chart, for example)
 
 ### `children`
 
diff --git a/website/docs/polar/pie/use-slice-angular-inset-path.md b/website/docs/polar/pie/use-slice-angular-inset-path.md
@@ -18,7 +18,7 @@ import DATA from "./my-data";
 function MyCustomSliceAngularInset({ slice }: { slice: PieSliceData }) {
   // 👇 use the hook to generate a path and paint object.
   const [path, insetPaint] = useSliceAngularInsetPath({ slice, angularInset });
-  /* 👇 experiment wtih any other customizations you want */
+  /* 👇 experiment with any other customizations you want */
   return <Path path={path} paint={insetPaint} {...rest} />;
 }
 
diff --git a/website/docs/polar/pie/use-slice-path.md b/website/docs/polar/pie/use-slice-path.md
@@ -18,7 +18,7 @@ import DATA from "./my-data";
 function MyCustomSlice({ slice }: { slice: PieSliceData }) {
   // 👇 use the hook to generate a path object.
   const path = useSlicePath(slice);
-  /* 👇 experiment wtih any other customizations you want */
+  /* 👇 experiment with any other customizations you want */
   return <Path path={path} color={slice.color} style="fill" />;
 }
 

Original file line number	Diff line number	Diff line change
`@@ -412,7 +412,7 @@ function CartesianChartContent<`
`412`	`412`	`}`
`413`	`413`	`})`
`414`	`414`	`/**`
`415`		`- * On start, check if we have any bootstraped updates we need to apply.`
	`415`	`+ * On start, check if we have any bootstrapped updates we need to apply.`
`416`	`416`	`*/`
`417`	`417`	`.onStart(() => {`
`418`	`418`	`gestureState.value.isGestureActive = true;`
Original file line number	Diff line number	Diff line change
`@@ -71,17 +71,17 @@ const syncPropsToSharedValues = (`
`71`	`71`	`keysToRemove.delete(key);`
`72`	`72`
`73`	`73`	`const propVal = props[key];`
`74`		`- const sharVal = sharedValues[key];`
	`74`	`+ const shareVal = sharedValues[key];`
`75`	`75`
`76`	`76`	`// Shared value missing, create it`
`77`		`- if (!sharVal) {`
	`77`	`+ if (!shareVal) {`
`78`	`78`	`sharedValues[key] = isSharedValue(propVal)`
`79`	`79`	`? propVal`
`80`	`80`	`: makeMutable(propVal);`
`81`	`81`	`}`
`82`	`82`	`// Shared value exists, update it if not already a shared value`
`83`	`83`	`else if (!isSharedValue(propVal)) {`
`84`		`- sharVal.value = propVal;`
	`84`	`+ shareVal.value = propVal;`
`85`	`85`	`}`
`86`	`86`	`}`
`87`	`87`
Original file line number	Diff line number	Diff line change
`@@ -19,7 +19,7 @@ import { YAxisDefaults } from "../components/YAxis";`
`19`	`19`	`import { FrameDefaults } from "../components/Frame";`
`20`	`20`
`21`	`21`	`/**`
`22`		`- * This hook builds the chart axes + the surrounding frame based on either the new x, y, frame props, or via backwards compatability for the older axisOptions props and the associated default values it had. The defaults for the former are the new XAxisDefaults, YAxisDefaults, and FrameDefaults, while the defaults for the latter come from the older CartesianAxisDefaultProps.`
	`22`	`+ * This hook builds the chart axes + the surrounding frame based on either the new x, y, frame props, or via backwards compatibility for the older axisOptions props and the associated default values it had. The defaults for the former are the new XAxisDefaults, YAxisDefaults, and FrameDefaults, while the defaults for the latter come from the older CartesianAxisDefaultProps.`
`23`	`23`	`*`
`24`	`24`	* The hook returns a normalized object of `xAxis, yAxes, and frame` objects that are used to determine the axes to render and in the transformInputData function.
`25`	`25`	`*/`