From 4bc445407d5ce13b9374c8b7722609f9715ab476 Mon Sep 17 00:00:00 2001
From: Austin Chen <akrolsmir@gmail.com>
Date: Wed, 1 Dec 2021 20:17:54 -0600
Subject: [PATCH] Reconfigure page layout

---
 market-simulator/src/components/Simulator.vue | 47 +++++++++++++------
 1 file changed, 33 insertions(+), 14 deletions(-)

diff --git a/market-simulator/src/components/Simulator.vue b/market-simulator/src/components/Simulator.vue
index 5eb4f34f..af74ad14 100644
--- a/market-simulator/src/components/Simulator.vue
+++ b/market-simulator/src/components/Simulator.vue
@@ -1,21 +1,24 @@
 <template>
   <div class="overflow-x-auto px-12">
-    <label>Simulation step: {{ steps }} </label>
-    <input
-      class="range"
-      type="range"
-      v-model.number="steps"
-      min="1"
-      :max="bids.length"
-    />
     <!-- Two-column layout (on large screen sizes) -->
-    <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
-      <div>
-        <canvas id="simChart" width="400" height="400"></canvas>
-      </div>
+    <div class="grid grid-cols-1 xl:grid-cols-2 gap-4">
+      <!-- Left column -->
       <div>
+        <h1 class="text-2xl font-bold text-gray-600 mb-8">
+          Dynamic Parimutuel Market Simulator
+        </h1>
+
+        <label>Simulation step: {{ steps }} </label>
+        <input
+          class="range"
+          type="range"
+          v-model.number="steps"
+          min="1"
+          :max="bids.length"
+        />
+
         <!-- Table to enter a new bid -->
-        <table class="table table-compact my-8">
+        <table class="table table-compact my-8 w-full">
           <thead>
             <tr>
               <th>Order #</th>
@@ -71,7 +74,7 @@
         </table>
 
         <!-- List of historical bids -->
-        <table class="table table-compact">
+        <table class="table table-compact w-full">
           <thead>
             <tr>
               <th>Order #</th>
@@ -114,6 +117,15 @@
           </tbody>
         </table>
       </div>
+
+      <!-- Right column -->
+      <div>
+        <h1 class="text-2xl font-bold text-gray-600 mb-8">
+          Probability of
+          <div class="badge badge-success text-2xl h-8 w-18">YES</div>
+        </h1>
+        <canvas id="simChart" width="400" height="400"></canvas>
+      </div>
     </div>
   </div>
 </template>
@@ -161,6 +173,13 @@ function initChart() {
         },
       ],
     },
+    options: {
+      plugins: {
+        legend: {
+          display: false,
+        },
+      },
+    },
   })
 }