11// @ts -nocheck
2- import React , { useEffect , useForceUpdate } from 'react' ;
2+ import React from 'react' ;
33import { BarStack } from '@visx/shape' ;
44import { SeriesPoint } from '@visx/shape/lib/types' ;
55import { Group } from '@visx/group' ;
@@ -8,15 +8,11 @@ import { AxisBottom, AxisLeft } from '@visx/axis';
88import { scaleBand , scaleLinear , scaleOrdinal } from '@visx/scale' ;
99import { useTooltip , useTooltipInPortal , defaultStyles } from '@visx/tooltip' ;
1010import { Text } from '@visx/text' ;
11-
1211import { schemeSet3 } from 'd3-scale-chromatic' ;
1312import { makeStyles } from '@material-ui/core/styles' ;
1413import Select from '@material-ui/core/Select' ;
15- import InputLabel from '@material-ui/core/InputLabel' ;
1614import MenuItem from '@material-ui/core/MenuItem' ;
1715import FormControl from '@material-ui/core/FormControl' ;
18- import FormHelperText from '@material-ui/core/FormHelperText' ;
19- import snapshots from './snapshots' ;
2016import { onHover , onHoverExit } from '../actions/actions' ;
2117import { useStoreContext } from '../store' ;
2218import { deleteSeries } from '../actions/actions' ;
@@ -105,15 +101,17 @@ const BarGraphComparison = (props) => {
105101 const formatRenderTime = ( time ) => `${ time } ;
106102 const getCurrentTab = ( storedSeries ) => storedSeries . currentTab ;
107103 // create visualization SCALES with cleaned data
108- //const xAxisPoints = [...titleFilter(comparison).map(getTabID), currentTab];
109- //the domain array elements will place the bars along the x-axis
110- const xAxisPoints = [ 'currentTab' , 'comparison' ] ; //[1.0.,2.0]
111- //{ currentTab : 1 }, {currentTab : 2 }
104+ // the domain array/xAxisPoints elements will place the bars along the x-axis
105+ const xAxisPoints = [ 'currentTab' , 'comparison' ] ;
112106 const snapshotIdScale = scaleBand < string > ( {
113107 domain : xAxisPoints ,
114108 padding : 0.2 ,
115109 } ) ;
116- // calculateMax
110+ // This function will iterate through the snapshots of the series,
111+ // and grab the highest render times (sum of all component times).
112+ // We'll then use it in the renderingScale function and compare
113+ // with the render time of the current tab.
114+ // The max render time will determine the Y-axis's highest number.
117115 const calculateMaxTotalRender = ( series ) => {
118116 const currentSeriesBarStacks = ! comparison [ series ]
119117 ? [ ]
@@ -128,11 +126,13 @@ const BarGraphComparison = (props) => {
128126 return currentMax ;
129127 } ;
130128
129+ // the domain array on rendering scale will set the coordinates for Y-aix points.
131130 const renderingScale = scaleLinear < number > ( {
132131 domain : [ 0 , Math . max ( calculateMaxTotalRender ( series ) , data . maxTotalRender ) ] ,
133132 nice : true ,
134133 } ) ;
135-
134+ // the domain array will assign each key(component on test app) a different color
135+ // and use range to set the color scheme each bar
136136 const colorScale = scaleOrdinal < string > ( {
137137 domain : keys ,
138138 range : schemeSet3 ,
@@ -144,7 +144,7 @@ const BarGraphComparison = (props) => {
144144 snapshotIdScale . rangeRound ( [ 0 , xMax ] ) ;
145145 renderingScale . range ( [ yMax , 0 ] ) ;
146146
147- // Dropdown to select series.
147+ // useStyles will change the styling on save series dropdown feature
148148 const useStyles = makeStyles ( ( theme ) => ( {
149149 formControl : {
150150 margin : theme . spacing ( 1 ) ,
@@ -198,37 +198,37 @@ const BarGraphComparison = (props) => {
198198 e . target . classList . add ( 'animate' ) ;
199199 e . target . innerHTML = 'Deleted!' ;
200200 setTimeout ( function ( ) {
201- e . target . innerHTML = 'Clear Series' ;
201+ e . target . innerHTML = 'Clear All Series' ;
202202 e . target . classList . remove ( 'animate' ) ;
203203 } , 1000 ) ;
204204 } ;
205205 const classname = document . getElementsByClassName ( 'delete-button' ) ;
206206 for ( let i = 0 ; i < classname . length ; i ++ ) {
207207 classname [ i ] . addEventListener ( 'click' , animateButton , false ) ;
208208 }
209- //console.log('set x on current bar', setXpointsCurrentTab());
210209 return (
211210 < div >
212- < div className = ' series-options-container' >
213- < div className = ' snapshotId-header' >
211+ < div className = " series-options-container" >
212+ < div className = " snapshotId-header" >
214213 { ' ' }
215214 Snapshot ID: { currentIndex + 1 } { ' ' }
216215 </ div >
217216
218- < div className = ' dropdown-and-delete-series-container' >
217+ < div className = " dropdown-and-delete-series-container" >
219218 < button
220- className = ' delete-button'
219+ className = " delete-button"
221220 onClick = { ( e ) => {
222221 dispatch ( deleteSeries ( ) ) ;
223222 } }
224223 >
225224 Clear All Series
226225 </ button >
227- < FormControl variant = 'outlined' className = { classes . formControl } >
226+ < h4 style = { { padding : '0 1rem' } } > Compare with: </ h4 >
227+ < FormControl variant = "outlined" className = { classes . formControl } >
228228 < Select
229229 style = { { color : 'white' } }
230- labelId = ' simple-select-outlined-label'
231- id = ' simple-select-outlined'
230+ labelId = " simple-select-outlined-label"
231+ id = " simple-select-outlined"
232232 className = { classes . select }
233233 open = { open }
234234 onClose = { handleClose }
@@ -267,13 +267,13 @@ const BarGraphComparison = (props) => {
267267 yScale = { renderingScale }
268268 width = { xMax }
269269 height = { yMax }
270- stroke = ' black'
270+ stroke = " black"
271271 strokeOpacity = { 0.1 }
272272 xOffset = { snapshotIdScale . bandwidth ( ) / 2 }
273273 />
274274 < Group top = { margin . top } left = { margin . left } >
275275 < BarStack
276- // OG Barstack
276+ // Current Tab bar stack.
277277 data = { setXpointsCurrentTab ( ) }
278278 keys = { keys }
279279 x = { getCurrentTab }
@@ -283,6 +283,11 @@ const BarGraphComparison = (props) => {
283283 >
284284 { ( barStacks ) =>
285285 barStacks . map ( ( barStack , idx ) => {
286+ // Uses map method to iterate through all components,
287+ // creating a rect component (from visx) for each iteration.
288+ // height/width/etc. are calculated by visx.
289+ // to set X and Y scale, it will used the passed in function and
290+ // will run it on the array thats outputted by data
286291 const bar = barStack . bars [ currentIndex ] ;
287292 if ( Number . isNaN ( bar . bar [ 1 ] ) || bar . height < 0 ) {
288293 bar . height = 0 ;
@@ -323,7 +328,9 @@ const BarGraphComparison = (props) => {
323328 }
324329 </ BarStack >
325330 < BarStack
326- // Comparison Barstack
331+ // Comparison Barstack (populates based on series selected)
332+ //to set X and Y scale, it will used the passed in function and
333+ // will run it on the array thats outputted by data
327334 data = { ! comparison [ series ] ? [ ] : setXpointsComparison ( ) }
328335 keys = { keys }
329336 x = { getCurrentTab }
@@ -333,6 +340,9 @@ const BarGraphComparison = (props) => {
333340 >
334341 { ( barStacks ) =>
335342 barStacks . map ( ( barStack , idx ) => {
343+ // Uses map method to iterate through all components,
344+ // creating a rect component (from visx) for each iteration.
345+ // height/width/etc. are calculated by visx.
336346 if ( ! barStack . bars [ currentIndex ] ) {
337347 return < h1 > No Comparison</ h1 > ;
338348 }
@@ -405,14 +415,14 @@ const BarGraphComparison = (props) => {
405415 />
406416 < Text
407417 x = { - xMax / 2 }
408- y = '15'
409- transform = ' rotate(-90)'
418+ y = "15"
419+ transform = " rotate(-90)"
410420 fontSize = { 12 }
411- fill = ' #FFFFFF'
421+ fill = " #FFFFFF"
412422 >
413423 Rendering Time (ms)
414424 </ Text >
415- < Text x = { xMax / 2 } y = { yMax + 65 } fontSize = { 12 } fill = ' #FFFFFF' >
425+ < Text x = { xMax / 2 } y = { yMax + 65 } fontSize = { 12 } fill = " #FFFFFF" >
416426 Series ID
417427 </ Text >
418428 </ svg >
0 commit comments