some styling

.idea/workspace.xml

@@ -3,8 +3,7 @@
   <component name="ChangeListManager">
     <list default="true" id="17e0a915-606d-4826-92ae-ad6ec8d45623" name="Default" comment="">
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/VueApp/src/auth/AuthService.js" beforeDir="false" afterPath="$PROJECT_DIR$/VueApp/src/auth/AuthService.js" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/VueApp/src/components/Main.vue" beforeDir="false" afterPath="$PROJECT_DIR$/VueApp/src/components/Main.vue" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/VueApp/src/components/ElevationGraph.vue" beforeDir="false" afterPath="$PROJECT_DIR$/VueApp/src/components/ElevationGraph.vue" afterDir="false" />
     </list>
     <option name="EXCLUDED_CONVERTED_TO_IGNORED" value="true" />
     <option name="TRACKING_ENABLED" value="true" />
@@ -15,11 +14,11 @@
   </component>
   <component name="FileEditorManager">
     <leaf SIDE_TABS_SIZE_LIMIT_KEY="300">
-      <file leaf-file-name="AuthService.js" pinned="false" current-in-tab="false">
-        <entry file="file://$PROJECT_DIR$/VueApp/src/auth/AuthService.js">
+      <file leaf-file-name="App.vue" pinned="false" current-in-tab="false">
+        <entry file="file://$PROJECT_DIR$/VueApp/src/App.vue">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="673">
-              <caret line="51" column="3" lean-forward="true" selection-start-line="43" selection-start-column="2" selection-end-line="51" selection-end-column="3" />
+            <state relative-caret-position="30">
+              <caret line="2" column="37" selection-start-line="2" selection-start-column="37" selection-end-line="2" selection-end-column="37" />
             </state>
           </provider>
         </entry>
@@ -27,24 +26,52 @@
       <file leaf-file-name="Home.vue" pinned="false" current-in-tab="false">
         <entry file="file://$PROJECT_DIR$/VueApp/src/components/Home.vue">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="255">
-              <caret line="17" column="36" selection-start-line="17" selection-start-column="36" selection-end-line="17" selection-end-column="36" />
+            <state relative-caret-position="15">
+              <caret line="1" column="25" selection-start-line="1" selection-start-column="25" selection-end-line="1" selection-end-column="25" />
             </state>
           </provider>
         </entry>
       </file>
-      <file leaf-file-name="Main.vue" pinned="false" current-in-tab="true">
+      <file leaf-file-name="AuthService.js" pinned="false" current-in-tab="false">
+        <entry file="file://$PROJECT_DIR$/VueApp/src/auth/AuthService.js">
+          <provider selected="true" editor-type-id="text-editor">
+            <state relative-caret-position="765">
+              <caret line="51" column="3" selection-start-line="43" selection-start-column="2" selection-end-line="51" selection-end-column="3" />
+            </state>
+          </provider>
+        </entry>
+      </file>
+      <file leaf-file-name="GoogleMap.vue" pinned="false" current-in-tab="false">
+        <entry file="file://$PROJECT_DIR$/VueApp/src/components/GoogleMap.vue">
+          <provider selected="true" editor-type-id="text-editor">
+            <state relative-caret-position="245">
+              <caret line="32" column="31" selection-start-line="32" selection-start-column="31" selection-end-line="32" selection-end-column="31" />
+              <folding>
+                <element signature="n#style#0;n#gmap-map#0;n#div#0;n#template#0;n#!!top" expanded="true" />
+              </folding>
+            </state>
+          </provider>
+        </entry>
+      </file>
+      <file leaf-file-name="Main.vue" pinned="false" current-in-tab="false">
         <entry file="file://$PROJECT_DIR$/VueApp/src/components/Main.vue">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="150">
-              <caret line="10" column="7" selection-start-line="10" selection-start-column="7" selection-end-line="10" selection-end-column="7" />
+            <state relative-caret-position="525">
+              <caret line="35" column="9" lean-forward="true" selection-start-line="35" selection-start-column="9" selection-end-line="35" selection-end-column="9" />
+              <folding>
+                <element signature="e#337#376#0" expanded="true" />
+              </folding>
             </state>
           </provider>
         </entry>
       </file>
