Finally Wrote A Hugo Shortcode To Deal With Generating Tables For My Weather Station Data

The Go templates that Hugo uses to make short codes and partials just are not all that intuitive to me. I don’t know why, but I feel like I am seeing double at times looking at them. The curly brackets all over the place only make matters worse for me. I forget to close them so often, and then it’s a bitch to trouble shoot them because of the shape and size of them I don’t see them too well. With practice, it will get better. I really do like everything else about using Hugo, and its flexibility has really been great for me.

I’ve been trying to brainstorm an idea of how to generate more organized data for my data from my Ambient weather station to post on here. It would have been a lot easier if I wanted to use all the fields from my CSV file, but there’s no need to have my indoor temperatures and stuff.

I had originally done a short code to generate one big table of all the data, but that was too wide for the screen and not nearly as organized as I would have liked it to have been. I wanted to split it up by day having each on a separate page, then have smaller tables of the related data in a more sensible way.

The biggest issue I had was figuring out a way to skip the first line of the CSV file. The first line is headers, so I didn’t need them once I knew the fields. Then after that I needed to take five lines at a time since the daily average, high, low, and time of high and low are each on separate lines.

,Date,Outdoor Temperature,Feels Like,Dew Point
Average,2022-01-14,33.7,33.7,28.8
High,2022-01-14,35.6,35.6,29.9
High Datetime,2022-01-14,2022-01-14T04:57:00-05:00,2022-01-14T04:57:00-05:00,2022-01-14T04:41:00-05:00,
Low,2022-01-14,32,30.2,28
Low Datetime,2022-01-14,2022-01-14T02:21:00-05:00,2022-01-14T02:12:00-05:00,2022-01-14T00:13:00-05:00,2022-01-14T00:00:00-05:0

Hugo has range for loops, in this case it would loop through the array one line at a time. I could then access the fields as an array, but what I was stuck on is how to get five at a time after the first one.

What I eventually ended up doing is creating a variable for each line number for one to five, with names that are a better description of what the line contains than just the number. Then I created variables for each field number that I want to use to be more descriptive, plus it allows easier editing should the CSV lines and fields layout from Ambient Weather ever change.

I got the index number of the first line of the date that I wanted with several ifs to filter out the non-related lines. The date for the current page is a field that’s passed to the shortcode from the markdown file, so it wasn’t that complicated. I only needed the first one, then added the various line variable numbers to get the specific lines I wanted, then used the column number variables to get the field I wanted. Eventually, I got things as close to just right as I think I will get using just Hugo. I have no doubt that I will continue tweaking it as I see fit, but this is where it is now. Here’s the code.

{{- $csvfile := .Get "src" -}}

{{- $seperator := "," -}}
{{- $Thedate := .Get "Day" -}}
{{-  $data := getCSV $seperator $csvfile -}}
{{- $Thedate := dateFormat "1-2-2006" ($Thedate) -}}
{{- $Thedata := "" -}}
{{- $FeelsLike := 3 -}}
{{- $DewPoint := 4 -}}
{{- $Temperature := 2 -}}
{{- $Humidity := 16 -}}
{{- $UVRadiation := 17 -}}
{{- $SolarRadiation := 18 -}}
{{- $StrikesPerDay := 19 -}}
{{- $StrikesPerHour := 20 -}}
{{- $Wind := 6 -}}
{{- $WindGust := 7 -}}
{{- $Pressure := 15 -}}
{{- $WindDirection := 8 -}}
{{- $DailyRain := 10 -}}
{{- $MaxHourly := 9 -}}
{{- $EventRain := 14 -}}
{{- $WeeklyRain := 11 -}}
{{- $MonthlyRain := 12 -}}
{{- $YearlyRain := 13 -}}
    {{- range $index, $col :=   getCSV $seperator $csvfile -}} 
        
        {{- if  (ne $index 0 ) -}}
                {{- if and ( eq ($Thedate) ( dateFormat "1-2-2006" (index $col 1) )) ( eq (index $col 0) "Average") -}}
        {{- $average := $index  -}}
{{- $high := add $index 1 -}}
{{- $hightime := add $index 2 -}}
{{- $low := add $index 3 -}}
{{- $lowtime := add $index 4 -}}
{{- $HighTemperature :=  index $data $high  $Temperature -}}
{{- $LowTempterature := (index $data $low  $Temperature   )  -}}
{{- $TempteratureRange := sub ( float $HighTemperature ) (float $LowTempterature) | lang.FormatNumber 2 -}}
{{- $HighFeelsLike :=  index $data $high  $FeelsLike -}}
{{- $LowFeelsLike := (index $data $low  $FeelsLike   )  -}}
{{- $FeelsLikeRange := sub ( float $HighFeelsLike ) (float $LowFeelsLike) | lang.FormatNumber 2 -}}
{{- $HighDewPoint :=  index $data $high  $DewPoint -}}
{{- $LowDewPoint := (index $data $low  $DewPoint   )  -}}
{{- $DewPointRange := sub ( float $HighDewPoint ) (float $LowDewPoint) | lang.FormatNumber 2 -}}
{{- $HighHumidity :=  index $data $high  $Humidity -}}
{{- $LowHumidity := (index $data $low  $Humidity   )  -}}
{{- $HumidityRange := sub ( float $HighHumidity ) (float $LowHumidity) | lang.FormatNumber 2 -}}
{{- $HighPressure :=  index $data $high  $Pressure -}}
{{- $LowPressure := (index $data $low  $Pressure   )  -}}
{{- $PressureRange := sub ( float $HighPressure ) (float $LowPressure) | lang.FormatNumber 2 -}}
     <table> <thead><tr>
     <th></th><th>Temperature</th><th>Time</th><th>Dew Point</th><th>Time</th> <th>Feels Like</th><th>Time</th> </tr></thead><tbody>
