diff --git a/packages/ui/src/lib/components/graph.svelte b/packages/ui/src/lib/components/graph.svelte
index 0cf05586..52e3d077 100644
--- a/packages/ui/src/lib/components/graph.svelte
+++ b/packages/ui/src/lib/components/graph.svelte
@@ -7,17 +7,29 @@
 		value: number
 	}
 
-	export let minX: number
-	export let maxX: number
-	export let minY = 0
-	export let maxY: number
+    export let range: number
 	export let values: GraphRecord[]
+
+	let minTimestamp = values[0]?.timestamp
+	let maxTimestamp = values[0]?.timestamp
+	let minValue = values[0]?.value
+	let maxValue = values[0]?.value
+
+    for (let i = 1; i < values.length; i++) {
+        let {timestamp, value} = values[i]
+
+        if (timestamp < minTimestamp) minTimestamp = timestamp
+        if (timestamp > maxTimestamp) maxTimestamp = timestamp
+        if (value < minValue) minValue = value
+        if (value > maxValue) maxValue = value
+    }
+
+    console.log(range, values)
 </script>
 
 <div class={`root ${cls}`}>
-	x axis scale: {minX} - {maxX}
-	y axis scale: {minY} - {maxY}
-	values length: {values.length}
+    <svg width='100%' height='140'>
+    </svg>
 </div>
 
 <style lang="scss">