-      <file leaf-file-name="auth0-variables.js" pinned="false" current-in-tab="false">
-        <entry file="file://$PROJECT_DIR$/VueApp/src/auth/auth0-variables.js">
-          <provider selected="true" editor-type-id="text-editor" />
+      <file leaf-file-name="ElevationGraph.vue" pinned="false" current-in-tab="true">
+        <entry file="file://$PROJECT_DIR$/VueApp/src/components/ElevationGraph.vue">
+          <provider selected="true" editor-type-id="text-editor">
+            <state relative-caret-position="429">
+              <caret line="155" column="19" lean-forward="true" selection-start-line="155" selection-start-column="19" selection-end-line="155" selection-end-column="19" />
+            </state>
+          </provider>
         </entry>
       </file>
     </leaf>
@@ -81,9 +108,9 @@
         <option value="$PROJECT_DIR$/VueApp/src/components/Home.vue" />
         <option value="$PROJECT_DIR$/VueApp/src/App.vue" />
         <option value="$PROJECT_DIR$/VueApp/src/components/GoogleMap.vue" />
-        <option value="$PROJECT_DIR$/VueApp/src/components/ElevationGraph.vue" />
         <option value="$PROJECT_DIR$/VueApp/src/auth/AuthService.js" />
         <option value="$PROJECT_DIR$/VueApp/src/components/Main.vue" />
+        <option value="$PROJECT_DIR$/VueApp/src/components/ElevationGraph.vue" />
       </list>
     </option>
   </component>
@@ -101,8 +128,9 @@
       <path value="$PROJECT_DIR$/VueApp/package.json" />
     </packageJsonPaths>
   </component>
-  <component name="ProjectFrameBounds">
-    <option name="y" value="23" />
+  <component name="ProjectFrameBounds" fullScreen="true">
+    <option name="x" value="282" />
+    <option name="y" value="-709" />
     <option name="width" value="1280" />
     <option name="height" value="709" />
   </component>
@@ -111,7 +139,6 @@
       <foldersAlwaysOnTop value="true" />
     </navigator>
     <panes>
-      <pane id="PackagesPane" />
       <pane id="ProjectPane">
         <subPane>
           <expand>
@@ -144,12 +171,19 @@
               <item name="src" type="462c0819:PsiDirectoryNode" />
               <item name="components" type="462c0819:PsiDirectoryNode" />
             </path>
+            <path>
+              <item name="Potential-Energy" type="b2602c69:ProjectViewProjectNode" />
+              <item name="Potential-Energy" type="462c0819:PsiDirectoryNode" />
+              <item name="VueApp" type="462c0819:PsiDirectoryNode" />
+              <item name="static" type="462c0819:PsiDirectoryNode" />
+            </path>
           </expand>
           <select />
         </subPane>
       </pane>
-      <pane id="Scope" />
       <pane id="AndroidView" />
+      <pane id="Scope" />
+      <pane id="PackagesPane" />
     </panes>
   </component>
   <component name="PropertiesComponent">
@@ -243,10 +277,10 @@
     <servers />
   </component>
   <component name="TimeTrackingManager">
-    <option name="totallyTimeSpent" value="65793000" />
+    <option name="totallyTimeSpent" value="74204000" />
   </component>
   <component name="ToolWindowManager">
-    <frame x="0" y="23" width="1280" height="709" extended-state="0" />
+    <frame x="-358" y="-1080" width="1920" height="1080" extended-state="0" />
     <editor active="true" />
     <layout>
       <window_info anchor="right" id="Palette" order="3" />
@@ -259,10 +293,10 @@
       <window_info anchor="bottom" id="Database Changes" order="7" show_stripe_button="false" />
       <window_info anchor="bottom" id="Version Control" order="7" />
       <window_info anchor="bottom" id="Run" order="2" />
-      <window_info active="true" anchor="bottom" id="Terminal" order="7" visible="true" weight="0.39052287" />
+      <window_info active="true" anchor="bottom" id="Terminal" order="7" visible="true" weight="0.19800995" />
       <window_info id="Capture Tool" order="2" />
       <window_info id="Designer" order="2" />
-      <window_info content_ui="combo" id="Project" order="0" visible="true" weight="0.30129242" />
+      <window_info content_ui="combo" id="Project" order="0" weight="0.20500532" />
       <window_info anchor="bottom" id="Docker" order="8" show_stripe_button="false" />
       <window_info anchor="right" id="Database" order="3" />
       <window_info id="Learn" order="2" />
