fix: graph carousel buttons are now grid items

src/components/App.tsx

@@ -5,7 +5,7 @@ import {Button, Col, Row} from 'react-bootstrap';
 import * as T from './commonTypes';
 import {ShellFormsContainer} from './ShellForms';
 import {TargetFormsContainer} from './TargetForms';
-import AllCharts from './Charts';
+import AllCharts from './Charts/Charts';
 import {NavbarCustom} from './Navbar';
 import {SettingsBar} from './SettingsBar';
 

src/components/Charts/Charts.css

@@ -0,0 +1,5 @@
+.carousel-control{
+    display: grid !important;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); 
+    grid-gap: 0;
+}

src/components/Charts.tsx → src/components/Charts/Charts.tsx

@@ -5,8 +5,9 @@ import 'chartjs-plugin-annotation';
 import {Button, Collapse, Row, Col, Carousel, ToggleButtonGroup, ToggleButton, ButtonGroup} from 'react-bootstrap';
 import {Icon} from 'semantic-ui-react';
 
-import * as T from './commonTypes';
-import {DownloadButton, GeneralTooltip} from './UtilityComponents';
+import * as T from '../commonTypes';
+import {DownloadButton, GeneralTooltip} from '../UtilityComponents';
+import './Charts.css';
 
 // chartConfigs type
 interface chartDataOption{data: Record<string, any>, options: Record<string, any>}
@@ -126,17 +127,22 @@ class SubGroup extends React.Component<subGroupProps, {index: number}>{
     private handleSelect = (selectedIndex:number, e) => {
         this.setState({index: selectedIndex});
     }
-    private handleSelectButton = event => {
-        this.setState({index: parseInt(event.target.value)});
+    private handleSelectButton = value => {
+        this.setState({index: parseInt(value)});
     }
     private addButtons = () => {
         return (
             <ToggleButtonGroup toggle 
-                type="radio" name="radio" 
-                value={this.state.index}>
+                type="radio" name="radio" className="carousel-control"
+                value={this.state.index}
+                onChange={this.handleSelectButton}>
                 {this.props.config.map((config, i) => {
                     return(
-                    <ToggleButton key={i} value={i} type="radio" onChange={this.handleSelectButton}>
+                    <ToggleButton 
+                        key={i} 
+                        value={i} 
+                        type="radio"
+                        variant="secondary">
                         {config[singleChartIndex.name]}
                     </ToggleButton>
                     );
@@ -290,7 +296,7 @@ export class ChartGroup extends React.Component<chartGroupProps>{
         this.chartConfigs.post.forEach((chart, i) => {
             chart[singleChartIndex.name] = 'Horizontal Impact Angle ' + (i + 1);});
 
-        const initialJson = require('../static/initialData.json');
+        const initialJson = require('../../static/initialData.json');
         this.updateData(initialJson, false);
     }
 

src/components/commonTypes.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import {SingleChart} from './Charts';
+import {SingleChart} from './Charts/Charts';
 import {ShellFormsContainer} from './ShellForms';
 import {TargetFormsContainer} from './TargetForms';
 import {SettingsBar} from './SettingsBar';