move table components to row 1 if showing less than 1 day of data

usefathom · Oct 10, 2018 · fc5bd47 · fc5bd47
1 parent f92d04a
commit fc5bd47
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 2 deletions.
diff --git a/assets/src/js/components/Chart.js b/assets/src/js/components/Chart.js
@@ -136,6 +136,8 @@ class Chart extends Component {
   @bind
   redrawChart() {
     let data = this.state.data;
+
+    // hide chart & bail if we're trying to show less than 1 day worth of data
     this.base.parentNode.style.display = data.length <= 1 ? 'none' : '';
     if(data.length <= 1) {
       return;

diff --git a/assets/src/js/pages/dashboard.js b/assets/src/js/pages/dashboard.js
@@ -12,6 +12,7 @@ import Table from '../components/Table.js';
 import Chart from '../components/Chart.js';
 import { bind } from 'decko';
 import Client from '../lib/client.js';
+import classNames from 'classnames';
 
 const defaultSite = { 
   id: window.localStorage.getItem('site_id') || 1, 
@@ -146,7 +147,7 @@ class Dashboard extends Component {
 
     return (
   <div class="app-page ">
-     <div class={"rapper animated fadeInUp delayed_02s " + state.period }>
+     <div class={`rapper animated fadeInUp delayed_02s ${state.period} ` + classNames({ ltday: state.before - state.after < 86400 })}>
 
       <header class="section">
         <nav class="main-nav">

diff --git a/assets/src/sass/styles.scss b/assets/src/sass/styles.scss
@@ -129,7 +129,8 @@ body { font: 400 16px "overpass", sans-serif; color: #222; text-align: center; p
     .box-pages { grid-column: 2; grid-row: 2 ; }
     .box-referrers { grid-column: 3; grid-row: 2; }
 
-    .today .box-pages, .today .box-referrers{ grid-row: 1; }
+    /* since we hide chart for views with less than a day worth of data, move tables to row 1 */
+    .ltday .box-pages, .ltday .box-referrers{ grid-row: 1; }
 
     .half { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 12px; align-items: center; }
     .half div { text-align: right; }