Skip to content

Commit a11aec9

Browse files
dgill05dgill05
committed
action container conflict resolve
2 parents c5c40e2 + 81eb6ea commit a11aec9

File tree

7 files changed

+260
-147
lines changed

7 files changed

+260
-147
lines changed

‎src/app/actions/actions.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
22
import * as types from '../constants/actionTypes';
33

4-
export const save = (tabsObj) => ({
4+
export const save = (newSeries, newSeriesName) => ({
55
type: types.SAVE,
6-
payload: tabsObj,
6+
payload: { newSeries, newSeriesName },
77
});
88
export const deleteSeries = () => ({
99
type: types.DELETE_SERIES,

‎src/app/components/Action.tsx

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -103,23 +103,23 @@ const Action = (props: ActionProps): JSX.Element => {
103103
className={
104104
selected || last ? 'action-component selected' : 'action-component'
105105
}
106-
onClick={() => {
107-
dispatch(changeView(index));
108-
}}
109-
role="presentation"
110-
style={index > sliderIndex ? { color: '#5f6369' } : {}}
111-
tabIndex={index}
112-
>
113-
<ReactHover options={optionsCursorTrueWithMargin}>
114-
<Trigger type="trigger">
115-
<div className="action-component-trigger" style={index > sliderIndex ? { color: '#5f6369' } : {}}>
116-
<div className="action-component-text">
117-
{`${displayName}: ${componentName !== 'nameless' ? componentName : ''} `}
118-
</div>
119-
<button className="time-button" type="button">
120-
{displayTime}
121-
</button>
122-
{
106+
onClick={() => {
107+
dispatch(changeView(index));
108+
}}
109+
role="presentation"
110+
style={index > sliderIndex ? { color: '#5f6369' } : {}}
111+
tabIndex={index}
112+
>
113+
<ReactHover options={optionsCursorTrueWithMargin}>
114+
<Trigger type="trigger">
115+
<div className="action-component-trigger" style={index > sliderIndex ? { color: '#5f6369' } : {}}>
116+
<div className="action-component-text">
117+
<input key={`ActionInput${displayName}`} type="text" className="actionname" placeholder={`${displayName}: ${componentName !== 'nameless' ? componentName : ''} `} />
118+
</div>
119+
<button className="time-button" type="button">
120+
{displayTime}
121+
</button>
122+
{
123123
isCurrIndex ? (
124124
<button
125125
className="current-location"

‎src/app/components/BarGraph.tsx

Lines changed: 23 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
// @ts-nocheck
2-
import React, { useEffect } from 'react';
2+
import React, { useEffect, useRef } from 'react';
33
import { BarStack } from '@visx/shape';
44
import { SeriesPoint } from '@visx/shape/lib/types';
55
import { Group } from '@visx/group';
@@ -109,12 +109,11 @@ const BarGraph = props => {
109109
title: tabs[currentTab].title,
110110
data,
111111
};
112-
113112
// use this to animate the save series button. It
114113
useEffect(() => {
115114
const saveButtons = document.getElementsByClassName('save-series-button');
116115
for (let i = 0; i < saveButtons.length; i++) {
117-
if (tabs[currentTab].seriesSavedStatus) {
116+
if (tabs[currentTab].seriesSavedStatus === 'saved') {
118117
saveButtons[i].classList.add('animate');
119118
saveButtons[i].innerHTML = 'Saved!';
120119
} else {
@@ -123,13 +122,31 @@ const BarGraph = props => {
123122
}
124123
}
125124
});
125+
126+
const saveSeriesClickHandler = () => {
127+
const seriesName = document.getElementById('seriesname').value;
128+
const actionNames = document.getElementsByClassName('actionname');
129+
console.log("action names", actionNames);
130+
// const testname = document.getElementsByClassName('actionname').value
131+
// console.log(testname)
132+
for (let i = 0; i < actionNames.length; i++ ) {
133+
toStorage.data.barStack[i].name = actionNames[i].value;
134+
}
135+
// displayName: ${componentName !== 'nameless' ? componentName :
136+
137+
138+
dispatch(save(toStorage, seriesName));
139+
}
140+
141+
// const textbox = tabs[currentTab].seriesSavedStatus === 'inputBoxOpen' ? <input type="text" className="seriesname" placeholder="Series Name" /> : null
142+
126143
return (
127144
<div className="bargraph-position">
145+
<input type="text" id ="seriesname" placeholder="Series Name" />
128146
<button
147+
type="button"
129148
className="save-series-button"
130-
onClick={e => {
131-
dispatch(save(toStorage));
132-
}}
149+
onClick={saveSeriesClickHandler}
133150
>
134151
Save Series
135152
</button>

‎src/app/components/BarGraphComparison.tsx

Lines changed: 35 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,8 @@ const BarGraphComparison = props => {
7979
const [maxRender, setMaxRender] = React.useState(data.maxTotalRender);
8080

8181
function titleFilter(comparisonArray) {
82+
// const comparisonArrayModded = comparisonArray[0];
83+
console.log('titleFilter', comparisonArray);
8284
return comparisonArray.filter(
8385
elem => elem.title.split('-')[1] === tabs[currentTab].title.split('-')[1],
8486
);
@@ -119,6 +121,9 @@ const BarGraphComparison = props => {
119121
// with the render time of the current tab.
120122
// The max render time will determine the Y-axis's highest number.
121123
const calculateMaxTotalRender = series => {
124+
console.log(comparison)
125+
console.log(series)
126+
// let currentMax = 5
122127
const currentSeriesBarStacks = !comparison[series]
123128
? []
124129
: comparison[series].data.barStack;
@@ -206,6 +211,9 @@ const BarGraphComparison = props => {
206211
elem.currentTab = 'comparison';
207212
});
208213
// comparison[series].data.barStack.currentTab = currentTab;
214+
console.log(comparison)
215+
console.log(series)
216+
console.log(comparison[series].data.barStack)
209217
return comparison[series].data.barStack;
210218
}
211219
function setXpointsCurrentTab() {
@@ -227,6 +235,17 @@ const BarGraphComparison = props => {
227235
for (let i = 0; i < classname.length; i++) {
228236
classname[i].addEventListener('click', animateButton, false);
229237
}
238+
const seriesList = comparison.map(elem => elem.data.barStack);
239+
const actionsList = seriesList.flat();
240+
const testList = actionsList.map(elem => elem.name);
241+
242+
const finalList = [];
243+
for (let i = 0; i < testList.length; i++) {
244+
if (testList[i] !== "") finalList.push(testList[i]);
245+
}
246+
console.log('Final List', finalList)
247+
// )
248+
230249
return (
231250
<div>
232251
<div className="series-options-container">
@@ -240,7 +259,7 @@ const BarGraphComparison = props => {
240259
>
241260
Clear All Series
242261
</button>
243-
<h4 style={{ padding: '0 1rem' }}>Comparison Series: </h4>
262+
<h4 style={{ padding: '0 1rem' }}>Compare Series: </h4>
244263
<FormControl variant="outlined" className={classes.formControl}>
245264
<Select
246265
style={{ color: 'white' }}
@@ -256,13 +275,16 @@ const BarGraphComparison = props => {
256275
{!comparison[series] ? (
257276
<MenuItem>No series available</MenuItem>
258277
) : (
259-
titleFilter(comparison).map((tabElem, index) => (
260-
<MenuItem value={index}>{`Series ${index + 1}`}</MenuItem>
278+
// titleFilter(comparison).map((tabElem, index) => (
279+
// <MenuItem value={index}>{`Series ${index + 1}`}</MenuItem>
280+
// ))
281+
comparison.map((tabElem, index) => (
282+
<MenuItem value={index}>{tabElem.name}</MenuItem>
261283
))
262284
)}
263285
</Select>
264286
</FormControl>
265-
{/* <h4 style={{ padding: '0 1rem' }}>Comparator Snapshot? </h4>
287+
<h4 style={{ padding: '0 1rem' }}>Compare Actions </h4>
266288
<FormControl variant="outlined" className={classes.formControl}>
267289
<Select
268290
style={{ color: 'white' }}
@@ -278,14 +300,13 @@ const BarGraphComparison = props => {
278300
{!comparison[snapshots] ? (
279301
<MenuItem>No snapshots available</MenuItem>
280302
) : (
281-
titleFilter(comparison).map((tabElem, index) => {
282-
return (
283-
<MenuItem value={index}>{`${index + 1}`}</MenuItem>
284-
);
285-
})
286-
)}
303+
// finalList.map((elem, index) => (
304+
// <MenuItem value={index}>{elem}</MenuItem>
305+
<MenuItem value="test">Testing</MenuItem>
306+
)
307+
}
287308
</Select>
288-
</FormControl> */}
309+
</FormControl>
289310
</div>
290311
</div>
291312

@@ -324,7 +345,7 @@ const BarGraphComparison = props => {
324345
// Uses map method to iterate through all components,
325346
// creating a rect component (from visx) for each iteration.
326347
// height/width/etc. are calculated by visx.
327-
// to set X and Y scale, it will used the passed in function and
348+
// to set X and Y scale, it will used the p`assed in function and
328349
// will run it on the array thats outputted by data
329350
const bar = barStack.bars[currentIndex];
330351
if (Number.isNaN(bar.bar[1]) || bar.height < 0) {
@@ -368,6 +389,8 @@ const BarGraphComparison = props => {
368389
// Comparison Barstack (populates based on series selected)
369390
// to set X and Y scale, it will used the passed in function and
370391
// will run it on the array thats outputted by data
392+
// setXpointsComparison()}
393+
// comparison[series].data.barStack
371394
data={!comparison[series] ? [] : setXpointsComparison()}
372395
keys={keys}
373396
x={getCurrentTab}

0 commit comments

Comments
 (0)