feat: Update chart style

server.py

@@ -214,6 +214,9 @@ def getTokens():
 
         token["price"] = get_token_price(token["mint"])
         token["value"] = token["price"] * token["balance"]
+        
+        if token["value"] < 0.01:
+            continue
 
         data = getTokenData(str(mint))
         token["name"] = data["name"]

templates/index.html

@@ -45,10 +45,10 @@
         <div class="bg-circle-3 bg-circle"></div>
         <div class="bg-circle-4 bg-circle"></div>
     </header>
-    <section style="margin-top: 50px;margin-bottom: 50px;">
+    <section style="margin-top: 50px;margin-bottom: 50px;max-width: 100vw;overflow: hidden;">
         <div class="text-center">
             <h1>Vault Balances</h1>
-            <div id="pie-chart" style="margin: auto;max-width: 900px;max-height: 500px;background: rgba(255,255,255,0.76);"><script type="text/javascript">
+            <div id="pie-chart" style="margin: auto;"><script type="text/javascript">
 
     window.onload = function () {
         google.charts.load('current', {
@@ -63,18 +63,18 @@
             var data = new google.visualization.DataTable();
             data.addColumn('string', 'Token');
             data.addColumn('number', 'Value');
-            data.addColumn({type: 'string', role: 'tooltip', 'p': {'html': true}});
+            data.addColumn({ type: 'string', role: 'tooltip', 'p': { 'html': true } });
 
             data.addRows([
                 {% for token, value, name in pie_chart %}
-                ['{{ token }}', {{ value }}, '{{name}}'],
-                {% endfor %}
+        ['{{ token }}', {{ value }}, '{{name}}'],
+    {% endfor %}
             ]);
 
     // Set chart options
     var options = {
         pieSliceText: 'label',
-        legend: { 
+        legend: {
             position: 'right',
             textStyle: {
                 color: 'white'
@@ -82,10 +82,30 @@
         },
         backgroundColor: '#212529',
     };
-
-    // Instantiate and draw the chart.
     var chart = new google.visualization.PieChart(document.getElementById('pie-chart'));
-    chart.draw(data, options);
+    function resizeChart() {
+        // Dynamically adjust the chart size to the container
+        var width = window.innerWidth * 0.8;
+        var height = window.innerHeight * 0.5;
+
+        // If the width is less than 600 px use full width
+        if (width < 700) {
+            chart.draw(data, options);
+        }
+        else {
+            chart.draw(data, {
+                ...options,
+                width: width,
+                height: height
+            });
+        }
+    }
+
+    resizeChart();
+
+    window.addEventListener('resize', resizeChart);
+    
+    
         }
         };
 </script></div>
@@ -100,7 +120,7 @@
                 <div class="col-lg-6 order-lg-1">
                     <div class="p-5">
                         <h2 class="display-4">1. Buy tokens</h2>
-                        <p>To get started buy stWDBRN tokens at the current price to buy a percent of the vault value. The buy in value is then invested in various projects in order to increase the token's value.<br><br>Send USDC or SOL to vault.woodburn.sol or&nbsp;NWywvhcqdkJsm1s9VVviPm9UfyDtyCW9t8kDb24PDPN and send me a message to mint stWDBRN</p><a class="btn btn-primary" role="button" href="mailto:vault@woodburn.au">Buy Tokens</a>
+                        <p>To get started buy stWDBRN tokens at the current price to buy a percent of the vault value. The buy in value is then invested in various projects in order to increase the token's value.<br><br>Send USDC or SOL to vault.woodburn.sol and send me a message to mint stWDBRN</p><a class="btn btn-primary" role="button" href="mailto:vault@woodburn.au">Buy Tokens</a>
                     </div>
                 </div>
             </div>