Merge branch 'main' of https://github.com/OHI-Science/OHI-website

README.md

@@ -49,6 +49,10 @@ The `regionsDropdown` shortcode creates a dropdown with all of the OHI region na
 
 The `gauge` shortcode renders a gauge visualization showing the score for the given region and given goal, for the most current year that is available in the `scores.csv` file. For the `regionId` property, use one of the numbers that are used to identify regions in `scores.csv`; use "0" for the global average. The `goalCode` property should similarly be set to one of the two to three digit letter codes used in `scores.csv`.
 
+### `{{< aster regionId="0" linkTo="methodology" >}}`
+
+The `aster` shortcode renders an aster plot (aka a flower plot) where each 'petal' is represents the score for a particular goal for the given region. Data for the aster plot come from the `scores.csv` file. For the `regionId` property, use one of the numbers that are used to identify regions in `scores.csv`; use "0" for the global average. The `linkTo` property can be set to either `"methodology"` or `"score"` - this configured which type of goal page to navigate to when you click on one of the petals. `"methodology"` links to the goal pages that are under `content/goals`, `"score"` links to the goal pages that are under `content/global-scores/goal-scores`.
+
 ## Goal pages
 
 Goal and sub-goal pages, including goal index page, require more front-matter than other content pages. In addition to the "title", "name", and "bg_image" properties, goal pages use the properties "id", "icon", "description", and "color". These extra properties control how the OHI goal information is presented on the website, including creating the data visualizations.

assets/js/data-viz/dataviz.js

@@ -26,6 +26,7 @@ function init() {
           regionAster.default({
             container: regionAsterEl,
             regionId: regionAsterEl.dataset.regionId,
+            linkTo: regionAsterEl.dataset.linkTo || "methodology",
           })
         })
       })

assets/js/data-viz/regionAster.js

@@ -30,8 +30,12 @@ import numberSlider from "./numberSlider.js"
  * @property {HTMLElement} container - The container into which the region aster
  * visualization should be inserted
  * @property {string} regionId - The ID of the region to display
