build: upgrade Gatsby to v4

Fix bumpChart for visualisation. The framework is already updated, this commit is for bumping the version number. BREAKING CHANGE.
researchdata-sheffield · Apr 13, 2022 · d58d984 · d58d984
1 parent 24af480
commit d58d984
Show file tree

Hide file tree

Showing 7 changed files with 223 additions and 148 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -50,9 +50,13 @@ jobs:
         with:
           node-version: '16'
           cache: 'npm'
-
+
+      - name: Output commit message
+        run: echo "${{ github.event.head_commit.message }}"
+
       # Retrieve gatsby cache
       # Creates new cache when OS/run_id changes
+      # Skip if the commit message contains text 'skip cache'
       - name: Gatsby Cache
         if: "!contains(github.event.head_commit.message, 'skip cache')"
         id: gatsby-ci-cache
@@ -86,8 +90,6 @@ jobs:
       - name: Serve and E2E test
         run: npm run serve & npm run test:e2e; tskill node
 
-      - run: echo "ps"
-
   Test:
     needs: Check-Duplicate
     if: ${{ needs.Check-Duplicate.outputs.should_skip != 'true' }}

diff --git a/content/visualisation/2021-08-23-Leading-risk-factors-for-DALYs/bumpChart/bumpChart.jsx b/content/visualisation/2021-08-23-Leading-risk-factors-for-DALYs/bumpChart/bumpChart.jsx
@@ -63,9 +63,10 @@ const bumpChart = ({ theme, data, gender }) => {
           </div>
           <div style={{ textAlign: "center" }}>
             <h2 style={{ color: "#777" }}>Ranking</h2>
-            {data.map((rank, idx) => (
-              <h3 key={`${id}-${idx}`}>{rank.y || "unknown"}</h3>
-            ))}
+            {data &&
+              data.data.map((rank, idx) => (
+                <h3 key={`${id}-${idx}`}>{rank.y || "unknown"}</h3>
+              ))}
           </div>
         </div>
       </div>

diff --git a/content/visualisation/2021-08-23-Leading-risk-factors-for-DALYs/search/search.jsx b/content/visualisation/2021-08-23-Leading-risk-factors-for-DALYs/search/search.jsx
@@ -112,12 +112,13 @@ const search = () => {
           placeholder="Double click to select | Type to search"
         />
         <datalist id="regions">
-          {regionJSONData.map((region, idx) => (
-            <option
-              key={`region-${region.Location}-${idx}`}
-              value={region.Location}
-            />
-          ))}
+          {regionJSONData &&
+            regionJSONData.map((region, idx) => (
+              <option
+                key={`region-${region.Location}-${idx}`}
+                value={region.Location}
+              />
+            ))}
         </datalist>
       </div>
       {currentData && (

diff --git a/src/components/style/visStyle.jsx b/src/components/style/visStyle.jsx
@@ -1,55 +1,163 @@
-import styled from "styled-components"
-
+import styled from "styled-components";
 
 export const ShareButton = styled.div`
   a {
-    margin: 0
+    margin: 0;
+  }
+`;
+
+export const VisGrid = styled.div`
+  grid-auto-flow: dense;
+  grid-template-rows: min-content;
+  max-width: 88rem /* 1408px */;
+  width: 100%;
+  gap: 0.25rem;
+
+  @media (min-width: 768px) {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  @media (min-width: 1024px) {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  @media (min-width: 1280px) {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
   }
-`
+
+  .__outer {
+    border-radius: 0.675rem /* 10.8px */;
+    margin: 5px auto;
+
+    @media (min-width: 768px) {
+      margin: 0;
+    }
+
+    .__loading-image {
+      max-width: 100px;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      position: absolute;
+    }
+  }
+
+  #visualisation-invite {
+    grid-row: span 1;
+    grid-column: span 1;
+    visibility: hidden;
+
+    .__wrap {
+      position: relative;
+      border-radius: 0.675rem /* 10.8px */;
+      text-align: center;
+      display: flex;
+      height: 100%;
+      min-height: 300px;
+      width: 100%;
+      background-image: linear-gradient(
+        135deg,
+        #141e30 0%,
+        #152033 6%,
+        #20344c 65%,
+        #243b55 100%
+      );
+      background-repeat: no-repeat;
+
+      @media (min-width: 768px) {
+        position: absolute;
+        top: 0px;
+        left: 0px;
+      }
+
+      &:hover .text {
+        display: block;
+      }
+
+      .text {
+        position: absolute;
+        font-size: 0.875rem /* 14px */;
+        line-height: 1.25rem /* 20px */;
+        font-weight: 700;
+        cursor: pointer;
+        border-radius: 0.375rem /* 6px */;
+        padding: 0.25rem 0.5rem;
+        display: none;
+        transform: translate(-50%, 0%);
+        left: 50%;
+        top: 70%;
+      }
+    }
+  }
+`;
 
 export const VisItem = styled.div`
   display: block;
   height: 100%;
   width: 100%;
   position: relative;
 
-  ${props => {
+  ${(props) => {
     if (props.row == 1 && props.col > 1) {
       return `
         padding-bottom: calc(100% / ${props.col});
-      `
+      `;
     }
     if (props.col == 1 && props.row > 1) {
       return `
         padding-bottom: calc(${props.row} * 100%);
-      `
+      `;
     }
     if (props.col != 1 && props.row != 1) {
       return `
         padding-bottom: calc(${props.row} / ${props.col} * 100%);
-      `
+      `;
     }
 
     return `
       padding-bottom: 100%;
-    `
+    `;
   }}
 
   @media screen and (max-width: 768px) {
     padding-bottom: inherit;
   }
-`
+
+  .__inner {
+    border-radius: 0.675rem;
+
+    @media (min-width: 768px) {
+      position: absolute;
+      top: 0px;
+      left: 0px;
+      height: 100%;
+      width: ;100%;
+      background-image: linear-gradient(135deg, #141e30 0%,#152033 6%,#20344c 65%,#243b55 100%);
+      background-repeat: no-repeat;
+    }
+  }
+
+  img {
+    height: 100%;
+    width: 100%;
+    objectFit: cover;
+    objectPosition: center;
+    transition: .2s ease-out;
+    border-radius: 0.675rem;
+  }
+`;
 
 export const VisDiv = styled.div`
   max-width: 550px;
   margin: auto;
-`
+`;
 
 export const WordCloud = styled.div`
   text-align: center;
-  width: ${props => props.width || '50%'};
-  height: ${props => props.height || '55%'};
-  border-radius: ${props => props.radius || '10px'};
+  width: ${(props) => props.width || "50%"};
+  height: ${(props) => props.height || "55%"};
+  border-radius: ${(props) => props.radius || "10px"};
   overflow-y: hidden;
   overflow-x: clip;
   padding: 1rem;
@@ -59,13 +167,13 @@ export const WordCloud = styled.div`
     height: 100%;
   }
 
-  @media (max-width: 1440px) {
-    width: ${props => props.width || '60%'};
-    height: ${props => props.height || '55%'};
+  @media (min-width: 768px) {
+    width: ${(props) => props.width || "60%"};
+    height: ${(props) => props.height || "55%"};
   }
-  
-  &::before{
-    content: '';
+
+  &::before {
+    content: "";
     height: 100%;
     width: 50%;
     float: left;
@@ -92,8 +200,8 @@ export const WordCloud = styled.div`
     display: contents;
   }
 
-  div.word-cloud-wrap::before{
-    content: '';
+  div.word-cloud-wrap::before {
+    content: "";
     height: 100%;
     width: 50%;
     float: right;
@@ -117,21 +225,22 @@ export const WordCloud = styled.div`
   }
 
   .word {
-    white-space: nowrap;
+    white-space: normal;
     border-radius: 5px;
     display: inline-block;
     line-height: 1;
-    transition: .3s ease;
+    transition: 0.3s ease;
     font-family: TUoS Blake;
     vertical-align: middle;
-    padding: ${props => props.backgroundColour === true ? '8px 13px' : ''};
-    
+    padding: ${(props) => (props.backgroundColour === true ? "8px 13px" : "")};
+
     &:hover {
       color: #00aeef !important;
-      background-color: ${props => props.backgroundColour === true ? '#000' : ''} !important;
+      background-color: ${(props) =>
+        props.backgroundColour === true ? "#000" : ""} !important;
     }
   }
-`
+`;
 
 const visHelperButton = styled.button`
   position: fixed;
@@ -145,8 +254,8 @@ const visHelperButton = styled.button`
   visibility: invisible;
   -webkit-transition: all 0.3s ease;
   -ms-transition: all 0.3s ease;
-  -moz-transition: all 0.3s ease;  
-  -o-transition: all 0.3s ease;  
+  -moz-transition: all 0.3s ease;
+  -o-transition: all 0.3s ease;
   transition: all 0.3s ease;
   cursor: pointer;
   box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
@@ -158,29 +267,39 @@ const visHelperButton = styled.button`
   &:focus {
     outline: none;
   }
-`
+`;
 
 export const VisTagMenuBtn = styled(visHelperButton)`
   opacity: 0;
   right: 140px;
-  background-image: linear-gradient(135deg, rgb(255, 121, 180) 15%, rgb(255, 134, 250) 36%, rgb(41, 197, 255) 85%);
+  background-image: linear-gradient(
+    135deg,
+    rgb(255, 121, 180) 15%,
+    rgb(255, 134, 250) 36%,
+    rgb(41, 197, 255) 85%
+  );
 
   &:hover {
     /*     background: rgba(0, 0, 0, 0.9); */
-  background-image: linear-gradient(45deg, rgb(255, 121, 180) 15%, rgb(255, 134, 250) 36%, rgb(41, 197, 255) 85%);
+    background-image: linear-gradient(
+      45deg,
+      rgb(255, 121, 180) 15%,
+      rgb(255, 134, 250) 36%,
+      rgb(41, 197, 255) 85%
+    );
   }
-`
+`;
 
 export const VisFooterBtn = styled(visHelperButton)`
   opacity: 0;
   right: 80px;
-`
+`;
 
 export const VisBackBtn = styled(visHelperButton)`
   right: 80px;
   opacity: 1;
-`
+`;
 
 export const EmbedCode = styled.div`
   display: hidden;
-`
+`;