@@ -272,12 +306,35 @@
       <window_info anchor="right" id="Theme Preview" order="3" />
       <window_info id="Favorites" order="2" side_tool="true" />
       <window_info anchor="bottom" id="Debug" order="3" weight="0.4" />
+      <window_info anchor="right" id="Palette" order="3" />
+      <window_info anchor="right" id="Theme Preview" order="3" />
+      <window_info id="Designer" order="2" />
       <window_info anchor="right" content_ui="combo" id="Hierarchy" order="2" weight="0.25" />
+      <window_info anchor="right" id="Capture Analysis" order="3" />
+      <window_info anchor="bottom" id="Docker" order="8" show_stripe_button="false" />
       <window_info anchor="bottom" id="Inspection" order="5" weight="0.4" />
+      <window_info anchor="right" id="Ant Build" order="1" weight="0.25" />
+      <window_info content_ui="combo" id="Project" order="0" visible="true" weight="0.30129242" />
+      <window_info id="Learn" order="2" />
       <window_info anchor="right" id="Commander" internal_type="SLIDING" order="0" type="SLIDING" weight="0.4" />
+      <window_info anchor="bottom" id="TODO" order="6" />
+      <window_info anchor="bottom" id="Database Changes" order="7" show_stripe_button="false" />
+      <window_info anchor="bottom" id="Version Control" order="7" />
+      <window_info anchor="bottom" id="Run" order="2" />
+      <window_info id="Image Layers" order="2" />
+      <window_info id="Capture Tool" order="2" />
+      <window_info id="UI Designer" order="2" />
+      <window_info anchor="bottom" id="Debug" order="3" weight="0.4" />
+      <window_info id="Structure" order="1" side_tool="true" weight="0.25" />
+      <window_info anchor="right" id="Database" order="3" />
+      <window_info anchor="right" id="Palette&#9;" order="3" />
       <window_info anchor="bottom" id="Message" order="0" />
+      <window_info anchor="bottom" id="Event Log" order="7" side_tool="true" />
       <window_info anchor="bottom" id="Cvs" order="4" weight="0.25" />
       <window_info anchor="bottom" id="Find" order="1" />
+      <window_info active="true" anchor="bottom" id="Terminal" order="7" visible="true" weight="0.39052287" />
+      <window_info anchor="right" id="Maven Projects" order="3" />
+      <window_info id="Favorites" order="2" side_tool="true" />
     </layout>
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -544,8 +601,8 @@
     </entry>
     <entry file="file://$PROJECT_DIR$/VueApp/src/components/GoogleMap.vue">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="210">
-          <caret line="14" column="16" selection-start-line="14" selection-start-column="16" selection-end-line="14" selection-end-column="16" />
+        <state relative-caret-position="245">
+          <caret line="32" column="31" selection-start-line="32" selection-start-column="31" selection-end-line="32" selection-end-column="31" />
           <folding>
             <element signature="n#style#0;n#gmap-map#0;n#div#0;n#template#0;n#!!top" expanded="true" />
           </folding>
@@ -554,15 +611,15 @@
     </entry>
     <entry file="file://$PROJECT_DIR$/VueApp/src/App.vue">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="385">
-          <caret line="63" column="29" selection-start-line="63" selection-start-column="22" selection-end-line="63" selection-end-column="29" />
+        <state relative-caret-position="30">
+          <caret line="2" column="37" selection-start-line="2" selection-start-column="37" selection-end-line="2" selection-end-column="37" />
         </state>
       </provider>
     </entry>
     <entry file="file://$PROJECT_DIR$/VueApp/src/components/ElevationGraph.vue">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="535">
-          <caret line="41" column="6" selection-start-line="41" selection-start-column="6" selection-end-line="41" selection-end-column="6" />
+        <state relative-caret-position="429">
+          <caret line="155" column="19" lean-forward="true" selection-start-line="155" selection-start-column="19" selection-end-line="155" selection-end-column="19" />
         </state>
       </provider>
     </entry>
@@ -571,22 +628,25 @@
     </entry>
     <entry file="file://$PROJECT_DIR$/VueApp/src/components/Home.vue">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="255">
