From 3a89720910934c225a500e587778892c5a03d2f7 Mon Sep 17 00:00:00 2001
From: jwc780 <chengwjin32666@gmail.com>
Date: Mon, 13 Jul 2020 20:04:40 -0400
Subject: [PATCH] fix: graph carousel buttons are now grid items

---
 src/components/App.tsx                 |  2 +-
 src/components/Charts/Charts.css       |  5 +++++
 src/components/{ => Charts}/Charts.tsx | 22 ++++++++++++++--------
 src/components/commonTypes.tsx         |  2 +-
 4 files changed, 21 insertions(+), 10 deletions(-)
 create mode 100644 src/components/Charts/Charts.css
 rename src/components/{ => Charts}/Charts.tsx (97%)

diff --git a/src/components/App.tsx b/src/components/App.tsx
index 0b8b6a4..ad6c514 100644
--- a/src/components/App.tsx
+++ b/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';
 
diff --git a/src/components/Charts/Charts.css b/src/components/Charts/Charts.css
new file mode 100644
index 0000000..998fceb
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/src/components/Charts.tsx b/src/components/Charts/Charts.tsx
similarity index 97%
rename from src/components/Charts.tsx
rename to src/components/Charts/Charts.tsx
index f83ce8f..756062c 100644
--- a/src/components/Charts.tsx
+++ b/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);
     }
 
diff --git a/src/components/commonTypes.tsx b/src/components/commonTypes.tsx
index 817843e..ca87567 100644
--- a/src/components/commonTypes.tsx
+++ b/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';