From dfaef53e579dd6e8f1f8dad4b3c63898f687ca60 Mon Sep 17 00:00:00 2001
From: nino <Ninokeldishvili@gmail.com>
Date: Fri, 27 Dec 2024 10:07:21 +0400
Subject: [PATCH 1/9] Move components to components-ui

---
 .../lib/components/charts/MetricChart.svelte  | 18 +++++++++++++++++
 packages/ui-components/src/lib/index.ts       |  1 +
 .../src/lib/components/MetricChart.svelte     | 20 -------------------
 3 files changed, 19 insertions(+), 20 deletions(-)
 create mode 100644 packages/ui-components/src/lib/components/charts/MetricChart.svelte
 delete mode 100644 tauri-app/src/lib/components/MetricChart.svelte

diff --git a/packages/ui-components/src/lib/components/charts/MetricChart.svelte b/packages/ui-components/src/lib/components/charts/MetricChart.svelte
new file mode 100644
index 000000000..fd91b0725
--- /dev/null
+++ b/packages/ui-components/src/lib/components/charts/MetricChart.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+	export let metric;
+	export let data;
+
+	$: metricData = metric?.precision
+		? parseFloat(data[0]?.[metric.value].toPrecision(metric.precision)).toString()
+		: data[0]?.[metric.value];
+</script>
+
+<div class="flex h-full w-full flex-col items-center justify-between border p-4">
+	<span>{metric.label}</span>
+	<span class="text-2xl"
+		>{metric?.['unit-prefix'] || ''}{metricData}{metric?.['unit-suffix'] || ''}</span
+	>
+	{#if metric?.description}
+		<span class="text-sm">{metric.description}</span>
+	{/if}
+</div>
diff --git a/packages/ui-components/src/lib/index.ts b/packages/ui-components/src/lib/index.ts
index 88874ce51..33c29c06e 100644
--- a/packages/ui-components/src/lib/index.ts
+++ b/packages/ui-components/src/lib/index.ts
@@ -46,6 +46,7 @@ export { default as IconSuccess } from './components/IconSuccess.svelte';
 export { default as IconTelegram } from './components/IconTelegram.svelte';
 export { default as IconWalletConnect } from './components/IconWalletConnect.svelte';
 export { default as IconWarning } from './components/IconWarning.svelte';
+export { default as MetricChart } from './components/charts/MetricChart.svelte';
 
 //Types
 export type { AppStoresInterface } from './types/appStores.ts';
diff --git a/tauri-app/src/lib/components/MetricChart.svelte b/tauri-app/src/lib/components/MetricChart.svelte
deleted file mode 100644
index 269035657..000000000
--- a/tauri-app/src/lib/components/MetricChart.svelte
+++ /dev/null
@@ -1,20 +0,0 @@
-<script lang="ts">
-  import type { Metric } from '$lib/typeshare/config';
-  import type { TransformedPlotData } from '$lib/utils/chartData';
-  export let metric: Metric;
-  export let data: TransformedPlotData[];
-
-  $: metricData = metric?.precision
-    ? parseFloat(data[0]?.[metric.value].toPrecision(metric.precision)).toString()
-    : data[0]?.[metric.value];
-</script>
-
-<div class="flex h-full w-full flex-col items-center justify-between border p-4">
-  <span>{metric.label}</span>
-  <span class="text-2xl"
-    >{metric?.['unit-prefix'] || ''}{metricData}{metric?.['unit-suffix'] || ''}</span
-  >
-  {#if metric?.description}
-    <span class="text-sm">{metric.description}</span>
-  {/if}
-</div>

From 1db946c97110235acb5c36a6d21b3c2ef4812a41 Mon Sep 17 00:00:00 2001
From: nino <Ninokeldishvili@gmail.com>
Date: Fri, 27 Dec 2024 10:07:36 +0400
Subject: [PATCH 2/9] Update reference import

---
 tauri-app/src/lib/components/Charts.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tauri-app/src/lib/components/Charts.svelte b/tauri-app/src/lib/components/Charts.svelte
index 0bdb18be5..2204843af 100644
--- a/tauri-app/src/lib/components/Charts.svelte
+++ b/tauri-app/src/lib/components/Charts.svelte
@@ -3,7 +3,7 @@
   import type { ChartData } from '$lib/typeshare/config';
   import { transformDataForPlot } from '$lib/utils/chartData';
   import { sortBy } from 'lodash';
-  import MetricChart from './MetricChart.svelte';
+  import { MetricChart } from '@rainlanguage/ui-components';
   export let chartData: ChartData;
 </script>
 

From 31b542ee479e2c1cb81922643cc4925603178ae6 Mon Sep 17 00:00:00 2001
From: nino <Ninokeldishvili@gmail.com>
Date: Fri, 27 Dec 2024 10:22:56 +0400
Subject: [PATCH 3/9] Add MetricChart in webapp test

---
 packages/webapp/src/routes/test/+page.svelte | 20 +++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/packages/webapp/src/routes/test/+page.svelte b/packages/webapp/src/routes/test/+page.svelte
index 528c24be4..146000a44 100644
--- a/packages/webapp/src/routes/test/+page.svelte
+++ b/packages/webapp/src/routes/test/+page.svelte
@@ -7,9 +7,26 @@
 		IconTelegram,
 		IconWalletConnect,
 		IconWarning,
-		IconExternalLink
+		IconExternalLink,
+		MetricChart
 	} from '@rainlanguage/ui-components';
 	let isLoading: boolean = true;
+	// Mock data for `metric` prop
+	const metric = {
+		label: 'Test Metric',
+		description: 'This is a test metric.',
+		'unit-prefix': '$',
+		'unit-suffix': ' USD',
+		value: 'testValue',
+		precision: 2
+	};
+
+	// Mock data for `data` prop
+	const data = [
+		{
+			testValue: 1234.5678
+		}
+	];
 </script>
 
 <div>
@@ -24,4 +41,5 @@
 	<IconTelegram dark />
 	<IconWalletConnect />
 	<IconWarning />
+	<MetricChart {metric} {data} />
 </div>

From e6fcffb0667192355a4ce6f29d3a2a9f8f6e41fa Mon Sep 17 00:00:00 2001
From: nino <Ninokeldishvili@gmail.com>
Date: Tue, 31 Dec 2024 17:51:04 +0400
Subject: [PATCH 4/9] Move MetricChart.svelte back to tauri-app

---
 .../lib/components/charts/MetricChart.svelte   | 18 ------------------
 packages/ui-components/src/lib/index.ts        |  1 -
 packages/webapp/src/routes/test/+page.svelte   |  4 +---
 tauri-app/src/lib/components/Charts.svelte     |  2 +-
 .../src/lib/components/MetricChart.svelte      | 18 ++++++++++++++++++
 5 files changed, 20 insertions(+), 23 deletions(-)
 delete mode 100644 packages/ui-components/src/lib/components/charts/MetricChart.svelte
 create mode 100644 tauri-app/src/lib/components/MetricChart.svelte

diff --git a/packages/ui-components/src/lib/components/charts/MetricChart.svelte b/packages/ui-components/src/lib/components/charts/MetricChart.svelte
deleted file mode 100644
index fd91b0725..000000000
--- a/packages/ui-components/src/lib/components/charts/MetricChart.svelte
+++ /dev/null
@@ -1,18 +0,0 @@
-<script lang="ts">
-	export let metric;
-	export let data;
-
-	$: metricData = metric?.precision
-		? parseFloat(data[0]?.[metric.value].toPrecision(metric.precision)).toString()
-		: data[0]?.[metric.value];
-</script>
-
-<div class="flex h-full w-full flex-col items-center justify-between border p-4">
-	<span>{metric.label}</span>
-	<span class="text-2xl"
-		>{metric?.['unit-prefix'] || ''}{metricData}{metric?.['unit-suffix'] || ''}</span
-	>
-	{#if metric?.description}
-		<span class="text-sm">{metric.description}</span>
-	{/if}
-</div>
diff --git a/packages/ui-components/src/lib/index.ts b/packages/ui-components/src/lib/index.ts
index c8931f8d0..b0a3d948d 100644
--- a/packages/ui-components/src/lib/index.ts
+++ b/packages/ui-components/src/lib/index.ts
@@ -47,7 +47,6 @@ export { default as IconTelegram } from './components/IconTelegram.svelte';
 export { default as IconWalletConnect } from './components/IconWalletConnect.svelte';
 export { default as IconWarning } from './components/IconWarning.svelte';
 export { default as InputToken } from './components/input/InputToken.svelte';
-export { default as MetricChart } from './components/charts/MetricChart.svelte';
 
 //Types
 export type { AppStoresInterface } from './types/appStores.ts';
diff --git a/packages/webapp/src/routes/test/+page.svelte b/packages/webapp/src/routes/test/+page.svelte
index 146000a44..97b77cc94 100644
--- a/packages/webapp/src/routes/test/+page.svelte
+++ b/packages/webapp/src/routes/test/+page.svelte
@@ -7,8 +7,7 @@
 		IconTelegram,
 		IconWalletConnect,
 		IconWarning,
-		IconExternalLink,
-		MetricChart
+		IconExternalLink
 	} from '@rainlanguage/ui-components';
 	let isLoading: boolean = true;
 	// Mock data for `metric` prop
@@ -41,5 +40,4 @@
 	<IconTelegram dark />
 	<IconWalletConnect />
 	<IconWarning />
-	<MetricChart {metric} {data} />
 </div>
diff --git a/tauri-app/src/lib/components/Charts.svelte b/tauri-app/src/lib/components/Charts.svelte
index 2204843af..0bdb18be5 100644
--- a/tauri-app/src/lib/components/Charts.svelte
+++ b/tauri-app/src/lib/components/Charts.svelte
@@ -3,7 +3,7 @@
   import type { ChartData } from '$lib/typeshare/config';
   import { transformDataForPlot } from '$lib/utils/chartData';
   import { sortBy } from 'lodash';
-  import { MetricChart } from '@rainlanguage/ui-components';
+  import MetricChart from './MetricChart.svelte';
   export let chartData: ChartData;
 </script>
 
diff --git a/tauri-app/src/lib/components/MetricChart.svelte b/tauri-app/src/lib/components/MetricChart.svelte
new file mode 100644
index 000000000..de25ecf99
--- /dev/null
+++ b/tauri-app/src/lib/components/MetricChart.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+  export let metric;
+  export let data;
+
+  $: metricData = metric?.precision
+    ? parseFloat(data[0]?.[metric.value].toPrecision(metric.precision)).toString()
+    : data[0]?.[metric.value];
+</script>
+
+<div class="flex h-full w-full flex-col items-center justify-between border p-4">
+  <span>{metric.label}</span>
+  <span class="text-2xl"
+    >{metric?.['unit-prefix'] || ''}{metricData}{metric?.['unit-suffix'] || ''}</span
+  >
+  {#if metric?.description}
+    <span class="text-sm">{metric.description}</span>
+  {/if}
+</div>

From 1be6ca91025d839a642ecf08cc2165ef437e9868 Mon Sep 17 00:00:00 2001
From: nino <Ninokeldishvili@gmail.com>
Date: Tue, 31 Dec 2024 17:51:13 +0400
Subject: [PATCH 5/9] Uncomment iframe

---
 tauri-app/src/routes/+page.svelte | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/tauri-app/src/routes/+page.svelte b/tauri-app/src/routes/+page.svelte
index 7b48e4805..f0a1fa80d 100644
--- a/tauri-app/src/routes/+page.svelte
+++ b/tauri-app/src/routes/+page.svelte
@@ -19,12 +19,12 @@
     >
   </div>
   <div style="position: relative; padding-bottom: 64.63195691202873%; height: 0;" class="w-full">
-    <!--    <iframe-->
-    <!--      title="Raindex Demo"-->
-    <!--      src="https://www.loom.com/embed/fca750f31f0a43258891cea0ddacb588?sid=21583276-742b-49d5-a7db-b6e9e01ca418"-->
-    <!--      frameborder="0"-->
-    <!--      allowfullscreen-->
-    <!--      style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"-->
-    <!--    ></iframe>-->
+    <iframe
+      title="Raindex Demo"
+      src="https://www.loom.com/embed/fca750f31f0a43258891cea0ddacb588?sid=21583276-742b-49d5-a7db-b6e9e01ca418"
+      frameborder="0"
+      allowfullscreen
+      style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
+    ></iframe>
   </div>
 </div>

From 5af5840b05c33c0b7d372674d22d039ecd508172 Mon Sep 17 00:00:00 2001
From: nino <Ninokeldishvili@gmail.com>
Date: Tue, 31 Dec 2024 17:53:26 +0400
Subject: [PATCH 6/9] Remove unused variables

---
 packages/webapp/src/routes/test/+page.svelte | 16 ----------------
 1 file changed, 16 deletions(-)

diff --git a/packages/webapp/src/routes/test/+page.svelte b/packages/webapp/src/routes/test/+page.svelte
index 97b77cc94..528c24be4 100644
--- a/packages/webapp/src/routes/test/+page.svelte
+++ b/packages/webapp/src/routes/test/+page.svelte
@@ -10,22 +10,6 @@
 		IconExternalLink
 	} from '@rainlanguage/ui-components';
 	let isLoading: boolean = true;
-	// Mock data for `metric` prop
-	const metric = {
-		label: 'Test Metric',
-		description: 'This is a test metric.',
-		'unit-prefix': '$',
-		'unit-suffix': ' USD',
-		value: 'testValue',
-		precision: 2
-	};
-
-	// Mock data for `data` prop
-	const data = [
-		{
-			testValue: 1234.5678
-		}
-	];
 </script>
 
 <div>

From 21a4b86ba9231e49adab51f3f622f84a87a32425 Mon Sep 17 00:00:00 2001
From: nino <Ninokeldishvili@gmail.com>
Date: Tue, 31 Dec 2024 18:26:55 +0400
Subject: [PATCH 7/9] Import types

---
 tauri-app/src/lib/components/MetricChart.svelte | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/tauri-app/src/lib/components/MetricChart.svelte b/tauri-app/src/lib/components/MetricChart.svelte
index de25ecf99..269035657 100644
--- a/tauri-app/src/lib/components/MetricChart.svelte
+++ b/tauri-app/src/lib/components/MetricChart.svelte
@@ -1,6 +1,8 @@
 <script lang="ts">
-  export let metric;
-  export let data;
+  import type { Metric } from '$lib/typeshare/config';
+  import type { TransformedPlotData } from '$lib/utils/chartData';
+  export let metric: Metric;
+  export let data: TransformedPlotData[];
 
   $: metricData = metric?.precision
     ? parseFloat(data[0]?.[metric.value].toPrecision(metric.precision)).toString()

From 42e957ddf278bd4c42fb14079bf5496f72dcb2cd Mon Sep 17 00:00:00 2001
From: nino <Ninokeldishvili@gmail.com>
Date: Tue, 31 Dec 2024 18:32:02 +0400
Subject: [PATCH 8/9] Add MetricChart component test

---
 .../src/lib/components/MetricChart.test.ts    | 65 +++++++++++++++++++
 1 file changed, 65 insertions(+)
 create mode 100644 tauri-app/src/lib/components/MetricChart.test.ts

diff --git a/tauri-app/src/lib/components/MetricChart.test.ts b/tauri-app/src/lib/components/MetricChart.test.ts
new file mode 100644
index 000000000..10c5ccedf
--- /dev/null
+++ b/tauri-app/src/lib/components/MetricChart.test.ts
@@ -0,0 +1,65 @@
+import { describe, test, expect } from 'vitest';
+import { render } from '@testing-library/svelte';
+import MetricChart from './MetricChart.svelte';
+
+describe('MetricChart Component', () => {
+  test('renders metric label', () => {
+    const metric = {
+      label: 'Test Metric',
+      'unit-prefix': '$',
+      'unit-suffix': ' USD',
+      value: 'testValue',
+      precision: 4
+    };
+    const data = [{ testValue: 22 }];
+
+    const { getByText } = render(MetricChart, { props: { metric, data } });
+
+    expect(getByText('Test Metric')).toBeInTheDocument();
+  });
+
+  test('renders formatted data with precision', () => {
+    const metric = {
+      label: 'Test Metric',
+      'unit-prefix': '$',
+      'unit-suffix': ' USD',
+      value: 'testValue',
+      precision: 4
+    };
+    const data = [{ testValue: 123.456 }];
+
+    const { getByText } = render(MetricChart, { props: { metric, data } });
+
+    expect(getByText('$123.5 USD')).toBeInTheDocument();
+  });
+
+  test('renders data without precision when not provided', () => {
+    const metric = {
+      label: 'Test Metric',
+      'unit-prefix': '$',
+      'unit-suffix': ' USD',
+      value: 'testValue'
+    };
+    const data = [{ testValue: 123.456 }];
+
+    const { getByText } = render(MetricChart, { props: { metric, data } });
+
+    expect(getByText('$123.456 USD')).toBeInTheDocument();
+  });
+
+  test('renders description if provided', () => {
+    const metric = {
+      label: 'Test Metric',
+      description: 'This is a test metric.',
+      'unit-prefix': '$',
+      'unit-suffix': ' USD',
+      value: 'testValue',
+      precision: 2
+    };
+    const data = [{ testValue: 123.456 }];
+
+    const { getByText } = render(MetricChart, { props: { metric, data } });
+
+    expect(getByText('This is a test metric.')).toBeInTheDocument();
+  });
+});

From f1d8dd80f392459265d9427480e03507321d8996 Mon Sep 17 00:00:00 2001
From: nino <Ninokeldishvili@gmail.com>
Date: Fri, 3 Jan 2025 10:25:59 +0400
Subject: [PATCH 9/9] Format

---
 tauri-app/src/lib/components/MetricChart.test.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/tauri-app/src/lib/components/MetricChart.test.ts b/tauri-app/src/lib/components/MetricChart.test.ts
index 10c5ccedf..1aa2d12d6 100644
--- a/tauri-app/src/lib/components/MetricChart.test.ts
+++ b/tauri-app/src/lib/components/MetricChart.test.ts
@@ -9,7 +9,7 @@ describe('MetricChart Component', () => {
       'unit-prefix': '$',
       'unit-suffix': ' USD',
       value: 'testValue',
-      precision: 4
+      precision: 4,
     };
     const data = [{ testValue: 22 }];
 
@@ -24,7 +24,7 @@ describe('MetricChart Component', () => {
       'unit-prefix': '$',
       'unit-suffix': ' USD',
       value: 'testValue',
-      precision: 4
+      precision: 4,
     };
     const data = [{ testValue: 123.456 }];
 
@@ -38,7 +38,7 @@ describe('MetricChart Component', () => {
       label: 'Test Metric',
       'unit-prefix': '$',
       'unit-suffix': ' USD',
-      value: 'testValue'
+      value: 'testValue',
     };
     const data = [{ testValue: 123.456 }];
 
@@ -54,7 +54,7 @@ describe('MetricChart Component', () => {
       'unit-prefix': '$',
       'unit-suffix': ' USD',
       value: 'testValue',
-      precision: 2
+      precision: 2,
     };
     const data = [{ testValue: 123.456 }];