-          <caret line="17" column="36" selection-start-line="17" selection-start-column="36" selection-end-line="17" selection-end-column="36" />
+        <state relative-caret-position="15">
+          <caret line="1" column="25" selection-start-line="1" selection-start-column="25" selection-end-line="1" selection-end-column="25" />
         </state>
       </provider>
     </entry>
     <entry file="file://$PROJECT_DIR$/VueApp/src/auth/AuthService.js">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="673">
-          <caret line="51" column="3" lean-forward="true" selection-start-line="43" selection-start-column="2" selection-end-line="51" selection-end-column="3" />
+        <state relative-caret-position="765">
+          <caret line="51" column="3" selection-start-line="43" selection-start-column="2" selection-end-line="51" selection-end-column="3" />
         </state>
       </provider>
     </entry>
     <entry file="file://$PROJECT_DIR$/VueApp/src/components/Main.vue">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="150">
-          <caret line="10" column="7" selection-start-line="10" selection-start-column="7" selection-end-line="10" selection-end-column="7" />
+        <state relative-caret-position="525">
+          <caret line="35" column="9" lean-forward="true" selection-start-line="35" selection-start-column="9" selection-end-line="35" selection-end-column="9" />
+          <folding>
+            <element signature="e#337#376#0" expanded="true" />
+          </folding>
         </state>
       </provider>
     </entry>

VueApp/src/components/ElevationGraph.vue

@@ -7,6 +7,11 @@
       :data="chartData"
       :options="chartOptions"
     />
+    <div class="legendContainer">
+      <div class="brightBlueBox"> >= 10% </div>
+      <div class="lightBlueBox"> >= 5% </div>
+      <div class="darkBlueBox"> < 5% </div>
+    </div>
     <div class="gradeContainer">
       <div class="miles">
         Distance: {{ distance }} {{ unit }}
@@ -49,7 +54,7 @@
         chartData: null,
         chartOptions: {
           backgroundColor: { fill: 'transparent' },
-          vAxis: { textStyle: { color: '#FFF' } },
+          vAxis: { textStyle: { color: '#CAE9FF' } },
           bar: { groupWidth: '100%' },
           chartArea: { top: 20 },
           legend: 'none'
@@ -107,7 +112,7 @@
           } else if (this.gradeReport[i] >= 0.05) {
             this.chartData.push(['', this.elevations[i].elevation, '#2E9FE1'])
           } else {
-            this.chartData.push(['', this.elevations[i].elevation, '#004E64'])
+            this.chartData.push(['', this.elevations[i].elevation, '#016481'])
           }
         }
       }
@@ -118,30 +123,50 @@
 <style scoped>
   .chartContainer {
     display: grid;
-    grid-template-columns: 1fr 1fr 1fr 1fr;
+    grid-template-columns: 1fr 2fr 2fr 1fr;
     grid-template-rows: 1fr 8fr;
     grid-template-areas:
-                        "..... grade grade ....."
+                        ".... legend grade ....."
                         "chart chart chart chart";
     align-items: center;
   }
-  .chart {
-    padding-left: 20px;
-    grid-area: chart;
+  .legendContainer {
+    grid-area: legend;
+    display: flex;
+    justify-content: space-evenly;
+    font-size: 1em;
+    color: #CAE9FF;
   }
   .gradeContainer {
     grid-area: grade;
     display: flex;
-    justify-content: space-around;
-    font-size: 1.15em;
+    justify-content: space-between;
+    font-size: 1.1em;
+    color: #CAE9FF;
+  }
+  .chart {
+    margin-left: 4em;
+    grid-area: chart;
   }
-  .miles {
-    color: white;
+  .brightBlueBox {
+    text-align: center;
+    width: 4em;
+    height: 1.2em;
+    background-color: #CAE9FF;
+    color: #062831;
   }
-  .avgGrade {
-    color: white;
+  .lightBlueBox {
+    text-align: center;
+    width: 4em;
+    height: 1.2em;
+    background-color: #2E9FE1;
+    color: #062831;
   }
-  .peakGrade {
-    color: white;
+  .darkBlueBox {
+    text-align: center;
+    width: 4em;
+    height: 1.2em;
+    background-color: #016481;
+    color: #062831;
   }
 </style>