<tr><td>Average</td><td>{{- index $data $average  $Temperature  -}}   &deg; F  </td><td></td><td>{{- index $data $average  $DewPoint -}}   &deg; F  </td><td></td><td>{{- index $data $average  $FeelsLike -}}   &deg; F  </td><td></td></tr>
<tr><td>High</td><td>{{- $HighTemperature -}}   &deg; F </td><td><time datetime="{{  index $data   $hightime  $Temperature}}"> {{-  index $data   $hightime  $Temperature   | time.Format ":time_short" -}}</time></td><td>{{-  $HighDewPoint -}}   &deg; F</td><td><time datetime="{{  index $data   $hightime  $DewPoint}}"> {{-  index $data   $hightime  $DewPoint   | time.Format ":time_short" -}}</time></td><td>{{-  $HighFeelsLike -}}   &deg; F </td><td><time datetime="{{  index $data   $hightime  $FeelsLike}}"> {{-  index $data   $hightime  $FeelsLike   | time.Format ":time_short" -}}</time></td></tr>
<tr><td>Low</td><td>{{-  $LowTempterature -}}   &deg; F </td><td><time datetime="{{  index $data   $lowtime  $Temperature}}"> {{-  index $data   $lowtime  $Temperature   | time.Format ":time_short" -}}</time></td><td>{{-  $LowDewPoint  -}}   &deg; F </td><td><time datetime="{{  index $data   $lowtime  $DewPoint}}"> {{-  index $data   $lowtime  $DewPoint   | time.Format ":time_short" -}}</time></td><td>{{-  $LowFeelsLike  -}}   &deg; F </td><td><time datetime="{{  index $data   $lowtime  $FeelsLike}}"> {{-  index $data   $lowtime  $FeelsLike   | time.Format ":time_short" -}}</time></td></tr>
<tr><td>Range</td><td>{{ $TempteratureRange }}  &deg; F </td><td></td><td>{{-  $DewPointRange  -}}   &deg; F </td><td></td><td>{{-  $FeelsLikeRange -}}   &deg; F </td><td></td></tr>
</tbody>
</table>

     


     <table> <caption>Humidity</caption>    <thead><tr>
     <th></th><th>Humidity</th><th>Time</th>   </tr> </thead>

     <tbody>
