reconfiguration of details canvas pages

regarding the #78 made the table ,column chart and piechart componants responsive
amosproj · Jun 6, 2021 · 05d6559 · 05d6559
1 parent e724b53
commit 05d6559
Show file tree

Hide file tree

Showing 6 changed files with 129 additions and 42 deletions.
diff --git a/frontend/src/components/details/ColumnChartComponent.jsx b/frontend/src/components/details/ColumnChartComponent.jsx
@@ -63,7 +63,21 @@ const ColumnChartComponent = () => {
                 //     fontSize: theme.typography.chartItemstitle.fontSize,
                 //     fontWeight: theme.typography.chartItemstitle.fontWeight
                 // }
-            }
+            },
+            responsive: [
+                {
+                  breakpoint: 300,
+                  options: {
+                    chart: {
+                      width: 500
+                    },
+                    legend: {
+                      position: "bottom"
+                    }
+                  }
+                }
+              ]
+
         }
     };
 
@@ -75,6 +89,7 @@ const ColumnChartComponent = () => {
                 type='bar'
                 color='green'
                 height={350}
+
             />
         </div>
     );

diff --git a/frontend/src/components/details/PieChartComponent.jsx b/frontend/src/components/details/PieChartComponent.jsx
@@ -64,7 +64,7 @@ const PieChartComponent = () => {
         },
         responsive: [
             {
-                breakpoint: 1300,
+                breakpoint: 2400,
                 options: {
                     chart: {
                         height: '300px'
@@ -78,7 +78,7 @@ const PieChartComponent = () => {
     };
 
     return (
-        <div className='ChartItems' style={{ width: '360px', height: '300px' }} id='chart'>
+        <div className='ChartItems' style={{ width: '%100', height: '300px' }} id='chart'>
             <ReactApexChart options={options} series={series} type='donut' />
         </div>
     );

diff --git a/frontend/src/components/details/ScenarioComponent.jsx b/frontend/src/components/details/ScenarioComponent.jsx
@@ -13,7 +13,7 @@ class ScenarioComponent extends Component {
         console.log(this.props);
 
         return (
-            <Container fluid={true} style={{ backgroundColor: 'white', padding: 0 }}>
+            <Container fluid={true} style={{ backgroundColor: 'white', padding: 0}} >
                 <NavbarComponent
                     loadComparePage={this.props.compareCanvas}
                     onCompareClick={this.props.onCompareClick}
@@ -22,16 +22,20 @@ class ScenarioComponent extends Component {
 
                 <h2 className='TextContent'>The chosen Model is {this.props.selectedProduct.modelName}</h2>
                 <SelectVariableComponent loadComparePage={this.props.loadComparePage} />
-                <Row>
-                    <Col xs={12} sm={12} md={12} lg={6}>
-                        <ColumnChart></ColumnChart>
+                <Row   style={{marginLeft:10}}>
+                    <Col xs={12} sm={12} md={12} lg={6}  className='CardsContainer'  >
+                        <ColumnChart/>
                     </Col>
-                    <Col xs={12} sm={12} md={12} lg={6}>
-                        <PieChart></PieChart>
+                    <Col lg={1}/>
+                    <Col xs={12} sm={12} md={12} lg={4} className='PieChartCardsContainer'>
+                        <PieChart/>
                     </Col>
                 </Row>
-                <Row>
-                    <Table></Table>
+                <Row style={{marginLeft:10,marginBottom:10}}>
+                    <Col xs={12} sm={12} md={12} lg={11} className='TableContainer' >
+                        <Table></Table>
+                    </Col>
+
                 </Row>
 
             </Container>

diff --git a/frontend/src/components/details/SelectVariableComponent.jsx b/frontend/src/components/details/SelectVariableComponent.jsx
@@ -57,23 +57,17 @@ class SelectVariableComponent extends Component {
                         <button className='w3-button w3-2018-sailor-blue'>
                             <div className='ButtonTitle'>{this.state.selectedVariable}</div>
                         </button>
-                        <div
-                            className='w3-dropdown-content w3-bar-block w3-border'
-                            style={{
-                                fontSize: theme.typography.buttontitle.fontSize,
-                                fontWeight: theme.typography.buttontitle.fontWeight,
-                                lineHeight: theme.typography.buttontitle.lineHeight,
-                                letterSpacing: theme.typography.buttonSendtitle.letterSpacing
-                            }}
-                        >
+                        <div className='w3-dropdown-content w3-bar-block w3-border'>
                             {this.state.variables.map((item) => (
-                                <button
-                                    onClick={() => this.onDropDownItemSelectedHandler(item.name)}
-                                    className='w3-bar-item w3-button'
-                                    key={item.id}
-                                >
-                                    {item.name}
-                                </button>
+                                <div className='ButtonTitle'>
+                                    <button 
+                                        onClick={() => this.onDropDownItemSelectedHandler(item.name)}
+                                        className='w3-bar-item w3-button'
+                                        key={item.id}
+                                    >
+                                        {item.name}
+                                    </button>
+                                </div>
                             ))}
                         </div>
                     </div>

diff --git a/frontend/src/components/details/TableComponent.jsx b/frontend/src/components/details/TableComponent.jsx
@@ -89,20 +89,10 @@ class TableComponent extends Component {
             // TODO:left margin value needed to be fixed
             <Container fluid={true} style={{ padding: 0 }}>
                 {/* TODO: dynamic display of product and model */}
-                <h5
-                    style={{
-                        fontSize: theme.typography.smallSubtitle.fontSize,
-                        fontWeight: theme.typography.smallSubtitle.fontWeight
-                    }}
-                >
+                <h5 className='TableTitle'>
                     Large Power Transformer
                 </h5>
-                <h6
-                    style={{
-                        fontSize: theme.typography.secondSmallSubtitle.fontSize,
-                        fontWeight: theme.typography.secondSmallSubtitle.fontWeight
-                    }}
-                >
+                <h6 className='TableSubTitle'>
                     3 Phase GSU transformer
                 </h6>
 

diff --git a/frontend/src/index.css b/frontend/src/index.css
@@ -124,7 +124,7 @@ body {
     font-size: 24px;
     line-height: 16px;
     letter-spacing: 0.5px;
-    margin-left: 40px;
+    margin-left: 30px;
     color: #00b300;
 }
 /* Reconfiguration of  the icon style on the header bar */
@@ -168,7 +168,7 @@ body {
     font-weight: bold;
     font-size: 22px;
     letter-spacing: 0.5px;
-    margin-left: 0px;
+    margin-left:15px;
     color: #000000;
     margin-bottom:10px;
 }
@@ -182,6 +182,7 @@ body {
     letter-spacing: 0.5px;
     color: #000000;
     margin-top:25px;
+    margin-left:15px;
 
 }
 /* Reconfiguration of the title style on chart  */
@@ -194,12 +195,62 @@ body {
     color: #000000;
 }
 
+.ColumnChartItems {
+    font-family: inherit;
+    font-style: normal;
+    font-weight: normal;
+    font-size: 6px;
+    margin-left: 0;
+    color: #000000;
+    margin-top:10px;
+    margin-bottom: 10px;
+}
 .ChartItems {
     font-family: inherit;
     font-style: normal;
     font-weight: normal;
-    font-size: 8px;
+    font-size: 6px;
+    margin-left: 0;
+    color: #000000;
+    margin-top:10px;
+    margin-bottom: 10px;
+}
+.TableTitle {
+    font-family: inherit;
+    font-style: normal;
+    font-weight: bold;
+    font-size: 22px;
+    letter-spacing: 0.5px;
+    color: #000000;
+    margin-bottom:10px;
+}
+
+.TableSubTitle {
+    font-family: inherit;
+    font-style: normal;
+    font-weight: normal;
+    font-size: 18px;
+    letter-spacing: 0.5px;
     color: #000000;
+    margin-bottom:10px;
+
+}
+
+.TableContainer{
+
+    background-color: #FFFFFF;
+    border:2px solid #00b300;
+    border-color: #00b300;
+    border-radius: 4px;
+    cursor: 'pointer';
+    /* min-width: 500px;
+    max-width: 500px; */
+    margin-left: 10px;
+    margin-right:10px;
+    margin-bottom: 5px;
+    margin-top:5px;
+    min-height: 600px;
+    max-height: 600px;
 }
 
 /* Reconfiguration of the text style on details pages */
@@ -231,6 +282,39 @@ body {
     color: #000000;
 }
 
+.CardsContainer {
+
+    background-color: #FFFFFF;
+    border:2px solid #00b300;
+    border-color: #00b300;
+    border-radius: 4px;
+    cursor: 'pointer';
+    min-width: 360;
+    max-width: 450;
+    min-height: 400px;
+
+}
+
+.PieChartCardsContainer {
+
+    background-color: #FFFFFF;
+    border:2px solid #00b300;
+    border-color: #00b300;
+    border-radius: 4px;
+    cursor: 'pointer';
+    min-width: 300;
+    max-width: 360;
+}
+.miniCardContainer {
+    display: inline-block;
+    margin-right: 30;
+    margin-Left:0;
+    background-color: #FFFFFF;
+
+}
+
+
+
 .Separator {
     border-left: '1px';
     /* margin-left: 40;