fix styling

Author: murphycj

demo/app/(tabs)/index.tsx

@@ -1,5 +1,11 @@
 import { useEffect, useRef, useState, useMemo } from 'react';
-import { Platform, StyleSheet, SafeAreaView, Text } from 'react-native';
+import {
+  Platform,
+  StyleSheet,
+  SafeAreaView,
+  Text,
+  Dimensions,
+} from 'react-native';
 
 import ChartUPlot from 'uplot-react-native';
 
@@ -21,41 +27,37 @@ var data2 = makeData(n);
 var data3 = makeData(n);
 var count = n * 3;
 
-var options = {
-  id: 'chart',
-  width: 300,
-  height: 150,
-  scales: { x: { time: false } },
-  series: [{ label: 'Time' }, { label: 'Value', stroke: 'blue', width: 2 }],
-  axes: [{ scale: 'x' }, {}],
-};
-var style = {
-  width: 400,
-  height: 150,
-};
-
 export default function HomeScreen() {
   // create ref for chart
   const chartRef1 = useRef(null);
   const chartRef2 = useRef(null);
   const chartRef3 = useRef(null);
   const [nDataPoint, setNDataPoint] = useState(1);
 
+  var { width, height } = Dimensions.get('window');
+
   useEffect(() => {
-    setTimeout(() => {
-      setInterval(() => {
-        chartRef1.current?.pushData([n, Math.random() * 100]);
-        chartRef2.current?.pushData([n, Math.random() * 100]);
-        chartRef3.current?.pushData([n, Math.random() * 100]);
-        count = count + 3;
-        n = n + 1;
-      }, 10);
-    }, 10000);
+    setInterval(() => {
+      chartRef1.current?.pushData([n, Math.random() * 100]);
+      // chartRef2.current?.pushData([n, Math.random() * 100]);
+      // chartRef3.current?.pushData([n, Math.random() * 100]);
+      count = count + 3;
+      n = n + 1;
+    }, 1000);
     setInterval(() => {
       setNDataPoint(count);
     }, 1000);
   }, []);
 
+  var options = {
+    id: 'chart',
+    width: width,
+    height: height * 0.7,
+    scales: { x: { time: false } },
+    series: [{ label: 'Time' }, { label: 'Value', stroke: 'blue', width: 2 }],
+    axes: [{ scale: 'x' }, {}],
+  };
+
   return (
     <SafeAreaView
       style={{
@@ -81,10 +83,13 @@ export default function HomeScreen() {
       <ChartUPlot
         data={data1}
         options={options}
-        style={style}
+        style={{
+          width: width,
+          height: height * 0.7,
+        }}
         ref={chartRef1}
       />
-      <ChartUPlot
+      {/* <ChartUPlot
         data={data2}
         options={options}
         style={style}
@@ -95,7 +100,7 @@ export default function HomeScreen() {
         options={options}
         style={style}
         ref={chartRef3}
-      />
+      /> */}
     </SafeAreaView>
   );
 }

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.3"
+    "uplot-react-native": "0.1.4"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",

demo/yarn.lock

@@ -833,10 +833,10 @@
   dependencies:
     "@types/json-schema" "^7.0.15"
 
-"@eslint/core@^0.15.0":
-  version "0.15.0"
-  resolved "https://registry.yarnpkg.com/@eslint/core/-/core-0.15.0.tgz#8fc04709a7b9a179d9f7d93068fc000cb8c5603d"
-  integrity sha512-b7ePw78tEWWkpgZCDYkbqDOP8dmM6qe+AOC6iuJqlq1R/0ahMAeH3qynpnqKFGkMltrp44ohV4ubGyvLX28tzw==
+"@eslint/core@^0.15.1":
+  version "0.15.1"
+  resolved "https://registry.yarnpkg.com/@eslint/core/-/core-0.15.1.tgz#d530d44209cbfe2f82ef86d6ba08760196dd3b60"
+  integrity sha512-bkOp+iumZCCbt1K1CmWf0R9pM5yKpDv+ZXtvSyQpudrI9kuFLp+bM2WOPXImuD/ceQuaa8f5pj93Y7zyECIGNA==
   dependencies:
     "@types/json-schema" "^7.0.15"
 
@@ -866,11 +866,11 @@
   integrity sha512-RBMg5FRL0I0gs51M/guSAj5/e14VQ4tpZnQNWwuDT66P14I43ItmPfIZRhO9fUVIPOAQXU47atlywZ/czoqFPA==
 
 "@eslint/plugin-kit@^0.3.1":
-  version "0.3.2"
-  resolved "https://registry.yarnpkg.com/@eslint/plugin-kit/-/plugin-kit-0.3.2.tgz#0cad96b134d23a653348e3342f485636b5ef4732"
-  integrity sha512-4SaFZCNfJqvk/kenHpI8xvN42DMaoycy4PzKc5otHxRswww1kAt82OlBuwRVLofCACCTZEcla2Ydxv8scMXaTg==
+  version "0.3.3"
+  resolved "https://registry.yarnpkg.com/@eslint/plugin-kit/-/plugin-kit-0.3.3.tgz#32926b59bd407d58d817941e48b2a7049359b1fd"
+  integrity sha512-1+WqvgNMhmlAambTvT3KPtCl/Ibr68VldY2XY40SL1CE0ZXiakFR/cbTspaF5HsnpDMvcYYoJHfl4980NBjGag==
   dependencies:
-    "@eslint/core" "^0.15.0"
+    "@eslint/core" "^0.15.1"
     levn "^0.4.1"
 
 "@expo/cli@0.24.15":
@@ -2422,12 +2422,12 @@ braces@^3.0.3:
     fill-range "^7.1.1"
 
 browserslist@^4.24.0, browserslist@^4.25.0:
-  version "4.25.0"
-  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.25.0.tgz#986aa9c6d87916885da2b50d8eb577ac8d133b2c"
-  integrity sha512-PJ8gYKeS5e/whHBh8xrwYK+dAvEj7JXtz6uTucnMRB8OiGTsKccFekoRrjajPBHV8oOY+2tI4uxeceSimKwMFA==
+  version "4.25.1"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.25.1.tgz#ba9e8e6f298a1d86f829c9b975e07948967bb111"
+  integrity sha512-KGj0KoOMXLpSNkkEI6Z6mShmQy0bc1I+T7K9N81k4WWMrfz+6fQ6es80B/YLAeRoKvjYE1YSHHOW1qe9xIVzHw==
   dependencies:
-    caniuse-lite "^1.0.30001718"
-    electron-to-chromium "^1.5.160"
+    caniuse-lite "^1.0.30001726"
+    electron-to-chromium "^1.5.173"
     node-releases "^2.0.19"
     update-browserslist-db "^1.1.3"
 
@@ -2516,10 +2516,10 @@ camelcase@^6.2.0:
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-6.3.0.tgz#5685b95eb209ac9c0c177467778c9c84df58ba9a"
   integrity sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==
 
-caniuse-lite@^1.0.30001718:
-  version "1.0.30001724"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001724.tgz#312e163553dd70d2c0fb603d74810c85d8ed94a0"
-  integrity sha512-WqJo7p0TbHDOythNTqYujmaJTvtYRZrjpP8TCvH6Vb9CYJerJNKamKzIWOM4BkQatWj9H2lYulpdAQNBe7QhNA==
+caniuse-lite@^1.0.30001726:
+  version "1.0.30001726"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001726.tgz#a15bd87d5a4bf01f6b6f70ae7c97fdfd28b5ae47"
+  integrity sha512-VQAUIUzBiZ/UnlM28fSp2CRF3ivUn1BWEvxMcVTNwpw91Py1pGbPIyIKtd+tzct9C3ouceCVdGAXxZOpZAsgdw==
 
 chalk@^2.0.1, chalk@^2.4.2:
   version "2.4.2"
@@ -2912,10 +2912,10 @@ ee-first@1.1.1:
   resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
   integrity sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==
 
-electron-to-chromium@^1.5.160:
-  version "1.5.173"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.5.173.tgz#1aeba57204fe19425921a29946ef543653f5e896"
-  integrity sha512-2bFhXP2zqSfQHugjqJIDFVwa+qIxyNApenmXTp9EjaKtdPrES5Qcn9/aSFy/NaP2E+fWG/zxKu/LBvY36p5VNQ==
+electron-to-chromium@^1.5.173:
+  version "1.5.174"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.5.174.tgz#c7d273755d4dc9bc4f1d192f6f2092bee42771f3"
+  integrity sha512-HE43yYdUUiJVjewV2A9EP8o89Kb4AqMKplMQP2IxEPUws1Etu/ZkdsgUDabUZ/WmbP4ZbvJDOcunvbBUPPIfmw==
 
 emoji-regex@^8.0.0:
   version "8.0.0"
@@ -6674,7 +6674,7 @@ update-browserslist-db@^1.1.3:
     picocolors "^1.1.1"
 
 "uplot-react-native@file:..":
-  version "0.1.1"
+  version "0.1.3"
   dependencies:
     react-native-webview ">=13.0.0"
     uplot ">=1.6.0"