From 32e8a941622061c59ab254b2d666d497c7e2a0de Mon Sep 17 00:00:00 2001
From: alexstotsky <stotsky.alex@gmail.com>
Date: Sat, 7 Sep 2024 17:37:17 +0300
Subject: [PATCH 1/2] Implement dynamic pie chart height calculation

---
 src/ui/Charts/PieChart.js | 109 +++++++++++++++++++++++++++++++++++++-
 1 file changed, 108 insertions(+), 1 deletion(-)

diff --git a/src/ui/Charts/PieChart.js b/src/ui/Charts/PieChart.js
index 3f5fe8e65..127f3ac7a 100644
--- a/src/ui/Charts/PieChart.js
+++ b/src/ui/Charts/PieChart.js
@@ -4,6 +4,107 @@ import {
   PieChart as SimplePieChart, Pie, Legend, Cell,
 } from 'recharts'
 
+const testData = [
+  {
+    name: 'BTC',
+    value: 34.13116728,
+  },
+  {
+    name: 'LN-BTC',
+    value: 2.69066532,
+  },
+  {
+    name: 'ZEC',
+    value: 0.612238568,
+  },
+  {
+    name: 'SOL',
+    value: 0.4284770967,
+  },
+  {
+    name: 'LUNA2',
+    value: 0.3158846987747,
+  },
+  {
+    name: 'AVAX',
+    value: 0.25771596661999996,
+  },
+  {
+    name: 'OMG',
+    value: 0.102529873789,
+  },
+  {
+    name: 'UNI',
+    value: 0.0873126,
+  },
+  {
+    name: 'MKR',
+    value: 0.062973,
+  },
+  {
+    name: 'BTC',
+    value: 34.13116728,
+  },
+  {
+    name: 'LN-BTC',
+    value: 2.69066532,
+  },
+  {
+    name: 'ZEC',
+    value: 0.612238568,
+  },
+  {
+    name: 'SOL',
+    value: 0.4284770967,
+  },
+  {
+    name: 'LUNA2',
+    value: 0.3158846987747,
+  },
+  {
+    name: 'AVAX',
+    value: 0.25771596661999996,
+  },
+  {
+    name: 'OMG',
+    value: 0.102529873789,
+  },
+  {
+    name: 'UNI',
+    value: 0.0873126,
+  },
+  {
+    name: 'MKR',
+    value: 0.062973,
+  },
+  {
+    name: 'LN-BTC',
+    value: 2.69066532,
+  },
+  {
+    name: 'LN-BTC',
+    value: 2.69066532,
+  }, {
+    name: 'LN-BTC',
+    value: 2.69066532,
+  }, {
+    name: 'LN-BTC',
+    value: 2.69066532,
+  }, {
+    name: 'LN-BTC',
+    value: 2.69066532,
+  }, {
+    name: 'LN-BTC',
+    value: 2.69066532,
+  }, {
+    name: 'LN-BTC',
+    value: 2.69066532,
+  }, {
+    name: 'LN-BTC',
+    value: 2.69066532,
+  },
+]
+
 const COLORS = [
   '#8a36d8',
   '#FF3333',
@@ -63,13 +164,19 @@ class PieChart extends PureComponent {
     return COLORS[index % COLORS.length]
   }
 
+  getChartHeight = () => {
+    const { data } = this.props
+    // base height + 18px for each 4 items row
+    return 340 + data?.length / 4 * 18
+  }
+
   render() {
     const { data } = this.props
 
     return (
       <SimplePieChart
         width={282}
-        height={340}
+        height={this.getChartHeight()}
       >
         <Pie
           data={data}

From d0fcba7740eaa3dbdb9d4f21c09cc21105c22f17 Mon Sep 17 00:00:00 2001
From: alexstotsky <stotsky.alex@gmail.com>
Date: Sat, 7 Sep 2024 17:37:55 +0300
Subject: [PATCH 2/2] Cleanup

---
 src/ui/Charts/PieChart.js | 101 --------------------------------------
 1 file changed, 101 deletions(-)

diff --git a/src/ui/Charts/PieChart.js b/src/ui/Charts/PieChart.js
index 127f3ac7a..221b190c5 100644
--- a/src/ui/Charts/PieChart.js
+++ b/src/ui/Charts/PieChart.js
@@ -4,107 +4,6 @@ import {
   PieChart as SimplePieChart, Pie, Legend, Cell,
 } from 'recharts'
 
-const testData = [
-  {
-    name: 'BTC',
-    value: 34.13116728,
-  },
-  {
-    name: 'LN-BTC',
-    value: 2.69066532,
-  },
-  {
-    name: 'ZEC',
-    value: 0.612238568,
-  },
-  {
-    name: 'SOL',
-    value: 0.4284770967,
-  },
-  {
-    name: 'LUNA2',
-    value: 0.3158846987747,
-  },
-  {
-    name: 'AVAX',
-    value: 0.25771596661999996,
-  },
-  {
-    name: 'OMG',
-    value: 0.102529873789,
-  },
-  {
-    name: 'UNI',
-    value: 0.0873126,
-  },
-  {
-    name: 'MKR',
-    value: 0.062973,
-  },
-  {
-    name: 'BTC',
-    value: 34.13116728,
-  },
-  {
-    name: 'LN-BTC',
-    value: 2.69066532,
-  },
-  {
-    name: 'ZEC',
-    value: 0.612238568,
-  },
-  {
-    name: 'SOL',
-    value: 0.4284770967,
-  },
-  {
-    name: 'LUNA2',
-    value: 0.3158846987747,
-  },
-  {
-    name: 'AVAX',
-    value: 0.25771596661999996,
-  },
-  {
-    name: 'OMG',
-    value: 0.102529873789,
-  },
-  {
-    name: 'UNI',
-    value: 0.0873126,
-  },
-  {
-    name: 'MKR',
-    value: 0.062973,
-  },
-  {
-    name: 'LN-BTC',
-    value: 2.69066532,
-  },
-  {
-    name: 'LN-BTC',
-    value: 2.69066532,
-  }, {
-    name: 'LN-BTC',
-    value: 2.69066532,
-  }, {
-    name: 'LN-BTC',
-    value: 2.69066532,
-  }, {
-    name: 'LN-BTC',
-    value: 2.69066532,
-  }, {
-    name: 'LN-BTC',
-    value: 2.69066532,
-  }, {
-    name: 'LN-BTC',
-    value: 2.69066532,
-  }, {
-    name: 'LN-BTC',
-    value: 2.69066532,
-  },
-]
-
 const COLORS = [
   '#8a36d8',
   '#FF3333',