fix: Improve audioparam docs

packages/audiodocs/docs/core/audio-param.mdx

@@ -3,6 +3,7 @@ sidebar_position: 4
 ---
 
 import { Optional, ReadOnly } from '@site/src/components/Badges';
+import { SetValueAtTimeChart, LinearRampToValueAtTimeChart, ExponentialRampToValueAtTimeChart, SetTargetAtTimeChart, SetValueCurveAtTimeChart } from '@site/src/components/Charts';
 
 # AudioParam
 
@@ -36,7 +37,7 @@ as they are more efficient for continuous changes. For more specific use cases,
 
 :::
 
-![](/img/setValueAtTime.png)
+<SetValueAtTimeChart />
 
 | Parameter | Type | Description |
 | :---: | :---: | :---- |
@@ -56,7 +57,7 @@ as they are more efficient for continuous changes. For more specific use cases,
 Schedules a gradual linear change to the new value.
 The change begins at the time designated for the previous event. It follows a linear ramp to the `value`, achieving it by the specified `endTime`.
 
-![](/img/linearRampToValueAtTime.png)
+<LinearRampToValueAtTimeChart />
 
 | Parameter | Type | Description |
 | :---: | :---: | :---- |
@@ -76,7 +77,7 @@ The change begins at the time designated for the previous event. It follows a li
 Schedules a gradual exponential change to the new value.
 The change begins at the time designated for the previous event. It follows an exponential ramp to the `value`, achieving it by the specified `endTime`.
 
-![](/img/exponentialRampToValueAtTime.png)
+<ExponentialRampToValueAtTimeChart />
 
 | Parameter | Type | Description |
 | :---: | :---: | :---- |
