From fa6ac51e85cf2aed4b694006ae5180cb8e339ef0 Mon Sep 17 00:00:00 2001
From: lxieyang <lxieyang@umich.edu>
Date: Wed, 22 Apr 2020 15:08:52 -0400
Subject: [PATCH] graph container styling

---
 src/App.svelte   |  6 +++---
 src/Graph.svelte | 27 ++++++++++++++++++---------
 2 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/src/App.svelte b/src/App.svelte
index d9dedc2d4..d60c57a83 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -306,12 +306,12 @@
     z-index: 1001;
     bottom: 10px;
     right: 10px;
-    max-width: 400px;
+    /* max-width: 400px;
     max-height: 400px;
-    width: 400px;
+    width: 400px; */
     background-color: rgba(255, 255, 255, 0.9);
     /* border-radius: 1rem; */
-    padding: 6px 13px 0;
+    padding: 6px 5px;
     box-sizing: border-box;
 
     transition: opacity 0.3s ease-in-out;
diff --git a/src/Graph.svelte b/src/Graph.svelte
index cace7b3e9..59cf23b0b 100644
--- a/src/Graph.svelte
+++ b/src/Graph.svelte
@@ -510,7 +510,7 @@
         .attr('cy', d => y(+d.value))
         .style('stroke-width', 3)
         .style('fill', d => {
-          console.log(d.time_value);
+          // console.log(d.time_value);
           if (d.time_value === $currentDate) return 'white';
           if (d.inDirection && $signalType === 'direction') return 'black';
           return DIRECTION_THEME.gradientMiddle;
@@ -573,6 +573,12 @@
 </script>
 
 <style>
+  .graph {
+    padding: 0px 6px;
+    max-height: 380px;
+    width: 374px;
+  }
+
   .graph-title {
     text-align: center;
     font-size: 14px;
@@ -581,20 +587,23 @@
     font-family: 'Open Sans', sans-serif;
     color: var(--darkgrey);
   }
+
   .graph-description {
     text-align: center;
-    margin: 5px 0px 7px 0px !important;
+    margin: 3px 0px 3px 0px !important;
     font-size: 14px;
     padding: 0px !important;
   }
 </style>
 
-<h5 bind:this={t} class="graph-title" />
-<p class="graph-description">
-  {$currentRegionName} {$currentRegionName && $currentLevel === 'county' ? 'County' : ''}
-  {$currentLevel === 'msa' ? 'Metro Area' : ''}
-</p>
+<div class="graph">
+  <h5 bind:this={t} class="graph-title" />
+  <p class="graph-description">
+    {$currentRegionName} {$currentRegionName && $currentLevel === 'county' ? 'County' : ''}
+    {$currentLevel === 'msa' ? 'Metro Area' : ''}
+  </p>
 
-<div bind:clientWidth={w}>
-  <div bind:this={el} />
+  <div bind:clientWidth={w}>
+    <div bind:this={el} />
+  </div>
 </div>