Add data table + version update

samgozman · May 18, 2021 · cbf0865 · cbf0865
1 parent 4ddcebf
commit cbf0865
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 10 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "tightshorts",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "Tight Shorts - Finra short sale volume",
   "scripts": {
     "build": "parcel build web/main.html web/static/liveChart.html",

diff --git a/web/css/styles.css b/web/css/styles.css
@@ -13,7 +13,7 @@
     margin: -4px 0px;
 }
 
-a.navbar-item.is-active, 
+a.navbar-item.is-active,
 a.navbar-item.is-active:not(:focus):not(:hover) {
     background-color: #fafafa;
 }
@@ -43,6 +43,12 @@ a.navbar-item.is-active:not(:focus):not(:hover) {
     overflow: hidden;
 }
 
+/* Table */
+.table-container {
+    max-height: 360px;
+    overflow-y: auto;
+}
+
 /* Octocat */
 .octocat {
     border: 0;
@@ -65,4 +71,11 @@ a.navbar-item.is-active:not(:focus):not(:hover) {
 
 .qrcode {
     max-width: 140px;
+}
+
+/* Responsive fixes */
+@media (max-width: 410px) {
+    .table>tbody {
+        font-size: 0.7em;
+    }
 }
diff --git a/web/js/chart.mjs b/web/js/chart.mjs
@@ -5,13 +5,24 @@ import resizeDetector from 'element-resize-detector'
 import Legend from './Legend.mjs'
 import color from './color.mjs'
 
+// Gen table
+const table_tbody = document.getElementById('table-body')
+
+const createTableRow = (table, data, sv, sev, vol) => {
+	let row = table.insertRow()
+	row.insertCell(0).innerHTML = data.replace(/T(.*)/g, '')
+	row.insertCell(1).innerHTML = sv
+	row.insertCell(2).innerHTML = sev
+	row.insertCell(3).innerHTML = vol
+}
+
 // Define chart properties
 const chartPercent = createChart(document.getElementById('chartPercent'), {
 	width: 800,
 	height: 360,
 	localization: {
-        locale: 'en-US',
-    },
+		locale: 'en-US',
+	},
 	rightPriceScale: {
 		scaleMargins: {
 			top: 0.1,
@@ -45,8 +56,8 @@ const chartVolume = createChart(document.getElementById('chartVolume'), {
 	width: 800,
 	height: 360,
 	localization: {
-        locale: 'en-US',
-    },
+		locale: 'en-US',
+	},
 	rightPriceScale: {
 		scaleMargins: {
 			top: 0.1,
@@ -198,7 +209,6 @@ document.getElementById('search').addEventListener('submit', async (e) => {
 	// Fetch data
 	const ticker = document.getElementById('input_ticker').value.toUpperCase()
 	try {
-		// const _csrf = document.getElementById('_csrf').value
 		const response = await getResponse(ticker)
 
 		const data_shortVolumeRatio = []
@@ -208,6 +218,9 @@ document.getElementById('search').addEventListener('submit', async (e) => {
 		const data_shortVolume = []
 		const data_shortExemptVolume = []
 
+		// Clear table
+		table_tbody.innerHTML = ''
+
 		// Prepare data
 		for (const el of response.volume) {
 			data_shortVolumeRatio.push({
@@ -258,6 +271,13 @@ document.getElementById('search').addEventListener('submit', async (e) => {
 			},
 		})
 
+		// Generate table
+		let reversed_array = response.volume
+		reversed_array.reverse()
+		for (const [i, el] of reversed_array.entries()) {
+			if (i < 30) createTableRow(table_tbody, el.date, el.shortVolume, el.shortExemptVolume, el.totalVolume)
+		}
+
 		// Load tragingview live chart
 		document.getElementById('iframe_chart').src = 'static/liveChart.html?stock=' + ticker
 	} catch (error) {

diff --git a/web/main.html b/web/main.html
@@ -186,7 +186,23 @@ <h1 class="title is-3"> Tight Shorts <sup class="is-size-7">
                     </div>
                 </div>
                 <div class="column is-half is-full-mobile">
-                    <p>Placeholder for table</p>
+                    <!-- Table -->
+                    <div class="table-container">
+                        <table class="table is-hoverable is-fullwidth">
+                            <thead>
+                                <tr>
+                                    <th>Date</th>
+                                    <th><abbr title="Short Volume">SV</abbr></th>
+                                    <th><abbr title="Short Exempt Volume">SEV</abbr></th>
+                                    <th><abbr title="Total volume">Vol</abbr></th>
+                                </tr>
+                            </thead>
+                            <tbody id="table-body">
+                                <!-- Table: elements -->
+                            </tbody>
+                        </table>
+                    </div>
+                    <!-- Table: ends -->
                 </div>
             </div>
             <p><strong>Disclaimer:</strong> The data on the chart is limited to the combined trading volume on the