feat: chart preview

Maders · Maders · commit 842c51e78371 · 2023-04-12T08:20:48.000+03:30
diff --git a/app/views/index.scala.html b/app/views/index.scala.html
@@ -1,5 +1,5 @@
 @()
 
-@main("Welcome to Play") {
-  <h1>Welcome to Play!</h1>
+@main("Memorability Score vs Price") {
+  <div id="chart"></div>
 }
diff --git a/app/views/main.scala.html b/app/views/main.scala.html
@@ -13,13 +13,19 @@
         <title>@title</title>
         <link rel="stylesheet" media="screen" href="@routes.Assets.versioned("stylesheets/main.css")">
         <link rel="shortcut icon" type="image/png" href="@routes.Assets.versioned("images/favicon.png")">
-
+        <style>
+          #chart {
+            width: 100%;
+            height: calc(100vh - 18px);
+          }
+        </style>
     </head>
     <body>
         @* And here's where we render the `Html` object containing
          * the page content. *@
         @content
 
       <script src="@routes.Assets.versioned("javascripts/main.js")" type="text/javascript"></script>
+      <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
     </body>
 </html>
diff --git a/public/javascripts/main.js b/public/javascripts/main.js
@@ -0,0 +1,54 @@
+const prop = (key) => (obj) => obj[key];
+const map = (f) => (arr) => arr.map(f);
+
+const remainingTimeHours = (data, now) =>
+  map((item) => (new Date(item.auctionEndTimestamp) - now) / 1000 / 3600)(data);
+
+const markerColor = (time) => (time <= 0 ? 'red' : 'blue');
+const markerSize = (minTime, maxTime, time) => {
+  const minSize = 10;
+  const maxSize = 200;
+  const endedMarkerSize = 12;
+  return time <= 0
+    ? endedMarkerSize
+    : minSize + (maxSize - minSize) * ((time - minTime) / (maxTime - minTime));
+};
+
+const createPlot = (data) => {
+  const now = new Date();
+  const hoursRemaining = remainingTimeHours(data, now);
+  const minRemainingTime = Math.min(...hoursRemaining);
+  const maxRemainingTime = Math.max(...hoursRemaining);
+
+  Plotly.newPlot(
+    'chart',
+    [
+      {
+        x: map(prop('memorabilityScore'))(data),
+        y: map(prop('minimumBidInUSD'))(data),
+        text: map(prop('number'))(data),
+        mode: 'markers',
+        marker: {
+          size: map((time) =>
+            markerSize(minRemainingTime, maxRemainingTime, time)
+          )(hoursRemaining),
+          color: map(markerColor)(hoursRemaining),
+          sizemode: 'diameter',
+        },
+        type: 'scatter',
+      },
+    ],
+    {
+      title: 'Memorability Score vs Price (Size represents time left)',
+      xaxis: { title: 'Memorability Score' },
+      yaxis: { title: 'Price (USD)', type: 'log' },
+      showlegend: false,
+      hovermode: 'closest',
+    }
+  );
+};
+
+const onWebSocketMessage = (event) => createPlot(JSON.parse(event.data));
+
+const webSocket = new WebSocket('wss://fragmenty.cloud/ws/auctions');
+webSocket.addEventListener('message', onWebSocketMessage);

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,5 @@`
`1`	`1`	`@()`
`2`	`2`
`3`		`-@main("Welcome to Play") {`
`4`		`- <h1>Welcome to Play!</h1>`
	`3`	`+@main("Memorability Score vs Price") {`
	`4`	`+ <div id="chart"></div>`
`5`	`5`	`}`