Mark new week with light gray plot background & improve tooltip times…

…tamp
jeanremy · Jan 28, 2018 · cfbf6dc · cfbf6dc
1 parent 3c48af1
commit cfbf6dc
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 19 deletions.
diff --git a/app/controllers/subregions_controller.rb b/app/controllers/subregions_controller.rb
@@ -2,7 +2,7 @@
 
 class SubregionsController < ApplicationController
   def show
-    @forecasts ||= Spot.connection.select_all <<-SQL
+    forecasts ||= Spot.connection.select_all <<-SQL
       SELECT
          id
         ,name
@@ -49,16 +49,18 @@ def show
               ,id
               ,timestamp
     SQL
-    @forecasts.each(&:symbolize_keys!)
-    @forecasts.each do |forecast|
-      forecast[:time] = helpers.format_timestamp(Time.zone.parse("#{forecast[:timestamp]} UTC").in_time_zone(subregion.timezone))
+    @max = 0.0
+    forecasts.each(&:symbolize_keys!)
+    forecasts.each_with_index do |forecast, _index|
+      forecast[:timestamp] = Time.zone.parse("#{forecast[:timestamp]} UTC").in_time_zone(subregion.timezone)
+      forecast[:time] = helpers.format_timestamp(forecast[:timestamp])
       %i[max min avg_delta max_delta].each do |field|
         forecast[field] = forecast[field].to_f
       end
+      @max = [forecast[:max], @max].max
       forecast[:avg_rating] = forecast[:avg_rating].to_i
     end
-    @max = @forecasts.collect { |f| f[:max] }.max
-    @forecasts = @forecasts.group_by { |s| { id: s[:id], name: s[:name], slug: s[:slug], lat: s[:lat], lon: s[:lon], msw_id: s[:msw_id], msw_slug: s[:msw_slug], spitcast_id: s[:spitcast_id], spitcast_slug: s[:spitcast_slug], surfline_id: s[:surfline_id], surfline_slug: s[:surfline_slug] } }
+    @spots = forecasts.group_by { |s| { id: s[:id], name: s[:name], slug: s[:slug], lat: s[:lat], lon: s[:lon], msw_id: s[:msw_id], msw_slug: s[:msw_slug], spitcast_id: s[:spitcast_id], spitcast_slug: s[:spitcast_slug], surfline_id: s[:surfline_id], surfline_slug: s[:surfline_slug] } }
   end
 
 private

diff --git a/app/javascript/components/SpotChart.jsx b/app/javascript/components/SpotChart.jsx
@@ -47,7 +47,9 @@ const SpotChart = props => {
         let rating
         let min = 0
         let avg = 0
-        let tooltip = `<strong>${this.x}</strong>`
+        let timestamp = new Date(this.points[0].point.timestamp)
+        let time_parts = this.x.split(' ')
+        let tooltip = `<strong>${time_parts[0]} ${timestamp.toLocaleString('en-US', {month: 'short'})} ${timestamp.getDate()}, ${time_parts[1]}m</strong>`
         for (const point of this.points.reverse()) {
           tooltip += `<br>${point.series.name}: ${(min + avg + point.y).toPrecision(2)} ft`
           if (point.series.name === 'Min') {
@@ -63,6 +65,7 @@ const SpotChart = props => {
     },
     xAxis: {
       categories: props.xLabels,
+      plotBands: props.plotBands,
       title: {
         text: null,
       },

diff --git a/app/views/subregions/show.html.slim b/app/views/subregions/show.html.slim
@@ -11,19 +11,27 @@
             - region.subregions.each do |subregion|
               option value=subregion_path(region, subregion) selected=('selected' if subregion == @subregion) =subregion.name
   .subregion-container.safe-padding
-    - @forecasts.each do |data, forecast|
-      h2.font-weight-light.spot-header id=data[:slug]
-        span= link_to data[:name], spot_path(@region, @subregion, data[:slug])
-        = map_link(Spot.map_url(data[:lat], data[:lon]))
-        = spitcast_link(Spot.spitcast_url(data[:spitcast_slug])) if data[:spitcast_slug]
-        = msw_link(Spot.msw_url(data[:msw_slug], data[:msw_id])) if data[:msw_id]
-        = surfline_link(Spot.surfline_url(data[:surfline_id])) if data[:surfline_id]
+    - @spots.each do |meta, forecasts|
+      - from = forecasts.find_index { |p| p[:timestamp].monday? && p[:timestamp].hour < 3 }
+      - from && to = forecasts[from..-1].find_index { |p| p[:timestamp].sunday? && p[:timestamp].hour > 20 }
+      - to ? to += from : to = forecasts.size
+      h2.font-weight-light.spot-header id=meta[:slug]
+        span= link_to meta[:name], spot_path(@region, @subregion, meta[:slug])
+        = map_link(Spot.map_url(meta[:lat], meta[:lon]))
+        = spitcast_link(Spot.spitcast_url(meta[:spitcast_slug])) if meta[:spitcast_slug]
+        = msw_link(Spot.msw_url(meta[:msw_slug], meta[:msw_id])) if meta[:msw_id]
+        = surfline_link(Spot.surfline_url(meta[:surfline_id])) if meta[:surfline_id]
       = react_component 'SpotChart', {\
           data: [\
-            { name: 'Max', data: forecast.collect { |point| { y: point[:max_delta], color: rating_color(point[:avg_rating], :max) } }, stack: 'All' },
-            { name: 'Avg', data: forecast.collect { |point| { y: point[:avg_delta], color: rating_color(point[:avg_rating], :avg) } }, stack: 'All'},
-            { name: 'Min', data: forecast.collect { |point| { y: point[:min], color: rating_color(point[:avg_rating], :min), rating: rating_text(point[:avg_rating]) } }, stack: 'All' },
+            { name: 'Max', data: forecasts.collect { |point| { y: point[:max_delta], color: rating_color(point[:avg_rating], :max), timestamp: point[:timestamp] } }, stack: 'All' },
+            { name: 'Avg', data: forecasts.collect { |point| { y: point[:avg_delta], color: rating_color(point[:avg_rating], :avg) } }, stack: 'All'},
+            { name: 'Min', data: forecasts.collect { |point| { y: point[:min], color: rating_color(point[:avg_rating], :min), rating: rating_text(point[:avg_rating]) } }, stack: 'All' },
           ],
-          xLabels: forecast.collect { |point| point[:time] },
-          max: @max\
+          max: @max,
+          plotBands: from && to && [{\
+            color: '#F2F2F2',
+            from: from - 0.5,
+            to: to + 0.5,
+          }],
+          xLabels: forecasts.collect { |point| point[:time] }\
         }