- * @property {RegionAsterClasses} [classes] - Classes to add to the HTML elements
- * created by this function
+ * @property {RegionAsterClasses} [classes] - Classes to add to the HTML elements created
+ * by this function
+ * @property {string} linkTo - Which of the goal pages the aster plot should link to. By
+ * default, links to the 'methodology' page which gives a description and overview of the
+ * goal. Can also be set to 'score', which will instead link to the goal page that gives
+ * an overview of the global score for that goal.
  */
 async function regionAster({
   container = null,
@@ -42,7 +46,8 @@ async function regionAster({
     controls: "region-aster__controls",
     control: "region-aster__control",
     label: "region-aster__label"
-  }
+  },
+  linkTo = 'methodology'
 } = {}) {
 
   if (!container) {
@@ -119,13 +124,19 @@ async function regionAster({
     // meanScore in the centre).
     ohiData.goalsConfig.forEach(function (goalLabel, index) {
       if (!goalLabel.parent && goalLabel.id !== 'Index') {
+        let url = null;
+        if (linkTo === 'methodology') {
+          url = goalLabel.url
+        } else if (linkTo === 'score') {
+          url = goalLabel.urlScore
+        }
         const d = {
           id: goalLabel.id,
           label: goalLabel.label,
           score: yearDimensionData[goalLabel.id][selections.region],
           color: goalLabel.color,
           icon: goalLabel.icon,
-          url: goalLabel.url
+          url: url
         }
         arcs.push(d)
       }

assets/scss/data-viz/regionAster.scss

@@ -9,6 +9,10 @@
  */
 
 .region-aster {
+
+  margin-bottom: 5rem;
+  margin-top: 3rem;
+
   &__plot {
     max-width: 1000px;
   }

content/data/index.md

@@ -1,6 +1,6 @@
 ---
 headless: true
-dataVersion: "2021-09-22"
+dataVersion: "2021-10-05"
 missingValueCode: 'NA'
 dataFiles:
   scores: scores.csv

content/global-scores/goal-scores/_index.md

@@ -14,6 +14,4 @@ menu:
 
 The overall global score was XX, but a closer look at the underlying goal scores reveals a great deal of variation in regard to how well we are managing the sustainable delivery of different ocean benefits. Select a goal below to learn more about its score and how it has changed over time.
 
-
-[aster plot here?]
-
+{{< aster regionId="0" linkTo="score" >}}

layouts/partials/functions/getGoalsData.html

@@ -2,6 +2,10 @@
 {{ $goalSection := site.GetPage "goals" }}
 
 
+{{/* Find the goal SCORES page index */}}
+{{ $goalScoreSection := site.GetPage "global-scores/goal-scores" }}
+{{ $goalScorePages := $goalScoreSection.Pages | append $goalScoreSection.RegularPagesRecursive | append $goalScoreSection }}
+
 {{/* Get the other top-level goal pages, sorted by weight */}}
 {{ $goalPages := sort $goalSection.Pages "Params.weight" }}
 
@@ -16,12 +20,31 @@
 
 {{/* Range through the remaining top-level goals */}}
 {{ range $goalPage := $goalPages }}
+
+  {{/* Get the id, label, etc. */}}
   {{ $goalProps := partial "goal-properties" .Params }}
+
+  {{/* Get a link to the goal description page */}}
   {{ $goalProps = merge $goalProps (dict "url" $goalPage.Permalink )}}
+
+  {{/* Get a link to the goal score page */}}
+  {{ range $goalScorePage := first 1 (where $goalScorePages ".Params.id" $goalProps.id ) }}
+    {{ $goalProps = merge $goalProps (dict "urlScore" $goalScorePage.Permalink )}}
+  {{ end }}
+
   {{ $goalsData = $goalsData | append $goalProps }}
+
   {{/* Add sub-goals, if there are any */}}
   {{ range .Pages }}
-    {{ $subgoalProps := dict "id" .Params.id "label" .Params.name "description" .Params.description "parent" $goalProps.id "url" .Permalink }}
+
+    {{ $id := .Params.id }}
+    {{ $subgoalProps := dict "id" $id "label" .Params.name "description" .Params.description "parent" $goalProps.id "url" .Permalink }}
+
+    {{/* Get a link to the goal score page */}}
+    {{ range $subgoalScorePage := first 1 (where $goalScorePages ".Params.id" $id ) }}
+      {{ $subgoalProps = merge $subgoalProps (dict "urlScore" $subgoalScorePage.Permalink )}}
+    {{ end }}
+
     {{ $goalsData = $goalsData | append $subgoalProps }}
   {{ else }}
   {{ end }}
@@ -31,6 +54,7 @@
   {{/* Return the Hugo slice of dictionaries as a JSON array of objects */}}
   {{ $goalsData = $goalsData | jsonify }}
 {{ end }}
+
 {{ return $goalsData }}
 
 {{ define "partials/goal-properties" }}

layouts/regions/single.html

@@ -38,7 +38,7 @@ <h3>Goal evalulation</h3>
           <a href="{{ . }}">Learn more about goals</a>.
         {{ end }}
       </p>
-      <div class="card-section" style="padding-bottom:10rem">
+      <div class="card-section">
         <div class="region-aster" data-region-id="{{ $id }}"></div>
       </div>
     </section>

layouts/shortcodes/aster.html

@@ -0,0 +1,15 @@
+{{ $attrs := "" }}
+
+{{ with .Get "linkTo" }}
+  {{ $attrs = printf `data-link-to="%s"` . }}
+{{ else }}
+  {{ $attrs = printf `data-link-to="%s"` "methodology" }}
+{{ end }}
+
+{{ with .Get "regionId" }}
+  {{ $attrs = printf `%s data-region-id="%s"` $attrs . }}
+{{ else }}
+  {{ $attrs = printf `%s data-region-id="%s"` $attrs "0" }}
+{{ end }}
+
+<div class="region-aster" {{ $attrs | safeHTMLAttr }}></div>