<tr><td>Average</td><td>{{- index $data $average  $Humidity -}} %</td><td></td></tr>
<tr><td>High</td><td>{{-  $HighHumidity -}} %</td><td><time datetime="{{  index $data   $hightime  $Humidity}}"> {{-  index $data   $hightime  $Humidity   | time.Format ":time_short" -}}</time>
</td></tr>
<tr><td>Low</td><td>{{-  $LowHumidity -}} %</td><td><time datetime="{{  index $data   $hightime  $Humidity}}"> {{-  index $data   $lowtime  $Humidity   | time.Format ":time_short" -}}</time>
</td></tr>
<tr><td>Range</td><td>{{-  $HumidityRange  -}} %</td><td></td></tr></tbody>
</table>
      
  <table> <caption>Releative Pressure</caption>    <thead><tr>
     <th></th><th>Pressure</th><th>Time</th>   </tr> </thead>

     <tbody>
<tr><td>Average</td><td>{{ index $data $average  $Pressure}} in</td><td></td></tr>
<tr><td>High</td><td>{{ $HighPressure }} in</td><td><time datetime="{{  index $data   $hightime  $Pressure}}"> {{-  index $data   $hightime  $Pressure   | time.Format ":time_short" -}}</time></td></tr>
<tr><td>Low</td><td>{{ $LowPressure }} in</td><td><time datetime="{{  index $data   $lowtime  $Pressure}}"> {{-  index $data   $lowtime  $Pressure   | time.Format ":time_short" -}}</time> </td></tr>
<tr><td>Range</td><td>{{ $PressureRange }} in</td><td></td></tr></tbody>
</table>
     <table>    
     
 <caption>Sun</caption><thead><tr>
 <th><th>Max</th><th>Time</th></tr></thead>
<tbody>
<tr><td>UV Radiation</td><td>{{ index $data $high  $UVRadiation}}</td><td> <time datetime="{{  index $data   $hightime  $UVRadiation}}"> {{-  index $data   $hightime  $UVRadiation   | time.Format ":time_short" -}}</time></td></tr>
<tr><td>Solar Radiation</td><td>{{index $data   $high  $SolarRadiation}} W/m2</td><td><time datetime="{{  index $data   $hightime  $SolarRadiation}}"> {{-  index $data   $hightime  $SolarRadiation   | time.Format ":time_short" -}}</time> </td></tr>
    </tbody>

</table>

<table> 
<thead><tr><th></th><th>Wind</th><th>Gust</th><th>Time</th></tr></thead><tbody>
<tr><td>Wind</td><td>{{index $data $average $Wind}} mph</td><td>{{index $data $high $Wind }} mph<td><time datetime="{{  index $data   $hightime  $Wind}}"> {{-  index $data   $hightime  $Wind   | time.Format ":time_short" -}}</time>
</td></tr>
<tr><td>Gust</td><td>{{index $data $average $WindGust}} mph</td><td>{{index $data $high   $WindGust}} mph<td><time datetime="{{  index $data   $hightime  $WindGust}}"> {{-  index $data   $hightime  $WindGust   | time.Format ":time_short" -}}</time></tr>
<tr><td>Direction</td><td>{{- index $data $average $WindDirection -}} </td><td></td><td></td></tr></tbody></table>   


    <table> <caption> Rainfall</caption> <thead><tr>
     <th>Daily Rain</th> <th>Max Hourly</th><th>Event Rain</th><th>Weekly Rain</th><th>Monthly Rain</th><th>Yearly Rain</th></tr></thead><tbody>
       
<tr><td>{{index $data   $high  $DailyRain}} in</td><td>{{ index $data   $high  $MaxHourly}} in/hr</td><td>{{index $data   $high  $EventRain}} in</td><td>{{index $data   $high  $WeeklyRain}} in</td><td>{{index $data  $high  $MonthlyRain}} in</td><td>{{index $data  $high  $YearlyRain}} in</td></tr></tbody>
</table>
{{- break -}}
{{- end -}} 
{{- else -}}
{{- continue -}}

{{- end -}}
{{- end -}}

Please don’t hesitate to use this if it will help you, and modify it as you need to make it work for your requirements.

I may come up with a way to work with the JSON files I can generate from Ambient Weather’s API, but that’s not a project I want to deal with right at this moment. I just wanted to get something more or less working now and maybe improve upon it later. Those files are better organized and have much more data, but don’t have highs and lows already calculated. I would have to do that myself and if I choose to go that route I want to take my time with it. I’d also like to see if I can’t generate charts from them if I go there too, since they have all the data I could plot.


updated on 02-11-22

I have made a few tweaks to this to add some ranges in, so I updated this post to include the changed shortcode.