Dashboard and chart styling for homepage resdeign

apps/explorer_web/assets/css/components/_card.scss

@@ -2,4 +2,5 @@
   border-color: transparent;
   box-shadow: 0 5px 40px -5px rgba($black, 0.25);
   border-radius: 0;
+  margin-bottom: 4rem;
 }

apps/explorer_web/assets/css/components/_dashboard-banner.scss

@@ -1,30 +1,57 @@
+.dashboard-container {
+  position: relative;
+  background-color: $white;
+  box-shadow: 0 5px 40px -5px rgba($black, 0.25);
+
+  &:before {
+    content: "";
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 68px;
+    background-color: $white;
+    box-shadow: 0 0 40px -5px rgba($black, 0.25);
+  }
+
+  &:after {
+    content: "";
+    display: block;
+    position: absolute;
+    top: 3rem;
+    right: 0;
+    bottom: 0;
+    left: 70%;
+    background-color: $primary;
+  }
+}
+
 .dashboard-banner {
+  position: relative;
   display: grid;
-  grid-template-rows: 2rem auto;
-  grid-template-columns: 1fr 2fr;
+  grid-template-rows: 3rem 2fr 1fr;
+  grid-template-columns: 1fr 3fr;
   grid-template-areas:
     "chart ."
     "chart stats"
     "legend stats";
   margin-top: -1rem;
-  margin-bottom: 2rem;
-  background-color: $white;
-  box-shadow: 0 5px 40px -5px rgba($black, 0.25);
+  margin-bottom: 4rem;
+  z-index: 10;
 }
 
 .dashboard-banner-chart {
   grid-area: chart;
   // 15px padding matches the Bootstarp conatiner padding.
-  padding: 1rem 1rem 1rem 15px;
-  max-height: 100px;
-  box-shadow: -15px 0 40px -5px rgba($black, 0.25);
+  padding: 1rem 1rem 1rem 0;
 }
 
 .dashboard-banner-chart-legend {
   grid-area: legend;
   display: flex;
   // 15px padding matches the Bootstarp conatiner padding.
-  padding: 1rem 15px;
+  padding: 1rem 1rem;
 
   &-item {
     padding-left: 0.5rem;
@@ -57,7 +84,6 @@
   // 15px padding matches the Bootstarp conatiner padding.
   padding-right: 15px;
   background-color: $primary;
-  box-shadow: -5px -5px 40px -5px rgba($black, 0.25);
 
   &-item {
     padding-left: 1rem;
@@ -72,5 +98,6 @@
   &-value {
     display: block;
     font-size: 1.5rem;
+    font-weight: 200;
   }
 }

apps/explorer_web/assets/css/theme/_fonts.scss

@@ -1,2 +1,2 @@
-@import url('https://fonts.googleapis.com/css?family=Nunito');
+@import url('https://fonts.googleapis.com/css?family=Nunito:200,300,400,600,700');
 @import url('https://fonts.googleapis.com/css?family=Roboto');

apps/explorer_web/assets/js/lib/market_history_chart.js

@@ -41,7 +41,7 @@ function createMarketHistoryChart (ctx) {
         yAxisID: 'marketCap',
         data: currentMarketHistoryData.map(({ date, closingPrice }) => ({x: date, y: closingPrice * availableSupply})),
         fill: false,
-        pointRadius: 0.5,
+        pointRadius: 0,
         backgroundColor: sassVariables.secondary,
         borderColor: sassVariables.secondary,
         lineTension: 0
@@ -53,19 +53,28 @@ function createMarketHistoryChart (ctx) {
       },
       scales: {
         xAxes: [{
+          gridLines: {
+            display: false
+          },
           type: 'time',
           time: {
             unit: 'week',
             displayFormats: {
               week: 'MMM D'
             }
+          },
+          ticks: {
+            callback: (value, index, values) => value,
           }
         }],
         yAxes: [{
           id: 'price',
+          gridLines: {
+            display: false
+          },
           ticks: {
             beginAtZero: true,
-            callback: (value, index, values) => formatPrice(value),
+            callback: (value, index, values) => "",
             maxTicksLimit: 6
           }
         }, {
@@ -75,27 +84,14 @@ function createMarketHistoryChart (ctx) {
             display: false
           },
           ticks: {
-            callback: (value, index, values) => formatMarketCap(value),
+            callback: (value, index, values) => "",
             maxTicksLimit: 6,
             drawOnChartArea: false
           }
         }]
       },
       tooltips: {
-        mode: 'index',
-        intersect: false,
-        callbacks: {
-          label: ({datasetIndex, yLabel}, {datasets}) => {
-            const label = datasets[datasetIndex].label
-            if (datasets[datasetIndex].label === 'Price') {
-              return `${label}: ${formatPrice(yLabel)}`
-            } else if (datasets[datasetIndex].label === 'Market Cap') {
-              return `${label}: ${formatMarketCap(yLabel)}`
-            } else {
-              return yLabel
-            }
-          }
-        }
+        enabled: false
       }
     }
   })

