Skip to content

Commit 5a472c7

Browse files
committed
added new logos, updated manifest and packageJSON, as well as bar graph comparison
1 parent d58bb63 commit 5a472c7

15 files changed

+76
-81
lines changed

assets/logos/blackWhiteSquareIcon.jpg

84.5 KB
Loading

assets/logos/blackWhiteSquareLogo.jpg

111 KB
Loading
5.76 KB
Loading
4.76 KB
Loading
5.46 KB
Loading
4.42 KB
Loading

assets/logos/whiteBlackSquareIcon.jpg

84.8 KB
Loading

assets/logos/whiteBlackSquareLogo.jpg

112 KB
Loading

src/app/components/StateRoute/PerformanceVisx/BarGraphComparison.tsx

Lines changed: 57 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,14 @@ import { useTheme } from '@mui/material/styles';
1818
import { Button, InputLabel } from '@mui/material';
1919
import { onHover, onHoverExit, deleteSeries, setCurrentTabInApp } from '../../../actions/actions';
2020
import { useStoreContext } from '../../../store';
21-
import { snapshot, TooltipData, Margin, BarGraphComparisonProps, ActionObj, Series } from '../../../FrontendTypes';
21+
import {
22+
snapshot,
23+
TooltipData,
24+
Margin,
25+
BarGraphComparisonProps,
26+
ActionObj,
27+
Series,
28+
} from '../../../FrontendTypes';
2229

