#1 - Adding timeline control

OpenStudiosCo · Aug 3, 2024 · b697fd7 · b697fd7
1 parent 127d69a
commit b697fd7
Show file tree

Hide file tree

Showing 5 changed files with 73 additions and 22 deletions.
diff --git a/src/app.js b/src/app.js
@@ -6,15 +6,17 @@ import { voronoiTreemap } from "d3-voronoi-treemap";
 import { processCSV } from './app/data';
 import './app/helpers';
 import { updateGraphs } from './app/graph';
+import { handleTimelineButtonClick } from './app/timeline';
 
 // Functions used by UI and the app.
 window.updateGraphs = updateGraphs;
+window.handleTimelineButtonClick = handleTimelineButtonClick;
 
 // Variables used across the graphing app.
 window.dataTable = {};
 window.weekNumbers = [];
 
 // Grab the data file
-d3.csv( "sample-gpt-v2.csv" ).then( function(rootData) {
+d3.csv( "sample-gpt-v2.csv" ).then( function ( rootData ) {
     processCSV( rootData );
 } );
diff --git a/src/app/graph.js b/src/app/graph.js
@@ -75,56 +75,56 @@ export function updateGraphs() {
             currency.balance = 0.0;
             currency.children = [];
 
-            tempRoot.children.push(currency);
+            tempRoot.children.push( currency );
             displayedCurrencies[ transaction.currency ] = currency;
         }
 
         displayedCurrencies[ transaction.currency ].balance += parseFloat( transaction.amount );
         displayedCurrencies[ transaction.currency ].children.push( transaction );
 
-        let tableRow = document.createElement('tr');
-        let fieldId = document.createElement('td');
+        let tableRow = document.createElement( 'tr' );
+        let fieldId = document.createElement( 'td' );
         fieldId.innerHTML = transaction.id;
         tableRow.append( fieldId );
 
-        let fieldType = document.createElement('td');
+        let fieldType = document.createElement( 'td' );
         fieldType.innerHTML = transaction.type;
         tableRow.append( fieldType );
 
-        let fieldTimestamp = document.createElement('td');
+        let fieldTimestamp = document.createElement( 'td' );
         fieldTimestamp.innerHTML = transaction.timestamp;
         tableRow.append( fieldTimestamp );
-        
-        let fieldCreated = document.createElement('td');
+
+        let fieldCreated = document.createElement( 'td' );
         fieldCreated.innerHTML = transaction.created;
         tableRow.append( fieldCreated );
 
-        let fieldFrom = document.createElement('td');
+        let fieldFrom = document.createElement( 'td' );
         fieldFrom.innerHTML = transaction.from;
         tableRow.append( fieldFrom );
 
-        let fieldTo = document.createElement('td');
+        let fieldTo = document.createElement( 'td' );
         fieldTo.innerHTML = transaction.to;
         tableRow.append( fieldTo );
 
-        let fieldAmount = document.createElement('td');
+        let fieldAmount = document.createElement( 'td' );
         fieldAmount.innerHTML = transaction.amount;
         tableRow.append( fieldAmount );
 
-        let fieldCurrency = document.createElement('td');
+        let fieldCurrency = document.createElement( 'td' );
         fieldCurrency.innerHTML = transaction.currency;
         tableRow.append( fieldCurrency );
 
-        let fieldPrice = document.createElement('td');
+        let fieldPrice = document.createElement( 'td' );
         fieldPrice.innerHTML = transaction.price;
         tableRow.append( fieldPrice );
 
-        transactionTable.append(tableRow);
+        transactionTable.append( tableRow );
 
     } );
 
     for ( currency in displayedCurrencies ) {
-        currencies.push( displayedCurrencies[currency] );
+        currencies.push( displayedCurrencies[ currency ] );
     }
 
     // drawLegends