apps/explorer_web/lib/explorer_web/templates/chain/_transactions.html.eex

@@ -3,68 +3,97 @@
     <%= link(gettext("View All Transactions →"), to: transaction_path(@conn, :index, Gettext.get_locale), class: "button button--secondary button--xsmall float-right") %>
     <h2 class="card-title"><%= gettext "Transactions" %></h2>
     <%= for transaction <- @chain.transactions do %>
-      <%= if transaction.created_contract_address_hash do %>
-        <div class="tile tile-type-contract-creation">
-          <div class="row">
-            <div class="col-md-2 d-flex align-items-center justify-content-center tile-label">
-              <%= gettext("Contract Creation") %>
-            </div>
-            <div class="col-md-8">
-              <%= link(transaction.hash ,
-                  to: transaction_path(ExplorerWeb.Endpoint, :show, @locale, transaction),
-                  "class": "tile-title",
-                  "data-test": "transaction_hash",
-                  "data-transaction-hash": transaction.hash) %>
-              <div>
-                <%= render ExplorerWeb.AddressView, "_link.html", locale: @locale, address: transaction.from_address %>
-                &rarr;
-                  <%= link(
-                  transaction.created_contract_address_hash,
-                    class: "tile-label",
-                    "data-address-hash": transaction.created_contract_address_hash,
-                    to: address_path(@conn, :show, @conn.assigns.locale, transaction.created_contract_address_hash),
-                    title: transaction.created_contract_address_hash
-                  ) %>
+      <%= cond do %>
+        <%= transaction.created_contract_address_hash != nil -> %>
+          <div class="tile tile-type-contract-creation">
+            <div class="row">
+              <div class="col-md-2 d-flex align-items-center justify-content-center tile-label">
+                <%= gettext("Contract Creation") %>
+              </div>
+              <div class="col-md-8">
+                <%= link(transaction.hash ,
+                    to: transaction_path(ExplorerWeb.Endpoint, :show, @locale, transaction),
+                    "class": "tile-title",
+                    "data-test": "transaction_hash",
+                    "data-transaction-hash": transaction.hash) %>
+                <div>
+                  <%= render ExplorerWeb.AddressView, "_link.html", locale: @locale, address: transaction.from_address %>
+                  &rarr;
+                    <%= link(
+                    transaction.created_contract_address_hash,
+                      class: "tile-label",
+                      "data-address-hash": transaction.created_contract_address_hash,
+                      to: address_path(@conn, :show, @conn.assigns.locale, transaction.created_contract_address_hash),
+                      title: transaction.created_contract_address_hash
+                    ) %>
+                </div>
+                <%= ExplorerWeb.TransactionView.value(transaction, include_label: false) %> POA
+              </div>
+              <div class="col-md-2 d-flex flex-column justify-content-end text-right">
+                <span data-from-now="<%= transaction.block.timestamp %>"></span>
+                <%= link(
+                  gettext("Block #") <> "#{transaction.block.number}",
+                  to: block_path(@conn, :show, @conn.assigns.locale, transaction.block)
+                ) %>
               </div>
-              <%= ExplorerWeb.TransactionView.value(transaction, include_label: false) %> POA
-            </div>
-            <div class="col-md-2 d-flex flex-column justify-content-end text-right">
-              <span data-from-now="<%= transaction.block.timestamp %>"></span>
-              <%= link(
-                gettext("Block #") <> "#{transaction.block.number}",
-                to: block_path(@conn, :show, @conn.assigns.locale, transaction.block)
-              ) %>
             </div>
           </div>
