Enable zoom, improve example

Author: niklavsBariss

example/src/App.tsx

@@ -12,17 +12,62 @@ const chartColors: ChartProps['colors'] = {
   border: '#555',
   cursorStroke: '#0ff',
   highlightLabel: '#000',
-  highlightTime: '#ff0',
+  highlightTime: '#444',
+};
+
+// Generate data points every minute from a month ago to now
+const generateDataPoints = ({
+  startingValue = 400,
+  minimum = 0,
+  radomFactor = 20,
+} = {}) => {
+  const points = [];
+  const now = Date.now();
+  const monthAgo = now - 30 * 24 * 60 * 60 * 1000; // 30 days ago
+  let value = startingValue;
+
+  for (let timestamp = monthAgo; timestamp <= now; timestamp += 60 * 1000) {
+    const randomVariation = (Math.random() - 0.5) * radomFactor;
+    value += randomVariation;
+
+    // randomVariation was negative and value went below minimum
+    if (value < minimum) {
+      // invert direction to keep above minimum
+      value -= 2 * randomVariation;
+    }
+
+    points.push({ timestamp, value });
+  }
+
+  return points;
 };
 
 const datasets: Dataset[] = [
   {
-    unit: 'units',
-    points: [],
+    unit: 'kg',
+    points: generateDataPoints(),
     decimals: 0,
     color: '#e66',
     measurementName: 'Red',
   },
+  {
+    unit: 'cm',
+    points: generateDataPoints({
+      startingValue: 160,
+      minimum: 50,
+      radomFactor: 6,
+    }),
+    decimals: 0,
+    color: '#66e',
+    measurementName: 'Blue',
+  },
+  {
+    unit: 'kg',
+    points: generateDataPoints(),
+    decimals: 0,
+    color: '#6e6',
+    measurementName: 'Green',
+  },
 ];
 
 export default function App() {
@@ -56,23 +101,23 @@ export default function App() {
       onLayout={(e) => setWidth(e.nativeEvent.layout.width)}
     >
       <Chart
+        zoomEnabled
         width={width}
         height={height}
         datasets={datasets}
         colors={chartColors}
         timeDomain={timeDomain}
         marginHorizontal={PADDING}
+        noDataString="No data available"
       />
-      <View style={{ height: 10 }} />
+      <View style={styles.spacer} />
       <View style={styles.timeDomainRow}>
         {TIME_DOMAIN_TYPES.map((type) => (
           <TouchableOpacity
             key={type}
             style={[
               styles.timeDomainItem,
-              type === timeDomainType && {
-                backgroundColor: '#f0f',
-              },
+              type === timeDomainType && styles.timeDomainItemActive,
             ]}
             onPress={() => setTimeDomainType(type)}
           >
@@ -98,6 +143,9 @@ const styles = StyleSheet.create({
     paddingVertical: PADDING,
     backgroundColor: '#fff',
   },
+  spacer: {
+    height: 10,
+  },
   timeDomainRow: {
     flexDirection: 'row',
     paddingHorizontal: PADDING,
@@ -109,6 +157,9 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     alignItems: 'center',
   },
+  timeDomainItemActive: {
+    backgroundColor: '#b22',
+  },
   timeDomainItemText: {
     fontSize: 13,
   },

src/Chart.tsx

@@ -19,6 +19,7 @@ export default function Chart({
   height,
   datasets,
   timeDomain,
+  zoomEnabled,
   noDataString,
   calendarStrings,
   locale = 'en',
@@ -38,7 +39,6 @@ export default function Chart({
     }
 
     const props: HtmlProps = {
-      zoomEnabled: false,
       width,
       height,
       locale,
@@ -47,6 +47,7 @@ export default function Chart({
       noDataString,
       marginHorizontal,
       calendar: calendarStrings,
+      zoomEnabled: !!zoomEnabled,
       colors: chartColors,
     };
     currentTimeDomain.current = timeDomain;
@@ -73,6 +74,7 @@ export default function Chart({
     datasets,
     timeDomain,
     chartColors,
+    zoomEnabled,
     noDataString,
     calendarStrings,
     marginHorizontal,
@@ -101,11 +103,13 @@ export default function Chart({
   );
 
   const source = useMemo(() => {
-    const baseUrl = Platform.select({
-      ios: 'assets',
-      android: 'file:///android_asset',
-    });
-    return { uri: `${baseUrl}/chart.html` };
+    // Assets are copied to platform-specific locations
+    const uri = Platform.select({
+      ios: 'react-native-d3-chart-chart.html', // Direct file reference in iOS bundle
+      android: 'file:///android_asset/react-native-d3-chart/chart.html',
+    }) as string;
+
+    return { uri };
   }, []);
 
   const textZoom = Math.min(MAX_TEXT_ZOOM, PixelRatio.getFontScale() * 100);

src/types.ts

@@ -35,6 +35,7 @@ export type ChartProps = {
   noDataString: string;
   timeDomain: TimeDomain;
   locale?: string;
+  zoomEnabled?: boolean;
   marginHorizontal?: number;
   calendarStrings?: CalendarStrings;
   onZoomEnded?: () => void;