@@ -171,7 +171,7 @@ export function updateGraphs() {
 }
 
 function clearGraphs() {
-    d3.selectAll("svg#graph > *").remove();
+    d3.selectAll( "svg#graph > *" ).remove();
 }
 
 function drawTreemap( hierarchy, tempRoot ) {

diff --git a/src/app/timeline.js b/src/app/timeline.js
@@ -0,0 +1,41 @@
+let timer;
+
+function pauseTimeline() {
+    clearInterval(timer);
+    timer = false;
+}
+
+function playTimeline() {
+    timer = setInterval( function () {
+        const timeline = document.querySelector( '#timeline' );
+
+        if ( timeline.value < timeline.max ) {
+            timeline.value++;
+        }
+        else {
+            timeline.value = timeline.min;
+        }
+
+        // Create a new 'change' event
+        var event = new Event('change');
+
+        // Dispatch it.
+        timeline.dispatchEvent(event);
+
+    }, 1000 );
+}
+
+export function handleTimelineButtonClick() {
+    const button = document.querySelector( '#timeline_control' );
+
+    button.classList.toggle( 'playing' );
+    button.classList.toggle( 'paused' );
+
+    if ( button.classList.contains( 'playing' ) ) {
+        playTimeline();
+    }
+    else {
+        pauseTimeline();
+    }
+
+}
diff --git a/src/pages/index.pug b/src/pages/index.pug
@@ -11,13 +11,13 @@ html
     body
         .wrapper
             h1 Ethereum Graph Proof of Concept
-            button(title="Play")
-                <svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M73 39c-14.8-9.1-33.4-9.4-48.5-.9S0 62.6 0 80L0 432c0 17.4 9.4 33.4 24.5 41.9s33.7 8.1 48.5-.9L361 297c14.3-8.7 23-24.2 23-41s-8.7-32.2-23-41L73 39z"/></svg>
-                <svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M48 64C21.5 64 0 85.5 0 112L0 400c0 26.5 21.5 48 48 48l32 0c26.5 0 48-21.5 48-48l0-288c0-26.5-21.5-48-48-48L48 64zm192 0c-26.5 0-48 21.5-48 48l0 288c0 26.5 21.5 48 48 48l32 0c26.5 0 48-21.5 48-48l0-288c0-26.5-21.5-48-48-48l-32 0z"/></svg>
+            button(id='timeline_control' class='paused' title='Play' onclick='handleTimelineButtonClick();')
+                <svg class='icon-play' width='16' height='16' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d='M73 39c-14.8-9.1-33.4-9.4-48.5-.9S0 62.6 0 80L0 432c0 17.4 9.4 33.4 24.5 41.9s33.7 8.1 48.5-.9L361 297c14.3-8.7 23-24.2 23-41s-8.7-32.2-23-41L73 39z'/></svg>
+                <svg class='icon-pause' width='16' height='16' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d='M48 64C21.5 64 0 85.5 0 112L0 400c0 26.5 21.5 48 48 48l32 0c26.5 0 48-21.5 48-48l0-288c0-26.5-21.5-48-48-48L48 64zm192 0c-26.5 0-48 21.5-48 48l0 288c0 26.5 21.5 48 48 48l32 0c26.5 0 48-21.5 48-48l0-288c0-26.5-21.5-48-48-48l-32 0z'/></svg>
 
-            h2(for="timeline") Week # 
+            h2(for='timeline') Week # 
             div
-                input(type="range" id="timeline" name="timeline" list="weeks" onchange="updateGraphs();")
+                input(type='range' id='timeline' name='timeline' list='weeks' onchange='updateGraphs();')
                 datalist#weeks
             div
                 svg#graph

diff --git a/src/styles.styl b/src/styles.styl
@@ -120,4 +120,12 @@ table#transactions {
   text-align: left;
   background-color: #212121;
   color: white;
-}
+}
+
+button#timeline_control
+    &.paused
+        .icon-pause
+            display: none;
+    &.playing
+        .icon-play
+            display: none;