-        </div>
-      <% else %>
-        <div class="tile tile-type-transaction">
-          <div class="row">
-            <div class="col-md-2 d-flex align-items-center justify-content-center tile-label">
-              <%= gettext("Transaction") %>
-            </div>
-            <div class="col-md-8">
-              <%= link(transaction.hash ,
-                  to: transaction_path(ExplorerWeb.Endpoint, :show, @locale, transaction),
-                  "class": "tile-title",
-                  "data-test": "transaction_hash",
-                  "data-transaction-hash": transaction.hash) %>
-              <div>
-                <%= render ExplorerWeb.AddressView, "_link.html", locale: @locale, address: transaction.from_address %>
-                &rarr;
-                <%= render ExplorerWeb.AddressView, "_link.html", locale: @locale, address: transaction.to_address %>
+        <% contract?(transaction.from_address) || contract?(transaction.to_address) -> %>
+          <div class="tile tile-type-transaction">
+            <div class="row">
+              <div class="col-md-2 d-flex align-items-center justify-content-center tile-label">
+                <%= gettext("Transaction") %>
+              </div>
+              <div class="col-md-8">
+                <%= link(transaction.hash ,
+                    to: transaction_path(ExplorerWeb.Endpoint, :show, @locale, transaction),
+                    "class": "tile-title",
+                    "data-test": "transaction_hash",
+                    "data-transaction-hash": transaction.hash) %>
+                <div>
+                  <%= render ExplorerWeb.AddressView, "_link.html", locale: @locale, address: transaction.from_address %>
+                  &rarr;
+                  <%= render ExplorerWeb.AddressView, "_link.html", locale: @locale, address: transaction.to_address %>
+                </div>
+                <%= ExplorerWeb.TransactionView.value(transaction, include_label: false) %> POA
+              </div>
+              <div class="col-md-2 d-flex flex-column justify-content-end text-right">
+                <span data-from-now="<%= transaction.block.timestamp %>"></span>
+                <%= link(
+                  gettext("Block #") <> "#{transaction.block.number}",
+                  to: block_path(@conn, :show, @conn.assigns.locale, transaction.block)
+                ) %>
               </div>
-              <%= ExplorerWeb.TransactionView.value(transaction, include_label: false) %> POA
-            </div>
-            <div class="col-md-2 d-flex flex-column justify-content-end text-right">
-              <span data-from-now="<%= transaction.block.timestamp %>"></span>
-              <%= link(
-                gettext("Block #") <> "#{transaction.block.number}",
-                to: block_path(@conn, :show, @conn.assigns.locale, transaction.block)
-              ) %>
             </div>
           </div>
-        </div>
+          <% true -> %>
+            <div class="tile tile-type-transaction">
+              <div class="row">
+                <div class="col-md-2 d-flex align-items-center justify-content-center tile-label">
+                  <%= gettext("Transaction") %>
+                </div>
+                <div class="col-md-8">
+                  <%= link(transaction.hash ,
+                      to: transaction_path(ExplorerWeb.Endpoint, :show, @locale, transaction),
+                      "class": "tile-title",
+                      "data-test": "transaction_hash",
+                      "data-transaction-hash": transaction.hash) %>
+                  <div>
+                    <%= render ExplorerWeb.AddressView, "_link.html", locale: @locale, address: transaction.from_address %>
+                    &rarr;
+                    <%= render ExplorerWeb.AddressView, "_link.html", locale: @locale, address: transaction.to_address %>
+                  </div>
+                  <%= ExplorerWeb.TransactionView.value(transaction, include_label: false) %> POA
+                </div>
+                <div class="col-md-2 d-flex flex-column justify-content-end text-right">
+                  <span data-from-now="<%= transaction.block.timestamp %>"></span>
+                  <%= link(
+                    gettext("Block #") <> "#{transaction.block.number}",
+                    to: block_path(@conn, :show, @conn.assigns.locale, transaction.block)
+                  ) %>
+                </div>
+              </div>
+            </div>
       <% end %>
     <% end %>
   </div>

apps/explorer_web/lib/explorer_web/templates/chain/show.html.eex

