pass functions to webview

Author: murphycj

README.md

@@ -76,14 +76,64 @@ The `ref` exposes the following methods:
 - `setSize(width, height)`: Set the size of the chart.
 - `destroy()`: Destroy the chart instance.
 
-### Plot dimensions
+### Dimensions
 
-You can set the width and height either through the uPlot `options` or by passing a `style` prop to the `ChartUPlot` component. If you set both, the uPlot `options` will take precedence.
+You can set the width and height either through the uPlot `options` or by passing a `style` prop to the `ChartUPlot` component. If you set both, the uPlot `options` will take precedence. Any changes to the width and height in the `options` will not automatically update the chart size.
 
-### Plot margins
+### Margins
 
 Margin for the title and legend will be subtracted from the final width and height for the chart. You can control the margin via the `margin: { title?: number; legend?: number }` prop.
 
+### Functions
+
+The uPlot options can include custom functions for things like drawing and formatting tick labels. You'll need to duplicate each function: one as a normal javascript function and another as a string for the webview. Pass any functions to the `functions` prop of `ChartUPlot`, which will be injected into the webview and can be used in the uPlot options.
+
+```javascript
+// for web version of uPlot
+function formatLabel(value) {
+  return value.toFixed(2);
+}
+
+// for iOS and Android version
+const formatLabelString = `
+function formatLabel(value) {
+  return value.toFixed(2);
+}
+`;
+
+const options = {
+  width: 300,
+  height: 300,
+  scales: { x: { time: false } },
+  series: [{ label: 'X' }, { label: 'Value', stroke: 'blue', width: 2 }],
+  axes: [
+      {
+        scale: 'x',
+        values: formatLabel,
+      },
+      {},
+    ],
+};
+
+<ChartUPlot
+  options={options}
+  functions={[formatLabelString]}
+  <!-- ... other props -->
+/>
+```
+
+#### Important!
+
+Any dependencies in each function must be:
+
+- One of the other functions passed to the `functions` prop.
+- A global variable that is defined in the webview.
+- A function from the uPlot library that is available in the webview.
+
+#### Why is it done this way?
+
+There may be a better way to do this, so please open an issue if you have a suggestion. Passing javascript functions to the webview is tricky, so the current solution is to pass them as strings into WebView's `injectedJavaScript` prop. This means if you're also supporting web, you need to duplicate each function to support both web and iOS/Android. If you didn't do this and instead tried doing something like `function.toString()` in an iOS build, it does not return the javascript source code.
+
 ## Demo app
 
 The `demo` folder contains an example Expo app that demonstrates how to use the library. You can run it by cloning the repository and running:

demo/app/(tabs)/index.tsx

@@ -1,11 +1,5 @@
 import { useEffect, useRef, useState, useMemo } from 'react';
-import {
-  Platform,
-  StyleSheet,
-  SafeAreaView,
-  Text,
-  Dimensions,
-} from 'react-native';
+import { StyleSheet, SafeAreaView, Text, Dimensions } from 'react-native';
 
 import ChartUPlot from 'uplot-react-native';
 
@@ -21,6 +15,19 @@ var makeData = (points = 1000) => {
   return [xs, ys] as [number[], number[]];
 };
 
+function format_value(self, ticks) {
+  return ticks.map((val) => {
+    return 2;
+  });
+}
+var format_value_src = `
+function format_value(self, ticks) {
+  return ticks.map((val) => {
+    return 2;
+  });
+};
+`;
+
 var n = 500;
 var data1 = makeData(n);
 var data2 = makeData(n);
@@ -54,10 +61,27 @@ export default function HomeScreen() {
     width: width,
     height: height * 0.7,
     scales: { x: { time: false } },
-    series: [{ label: 'Time' }, { label: 'Value', stroke: 'blue', width: 2 }],
-    axes: [{ scale: 'x' }, {}],
+    series: [
+      {
+        label: 'Time',
+      },
+      { label: 'Value', stroke: 'blue', width: 2 },
+    ],
+    axes: [
+      {
+        scale: 'x',
+        ticks: {
+          stroke: 'black',
+          width: 2,
+        },
+        values: format_value,
+      },
+      {},
+    ],
   };
 
+  var functions = [format_value];
+
   return (
     <SafeAreaView
       style={{
@@ -88,6 +112,7 @@ export default function HomeScreen() {
           height: height * 0.7,
         }}
         ref={chartRef1}
+        functions={[format_value_src]}
       />
       {/* <ChartUPlot
         data={data2}

demo/package.json

@@ -38,7 +38,7 @@
     "react-native-screens": "~4.11.1",
     "react-native-web": "~0.20.0",
     "react-native-webview": "13.13.5",
-    "uplot-react-native": "0.1.4"
+    "uplot-react-native": "file:.."
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",