reconfiguration of mydashboardpage and detailspage

regaring the #137
amosproj · Jul 4, 2021 · 71581d1 · 71581d1
1 parent 6ef3eec
commit 71581d1
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 36 deletions.
diff --git a/frontend/src/components/details/ColumnChartComponent.jsx b/frontend/src/components/details/ColumnChartComponent.jsx
@@ -24,7 +24,7 @@ const ColumnChartComponent = () => {
 
         plotOptions: {
             bar: {
-                columnWidth: '70%',
+                columnWidth: '75%',
                 BorderRadius: 10,
                 dataLabels: {
                     position: 'top' // top, center, bottom
@@ -42,7 +42,7 @@ const ColumnChartComponent = () => {
             },
             offsetY: -20,
             style: {
-                fontSize: '12px',
+                fontSize: '10px',
                 colors: ['#21cc82']
             }
         },
@@ -63,15 +63,15 @@ const ColumnChartComponent = () => {
             labels: {
                 rotate: -90,
                 style: {
-                    fontSize: 10
+                    fontSize: 6.8,
                 }
             },
             responsive: [
                 {
                     breakpoint: 6400,
                     options: {
                         chart: {
-                            width: 500
+                            width: 600
                         },
                         legend: {
                             position: 'bottom'

diff --git a/frontend/src/components/details/PieChartComponent.jsx b/frontend/src/components/details/PieChartComponent.jsx
@@ -45,7 +45,7 @@ const PieChartComponent = () => {
                 breakpoint: 6400,
                 options: {
                     chart: {
-                        heigt: 'auto'
+                        height: 'auto'
                     },
                     legend: {
                         position: 'bottom'
@@ -54,10 +54,9 @@ const PieChartComponent = () => {
             }
         ]
     };
-    //lassName='ChartItems' cause PieChart to overlap: needs to be fixed in charts_tables.css
-    // works fine if className is taken out
+
     return (
-        <div className='ChartItems' id='chart'>
+        <div  id='chart'>
             <ReactApexChart options={options} series={series} type='donut' />
         </div>
     );

diff --git a/frontend/src/components/details/charts_tables.css b/frontend/src/components/details/charts_tables.css
@@ -32,6 +32,7 @@
     margin-bottom: 10px;
     width: 100%;
     height: 300px;
+    padding-bottom:10px;
 }
 
 /* Column Chart */
@@ -43,9 +44,10 @@
     cursor: 'pointer';
     min-width: 360;
     max-width: 450;
-    min-height: 500px;
+    min-height: 600px;
     max-height: 600px;
-    margin-top: 10px;
+    margin-top: 25px;
+    margin-bottom:50px;
 }
 
 .PieChartCardsContainer {

diff --git a/frontend/src/components/mydashboard/MydashboardItemComponent.js b/frontend/src/components/mydashboard/MydashboardItemComponent.js
@@ -83,14 +83,7 @@ function MydashboardItemComponent() {
     const theme = useTheme();
     const classes = useStyles({ theme });
 
-    // function renderLegend(color, title) {
-    //     return (
-    //         <Row vertical='center'>
-    //             <div style={{ width: 16, border: '2px solid', borderColor: color }}></div>
-    //             <span className={classes.legendTitle}>{title}</span>
-    //         </Row>
-    //     );
-    // }
+
 
     function renderMiniCards(title, value) {
         return (
@@ -114,7 +107,7 @@ function MydashboardItemComponent() {
         );
     }
 
-    function renderStat(title, value) {
+    function renderCards(title, value) {
         return (
             <Column
                 flexGrow={1}
@@ -150,20 +143,20 @@ function MydashboardItemComponent() {
                 <Col xs={8} sm={2} md={2} lg={1.32} style={{padding:0}}  />
                 <Col xs={8} sm={8} md={8} lg={2} className='MyMiniCardsContainer'>
                     <div className='dashboardTitle w3-padding-24 w3-margin-left'>
-                    {renderMiniCards('Air Quality Results', '50%')}
+                    {renderMiniCards('Opened projects', '4')}
                     </div>
                 </Col>
                 <Col xs={2} sm={2} md={2} lg={1.32} style={{padding:0}}  />
 
                 <Col xs={8} sm={8} md={8} lg={2} className='MyMiniCardsContainer'>
                     <div className='dashboardTitle w3-padding-24 w3-margin-left'>
-                    {renderMiniCards('Air Quality Results', '90%')}
+                    {renderMiniCards('Recently opened', '2')}
                     </div>
                 </Col>
                 <Col xs={2} sm={2} md={2} lg={1.32} style={{padding:0}}  />
                 <Col xs={8} sm={8} md={8} lg={2} className='MyMiniCardsContainer'>
                     <div className='dashboardTitle w3-padding-24 w3-margin-left'>
-                        {renderMiniCards('Air Quality Results', '30%')}
+                        {renderMiniCards('Closed projects', '1')}
                     </div>
                 </Col>
             </Row>
@@ -198,15 +191,13 @@ function MydashboardItemComponent() {
                         <span>Favorites</span>
                     </div>
 
-                    {renderStat('Fav Project 1', 'Transmission')}
-                    {renderStat('Fav Project 2', 'Generation')}
-                    {renderStat('Fav Project 3', 'Industrial App')}
-                    {renderStat('Fav Project 1', 'Transmission')}
-                    {renderStat('Fav Project 2', 'Generation')}
-                    {renderStat('Fav Project 3', 'Industrial App')}
-                    {renderStat('Fav Project 1', 'Transmission')}
-                    {renderStat('Fav Project 2', 'Generation')}
-                    {renderStat('Fav Project 3', 'Industrial App')}
+                    {renderCards('Fav Project 1', 'Transmission')}
+                    {renderCards('Fav Project 2', 'Generation')}
+                    {renderCards('Fav Project 3', 'Industrial App')}
+                    {renderCards('Fav Project 1', 'Transmission')}
+                    {renderCards('Fav Project 2', 'Generation')}
+                    {renderCards('Fav Project 3', 'Industrial App')}
+
                 </Col>
                 <Col xs={2} sm={2} md={2} lg={1} style={{padding:0,maxWidth:'1.5%'}}  />
                 <Col xs={8} sm={8} md={8} lg={3.5} className='MyCardsContainer'>
@@ -227,12 +218,12 @@ function MydashboardItemComponent() {
                                 <p>Question1 answer</p>
                             </div>
                         </Collapsible>
-                        <Collapsible trigger='Question 2: how many catagories do we have?'>
+                        <Collapsible trigger='Question 2: how to export results into pdf?'>
                             <div className=' w3-card'>
                                 <p>Question 2 answer</p>
                             </div>
                         </Collapsible>
-                        <Collapsible trigger='Question 3: how many catagories do we have?'>
+                        <Collapsible trigger='Question 3: where to find my fav projects ?'>
                             <div className=' w3-card'>
                                 <p>Question 3 answer</p>
                             </div>
@@ -242,14 +233,14 @@ function MydashboardItemComponent() {
             </Row>
             <Row horizontal='space-between' style={{ padding: 0, margin: 0 }}  breakpoints={{ 1024: 'column' }}>
 
-                <Col xs={8} sm={8} md={8} lg={4} className='MyCardsContainer'>
+                <Col xs={8} sm={8} md={8} lg={4} className='MyChartCardsContainer'>
                     <div className='dashboardTitle'>
                         <span>My charts</span>
                     </div>
                     <PieChartComponent />
                 </Col>
                 <Col xs={2} sm={2} md={2} lg={1} style={{padding:0,maxWidth:'1.5%'}}/>
-                <Col xs={8} sm={8} md={8} lg={4} className='MyCardsContainer'>
+                <Col xs={8} sm={8} md={8} lg={4} className='MyChartCardsContainer'>
                     <div className='dashboardTitle'>
                         <span>My charts</span>
                     </div>
@@ -280,7 +271,7 @@ function MydashboardItemComponent() {
                                 target='_blank'
                                 className='w3-hover-text-green'
                             >
-                                Siemens
+                                Siemens Energy
                             </a>
                         </p>
                     </footer>

diff --git a/frontend/src/components/mydashboard/mydashboard.css b/frontend/src/components/mydashboard/mydashboard.css
@@ -37,6 +37,23 @@
     overflow-y: scroll;
     justify-content: first baseline;
 }
+
+.MyChartCardsContainer {
+
+    display: flex;
+    flex-direction: column;
+    background-color: #ffffff;
+    cursor: 'pointer';
+    margin-top: 15px;
+    min-width: 360;
+    max-width: 450;
+    min-height: 550px;
+    max-height: 550px;
+    border: 1px solid #ad65dd;
+    position: fixed;
+    overflow-y: scroll;
+    justify-content: first baseline;
+}
 .MyMiniCardsContainer {
 
     display: flex;