@@ -1,108 +1,57 @@
-<div class="dashboard-banner">
-  <div class="dashboard-banner-chart">
-    <canvas data-chart="marketHistoryChart" data-current_exchange_rate ='<%= @exchange_rate.usd_value %>' data-available_supply='<%= @exchange_rate.available_supply %>' data-market_history_data='<%=raw encode_market_history_data(@market_history_data) %>' width="400" height="80"></canvas>
-  </div>
-  <div class="dashboard-banner-chart-legend">
-    <div class="dashboard-banner-chart-legend-item">
-      <span class="dashboard-banner-chart-legend-label">
-        Price
-      </span>
-      <span class="dashboard-banner-chart-legend-value">
-        $0.0498 USD
-      </span>
-    </div>
-    <div class="dashboard-banner-chart-legend-item">
-      <span class="dashboard-banner-chart-legend-label">
-        Market cap
-      </span>
-      <span class="dashboard-banner-chart-legend-value">
-        $100,350,800 USD
-      </span>
-    </div>
-  </div>
-  <div class="dashboard-banner-network-stats">
-    <div class="dashboard-banner-network-stats-item">
-      <span class="dashboard-banner-network-stats-label">
-        Block time
-      </span>
-      <span class="dashboard-banner-network-stats-value">
-        69.2105s
-      </span>
-    </div>
-    <div class="dashboard-banner-network-stats-item">
-      <span class="dashboard-banner-network-stats-label">
-        Total transactions
-      </span>
-      <span class="dashboard-banner-network-stats-value">
-        12,106,123
-      </span>
-    </div>
-    <div class="dashboard-banner-network-stats-item">
-      <span class="dashboard-banner-network-stats-label">
-        Wallet addresses
-      </span>
-      <span class="dashboard-banner-network-stats-value">
-        1,400,500
-      </span>
-    </div>
-  </div>
-</div>
-
-<section class="container-fluid">
-  <%= render ExplorerWeb.ChainView, "_blocks.html", assigns %>
-  <%= render ExplorerWeb.ChainView, "_transactions.html", assigns %>
-
-  <div class="d-flex flex-md-row flex-column">
-    <div class="container__stats card mr-sm-4 mb-4 mb-sm-0">
-      <div class="card-body d-flex flex-md-column justify-content-around">
-        <div class="d-flex flex-column justify-content-center align-items-center">
-          <%= render ExplorerWeb.IconsView, "_block_icon.html", assigns %>
-          <div><%= gettext("Block") %></div>
-          <div> #<%= @chain.number %></div>
+<div class="dashboard-container">
+  <div class="container">
+    <div class="dashboard-banner">
+      <div class="dashboard-banner-chart">
+        <canvas data-chart="marketHistoryChart" data-current_exchange_rate ='<%= @exchange_rate.usd_value %>' data-available_supply='<%= @exchange_rate.available_supply %>' data-market_history_data='<%=raw encode_market_history_data(@market_history_data) %>' width="350" height="152"></canvas>
+      </div>
+      <div class="dashboard-banner-chart-legend">
+        <div class="dashboard-banner-chart-legend-item">
+          <span class="dashboard-banner-chart-legend-label">
+            Price
+          </span>
+          <span class="dashboard-banner-chart-legend-value">
+            $0.0498 USD
+          </span>
         </div>
-        <div class="d-flex flex-column justify-content-center align-items-center">
-          <%= render ExplorerWeb.IconsView, "_hourglass_icon.html", assigns %>
-          <div> <%= gettext("Last Block") %></div>
-          <div data-from-now="<%= @chain.timestamp %>"></div>
+        <div class="dashboard-banner-chart-legend-item">
+          <span class="dashboard-banner-chart-legend-label">
+            Market cap
+          </span>
+          <span class="dashboard-banner-chart-legend-value">
+            $100,350,800 USD
+          </span>
         </div>
-        <div class="d-flex flex-column justify-content-center align-items-center">
-          <div class="stroke"> <%= render ExplorerWeb.IconsView, "_guage_icon.html", assigns %> </div>
-          <div><%= gettext("Avg Block Time") %></div>
-          <%= @chain.average_time |> Timex.format_duration(:humanized) %>
+      </div>
+      <div class="dashboard-banner-network-stats">
+        <div class="dashboard-banner-network-stats-item">
+          <span class="dashboard-banner-network-stats-label">
+            Block time
+          </span>
+          <span class="dashboard-banner-network-stats-value">
+            69.2105s
+          </span>
         </div>
-        <div class="d-flex flex-column justify-content-center align-items-center">
-          <%= render ExplorerWeb.IconsView, "_transaction_icon.html", assigns %>
-          <div> <%= gettext("TPM") %></div>
-          <div> <%= @chain.transaction_velocity |> Cldr.Number.to_string! %></div>
+        <div class="dashboard-banner-network-stats-item">
+          <span class="dashboard-banner-network-stats-label">
+            Total transactions
+          </span>
+          <span class="dashboard-banner-network-stats-value">
+            12,106,123
+          </span>
         </div>
-      </div>
-    </div>
-
-    <div class="container__graph card">
-      <div class="card-body">
-
-        <div class="d-flex justify-content-sm-around mt-2 text-muted">
-          <div>
-            <div class="graph__squares graph__squares--price"></div>
-            <%= gettext "Price" %> </br>
-            <%= format_exchange_rate(@exchange_rate) %>
-          </div>
-          <div class="mx-2">
-            <div class="graph__squares graph__squares--mcap"></div>
-            <%= gettext "Market Cap" %> </br>
-            <%= format_market_cap(@exchange_rate) %>
-          </div>
-          <div>
-            <%= gettext "24h Volume" %> </br>
-            <%= format_volume_24h(@exchange_rate) %>
-          </div>
+        <div class="dashboard-banner-network-stats-item">
+          <span class="dashboard-banner-network-stats-label">
+            Wallet addresses
+          </span>
+          <span class="dashboard-banner-network-stats-value">
+            1,400,500
+          </span>
         </div>
       </div>
     </div>
   </div>
-
-  <div class="row my-4">
-
-
-  </div>
+</div>
+<section class="container">
+  <%= render ExplorerWeb.ChainView, "_blocks.html", assigns %>
+  <%= render ExplorerWeb.ChainView, "_transactions.html", assigns %>
 </section>