@@ -96,7 +97,7 @@ The change begins at the time designated for the previous event. It follows an e
 Schedules a gradual change to the new value at the start time.
 This method is useful for decay or release portions of [ADSR envelopes](/docs/effects/gain-node#envelope---adsr).
 
-![](/img/setTargetAtTime.png)
+<SetTargetAtTimeChart />
 
 | Parameter | Type | Description |
 | :---: | :---: | :---- |
@@ -117,7 +118,7 @@ This method is useful for decay or release portions of [ADSR envelopes](/docs/ef
 
 Schedules the parameters's value change following a curve defined by given array.
 
-![](/img/setValueCurveAtTime.png)
+<SetValueCurveAtTimeChart />
 
 | Parameter | Type | Description |
 | :---: | :---: | :---- |

packages/audiodocs/package.json

@@ -54,6 +54,7 @@
     "react-native-reanimated": "^4.0.3",
     "react-native-web": "^0.21.1",
     "react-native-worklets": "^0.4.1",
+    "recharts": "^3.7.0",
     "rehype-katex": "7",
     "remark-math": "6",
     "source-map": "^0.7.4",

packages/audiodocs/src/components/Charts/ExponentialRampToValueAtTime/index.tsx

@@ -0,0 +1,80 @@
+import {
+    Label,
+    ReferenceLine
+} from 'recharts';
+
+import { FC } from 'react';
+import AudioParamChartBase, { AudioParamDataPoint } from '../common/AudioParamChartBase';
+import styles from '../styles.module.css';
+
+const generateExponentialRampData = (): AudioParamDataPoint[] => {
+  const startTime = 0.2;
+  const endTime = 0.8;
+  const startValue = 0.2;
+  const targetValue = 0.8;
+  const data = [];
+
+  // Add points before the ramp
+  for (let time = 0.0; time < startTime; time += 0.1) {
+    data.push({ time: parseFloat(time.toFixed(1)), value: startValue });
+  }
+
+  // Generate exponential ramp points
+  const steps = 60;
+  for (let i = 0; i <= steps; i++) {
+    const t = i / steps;
+    const time = startTime + t * (endTime - startTime);
+    // Exponential interpolation: value = startValue * (targetValue / startValue)^t
+    const value = startValue * Math.pow(targetValue / startValue, t);
+    data.push({
+      time: parseFloat(time.toFixed(3)),
+      value: parseFloat(value.toFixed(3)),
+    });
+  }
+
+  // Add points after the ramp
+  for (let time = endTime + 0.1; time <= 0.9; time += 0.1) {
+    data.push({ time: parseFloat(time.toFixed(1)), value: targetValue });
+  }
+
+  return data;
+};
+
+const ExponentialRampToValueAtTimeChart: FC = () => (
+  <AudioParamChartBase data={generateExponentialRampData()}>
+    <ReferenceLine
+      x={0.2}
+      stroke="currentColor"
+      className={styles.referenceLine}
+      strokeDasharray="5 5">
+      <Label
+        value="previous event and time"
+        position="bottom"
+        className={styles.label}
+      />
+    </ReferenceLine>
+    <ReferenceLine
+      x={0.8}
+      stroke="currentColor"
+      className={styles.referenceLine}
+      strokeDasharray="5 5">
+      <Label value="endTime" position="bottom" className={styles.label} />
+    </ReferenceLine>
+    <ReferenceLine
+      y={0.2}
+      stroke="currentColor"
+      className={styles.referenceLine}
+      strokeDasharray="5 5">
+      <Label value="previousValue" position="left" className={styles.label} />
+    </ReferenceLine>
+    <ReferenceLine
+      y={0.8}
+      stroke="currentColor"
+      className={styles.referenceLine}
+      strokeDasharray="5 5">
+      <Label value="value" position="left" className={styles.label} />
+    </ReferenceLine>
+  </AudioParamChartBase>
+);
+
+export default ExponentialRampToValueAtTimeChart;

packages/audiodocs/src/components/Charts/LinearRampToValueAtTime/index.tsx

@@ -0,0 +1,38 @@
+import { Label, ReferenceLine } from "recharts";
+
+
+import { FC } from "react";
+import AudioParamChartBase from "../common/AudioParamChartBase";
+import styles from '../styles.module.css';
+
+const linearRampToValueAtTimeData = [
+    { time: 0.0, value: 0.2 },
+    { time: 0.1, value: 0.2},
+    { time: 0.2, value: 0.2 },
+    { time: 0.3, value: 0.3 },
+    { time: 0.4, value: 0.4 },
+    { time: 0.5, value: 0.5 },
+    { time: 0.6, value: 0.6 },
+    { time: 0.7, value: 0.7 },
+    { time: 0.8, value: 0.8 },
+    { time: 0.9, value: 0.8 },
+];
+
+const LinearRampToValueAtTimeChart: FC = () => (
+    <AudioParamChartBase data={linearRampToValueAtTimeData}>
+        <ReferenceLine x={0.2} stroke='currentColor' className={styles.referenceLine} strokeDasharray="5 5">
+            <Label value="startTime" position="bottom" className={styles.label} />
+        </ReferenceLine>
+        <ReferenceLine x={0.8} stroke='currentColor' className={styles.referenceLine} strokeDasharray="5 5">
+            <Label value="endTime" position="bottom" className={styles.label} />
+        </ReferenceLine>
+        <ReferenceLine y={0.2} stroke='currentColor' className={styles.referenceLine} strokeDasharray="5 5">
+            <Label value="previousValue" position="left" className={styles.label}/>
+        </ReferenceLine>
+        <ReferenceLine y={0.8} stroke='currentColor' className={styles.referenceLine} strokeDasharray="5 5">
+            <Label value="value" position="left" className={styles.label} />
+        </ReferenceLine>
+    </AudioParamChartBase>
+);
+
+export default LinearRampToValueAtTimeChart;

packages/audiodocs/src/components/Charts/SetTargetAtTime/index.tsx

@@ -0,0 +1,115 @@
+import { Label, ReferenceDot, ReferenceLine } from 'recharts';
+
+import ChartBaseWrapper, { AudioParamDataPoint } from '../common/AudioParamChartBase';
+import styles from '../styles.module.css';
+
+const CustomLabelWithArrow = (props: any) => {
+    const { viewBox, cx, cy } = props;
+
+    // Use cx/cy if available (from ReferenceDot), otherwise fallback to viewBox
+    const dotX = cx || viewBox?.cx || viewBox?.x || 0;
+    const dotY = cy || viewBox?.cy || viewBox?.y || 0;
+
+    // Position label below the dot
+    const labelY = dotY + 30;
+    const arrowStartY = labelY;
+    const arrowEndY = dotY + 8;
+
+    return (
+        <g>
+            {/* Arrow pointing from label to dot */}
+            <defs>
+                <marker
+                    id="arrow"
+                    markerWidth="10"
+                    markerHeight="10"
+                    refX="0"
+                    refY="3"
+                    orient="auto"
+                    markerUnits="strokeWidth"
+                >
+                    <path d="M0,0 L0,6 L9,3 z" fill="currentColor" />
+                </marker>
+            </defs>
+            <line
+                x1={dotX}
+                y1={arrowStartY}
+                x2={dotX}
+                y2={arrowEndY}
+                stroke="currentColor"
+                strokeWidth="1.5"
+                markerEnd="url(#arrow)"
+            />
+            {/* Label text */}
+            <text
+                x={dotX}
+                y={labelY + 20}
+                textAnchor="middle"
+                className={styles.referenceLabel}
+                fill="currentColor"
+            >
+                timeConstant controls
+            </text>
+            <text
+                x={dotX}
+                y={labelY + 35}
+                textAnchor="middle"
+                className={styles.referenceLabel}
+                fill="currentColor"
+            >
+                the change rate
+            </text>
+        </g>
+    );
+};
+
+const generateSetTargetAtTimeData = (): AudioParamDataPoint[] => {
+    const startTime = 0.3;
+    const timeConstant = 0.1;
+    const previousValue = 0.2;
+    const targetValue = 0.8;
+    const data = [];
+
+    // Add points before the change
+    for (let time = 0.0; time < startTime; time += 0.1) {
+        data.push({ time: parseFloat(time.toFixed(1)), value: previousValue });
+    }
+
+    // Generate points after the change using the formula
+    const steps = 60; // More granular steps for smooth curve
+
+    for (let i = 0; i < steps; i++) {
+        const t = i / steps;
+        const time = startTime + t * (0.9 - startTime); // Spread points until 0.9
+        const value = targetValue + (previousValue - targetValue) * Math.exp(-(time - startTime) / timeConstant);
+        data.push({ time: parseFloat(time.toFixed(3)), value: parseFloat(value.toFixed(3)) });
+    }
+
+    return data;
+}
+
+const SetTargetAtTimeChart = () => (
+    <ChartBaseWrapper data={generateSetTargetAtTimeData()}>
+    <ReferenceLine x={0.3} stroke='currentColor' className={styles.referenceLine} strokeDasharray="5 5">
+        <Label value="startTime" position="bottom" className={styles.label} />
+    </ReferenceLine>
+    <ReferenceLine y={0.2} stroke='currentColor' className={styles.referenceLine} strokeDasharray="5 5">
+        <Label value="previousValue" position="left" className={styles.label}/>
+    </ReferenceLine>
+    <ReferenceLine y={0.8} stroke='currentColor' className={styles.referenceLine} strokeDasharray="5 5">
+        <Label value="target" position="left" className={styles.label} />
+    </ReferenceLine>
+    <ReferenceDot 
+        x={0.65} 
+        y={0.7} 
+        r={4}
+        fill="currentColor" 
+        stroke="currentColor"
+        strokeWidth={2}
+        visibility={'hidden'}
+        label={(props) => <CustomLabelWithArrow {...props} />}
+    />
+</ChartBaseWrapper>
+);
+
+export default SetTargetAtTimeChart;

packages/audiodocs/src/components/Charts/SetValueAtTime/index.tsx

@@ -0,0 +1,46 @@
+import { Label, Line, ReferenceLine, Tooltip } from 'recharts';
+
+import { FC } from 'react';
+import AudioParamChartBase from '../common/AudioParamChartBase';
+import styles from '../styles.module.css';
+
+const setValueAtTimeData = [
+  { time: 0.0, value: 0.2 },
+  { time: 0.1, value: 0.2 },
+  { time: 0.2, value: 0.2 },
+  { time: 0.3, value: 0.2 },
+  { time: 0.3, value: 0.8 },
+  { time: 0.4, value: 0.8 },
+  { time: 0.5, value: 0.8 },
+  { time: 0.6, value: 0.8 },
+  { time: 0.7, value: 0.8 },
+  { time: 0.8, value: 0.8 },
+  { time: 0.9, value: 0.8 },
+];
+
+const SetValueAtTimeChart: FC = () => (
+<AudioParamChartBase data={setValueAtTimeData}>
+    <ReferenceLine x={0.3} stroke='currentColor' className={styles.referenceLine} strokeDasharray="5 5">
+        <Label value="startTime" position="bottom" className={styles.label} />
+    </ReferenceLine>
+    <ReferenceLine y={0.2} stroke='currentColor' className={styles.referenceLine} strokeDasharray="5 5">
+        <Label value="previousValue" position="left" className={styles.label}/>
+    </ReferenceLine>
+    <ReferenceLine y={0.8} stroke='currentColor' className={styles.referenceLine} strokeDasharray="5 5">
+        <Label value="value" position="left" className={styles.label} />
+    </ReferenceLine>
+    <Line 
+        type="stepAfter" 
+        dataKey="value"
+        stroke='currentColor' 
+        className={styles.leadingLine}
+        strokeWidth={2}
+        dot={false}
+        activeDot={false}
+        isAnimationActive={true}
+    />
+    <Tooltip active={false} />
+</AudioParamChartBase>
+);
+
+export default  SetValueAtTimeChart;

packages/audiodocs/src/components/Charts/SetValueCurveAtTime/index.tsx

@@ -0,0 +1,42 @@
+import { Label, ReferenceDot, ReferenceLine } from 'recharts';
+
+import { FC } from 'react';
+import AudioParamChartBase from '../common/AudioParamChartBase';
+import styles from '../styles.module.css';
+
+
+const setValueCurveAtTimeData = [
+    { time: 0, value: 0.2 },
+    { time: 0.1, value: 0.2},
+    { time: 0.2, value: 0.2},
+    { time: 0.2, value: 0.5},
+    { time: 0.3, value: 0.35},
+    { time: 0.4, value: 0.6},
+    { time: 0.5, value: 0.45},
+    { time: 0.6, value: 0.8},
+    { time: 0.7, value: 0.8},
+    { time: 0.8, value: 0.8},
+    { time: 0.9, value: 0.8},
+];
+
+const SetValueCurveAtTimeChart: FC = () => (
+    <AudioParamChartBase data={setValueCurveAtTimeData}>
+    <ReferenceLine x={0.2} stroke='currentColor' className={styles.referenceLine} strokeDasharray="5 5">
+        <Label value="startTime" position="bottom" className={styles.label} />
+    </ReferenceLine>
+    <ReferenceLine x={0.6} stroke='currentColor' className={styles.referenceLine} strokeDasharray="5 5">
+        <Label value="startTime + duration" position="bottom" className={styles.label} />
+    </ReferenceLine>
+    <ReferenceLine y={0.2} stroke='currentColor' className={styles.referenceLine} strokeDasharray="5 5">
+        <Label value="previousValue" position="left" className={styles.label}/>
+    </ReferenceLine>
+    <ReferenceLine y={0.8} stroke='currentColor' className={styles.referenceLine} strokeDasharray="5 5"/>
+    <ReferenceDot x={0.2} y={0.5}  r={4} stroke='currentColor' fill='currentColor'className={styles.referenceDot} label={{ value: 'values[0]', position: 'left', className: styles.label }}/>
+    <ReferenceDot x={0.3} y={0.35} r={4} stroke='currentColor' fill='currentColor' className={styles.referenceDot} label={{ value: 'values[1]', position: 'bottom', className: styles.label }}/>
+    <ReferenceDot x={0.4} y={0.6} r={4} stroke='currentColor' fill='currentColor' className={styles.referenceDot} label={{ value: 'values[2]', position: 'top', className: styles.label }}/>
+    <ReferenceDot x={0.5} y={0.45} r={4} stroke='currentColor' fill='currentColor' className={styles.referenceDot} label={{ value: 'values[3]', position: 'bottom', className: styles.label }}/>
+    <ReferenceDot x={0.6} y={0.8}  r={4} stroke='currentColor' fill='currentColor' className={styles.referenceDot} label={{ value: 'values[4]', position: 'top', dx: 40, className: styles.label }}/>
+    </AudioParamChartBase>
+);
+
+export default SetValueCurveAtTimeChart;