Merge pull request thoughtworks#307 from thoughtworks/design-refresh

Design refresh
philipz · Apr 12, 2023 · 74df2da · 74df2da
2 parents 3d8debb + 2434211
commit 74df2da
Show file tree

Hide file tree

Showing 9 changed files with 72 additions and 60 deletions.
diff --git a/src/common.js b/src/common.js
@@ -6,7 +6,7 @@ require('./images/search-logo-2x.svg')
 require('./images/banner-image-mobile.jpg')
 require('./images/banner-image-desktop.jpg')
 require('./images/new.svg')
-require('./images/no-change.svg')
+require('./images/existing.svg')
 require('./images/arrow-icon.svg')
 require('./images/first-quadrant-btn-bg.svg')
 require('./images/second-quadrant-btn-bg.svg')

diff --git a/src/graphing/components/quadrantSubnav.js b/src/graphing/components/quadrantSubnav.js
@@ -14,6 +14,8 @@ function addListItem(quadrantList, name, callback, order) {
     .attr('role', 'tab')
     .text(name)
     .on('click', function (e) {
+      d3.select('#radar').classed('no-blips', false)
+
       removeScrollListener()
 
       d3.select('.graph-header').node().scrollIntoView({

diff --git a/src/graphing/components/quadrants.js b/src/graphing/components/quadrants.js
@@ -18,7 +18,11 @@ const { quadrantHeight, quadrantWidth, quadrantsGap, effectiveQuadrantWidth } =
 let prevLeft, prevTop
 let quadrantScrollHandlerReference
 let scrollFlag = false
+
 function selectRadarQuadrant(order, startAngle, name) {
+  const noOfBlips = d3.selectAll('.quadrant-group-' + order + ' .blip-link').size()
+  d3.select('#radar').classed('no-blips', noOfBlips === 0)
+
   d3.select('.graph-header').node().scrollIntoView({
     behavior: 'smooth',
   })
@@ -391,13 +395,13 @@ function renderRadarLegends(radarElement) {
 
   const noChangeImage = legendsContainer
     .append('img')
-    .attr('src', '/images/no-change.svg')
+    .attr('src', '/images/existing.svg')
     .attr('width', '37px')
     .attr('height', '37px')
-    .attr('alt', 'no change blip legend icon')
+    .attr('alt', 'existing blip legend icon')
     .node().outerHTML
 
-  legendsContainer.html(`${newImage} New ${noChangeImage} No change`)
+  legendsContainer.html(`${newImage} New ${noChangeImage} Existing`)
 }
 
 function renderMobileView(quadrant) {

diff --git a/src/images/no-change.svg → src/images/existing.svg b/src/images/no-change.svg → src/images/existing.svg
diff --git a/src/images/favicon.ico b/src/images/favicon.ico
diff --git a/src/index.html b/src/index.html
@@ -20,7 +20,7 @@
     </header>
     <div class="hero-banner">
       <div class="hero-banner__wrapper">
-        <h1 class="hero-banner__title-text">BYOR</h1>
+        <h1 class="hero-banner__title-text">Build your own Radar</h1>
       </div>
     </div>
     <main>
@@ -66,11 +66,13 @@ <h1 class="pdf-title"></h1>
             required=""
           />
           <input type="submit" value="Build my radar" />
-          <a href="https://www.thoughtworks.com/radar/how-to-byor">Need help?</a>
+          <a href="https://www.thoughtworks.com/radar/byor#guide">Need help?</a>
         </form>
       </div>
       <div class="graph-header"></div>
-      <div id="radar"></div>
+      <div id="radar">
+        <p class="no-blip-text">There are no blips on this quadrant, please check your sheet once.</p>
+      </div>
       <div class="all-quadrants-mobile show-all-quadrants-mobile"></div>
       <div class="graph-footer"></div>
     </main>

diff --git a/src/stylesheets/_quadrants.scss b/src/stylesheets/_quadrants.scss
@@ -15,6 +15,26 @@
     @include layout-margin(calc(12 / 12), $screen-xxlarge);
     @include layout-margin(calc(12 / 12), $screen-xxxlarge);
 
+    .no-blip-text {
+      display: none;
+      text-align: center;
+      font-size: 24px;
+      font-weight: bold;
+    }
+
+    &.no-blips {
+      height: auto !important;
+      .no-blip-text {
+        display: block;
+      }
+
+      .quadrant-group,
+      .quadrant-table,
+      .radar-legends {
+        display: none;
+      }
+    }
+
     .mobile {
       display: block;
     }

diff --git a/src/stylesheets/_search.scss b/src/stylesheets/_search.scss
@@ -47,15 +47,15 @@
     }
 
     @include media-query-xlarge {
-      margin: 64px auto 48px;
+      margin: 32px auto;
 
       &.sticky-offset {
         margin-top: 124px;
       }
     }
 
     @include media-query-xxlarge {
-      margin: 80px auto 64px;
+      margin: 40px auto;
 
       &.sticky-offset {
         margin-top: 140px;
@@ -66,7 +66,7 @@
       color: $wave;
       height: 48px;
       margin-bottom: 30px;
-      background: #ebebeb url(images/search-active-wave.svg) no-repeat 98% center;
+      background: #edf1f3 url(images/search-active-wave.svg) no-repeat 98% center;
       font-family: $baseFontFamily;
       scroll-margin-top: $subnavHeight;
 

diff --git a/src/util/factory.js b/src/util/factory.js
@@ -80,73 +80,58 @@ const plotRadar = function (title, blips, currentRadarName, alternativeRadars) {
   new GraphingRadar(size, radar).init().plot()
 }
 
-function validateInputQuadrantName(allQuadrants, quadrant) {
-  let quadrantNames = Object.keys(allQuadrants)
-  let regexToFixLanguagesAndFrameworks = /(-|\s+)(and)(-|\s+)|\s*(&)\s*/g
-  let formattedInputQuadrant = quadrant.toLowerCase().replace(regexToFixLanguagesAndFrameworks, ' & ')
-  const index = quadrantNames.map((quadrant) => quadrant.toLowerCase()).indexOf(formattedInputQuadrant)
-  return quadrantNames[index]
+function validateInputQuadrantOrRingName(allQuadrantsOrRings, quadrantOrRing) {
+  const quadrantOrRingNames = Object.keys(allQuadrantsOrRings)
+  const regexToFixLanguagesAndFrameworks = /(-|\s+)(and)(-|\s+)|\s*(&)\s*/g
+  const formattedInputQuadrant = quadrantOrRing.toLowerCase().replace(regexToFixLanguagesAndFrameworks, ' & ')
+  return quadrantOrRingNames.find((quadrantOrRing) => quadrantOrRing.toLowerCase() === formattedInputQuadrant)
 }
 
 const plotRadarGraph = function (title, blips, currentRadarName, alternativeRadars) {
-  if (title.endsWith('.csv')) {
-    title = title.substring(0, title.length - 4)
-  }
-  if (title.endsWith('.json')) {
-    title = title.substring(0, title.length - 5)
-  }
-  document.title = title
-  d3.selectAll('.loading').remove()
+  document.title = title.replace(/.(csv|json)$/, '')
 
-  const ringsFromInput = _.map(_.uniqBy(blips, 'ring'), 'ring')
-  const ringMap = {}
-  const allRings = []
-  const maxRings = 4
-  const quadrants = {}
+  d3.selectAll('.loading').remove()
 
-  if (ringsFromInput.length > maxRings) {
-    throw new MalformedDataError(ExceptionMessages.TOO_MANY_RINGS)
-  }
+  const ringMap = graphConfig.rings.reduce((allRings, ring, index) => {
+    allRings[ring] = new Ring(ring, index)
+    return allRings
+  }, {})
 
-  graphConfig.rings.forEach((ring, index) => {
-    let ringObj = new Ring(ring, index)
-    ringMap[ring] = ringObj
-    allRings.push(ringObj)
-  })
-
-  graphConfig.quadrants.forEach((quadrant) => (quadrants[quadrant] = new Quadrant(quadrant)))
+  const quadrants = graphConfig.quadrants.reduce((allQuadrants, quadrant) => {
+    allQuadrants[quadrant] = new Quadrant(quadrant)
+    return allQuadrants
+  }, {})
 
   blips.forEach((blip) => {
-    const currentQuadrant = validateInputQuadrantName(quadrants, blip.quadrant)
-    if (quadrants[currentQuadrant]) {
-      const ring = blip.ring.charAt(0).toUpperCase() + blip.ring.slice(1)
-      quadrants[currentQuadrant].add(
-        new Blip(blip.name, ringMap[ring], blip.isNew.toLowerCase() === 'true', blip.topic, blip.description),
+    const currentQuadrant = validateInputQuadrantOrRingName(quadrants, blip.quadrant)
+    const ring = validateInputQuadrantOrRingName(ringMap, blip.ring)
+    if (currentQuadrant && ring) {
+      const blipObj = new Blip(
+        blip.name,
+        ringMap[ring],
+        blip.isNew.toLowerCase() === 'true',
+        blip.topic,
+        blip.description,
       )
+      quadrants[currentQuadrant].add(blipObj)
     }
   })
 
   const radar = new Radar()
-  radar.addRings(allRings)
+  radar.addRings(Object.values(ringMap))
+
   _.each(quadrants, function (quadrant) {
     radar.addQuadrant(quadrant)
   })
 
-  if (alternativeRadars !== undefined || true) {
-    alternativeRadars.forEach(function (sheetName) {
-      radar.addAlternative(sheetName)
-    })
-  }
+  alternativeRadars.forEach(function (sheetName) {
+    radar.addAlternative(sheetName)
+  })
 
-  if (currentRadarName !== undefined || true) {
-    radar.setCurrentSheet(currentRadarName)
-  }
+  radar.setCurrentSheet(currentRadarName)
 
-  const size = featureToggles.UIRefresh2022
-    ? getGraphSize()
-    : window.innerHeight - 133 < 620
-    ? 620
-    : window.innerHeight - 133
+  const graphSize = window.innerHeight - 133 < 620 ? 620 : window.innerHeight - 133
+  const size = featureToggles.UIRefresh2022 ? getGraphSize() : graphSize
   new GraphingRadar(size, radar).init().plot()
 }
 
@@ -344,7 +329,6 @@ const Factory = function () {
       sheet.init().build()
     } else if (domainName && domainName.endsWith('google.com') && paramId) {
       sheet = GoogleSheet(paramId, queryParams.sheetName)
-
       sheet.init().build()
     } else {
       if (!featureToggles.UIRefresh2022) {
@@ -441,7 +425,7 @@ function plotForm(content) {
 
   form.append('button').attr('type', 'submit').append('a').attr('class', 'button').text('Build my radar')
 
-  form.append('p').html("<a href='https://www.thoughtworks.com/radar/how-to-byor'>Need help?</a>")
+  form.append('p').html("<a href='https://www.thoughtworks.com/radar/byor#guide'>Need help?</a>")
 }
 
 function plotErrorMessage(exception, fileType) {