2330
/* DEFAULTS */
2431
const margin: Margin = {
@@ -48,7 +55,7 @@ const BarGraphComparison = (props: BarGraphComparisonProps): JSX.Element => {
4855
comparison, // result from invoking 'allStorage' in 'PerformanceVisx'
4956
setSeries, // setter function to update the state located in 'PerfomanceVisx'
5057
series, // initialized as boolean, can be an object, from state set in 'PerformanceVisx'
51-
setAction // setter function to update the state located in 'PerfomanceVisx'
58+
setAction, // setter function to update the state located in 'PerfomanceVisx'
5259
} = props;
5360
const [snapshots] = useState(0); // creates a local state snapshots and sets it to a value of 0 (why is there no setter function? Also, why use state when it's only referenced once and never changed? 08/03/2023)
5461
const [open, setOpen] = useState(false); // creates a local state setOpen and sets it to false (why is there no setter function? 08/03/2023)
@@ -62,7 +69,7 @@ const BarGraphComparison = (props: BarGraphComparisonProps): JSX.Element => {
6269

6370
const currentIndex: number = tabs[currentTab].sliderIndex;
6471

65-
const {
72+
const {
6673
tooltipData, // value/data that tooltip may need to render
6774
tooltipLeft, // number used for tooltip positioning
6875
tooltipTop, // number used for tooltip positioning
@@ -92,7 +99,8 @@ const BarGraphComparison = (props: BarGraphComparisonProps): JSX.Element => {
9299
padding: 0.2,
93100
});
94101

95-
const calculateMaxTotalRender = (serie: number): number => { // This function will iterate through the snapshots of the series, and grab the highest render times (sum of all component times). We'll then use it in the renderingScale function and compare with the render time of the current tab. The max render time will determine the Y-axis's highest number.
102+
const calculateMaxTotalRender = (serie: number): number => {
103+
// This function will iterate through the snapshots of the series, and grab the highest render times (sum of all component times). We'll then use it in the renderingScale function and compare with the render time of the current tab. The max render time will determine the Y-axis's highest number.
96104
const currentSeriesBarStacks: ActionObj[] = !comparison[serie]
97105
? []
98106
: comparison[serie].data.barStack;
@@ -109,7 +117,8 @@ const BarGraphComparison = (props: BarGraphComparisonProps): JSX.Element => {
109117
return currentMax;
110118
};
111119

112-
const renderingScale = scaleLinear<number>({ // this function will use the domain array to assign each key a different color to make rectangle boxes and use range to set the color scheme each bar
120+
const renderingScale = scaleLinear<number>({
121+
// this function will use the domain array to assign each key a different color to make rectangle boxes and use range to set the color scheme each bar
113122
domain: [0, Math.max(calculateMaxTotalRender(series), data.maxTotalRender)], // [minY, maxY] the domain array on rendering scale will set the coordinates for Y-axis points.
114123
nice: true,
115124
});
@@ -126,37 +135,15 @@ const BarGraphComparison = (props: BarGraphComparisonProps): JSX.Element => {
126135
snapshotIdScale.rangeRound([0, xMax]);
127136
renderingScale.range([yMax, 0]);
128137

129-
const StyledFormControl = styled(FormControl)(({ theme }) => ({ // applies the theme style to the FormControl component
130-
margin: theme.spacing(1),
131-
minWidth: 160,
132-
height: 30,
133-
}));
134-
{
135-
/* StyledSelect to use for MUI select components to maintain consistent styling for all select components*/
136-
}
137-
const StyledSelect = styled(Select)({
138-
// applies the object to customize the style of the 'Select' component
139-
minWidth: 160,
140-
fontSize: '1.2rem',
141-
fontWeight: 200,
142-
height: 30,
143-
border: '1px solid #da262c',
144-
});
145-
146138
const handleSeriesChange = (event: Event) => {
147-
console.log('handleSeriesChangeTriggered');
148139
if (!event) {
149-
console.log('event not found, no change in series');
150140
return;
151141
}
152142
const target = event.target as HTMLInputElement;
153143
if (target) {
154-
console.log('handleSeriesChange setSeries target.value', target.value);
155144
setSeries(target.value);
156145
setAction(false);
157-
console.log('setSeries and setAction changed');
158146
}
159-
console.log('setSeries and setAction NOT changed');
160147
};
161148

162149
const handleClose = () => {
@@ -168,11 +155,9 @@ const BarGraphComparison = (props: BarGraphComparisonProps): JSX.Element => {
168155
};
169156

170157
const handleActionChange = (event: Event) => {
171-
console.log('handleActionChange Triggered THIS IS THE ONE WE WANT');
172158
const target = event.target as HTMLInputElement;
173159
if (!target.value) return;
174160
if (target) {
175-
console.log('handleActionChange setSeries target.value', target.value);
176161
setAction(target.value);
177162
setSeries(false);
178163
}
@@ -186,14 +171,15 @@ const BarGraphComparison = (props: BarGraphComparisonProps): JSX.Element => {
186171
setPicOpen(true);
187172
};
188173

189-
function setXpointsComparison() { // manually assigning X -axis points with tab ID.
174+
function setXpointsComparison() {
175+
// manually assigning X -axis points with tab ID.
190176
comparison[series].data.barStack.forEach((elem: ActionObj) => {
191177
elem.currentTab = 'comparison';
192178
});
193179
return comparison[series].data.barStack;
194180
}
195181

196-
function setXpointsCurrentTab() {
182+
function setXpointsCurrentTab() {
197183
data.barStack.forEach((element) => {
198184
element.currentTab = 'currentTab';
199185
});
@@ -234,37 +220,46 @@ const BarGraphComparison = (props: BarGraphComparisonProps): JSX.Element => {
234220
>
235221
{buttonLoad ? 'Deleted' : 'Clear Series'}
236222
</Button>
237-
{/* Mui 'Compare Series Dropdown Starts here */}
238-
<StyledFormControl // MUI styled 'FormControl' component
239-
variant='filled'
240-
>
223+
224+
<FormControl sx={{ m: 1, minWidth: 180 }} size='small'>
241225
<InputLabel
242226
id='simple-select-outlined-label'
243-
sx={{ fontSize: '1.2rem' }}
244-
style={{ color: 'white' }}
227+
sx={{ color: 'white', lineHeight: 1, fontWeight: 400 }}
245228
>
246229
Compare Series
247230
</InputLabel>
248-
<StyledSelect // MUI styled 'select' component
231+
<Select
232+
variant='filled'
249233
labelId='simple-select-outlined-label'
250234
id='simple-select-outlined-label'
251-
open={open}
235+
value={series}
236+
label='Compare Series'
252237
onClose={handleClose}
253238
onOpen={handleOpen}
254-
value={series} // added 8/3/2023
255239
onChange={handleSeriesChange}
240+
sx={{
241+
backgroundColor: '#53b6d5',
242+
color: 'white',
243+
height: 34,
244+
fontWeight: 400,
245+
pt: 0,
246+
pb: 0,
247+
}}
256248
>
257249
{!comparison.length ? (
258250
<MenuItem>No series available</MenuItem>
259251
) : (
260-
comparison.map((tabElem, index) => (
261-
<MenuItem key={`MenuItem${tabElem.name}`} value={index}>
262-
{tabElem.name}
263-
</MenuItem>
264-
))
252+
[
253+
<MenuItem>None</MenuItem>,
254+
...comparison.map((tabElem, index) => (
255+
<MenuItem key={`MenuItem${tabElem.name}`} value={index}>
256+
{tabElem.name}
257+
</MenuItem>
258+
)),
259+
]
265260
)}
266-
</StyledSelect>
267-
</StyledFormControl>
261+
</Select>
262+
</FormControl>
268263
{/* Mui 'Compare Series Dropdown ENDS here */}
269264

270265
{/*==============================================================================================================================*/}
@@ -327,8 +322,11 @@ const BarGraphComparison = (props: BarGraphComparisonProps): JSX.Element => {
327322
yScale={renderingScale} // takes in a value and maps it to an y axis position
328323
color={colorScale} // returns the desired color for a bar with a given key and index
329324
>
330-
{(barStacks) => // overides render function which is past the configured stack generator
331-
barStacks.map((barStack, idx) => { // Uses map method to iterate through all components, creating a rect component, from visx, for each iteration. height, width, etc are calculated by visx to set X and Y scale. The scaler will used the passed in function and will run it on the array thats outputted by data
325+
{(
326+
barStacks, // overides render function which is past the configured stack generator
327+
) =>
328+
barStacks.map((barStack, idx) => {
329+
// Uses map method to iterate through all components, creating a rect component, from visx, for each iteration. height, width, etc are calculated by visx to set X and Y scale. The scaler will used the passed in function and will run it on the array thats outputted by data
332330
const bar = barStack.bars[currentIndex];
333331
if (Number.isNaN(bar.bar[1]) || bar.height < 0) {
334332
bar.height = 0;
@@ -343,7 +341,8 @@ const BarGraphComparison = (props: BarGraphComparisonProps): JSX.Element => {
343341
fill={bar.color}
344342
/* TIP TOOL EVENT HANDLERS */
345343
// Hides tool tip once cursor moves off the current rect
346-
onMouseLeave={() => { // Hides tool tip once cursor moves off the current rect
344+
onMouseLeave={() => {
345+
// Hides tool tip once cursor moves off the current rect
347346
dispatch(
348347
onHoverExit(data.componentData[bar.key].rtid),
349348
(tooltipTimeout = window.setTimeout(() => {
@@ -352,7 +351,8 @@ const BarGraphComparison = (props: BarGraphComparisonProps): JSX.Element => {
352351
);
353352
}}
354353
// Cursor position in window updates position of the tool tip
355-
onMouseMove={(event) => { // Cursor position in window updates position of the tool tip
354+
onMouseMove={(event) => {
355+
// Cursor position in window updates position of the tool tip
356356
dispatch(onHover(data.componentData[bar.key].rtid));
357357
if (tooltipTimeout) clearTimeout(tooltipTimeout);
358358
const top = event.clientY - margin.top - bar.height;
@@ -377,7 +377,8 @@ const BarGraphComparison = (props: BarGraphComparisonProps): JSX.Element => {
377377
color={colorScale}
378378
>
379379
{(barStacks) =>
380-
barStacks.map((barStack, idx) => { // Uses map method to iterate through all components, creating a react component (from visx) for each iteration. height/width/etc. are calculated by visx.
380+
barStacks.map((barStack, idx) => {
381+
// Uses map method to iterate through all components, creating a react component (from visx) for each iteration. height/width/etc. are calculated by visx.
381382
if (!barStack.bars[currentIndex]) {
382383
return <h1>No Comparison</h1>;
383384
}
@@ -394,16 +395,17 @@ const BarGraphComparison = (props: BarGraphComparisonProps): JSX.Element => {
394395
width={bar.width}
395396
fill={bar.color}
396397
/* TIP TOOL EVENT HANDLERS */
397-
onMouseLeave={() => { // Hides tool tip once cursor moves off the current rect
398+
onMouseLeave={() => {
399+
// Hides tool tip once cursor moves off the current rect
398400
dispatch(
399401
onHoverExit(data.componentData[bar.key].rtid),
400402
(tooltipTimeout = window.setTimeout(() => {
401403
hideTooltip();
402404
}, 300)),
403405
);
404406
}}
405-
406-
onMouseMove={(event) => { // Cursor position in window updates position of the tool tip
407+
onMouseMove={(event) => {
408+
// Cursor position in window updates position of the tool tip
407409
dispatch(onHover(data.componentData[bar.key].rtid));
408410
if (tooltipTimeout) clearTimeout(tooltipTimeout);
409411
const top = event.clientY - margin.top - bar.height;
5.46 KB
Loading

0 commit comments

Comments
 (0)