Skip to content

Commit 6749138

Browse files
devansh-sharma-twdevansh-sharma-tw
committed
[Devansh/Shivaji] #221199 Refactor hardcoded values with config; Update scroll behavior for all quadrants
1 parent 97c60fa commit 6749138

13 files changed

+145
-101
lines changed

‎spec/graphing/blips-spec.js

+8-18
Original file line numberDiff line numberDiff line change
@@ -27,11 +27,11 @@ describe('Blips', function () {
2727
const minRadiusAfterThreshold = minRadius + graphConfig.blipWidth / 2
2828
const maxRadiusAfterThreshold = maxRadius - graphConfig.blipWidth
2929
const xCoordMaxValue =
30-
graphConfig.quadrantWidth + maxRadiusAfterThreshold * -1 * 0.9978403633398593 + graphConfig.blipWidth
31-
const yCoordMaxValue = graphConfig.quadrantHeight + maxRadiusAfterThreshold * -1 * 0.06568568557743505
32-
const xCoordMinValue = graphConfig.quadrantWidth + minRadiusAfterThreshold * -1 * 0.9942914830326867
30+
graphConfig.effectiveQuadrantWidth + maxRadiusAfterThreshold * -1 * 0.9978403633398593 + graphConfig.blipWidth
31+
const yCoordMaxValue = graphConfig.effectiveQuadrantHeight + maxRadiusAfterThreshold * -1 * 0.06568568557743505
32+
const xCoordMinValue = graphConfig.effectiveQuadrantWidth + minRadiusAfterThreshold * -1 * 0.9942914830326867
3333
const yCoordMinValue =
34-
graphConfig.quadrantHeight + minRadiusAfterThreshold * -1 * 0.9942914830326867 - graphConfig.blipWidth
34+
graphConfig.effectiveQuadrantHeight + minRadiusAfterThreshold * -1 * 0.9942914830326867 - graphConfig.blipWidth
3535

3636
expect(chanceFloatingSpy).toHaveBeenCalledWith({
3737
min: minRadiusAfterThreshold,
@@ -57,23 +57,13 @@ describe('Blips', function () {
5757
const minRadiusAfterThreshold = minRadius + blipWidth / 2
5858
const maxRadiusAfterThreshold = maxRadius - blipWidth
5959
const xCoordMaxValue =
60-
graphConfig.effectiveQuadrantWidth +
61-
maxRadiusAfterThreshold * -1 * 0.0707372016677029 +
62-
graphConfig.quadrantsGap +
63-
10
60+
graphConfig.quadrantWidth + maxRadiusAfterThreshold * -1 * 0.0707372016677029 + graphConfig.quadrantsGap + 10
6461
const yCoordMaxValue =
65-
graphConfig.effectiveQuadrantHeight +
66-
maxRadiusAfterThreshold * 0.9999 * 0.27563735581699916 +
67-
graphConfig.quadrantsGap
62+
graphConfig.quadrantHeight + maxRadiusAfterThreshold * 0.9999 * 0.27563735581699916 + graphConfig.quadrantsGap
6863
const xCoordMinValue =
69-
graphConfig.effectiveQuadrantWidth +
70-
minRadiusAfterThreshold * -1 * 0.9942914830326867 +
71-
graphConfig.quadrantsGap +
72-
10
64+
graphConfig.quadrantWidth + minRadiusAfterThreshold * -1 * 0.9942914830326867 + graphConfig.quadrantsGap + 10
7365
const yCoordMinValue =
74-
graphConfig.effectiveQuadrantHeight +
75-
minRadiusAfterThreshold * 0.9999 * 0.10670657355889696 +
76-
graphConfig.quadrantsGap
66+
graphConfig.quadrantHeight + minRadiusAfterThreshold * 0.9999 * 0.10670657355889696 + graphConfig.quadrantsGap
7767

7868
expect(chanceFloatingSpy).toHaveBeenCalledWith({
7969
min: minRadiusAfterThreshold,

‎src/graphing/blips.js

+8-8
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ const { renderBlipDescription } = require('./components/quadrantTables')
55

66
const getRingRadius = function (ringIndex) {
77
const ratios = [0, 0.316, 0.652, 0.832, 0.992]
8-
const radius = ratios[ringIndex] * graphConfig.effectiveQuadrantWidth
8+
const radius = ratios[ringIndex] * graphConfig.quadrantWidth
99
return radius || 0
1010
}
1111

@@ -33,8 +33,8 @@ function calculateRadarBlipCoordinates(minRadius, maxRadius, startAngle, quadran
3333
angleDelta = angleDelta > 45 ? 45 : angleDelta
3434
const angle = toRadian(chance.integer({ min: angleDelta, max: 90 - angleDelta }))
3535

36-
let x = graphConfig.effectiveQuadrantWidth + radius * Math.cos(angle) * adjustX + borderWidthXOffset
37-
let y = graphConfig.effectiveQuadrantHeight + radius * Math.sin(angle) * adjustY + borderWidthYOffset
36+
let x = graphConfig.quadrantWidth + radius * Math.cos(angle) * adjustX + borderWidthXOffset
37+
let y = graphConfig.quadrantHeight + radius * Math.sin(angle) * adjustY + borderWidthYOffset
3838

3939
return avoidBoundaryCollision(x, y, adjustX, adjustY)
4040
}
@@ -50,25 +50,25 @@ function thereIsCollision(coordinates, allCoordinates, blipWidth) {
5050
}
5151

5252
function avoidBoundaryCollision(x, y, adjustX, adjustY) {
53-
const size = graphConfig.effectiveQuadrantWidth * 2 + graphConfig.quadrantsGap
53+
const size = graphConfig.quadrantWidth * 2 + graphConfig.quadrantsGap
5454
if (
5555
(adjustY > 0 && y + graphConfig.blipWidth > size) ||
56-
(adjustY < 0 && y + graphConfig.blipWidth > graphConfig.effectiveQuadrantHeight)
56+
(adjustY < 0 && y + graphConfig.blipWidth > graphConfig.quadrantHeight)
5757
) {
5858
y = y - graphConfig.blipWidth
5959
}
60-
if (adjustX < 0 && x - graphConfig.blipWidth > graphConfig.effectiveQuadrantWidth) {
60+
if (adjustX < 0 && x - graphConfig.blipWidth > graphConfig.quadrantWidth) {
6161
x += graphConfig.blipWidth
6262
}
63-
if (adjustX > 0 && x + graphConfig.blipWidth < graphConfig.effectiveQuadrantWidth + graphConfig.quadrantsGap) {
63+
if (adjustX > 0 && x + graphConfig.blipWidth < graphConfig.quadrantWidth + graphConfig.quadrantsGap) {
6464
x -= graphConfig.blipWidth
6565
}
6666
return [x, y]
6767
}
6868

6969
function findBlipCoordinates(blip, minRadius, maxRadius, startAngle, allBlipCoordinatesInRing, quadrantOrder) {
7070
const maxIterations = 200
71-
const chance = new Chance(Math.PI * graphConfig.effectiveQuadrantWidth * blip.width * graphConfig.blipFontSize)
71+
const chance = new Chance(Math.PI * graphConfig.quadrantWidth * blip.width * graphConfig.blipFontSize)
7272
let coordinates = calculateRadarBlipCoordinates(minRadius, maxRadius, startAngle, quadrantOrder, chance, blip)
7373
let iterationCounter = 0
7474
let foundAPlace = false

‎src/graphing/components/quadrantSubnav.js

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
const d3 = require('d3')
22
const { selectRadarQuadrant, mouseoverQuadrant, mouseoutQuadrant, removeScrollListener } = require('./quadrants')
33
const { getRingIdString } = require('../../util/util')
4+
const { uiConfig } = require('../config')
45

56
function addListItem(quadrantList, name, callback, order) {
67
quadrantList
@@ -14,9 +15,7 @@ function addListItem(quadrantList, name, callback, order) {
1415
.on('click', function (e) {
1516
removeScrollListener()
1617

17-
window.scrollTo({
18-
top: 0,
19-
left: 0,
18+
d3.select('.graph-header').node().scrollIntoView({
2019
behavior: 'smooth',
2120
})
2221

@@ -67,7 +66,8 @@ function renderQuadrantSubnav(radarHeader, quadrants, renderFullRadar) {
6766
)
6867
})
6968

70-
const subnavOffset = window.innerWidth < 1024 ? 380 : 280
69+
const subnavOffset =
70+
(window.innerWidth < 1024 ? uiConfig.tabletBannerHeight : uiConfig.bannerHeight) + uiConfig.headerHeight
7171

7272
window.addEventListener('scroll', function () {
7373
if (subnavOffset <= window.scrollY) {

‎src/graphing/components/quadrantTables.js

+8-4
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
const d3 = require('d3')
2-
const { graphConfig, getScale } = require('../config')
2+
const { graphConfig, getScale, uiConfig } = require('../config')
33

44
function renderBlipDescription(blip, ring, quadrant, tip) {
55
const blipItem = d3
@@ -94,15 +94,19 @@ function renderQuadrantTables(quadrants, rings) {
9494
quadrants.forEach(function (quadrant) {
9595
const scale = getScale()
9696
let quadrantContainer
97-
if (window.innerWidth < 1280 && window.innerWidth >= 768) {
98-
// Additional margin for radar-legends height (42px) and it's padding
97+
if (window.innerWidth < uiConfig.tabletViewWidth && window.innerWidth >= uiConfig.mobileViewWidth) {
9998
quadrantContainer = quadrantTablesContainer
10099
.append('div')
101100
.classed('quadrant-table', true)
102101
.classed(quadrant.order, true)
103102
.style(
104103
'margin',
105-
`${graphConfig.effectiveQuadrantHeight * scale + graphConfig.quadrantsGap * scale + 64 + 42}px auto 0px`,
104+
`${
105+
graphConfig.quadrantHeight * scale +
106+
graphConfig.quadrantsGap * scale +
107+
graphConfig.quadrantsGap * 2 +
108+
uiConfig.legendsHeight
109+
}px auto 0px`,
106110
)
107111
.style('left', '0')
108112
.style('right', 0)

‎src/graphing/components/quadrants.js

+57-38
Original file line numberDiff line numberDiff line change
@@ -8,16 +8,17 @@ const {
88
getScaledQuadrantWidth,
99
getScaledQuadrantHeightWithGap,
1010
getScale,
11+
uiConfig,
1112
} = require('../config')
1213

1314
const ANIMATION_DURATION = 1000
1415

16+
const { quadrantHeight, quadrantWidth, quadrantsGap, effectiveQuadrantWidth } = graphConfig
17+
1518
let prevLeft, prevTop
1619
let quadrantScrollHandlerReference
1720
function selectRadarQuadrant(order, startAngle, name) {
18-
window.scrollTo({
19-
top: 0,
20-
left: 0,
21+
d3.select('.graph-header').node().scrollIntoView({
2122
behavior: 'smooth',
2223
})
2324

@@ -43,15 +44,16 @@ function selectRadarQuadrant(order, startAngle, name) {
4344
const translateYAll = (((1 + adjustY) / 2) * size * scale) / 2
4445

4546
const radarContainer = d3.select('#radar')
46-
const parentWidth = radarContainer.node().getBoundingClientRect().width
47+
const parentWidth = getElementWidth(radarContainer)
48+
4749
const translateLeftRightValues = {
4850
first: {
49-
left: parentWidth - graphConfig.effectiveQuadrantWidth * scale,
51+
left: parentWidth - quadrantWidth * scale,
5052
top: 0,
5153
right: 'unset',
5254
},
5355
second: {
54-
left: parentWidth - graphConfig.effectiveQuadrantWidth * scale,
56+
left: parentWidth - quadrantWidth * scale,
5557
top: 0,
5658
right: 'unset',
5759
},
@@ -70,30 +72,30 @@ function selectRadarQuadrant(order, startAngle, name) {
7072
svg
7173
.style(
7274
'left',
73-
window.innerWidth < 1280
74-
? `calc((100% - ${graphConfig.effectiveQuadrantWidth * scale}px) / 2)`
75+
window.innerWidth < uiConfig.tabletViewWidth
76+
? `calc((100% - ${quadrantWidth * scale}px) / 2)`
7577
: translateLeftRightValues[order].left + 'px',
7678
)
7779
.style('top', translateLeftRightValues[order].top + 'px')
7880
.style('right', translateLeftRightValues[order].right)
7981
.style('box-sizing', 'border-box')
8082

81-
if (window.innerWidth < 1280) {
83+
if (window.innerWidth < uiConfig.tabletViewWidth) {
8284
svg.style('margin', 'unset')
8385
}
8486

8587
svg
8688
.attr('transform', `scale(${scale})`)
8789
.style('transform-origin', `0 0`)
88-
.attr('width', graphConfig.effectiveQuadrantWidth)
89-
.attr('height', graphConfig.effectiveQuadrantHeight + graphConfig.quadrantsGap)
90+
.attr('width', quadrantWidth)
91+
.attr('height', quadrantHeight + quadrantsGap)
9092
svg.classed('quadrant-view', true)
9193

9294
const quadrantGroupTranslate = {
9395
first: { x: 0, y: 0 },
94-
second: { x: 0, y: -512 },
95-
third: { x: -544, y: 0 },
96-
fourth: { x: -544, y: -512 },
96+
second: { x: 0, y: -quadrantHeight },
97+
third: { x: -(quadrantWidth + quadrantsGap), y: 0 },
98+
fourth: { x: -(quadrantWidth + quadrantsGap), y: -quadrantHeight },
9799
}
98100

99101
d3.select('.quadrant-group-' + order)
@@ -134,7 +136,7 @@ function selectRadarQuadrant(order, startAngle, name) {
134136
d3.select('.radar-legends').classed('left-view', true)
135137
}
136138

137-
if (window.innerWidth < 1280) {
139+
if (window.innerWidth < uiConfig.tabletViewWidth) {
138140
d3.select('#radar').style('height', null)
139141
}
140142

@@ -148,13 +150,14 @@ function selectRadarQuadrant(order, startAngle, name) {
148150

149151
d3.selectAll('.blip-list__item-container__name').attr('aria-expanded', 'false')
150152

151-
if (window.innerWidth >= 1280) {
153+
if (window.innerWidth >= uiConfig.tabletViewWidth) {
152154
if (order === 'first' || order === 'second') {
153155
radarLegendsContainer.style(
154156
'left',
155-
`${parentWidth -
156-
getScaledQuadrantWidth(scale) +
157-
(getScaledQuadrantWidth(scale) / 2 - getElementWidth(radarLegendsContainer) / 2)
157+
`${
158+
parentWidth -
159+
getScaledQuadrantWidth(scale) +
160+
(getScaledQuadrantWidth(scale) / 2 - getElementWidth(radarLegendsContainer) / 2)
158161
}px`,
159162
)
160163
} else {
@@ -203,13 +206,13 @@ function renderRadarQuadrantName(quadrant, parentGroup) {
203206
ctaArrowXOffset = quadrantNameToDisplay.length * 11
204207
} else {
205208
anchor = 'end'
206-
translateX = graphConfig.quadrantWidth * 2 - 50
209+
translateX = effectiveQuadrantWidth * 2 - 50
207210
ctaArrowXOffset = 10
208211
}
209212
if (adjustY < 0) {
210213
translateY = 60
211214
} else {
212-
translateY = graphConfig.quadrantWidth * 2 - 60
215+
translateY = effectiveQuadrantWidth * 2 - 60
213216
}
214217

215218
const quadrantName = quadrantNameGroup.append('text')
@@ -232,16 +235,28 @@ function renderRadarQuadrants(size, svg, quadrant, rings, ringCalculator) {
232235
.on('click', selectRadarQuadrant.bind({}, quadrant.order, quadrant.startAngle, quadrant.quadrant.name()))
233236

234237
const rectCoordMap = {
235-
first: { x: 0, y: 0, strokeDashArray: '0,512,1024,512' },
236-
second: { x: 0, y: 544, strokeDashArray: '1024,1024' },
237-
third: { x: 544, y: 0, strokeDashArray: '0,1024,1024' },
238-
fourth: { x: 544, y: 544, strokeDashArray: '512,1024,512' },
238+
first: { x: 0, y: 0, strokeDashArray: `0, ${quadrantWidth}, ${quadrantHeight + quadrantWidth}, ${quadrantHeight}` },
239+
second: {
240+
x: 0,
241+
y: quadrantHeight + quadrantsGap,
242+
strokeDashArray: `${quadrantWidth + quadrantHeight}, ${quadrantWidth + quadrantHeight}`,
243+
},
244+
third: {
245+
x: quadrantWidth + quadrantsGap,
246+
y: 0,
247+
strokeDashArray: `0, ${quadrantWidth + quadrantHeight}, ${quadrantWidth + quadrantHeight}`,
248+
},
249+
fourth: {
250+
x: quadrantWidth + quadrantsGap,
251+
y: quadrantHeight + quadrantsGap,
252+
strokeDashArray: `${quadrantWidth}, ${quadrantWidth + quadrantHeight}, ${quadrantHeight}`,
253+
},
239254
}
240255

241256
quadrantGroup
242257
.append('rect')
243-
.attr('width', '512px')
244-
.attr('height', '512px')
258+
.attr('width', `${quadrantWidth}px`)
259+
.attr('height', `${quadrantHeight}px`)
245260
.attr('fill', '#edf1f3')
246261
.attr('x', rectCoordMap[quadrant.order].x)
247262
.attr('y', rectCoordMap[quadrant.order].y)
@@ -261,10 +276,11 @@ function renderRadarQuadrants(size, svg, quadrant, rings, ringCalculator) {
261276
.attr('class', 'ring-arc-' + ring.order())
262277
.attr('transform', 'translate(' + 528 + ', ' + 528 + ')')
263278
})
279+
264280
quadrantGroup
265281
.append('rect')
266-
.attr('width', '512px')
267-
.attr('height', '512px')
282+
.attr('width', `${quadrantWidth}px`)
283+
.attr('height', `${quadrantHeight}px`)
268284
.attr('fill', 'transparent')
269285
.attr('stroke', 'black')
270286
.attr('x', rectCoordMap[quadrant.order].x)
@@ -287,6 +303,7 @@ function renderRadarLegends(radarElement) {
287303
.attr('height', '37px')
288304
.attr('alt', 'new blip legend icon')
289305
.node().outerHTML
306+
290307
const noChangeImage = legendsContainer
291308
.append('img')
292309
.attr('src', '/images/no-change.svg')
@@ -341,16 +358,16 @@ function quadrantScrollHandler(
341358
radarElement.classed('sticky', true)
342359
radarLegendsContainer.classed('sticky', true)
343360

344-
if (window.scrollY + 60 + quadrantHeight >= quadrantTableOffset) {
361+
if (window.scrollY + uiConfig.subnavHeight + quadrantHeight >= quadrantTableOffset) {
345362
radarElement.classed('sticky', false)
346363
radarLegendsContainer.classed('sticky', false)
347364

348-
radarElement.style('top', `${quadrantTableHeight - quadrantHeight - 60}px`)
365+
radarElement.style('top', `${quadrantTableHeight - quadrantHeight - uiConfig.subnavHeight}px`)
349366
radarElement.style('left', prevLeft)
350367

351368
radarLegendsContainer.style(
352369
'top',
353-
`${quadrantTableHeight - quadrantHeight - 60 + getScaledQuadrantHeightWithGap(scale)}px`,
370+
`${quadrantTableHeight - quadrantHeight - uiConfig.subnavHeight + getScaledQuadrantHeightWithGap(scale)}px`,
354371
)
355372
radarLegendsContainer.style(
356373
'left',
@@ -361,19 +378,21 @@ function quadrantScrollHandler(
361378
radarElement.style('left', `${leftQuadrantLeftValue}px`)
362379
radarLegendsContainer.style(
363380
'left',
364-
`${leftQuadrantLeftValue + (getScaledQuadrantWidth(scale) / 2 - getElementWidth(radarLegendsContainer) / 2)
381+
`${
382+
leftQuadrantLeftValue + (getScaledQuadrantWidth(scale) / 2 - getElementWidth(radarLegendsContainer) / 2)
365383
}px`,
366384
)
367385
} else {
368386
radarElement.style('left', `${rightQuadrantLeftValue}px`)
369387
radarLegendsContainer.style(
370388
'left',
371-
`${rightQuadrantLeftValue + (getScaledQuadrantWidth(scale) / 2 - getElementWidth(radarLegendsContainer) / 2)
389+
`${
390+
rightQuadrantLeftValue + (getScaledQuadrantWidth(scale) / 2 - getElementWidth(radarLegendsContainer) / 2)
372391
}px`,
373392
)
374393
}
375394

376-
radarLegendsContainer.style('top', `${getScaledQuadrantHeightWithGap(scale) + 60}px`)
395+
radarLegendsContainer.style('top', `${getScaledQuadrantHeightWithGap(scale) + uiConfig.subnavHeight}px`)
377396
}
378397
} else {
379398
radarElement.style('top', prevTop)
@@ -397,13 +416,13 @@ function stickQuadrantOnScroll() {
397416
const selectedQuadrantTable = d3.select('.quadrant-table.selected')
398417
const radarLegendsContainer = d3.select('.radar-legends')
399418

400-
const radarHeight = graphConfig.effectiveQuadrantHeight * scale + graphConfig.quadrantsGap * scale
401-
const offset = radarContainer.node().offsetTop - 60
419+
const radarHeight = quadrantHeight * scale + quadrantsGap * scale
420+
const offset = radarContainer.node().offsetTop - uiConfig.subnavHeight
402421
const radarWidth = radarContainer.node().getBoundingClientRect().width
403422
const selectedOrder = radarElement.attr('data-quadrant-selected')
404423

405424
const leftQuadrantLeftValue =
406-
(window.innerWidth + radarWidth) / 2 - graphConfig.quadrantWidth * scale + (graphConfig.quadrantsGap / 2) * scale
425+
(window.innerWidth + radarWidth) / 2 - effectiveQuadrantWidth * scale + (quadrantsGap / 2) * scale
407426
const rightQuadrantLeftValue = (window.innerWidth - radarWidth) / 2
408427

409428
const quadrantHeight = radarHeight

0 commit comments

Comments
 (0)