From ece523140b880fc9613698c45100ea666054bdb3 Mon Sep 17 00:00:00 2001
From: Sufl0wer <fr08ty@gmail.com>
Date: Mon, 26 Aug 2019 15:32:06 +0300
Subject: [PATCH 1/5] add subscription button

---
 .../tabpanel_plot_elements/comments_tab.js    |  8 ++-
 .../subscription_element.js                   | 61 +++++++++++++++++++
 2 files changed, 67 insertions(+), 2 deletions(-)
 create mode 100644 src/javascript/components/main_app/tabpanel_plot_elements/subscription_element.js

diff --git a/src/javascript/components/main_app/tabpanel_plot_elements/comments_tab.js b/src/javascript/components/main_app/tabpanel_plot_elements/comments_tab.js
index e58932d..827b3be 100644
--- a/src/javascript/components/main_app/tabpanel_plot_elements/comments_tab.js
+++ b/src/javascript/components/main_app/tabpanel_plot_elements/comments_tab.js
@@ -7,6 +7,7 @@ import CircularProgress from '@material-ui/core/CircularProgress';
 import Rating from '@material-ui/lab/Rating';
 import Icon from '@material-ui/core/Icon';
 import IconButton from '@material-ui/core/IconButton';
+import SubscriptionEl from './subscription_element'
 
 function loadPlotStarsCountData(shop_type, data_type) {
   var xN = [];
@@ -336,8 +337,8 @@ export default function CommentsPlotTab() {
             </IconButton>
           </div>
         </Grid>
-        <Grid item xs={12} sm={12} style={{ margin: 10, textAlign: 'center' }}>
-          Total number of star-ratings per day
+        <Grid item xs={12} sm={12} className='flext-center'>
+          <SubscriptionEl />
         </Grid>
         <Grid
           item
@@ -350,6 +351,9 @@ export default function CommentsPlotTab() {
         >
           <CircularProgress />
         </Grid>
+        <Grid item xs={12} sm={12} style={{ margin: 10, textAlign: 'center' }}>
+          Total number of star-ratings per day
+        </Grid>
         <Grid item xs={12} sm={6}>
           {/* <Grid item xs={12} sm={12} style={{margin: 10, textAlign: "center"}}>Total number of star-ratings per day</Grid> */}
           <Grid
diff --git a/src/javascript/components/main_app/tabpanel_plot_elements/subscription_element.js b/src/javascript/components/main_app/tabpanel_plot_elements/subscription_element.js
new file mode 100644
index 0000000..d3bbde5
--- /dev/null
+++ b/src/javascript/components/main_app/tabpanel_plot_elements/subscription_element.js
@@ -0,0 +1,61 @@
+import React from 'react';
+import Button from '@material-ui/core/Button';
+import TextField from '@material-ui/core/TextField';
+import Dialog from '@material-ui/core/Dialog';
+import DialogActions from '@material-ui/core/DialogActions';
+import DialogContent from '@material-ui/core/DialogContent';
+import DialogContentText from '@material-ui/core/DialogContentText';
+import DialogTitle from '@material-ui/core/DialogTitle';
+import Icon from "@material-ui/core/Icon";
+
+export default function FormDialog() {
+    const [open, setOpen] = React.useState(false);
+
+    function handleClickOpen() {
+        setOpen(true);
+    }
+
+    function handleClose() {
+        setOpen(false);
+    }
+
+    return (
+        <div>
+            <Button variant="contained" style={{
+                borderRadius: 35,
+                backgroundColor: "#ffffff",
+                padding: "8px 26px",
+                fontSize: "18px",
+                color:"#e9028f"
+            }}
+                onClick={handleClickOpen}>
+                <Icon className='material-icons-outlined'>mail_outline</Icon>
+                &#160; Subscribe to this app
+            </Button>
+            <Dialog open={open} onClose={handleClose} aria-labelledby="form-dialog-title">
+                <DialogTitle id="form-dialog-title">Subscribe</DialogTitle>
+                <DialogContent>
+                    <DialogContentText>
+                        Please enter your email address to let us know were should we send statistics changes.
+                    </DialogContentText>
+                    <TextField
+                        autoFocus
+                        margin="dense"
+                        id="name"
+                        label="Email Address"
+                        type="email"
+                        fullWidth
+                    />
+                </DialogContent>
+                <DialogActions>
+                    <Button onClick={handleClose} color="primary">
+                        Cancel
+                    </Button>
+                    <Button onClick={handleClose} color="primary">
+                        Subscribe
+                    </Button>
+                </DialogActions>
+            </Dialog>
+        </div>
+    );
+}

From 1c0ed889825b3ea7766580832d3d1bd36a4d204f Mon Sep 17 00:00:00 2001
From: Sufl0wer <fr08ty@gmail.com>
Date: Tue, 27 Aug 2019 10:13:29 +0300
Subject: [PATCH 2/5] changed color of button

---
 .../{subscription_element.js => SubscriptionElement.js}     | 6 +++---
 .../main_app/tabpanel_plot_elements/comments_tab.js         | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)
 rename src/javascript/components/main_app/tabpanel_plot_elements/{subscription_element.js => SubscriptionElement.js} (94%)

diff --git a/src/javascript/components/main_app/tabpanel_plot_elements/subscription_element.js b/src/javascript/components/main_app/tabpanel_plot_elements/SubscriptionElement.js
similarity index 94%
rename from src/javascript/components/main_app/tabpanel_plot_elements/subscription_element.js
rename to src/javascript/components/main_app/tabpanel_plot_elements/SubscriptionElement.js
index d3bbde5..45d1d3c 100644
--- a/src/javascript/components/main_app/tabpanel_plot_elements/subscription_element.js
+++ b/src/javascript/components/main_app/tabpanel_plot_elements/SubscriptionElement.js
@@ -23,14 +23,14 @@ export default function FormDialog() {
         <div>
             <Button variant="contained" style={{
                 borderRadius: 35,
-                backgroundColor: "#ffffff",
+                backgroundColor: "#e0e0e0",
                 padding: "8px 26px",
                 fontSize: "18px",
-                color:"#e9028f"
+                color:"#000000"
             }}
                 onClick={handleClickOpen}>
                 <Icon className='material-icons-outlined'>mail_outline</Icon>
-                &#160; Subscribe to this app
+                &#160; Subscribe
             </Button>
             <Dialog open={open} onClose={handleClose} aria-labelledby="form-dialog-title">
                 <DialogTitle id="form-dialog-title">Subscribe</DialogTitle>
diff --git a/src/javascript/components/main_app/tabpanel_plot_elements/comments_tab.js b/src/javascript/components/main_app/tabpanel_plot_elements/comments_tab.js
index 827b3be..05227e7 100644
--- a/src/javascript/components/main_app/tabpanel_plot_elements/comments_tab.js
+++ b/src/javascript/components/main_app/tabpanel_plot_elements/comments_tab.js
@@ -7,7 +7,7 @@ import CircularProgress from '@material-ui/core/CircularProgress';
 import Rating from '@material-ui/lab/Rating';
 import Icon from '@material-ui/core/Icon';
 import IconButton from '@material-ui/core/IconButton';
-import SubscriptionEl from './subscription_element'
+import SubscriptionEl from './SubscriptionElement'
 
 function loadPlotStarsCountData(shop_type, data_type) {
   var xN = [];

From 5a1725ce91b8be66a65af4cd7d7e5ad2d15722a0 Mon Sep 17 00:00:00 2001
From: Sufl0wer <fr08ty@gmail.com>
Date: Tue, 27 Aug 2019 10:32:07 +0300
Subject: [PATCH 3/5] removed from app page

---
 .../main_app/tabpanel_plot_elements/comments_tab.js           | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/javascript/components/main_app/tabpanel_plot_elements/comments_tab.js b/src/javascript/components/main_app/tabpanel_plot_elements/comments_tab.js
index 05227e7..6bd489f 100644
--- a/src/javascript/components/main_app/tabpanel_plot_elements/comments_tab.js
+++ b/src/javascript/components/main_app/tabpanel_plot_elements/comments_tab.js
@@ -7,7 +7,6 @@ import CircularProgress from '@material-ui/core/CircularProgress';
 import Rating from '@material-ui/lab/Rating';
 import Icon from '@material-ui/core/Icon';
 import IconButton from '@material-ui/core/IconButton';
-import SubscriptionEl from './SubscriptionElement'
 
 function loadPlotStarsCountData(shop_type, data_type) {
   var xN = [];
@@ -337,9 +336,6 @@ export default function CommentsPlotTab() {
             </IconButton>
           </div>
         </Grid>
-        <Grid item xs={12} sm={12} className='flext-center'>
-          <SubscriptionEl />
-        </Grid>
         <Grid
           item
           xs={12}

From e2fe5ef6dc88625903140232fbdc8428af56ded9 Mon Sep 17 00:00:00 2001
From: Sufl0wer <fr08ty@gmail.com>
Date: Tue, 27 Aug 2019 10:50:31 +0300
Subject: [PATCH 4/5] file fix

---
 .../tabpanel_plot_elements/comments_tab.js    | 740 +++++++++---------
 1 file changed, 370 insertions(+), 370 deletions(-)

diff --git a/src/javascript/components/main_app/tabpanel_plot_elements/comments_tab.js b/src/javascript/components/main_app/tabpanel_plot_elements/comments_tab.js
index 6bd489f..6951bb3 100644
--- a/src/javascript/components/main_app/tabpanel_plot_elements/comments_tab.js
+++ b/src/javascript/components/main_app/tabpanel_plot_elements/comments_tab.js
@@ -84,196 +84,196 @@ function loadBarChartStarsCountData(shop_type) {
 }
 
 const newPlotElementWithBotAxis = (width, height, data, color, rating_stars_count) => (
-  <>
-    <Plot
-      config={{ displayModeBar: false }}
-      style={{ marginBottom: -10 }}
-      key='2'
-      data={[
-        {
-          x: data.x,
-          y: data.y,
-          mode: 'lines',
-          line: {
-            shape: 'spline',
-            width: 2,
-            color: color
-          },
-          type: 'scatter'
-        }
-      ]}
-      layout={{
-        showlegend: false,
-        margin: {
-          l: 20,
-          r: 20,
-          b: 50,
-          t: 0,
-          pad: 0
-        },
-        width: width,
-        height: height,
-        font: {
-          family: 'Roboto, monospace',
-          size: 13,
-          color: '#7f7f7f'
-        },
-        xaxis: {
-          showline: true,
-          showgrid: false,
-          showticklabels: true,
-          linecolor: 'rgb(255,255,255)',
-          linewidth: 3,
-          autotick: true,
-          ticks: 'inside',
-          tickcolor: 'rgb(55,55,55)',
-          tickwidth: 1,
-          ticklen: 3,
-          tickfont: {
-            family: 'Roboto',
-            size: 14,
-            color: 'rgb(82, 82, 82)'
-          }
-        },
-        yaxis: {
-          showgrid: false,
-          zeroline: false,
-          showline: false,
-          showticklabels: false
-        }
-      }}
-    />
-    <div className='plot-cove-comments-rating-title'>
-      <Rating style={{ color: color }} value={rating_stars_count} readOnly />
-    </div>
-  </>
+    <>
+      <Plot
+          config={{ displayModeBar: false }}
+          style={{ marginBottom: -10 }}
+          key='2'
+          data={[
+            {
+              x: data.x,
+              y: data.y,
+              mode: 'lines',
+              line: {
+                shape: 'spline',
+                width: 2,
+                color: color
+              },
+              type: 'scatter'
+            }
+          ]}
+          layout={{
+            showlegend: false,
+            margin: {
+              l: 20,
+              r: 20,
+              b: 50,
+              t: 0,
+              pad: 0
+            },
+            width: width,
+            height: height,
+            font: {
+              family: 'Roboto, monospace',
+              size: 13,
+              color: '#7f7f7f'
+            },
+            xaxis: {
+              showline: true,
+              showgrid: false,
+              showticklabels: true,
+              linecolor: 'rgb(255,255,255)',
+              linewidth: 3,
+              autotick: true,
+              ticks: 'inside',
+              tickcolor: 'rgb(55,55,55)',
+              tickwidth: 1,
+              ticklen: 3,
+              tickfont: {
+                family: 'Roboto',
+                size: 14,
+                color: 'rgb(82, 82, 82)'
+              }
+            },
+            yaxis: {
+              showgrid: false,
+              zeroline: false,
+              showline: false,
+              showticklabels: false
+            }
+          }}
+      />
+      <div className='plot-cove-comments-rating-title'>
+        <Rating style={{ color: color }} value={rating_stars_count} readOnly />
+      </div>
+    </>
 );
 
 const newBarChartElementWithBotAxis = (width, height, data) => (
-  <>
-    <Plot
-      config={{ displayModeBar: false }}
-      style={{ marginBottom: -10 }}
-      key='2'
-      data={[
-        {
-          x: data.x,
-          y: data.y[0],
-          name: '1 star',
-          stackgroup: 'one',
-          line: {
-            shape: 'spline',
-            width: 2,
-            color: '#FF0034'
-          }
-        },
-        {
-          x: data.x,
-          y: data.y[1],
-          name: '2 star',
-          stackgroup: 'one',
-          line: {
-            shape: 'spline',
-            width: 2,
-            color: '#EB0098'
-          }
-        },
-        {
-          x: data.x,
-          y: data.y[2],
-          name: '3 star',
-          stackgroup: 'one',
-          line: {
-            shape: 'spline',
-            width: 2,
-            color: '#F200FF'
-          }
-        },
-        {
-          x: data.x,
-          y: data.y[3],
-          name: '4 star',
-          stackgroup: 'one',
-          line: {
-            shape: 'spline',
-            width: 2,
-            color: '#A600EB'
-          }
-        },
-        {
-          x: data.x,
-          y: data.y[4],
-          name: '5 star',
-          stackgroup: 'one',
-          line: {
-            shape: 'spline',
-            width: 2,
-            color: '#7E0DFF'
-          }
-        },
-        {
-          x: data.x,
-          y: data.y[5],
-          name: 'Average rating',
-          yaxis: 'y2',
-          mode: 'lines',
-          line: {
-            shape: 'spline',
-            width: 3,
-            color: '#B83C2F'
-          },
-          type: 'scatter'
-        }
-      ]}
-      layout={{
-        showlegend: false,
-        margin: {
-          l: 50,
-          r: 0,
-          b: 50,
-          t: 0,
-          pad: 0
-        },
-        width: width,
-        height: height,
-        font: {
-          family: 'Roboto, monospace',
-          size: 13,
-          color: '#7f7f7f'
-        },
-        xaxis: {
-          showline: true,
-          showgrid: true,
-          showticklabels: true,
-          linecolor: 'rgb(255,255,255)',
-          linewidth: 3,
-          autotick: true,
-          ticks: 'inside',
-          tickcolor: 'rgb(55,55,55)',
-          tickwidth: 1,
-          ticklen: 3,
-          tickfont: {
-            family: 'Roboto',
-            size: 14,
-            color: 'rgb(82, 82, 82)'
-          }
-        },
-        yaxis: {
-          showgrid: true,
-          zeroline: false,
-          showline: false,
-          showticklabels: true
-        },
-        yaxis2: {
-          showline: false,
-          showgrid: false,
-          showticklabels: true,
-          overlaying: 'y',
-          side: 'right'
-        }
-      }}
-    />
-  </>
+    <>
+      <Plot
+          config={{ displayModeBar: false }}
+          style={{ marginBottom: -10 }}
+          key='2'
+          data={[
+            {
+              x: data.x,
+              y: data.y[0],
+              name: '1 star',
+              stackgroup: 'one',
+              line: {
+                shape: 'spline',
+                width: 2,
+                color: '#FF0034'
+              }
+            },
+            {
+              x: data.x,
+              y: data.y[1],
+              name: '2 star',
+              stackgroup: 'one',
+              line: {
+                shape: 'spline',
+                width: 2,
+                color: '#EB0098'
+              }
+            },
+            {
+              x: data.x,
+              y: data.y[2],
+              name: '3 star',
+              stackgroup: 'one',
+              line: {
+                shape: 'spline',
+                width: 2,
+                color: '#F200FF'
+              }
+            },
+            {
+              x: data.x,
+              y: data.y[3],
+              name: '4 star',
+              stackgroup: 'one',
+              line: {
+                shape: 'spline',
+                width: 2,
+                color: '#A600EB'
+              }
+            },
+            {
+              x: data.x,
+              y: data.y[4],
+              name: '5 star',
+              stackgroup: 'one',
+              line: {
+                shape: 'spline',
+                width: 2,
+                color: '#7E0DFF'
+              }
+            },
+            {
+              x: data.x,
+              y: data.y[5],
+              name: 'Average rating',
+              yaxis: 'y2',
+              mode: 'lines',
+              line: {
+                shape: 'spline',
+                width: 3,
+                color: '#B83C2F'
+              },
+              type: 'scatter'
+            }
+          ]}
+          layout={{
+            showlegend: false,
+            margin: {
+              l: 50,
+              r: 0,
+              b: 50,
+              t: 0,
+              pad: 0
+            },
+            width: width,
+            height: height,
+            font: {
+              family: 'Roboto, monospace',
+              size: 13,
+              color: '#7f7f7f'
+            },
+            xaxis: {
+              showline: true,
+              showgrid: true,
+              showticklabels: true,
+              linecolor: 'rgb(255,255,255)',
+              linewidth: 3,
+              autotick: true,
+              ticks: 'inside',
+              tickcolor: 'rgb(55,55,55)',
+              tickwidth: 1,
+              ticklen: 3,
+              tickfont: {
+                family: 'Roboto',
+                size: 14,
+                color: 'rgb(82, 82, 82)'
+              }
+            },
+            yaxis: {
+              showgrid: true,
+              zeroline: false,
+              showline: false,
+              showticklabels: true
+            },
+            yaxis2: {
+              showline: false,
+              showgrid: false,
+              showticklabels: true,
+              overlaying: 'y',
+              side: 'right'
+            }
+          }}
+      />
+    </>
 );
 
 function add_plot_with_latency_botAxis(id, shop_type, data_type, color, rating_stars_count) {
@@ -283,8 +283,8 @@ function add_plot_with_latency_botAxis(id, shop_type, data_type, color, rating_s
 
     // Рендерим основное
     ReactDOM.render(
-      newPlotElementWithBotAxis(width, height, loadPlotStarsCountData(shop_type, data_type), color, rating_stars_count),
-      document.getElementById(id)
+        newPlotElementWithBotAxis(width, height, loadPlotStarsCountData(shop_type, data_type), color, rating_stars_count),
+        document.getElementById(id)
     );
   }, 1);
 }
@@ -296,211 +296,211 @@ function add_BarChart_with_latency(id, shop_type) {
 
     // Рендерим основное
     ReactDOM.render(
-      newBarChartElementWithBotAxis(width, height, loadBarChartStarsCountData(shop_type)),
-      document.getElementById(id)
+        newBarChartElementWithBotAxis(width, height, loadBarChartStarsCountData(shop_type)),
+        document.getElementById(id)
     );
   }, 1);
 }
 
 export default function CommentsPlotTab() {
   return (
-    <>
-      <Grid container>
-        <Grid item xs={12} sm={12}>
-          <div className='plot-cove-comments-title'>
-            <div style={{ fontSize: '0.9rem', fontWeight: 400, alignSelf: 'self-start' }}>  Google Play</div>
-            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
-              <div
-                style={{
-                  width: 30,
-                  height: 30,
-                  borderRadius: 25,
-                  backgroundImage: 'url("' + window.applicationData.IconUrl + '") ',
-                  backgroundSize: 'cover'
-                }}
-              ></div>
-              <div style={{ fontSize: '1.5rem', fontWeight: 300 }}>  {window.applicationData.Title}</div>
-            </div>
+      <>
+        <Grid container>
+          <Grid item xs={12} sm={12}>
+            <div className='plot-cove-comments-title'>
+              <div style={{ fontSize: '0.9rem', fontWeight: 400, alignSelf: 'self-start' }}>  Google Play</div>
+              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+                <div
+                    style={{
+                      width: 30,
+                      height: 30,
+                      borderRadius: 25,
+                      backgroundImage: 'url("' + window.applicationData.IconUrl + '") ',
+                      backgroundSize: 'cover'
+                    }}
+                ></div>
+                <div style={{ fontSize: '1.5rem', fontWeight: 300 }}>  {window.applicationData.Title}</div>
+              </div>
 
-            <IconButton className='covei-badge-button' href={window.applicationData.AndroidUrl}>
-              <Icon
-                style={{
-                  width: '100px',
-                  height: '40px',
-                  borderRadius: 13,
-                  backgroundImage:
-                    'url("https://play.google.com/intl/en_us/badges/images/generic/en_badge_web_generic.png") ',
-                  backgroundSize: 'cover'
-                }}
-              ></Icon>
-            </IconButton>
-          </div>
-        </Grid>
-        <Grid
-          item
-          xs={12}
-          sm={6}
-          id='CommentsAndroidBarChartId1'
-          className='flext-center non-selectable'
-          style={{ minHeight: 350 }}
-          onLoad={add_BarChart_with_latency('CommentsAndroidBarChartId1', 'android')}
-        >
-          <CircularProgress />
-        </Grid>
-        <Grid item xs={12} sm={12} style={{ margin: 10, textAlign: 'center' }}>
-          Total number of star-ratings per day
-        </Grid>
-        <Grid item xs={12} sm={6}>
-          {/* <Grid item xs={12} sm={12} style={{margin: 10, textAlign: "center"}}>Total number of star-ratings per day</Grid> */}
-          <Grid
-            item
-            xs={12}
-            sm={12}
-            id='CommentsAndroidPlotTabId1'
-            className='flext-center non-selectable'
-            style={{ minHeight: 120 }}
-            onLoad={add_plot_with_latency_botAxis('CommentsAndroidPlotTabId1', 'android', 'Rating5', '#7E0DFF', 5)}
-          >
-            <CircularProgress />
+              <IconButton className='covei-badge-button' href={window.applicationData.AndroidUrl}>
+                <Icon
+                    style={{
+                      width: '100px',
+                      height: '40px',
+                      borderRadius: 13,
+                      backgroundImage:
+                          'url("https://play.google.com/intl/en_us/badges/images/generic/en_badge_web_generic.png") ',
+                      backgroundSize: 'cover'
+                    }}
+                ></Icon>
+              </IconButton>
+            </div>
           </Grid>
-          <Grid
-            item
-            xs={12}
-            sm={12}
-            id='CommentsAndroidPlotTabId2'
-            className='flext-center non-selectable'
-            style={{ minHeight: 120 }}
-            onLoad={add_plot_with_latency_botAxis('CommentsAndroidPlotTabId2', 'android', 'Rating4', '#A600EB', 4)}
-          >
-            <CircularProgress />
+          <Grid item xs={12} sm={12} style={{ margin: 10, textAlign: 'center' }}>
+            Total number of star-ratings per day
           </Grid>
           <Grid
-            item
-            xs={12}
-            sm={12}
-            id='CommentsAndroidPlotTabId3'
-            className='flext-center non-selectable'
-            style={{ minHeight: 120 }}
-            onLoad={add_plot_with_latency_botAxis('CommentsAndroidPlotTabId3', 'android', 'Rating3', '#F200FF', 3)}
+              item
+              xs={12}
+              sm={6}
+              id='CommentsAndroidBarChartId1'
+              className='flext-center non-selectable'
+              style={{ minHeight: 350 }}
+              onLoad={add_BarChart_with_latency('CommentsAndroidBarChartId1', 'android')}
           >
             <CircularProgress />
           </Grid>
-          <Grid
-            item
-            xs={12}
-            sm={12}
-            id='CommentsAndroidPlotTabId4'
-            className='flext-center non-selectable'
-            style={{ minHeight: 120 }}
-            onLoad={add_plot_with_latency_botAxis('CommentsAndroidPlotTabId4', 'android', 'Rating2', '#EB0098', 2)}
-          >
-            <CircularProgress />
-          </Grid>
-          <Grid
-            item
-            xs={12}
-            sm={12}
-            id='CommentsAndroidPlotTabId5'
-            className='flext-center non-selectable'
-            style={{ minHeight: 120 }}
-            onLoad={add_plot_with_latency_botAxis('CommentsAndroidPlotTabId5', 'android', 'Rating1', '#FF0034', 1)}
-          >
-            <CircularProgress />
+          <Grid item xs={12} sm={6}>
+            {/* <Grid item xs={12} sm={12} style={{margin: 10, textAlign: "center"}}>Total number of star-ratings per day</Grid> */}
+            <Grid
+                item
+                xs={12}
+                sm={12}
+                id='CommentsAndroidPlotTabId1'
+                className='flext-center non-selectable'
+                style={{ minHeight: 120 }}
+                onLoad={add_plot_with_latency_botAxis('CommentsAndroidPlotTabId1', 'android', 'Rating5', '#7E0DFF', 5)}
+            >
+              <CircularProgress />
+            </Grid>
+            <Grid
+                item
+                xs={12}
+                sm={12}
+                id='CommentsAndroidPlotTabId2'
+                className='flext-center non-selectable'
+                style={{ minHeight: 120 }}
+                onLoad={add_plot_with_latency_botAxis('CommentsAndroidPlotTabId2', 'android', 'Rating4', '#A600EB', 4)}
+            >
+              <CircularProgress />
+            </Grid>
+            <Grid
+                item
+                xs={12}
+                sm={12}
+                id='CommentsAndroidPlotTabId3'
+                className='flext-center non-selectable'
+                style={{ minHeight: 120 }}
+                onLoad={add_plot_with_latency_botAxis('CommentsAndroidPlotTabId3', 'android', 'Rating3', '#F200FF', 3)}
+            >
+              <CircularProgress />
+            </Grid>
+            <Grid
+                item
+                xs={12}
+                sm={12}
+                id='CommentsAndroidPlotTabId4'
+                className='flext-center non-selectable'
+                style={{ minHeight: 120 }}
+                onLoad={add_plot_with_latency_botAxis('CommentsAndroidPlotTabId4', 'android', 'Rating2', '#EB0098', 2)}
+            >
+              <CircularProgress />
+            </Grid>
+            <Grid
+                item
+                xs={12}
+                sm={12}
+                id='CommentsAndroidPlotTabId5'
+                className='flext-center non-selectable'
+                style={{ minHeight: 120 }}
+                onLoad={add_plot_with_latency_botAxis('CommentsAndroidPlotTabId5', 'android', 'Rating1', '#FF0034', 1)}
+            >
+              <CircularProgress />
+            </Grid>
           </Grid>
         </Grid>
-      </Grid>
 
-      <Grid container>
-        <Grid item xs={12} sm={12}>
-          <div className='plot-cove-comments-title'>
-            <div style={{ fontSize: '0.9rem', fontWeight: 400, alignSelf: 'self-start' }}>  App Store</div>
+        <Grid container>
+          <Grid item xs={12} sm={12}>
+            <div className='plot-cove-comments-title'>
+              <div style={{ fontSize: '0.9rem', fontWeight: 400, alignSelf: 'self-start' }}>  App Store</div>
 
-            <IconButton className='covei-badge-button' href={window.applicationData.AppleUrl}>
-              <Icon
-                style={{
-                  width: '97px',
-                  height: '32px',
-                  borderRadius: 5,
-                  backgroundImage:
-                    'url("https://developer.apple.com/app-store/marketing/guidelines/images/badge-download-on-the-app-store.svg") ',
-                  backgroundSize: 'cover'
-                }}
-              ></Icon>
-            </IconButton>
-          </div>
-        </Grid>
-        <Grid item xs={12} sm={12} style={{ margin: 10, textAlign: 'center' }}>
-          Total number of star-ratings per day
-        </Grid>
-        <Grid
-          item
-          xs={12}
-          sm={6}
-          id='CommentsIosBarChartId1'
-          className='flext-center non-selectable'
-          style={{ minHeight: 350 }}
-          onLoad={add_BarChart_with_latency('CommentsIosBarChartId1', 'ios')}
-        >
-          <CircularProgress />
-        </Grid>
-        <Grid item xs={12} sm={6}>
-          <Grid
-            item
-            xs={12}
-            sm={12}
-            id='CommentsIosPlotTabId1'
-            className='flext-center non-selectable'
-            style={{ minHeight: 120 }}
-            onLoad={add_plot_with_latency_botAxis('CommentsIosPlotTabId1', 'ios', 'Rating5', '#7E0DFF', 5)}
-          >
-            <CircularProgress />
-          </Grid>
-          <Grid
-            item
-            xs={12}
-            sm={12}
-            id='CommentsIosPlotTabId2'
-            className='flext-center non-selectable'
-            style={{ minHeight: 120 }}
-            onLoad={add_plot_with_latency_botAxis('CommentsIosPlotTabId2', 'ios', 'Rating4', '#A600EB', 4)}
-          >
-            <CircularProgress />
+              <IconButton className='covei-badge-button' href={window.applicationData.AppleUrl}>
+                <Icon
+                    style={{
+                      width: '97px',
+                      height: '32px',
+                      borderRadius: 5,
+                      backgroundImage:
+                          'url("https://developer.apple.com/app-store/marketing/guidelines/images/badge-download-on-the-app-store.svg") ',
+                      backgroundSize: 'cover'
+                    }}
+                ></Icon>
+              </IconButton>
+            </div>
           </Grid>
-          <Grid
-            item
-            xs={12}
-            sm={12}
-            id='CommentsIosPlotTabId3'
-            className='flext-center non-selectable'
-            style={{ minHeight: 120 }}
-            onLoad={add_plot_with_latency_botAxis('CommentsIosPlotTabId3', 'ios', 'Rating3', '#F200FF', 3)}
-          >
-            <CircularProgress />
+          <Grid item xs={12} sm={12} style={{ margin: 10, textAlign: 'center' }}>
+            Total number of star-ratings per day
           </Grid>
           <Grid
-            item
-            xs={12}
-            sm={12}
-            id='CommentsIosPlotTabId4'
-            className='flext-center non-selectable'
-            style={{ minHeight: 120 }}
-            onLoad={add_plot_with_latency_botAxis('CommentsIosPlotTabId4', 'ios', 'Rating2', '#EB0098', 2)}
+              item
+              xs={12}
+              sm={6}
+              id='CommentsIosBarChartId1'
+              className='flext-center non-selectable'
+              style={{ minHeight: 350 }}
+              onLoad={add_BarChart_with_latency('CommentsIosBarChartId1', 'ios')}
           >
             <CircularProgress />
           </Grid>
-          <Grid
-            item
-            xs={12}
-            sm={12}
-            id='CommentsIosPlotTabId5'
-            className='flext-center non-selectable'
-            style={{ minHeight: 120 }}
-            onLoad={add_plot_with_latency_botAxis('CommentsIosPlotTabId5', 'ios', 'Rating1', '#FF0034', 1)}
-          >
-            <CircularProgress />
+          <Grid item xs={12} sm={6}>
+            <Grid
+                item
+                xs={12}
+                sm={12}
+                id='CommentsIosPlotTabId1'
+                className='flext-center non-selectable'
+                style={{ minHeight: 120 }}
+                onLoad={add_plot_with_latency_botAxis('CommentsIosPlotTabId1', 'ios', 'Rating5', '#7E0DFF', 5)}
+            >
+              <CircularProgress />
+            </Grid>
+            <Grid
+                item
+                xs={12}
+                sm={12}
+                id='CommentsIosPlotTabId2'
+                className='flext-center non-selectable'
+                style={{ minHeight: 120 }}
+                onLoad={add_plot_with_latency_botAxis('CommentsIosPlotTabId2', 'ios', 'Rating4', '#A600EB', 4)}
+            >
+              <CircularProgress />
+            </Grid>
+            <Grid
+                item
+                xs={12}
+                sm={12}
+                id='CommentsIosPlotTabId3'
+                className='flext-center non-selectable'
+                style={{ minHeight: 120 }}
+                onLoad={add_plot_with_latency_botAxis('CommentsIosPlotTabId3', 'ios', 'Rating3', '#F200FF', 3)}
+            >
+              <CircularProgress />
+            </Grid>
+            <Grid
+                item
+                xs={12}
+                sm={12}
+                id='CommentsIosPlotTabId4'
+                className='flext-center non-selectable'
+                style={{ minHeight: 120 }}
+                onLoad={add_plot_with_latency_botAxis('CommentsIosPlotTabId4', 'ios', 'Rating2', '#EB0098', 2)}
+            >
+              <CircularProgress />
+            </Grid>
+            <Grid
+                item
+                xs={12}
+                sm={12}
+                id='CommentsIosPlotTabId5'
+                className='flext-center non-selectable'
+                style={{ minHeight: 120 }}
+                onLoad={add_plot_with_latency_botAxis('CommentsIosPlotTabId5', 'ios', 'Rating1', '#FF0034', 1)}
+            >
+              <CircularProgress />
+            </Grid>
           </Grid>
         </Grid>
-      </Grid>
-    </>
+      </>
   );
 }

From b8eb4c78f490015d144581d8f7c257774bfd0ba1 Mon Sep 17 00:00:00 2001
From: Sufl0wer <fr08ty@gmail.com>
Date: Tue, 27 Aug 2019 10:57:23 +0300
Subject: [PATCH 5/5] removed a modified file from pull request

---
 .../tabpanel_plot_elements/comments_tab.js    | 740 +++++++++---------
 1 file changed, 370 insertions(+), 370 deletions(-)

diff --git a/src/javascript/components/main_app/tabpanel_plot_elements/comments_tab.js b/src/javascript/components/main_app/tabpanel_plot_elements/comments_tab.js
index 6951bb3..e58932d 100644
--- a/src/javascript/components/main_app/tabpanel_plot_elements/comments_tab.js
+++ b/src/javascript/components/main_app/tabpanel_plot_elements/comments_tab.js
@@ -84,196 +84,196 @@ function loadBarChartStarsCountData(shop_type) {
 }
 
 const newPlotElementWithBotAxis = (width, height, data, color, rating_stars_count) => (
-    <>
-      <Plot
-          config={{ displayModeBar: false }}
-          style={{ marginBottom: -10 }}
-          key='2'
-          data={[
-            {
-              x: data.x,
-              y: data.y,
-              mode: 'lines',
-              line: {
-                shape: 'spline',
-                width: 2,
-                color: color
-              },
-              type: 'scatter'
-            }
-          ]}
-          layout={{
-            showlegend: false,
-            margin: {
-              l: 20,
-              r: 20,
-              b: 50,
-              t: 0,
-              pad: 0
-            },
-            width: width,
-            height: height,
-            font: {
-              family: 'Roboto, monospace',
-              size: 13,
-              color: '#7f7f7f'
-            },
-            xaxis: {
-              showline: true,
-              showgrid: false,
-              showticklabels: true,
-              linecolor: 'rgb(255,255,255)',
-              linewidth: 3,
-              autotick: true,
-              ticks: 'inside',
-              tickcolor: 'rgb(55,55,55)',
-              tickwidth: 1,
-              ticklen: 3,
-              tickfont: {
-                family: 'Roboto',
-                size: 14,
-                color: 'rgb(82, 82, 82)'
-              }
-            },
-            yaxis: {
-              showgrid: false,
-              zeroline: false,
-              showline: false,
-              showticklabels: false
-            }
-          }}
-      />
-      <div className='plot-cove-comments-rating-title'>
-        <Rating style={{ color: color }} value={rating_stars_count} readOnly />
-      </div>
-    </>
+  <>
+    <Plot
+      config={{ displayModeBar: false }}
+      style={{ marginBottom: -10 }}
+      key='2'
+      data={[
+        {
+          x: data.x,
+          y: data.y,
+          mode: 'lines',
+          line: {
+            shape: 'spline',
+            width: 2,
+            color: color
+          },
+          type: 'scatter'
+        }
+      ]}
+      layout={{
+        showlegend: false,
+        margin: {
+          l: 20,
+          r: 20,
+          b: 50,
+          t: 0,
+          pad: 0
+        },
+        width: width,
+        height: height,
+        font: {
+          family: 'Roboto, monospace',
+          size: 13,
+          color: '#7f7f7f'
+        },
+        xaxis: {
+          showline: true,
+          showgrid: false,
+          showticklabels: true,
+          linecolor: 'rgb(255,255,255)',
+          linewidth: 3,
+          autotick: true,
+          ticks: 'inside',
+          tickcolor: 'rgb(55,55,55)',
+          tickwidth: 1,
+          ticklen: 3,
+          tickfont: {
+            family: 'Roboto',
+            size: 14,
+            color: 'rgb(82, 82, 82)'
+          }
+        },
+        yaxis: {
+          showgrid: false,
+          zeroline: false,
+          showline: false,
+          showticklabels: false
+        }
+      }}
+    />
+    <div className='plot-cove-comments-rating-title'>
+      <Rating style={{ color: color }} value={rating_stars_count} readOnly />
+    </div>
+  </>
 );
 
 const newBarChartElementWithBotAxis = (width, height, data) => (
-    <>
-      <Plot
-          config={{ displayModeBar: false }}
-          style={{ marginBottom: -10 }}
-          key='2'
-          data={[
-            {
-              x: data.x,
-              y: data.y[0],
-              name: '1 star',
-              stackgroup: 'one',
-              line: {
-                shape: 'spline',
-                width: 2,
-                color: '#FF0034'
-              }
-            },
-            {
-              x: data.x,
-              y: data.y[1],
-              name: '2 star',
-              stackgroup: 'one',
-              line: {
-                shape: 'spline',
-                width: 2,
-                color: '#EB0098'
-              }
-            },
-            {
-              x: data.x,
-              y: data.y[2],
-              name: '3 star',
-              stackgroup: 'one',
-              line: {
-                shape: 'spline',
-                width: 2,
-                color: '#F200FF'
-              }
-            },
-            {
-              x: data.x,
-              y: data.y[3],
-              name: '4 star',
-              stackgroup: 'one',
-              line: {
-                shape: 'spline',
-                width: 2,
-                color: '#A600EB'
-              }
-            },
-            {
-              x: data.x,
-              y: data.y[4],
-              name: '5 star',
-              stackgroup: 'one',
-              line: {
-                shape: 'spline',
-                width: 2,
-                color: '#7E0DFF'
-              }
-            },
-            {
-              x: data.x,
-              y: data.y[5],
-              name: 'Average rating',
-              yaxis: 'y2',
-              mode: 'lines',
-              line: {
-                shape: 'spline',
-                width: 3,
-                color: '#B83C2F'
-              },
-              type: 'scatter'
-            }
-          ]}
-          layout={{
-            showlegend: false,
-            margin: {
-              l: 50,
-              r: 0,
-              b: 50,
-              t: 0,
-              pad: 0
-            },
-            width: width,
-            height: height,
-            font: {
-              family: 'Roboto, monospace',
-              size: 13,
-              color: '#7f7f7f'
-            },
-            xaxis: {
-              showline: true,
-              showgrid: true,
-              showticklabels: true,
-              linecolor: 'rgb(255,255,255)',
-              linewidth: 3,
-              autotick: true,
-              ticks: 'inside',
-              tickcolor: 'rgb(55,55,55)',
-              tickwidth: 1,
-              ticklen: 3,
-              tickfont: {
-                family: 'Roboto',
-                size: 14,
-                color: 'rgb(82, 82, 82)'
-              }
-            },
-            yaxis: {
-              showgrid: true,
-              zeroline: false,
-              showline: false,
-              showticklabels: true
-            },
-            yaxis2: {
-              showline: false,
-              showgrid: false,
-              showticklabels: true,
-              overlaying: 'y',
-              side: 'right'
-            }
-          }}
-      />
-    </>
+  <>
+    <Plot
+      config={{ displayModeBar: false }}
+      style={{ marginBottom: -10 }}
+      key='2'
+      data={[
+        {
+          x: data.x,
+          y: data.y[0],
+          name: '1 star',
+          stackgroup: 'one',
+          line: {
+            shape: 'spline',
+            width: 2,
+            color: '#FF0034'
+          }
+        },
+        {
+          x: data.x,
+          y: data.y[1],
+          name: '2 star',
+          stackgroup: 'one',
+          line: {
+            shape: 'spline',
+            width: 2,
+            color: '#EB0098'
+          }
+        },
+        {
+          x: data.x,
+          y: data.y[2],
+          name: '3 star',
+          stackgroup: 'one',
+          line: {
+            shape: 'spline',
+            width: 2,
+            color: '#F200FF'
+          }
+        },
+        {
+          x: data.x,
+          y: data.y[3],
+          name: '4 star',
+          stackgroup: 'one',
+          line: {
+            shape: 'spline',
+            width: 2,
+            color: '#A600EB'
+          }
+        },
+        {
+          x: data.x,
+          y: data.y[4],
+          name: '5 star',
+          stackgroup: 'one',
+          line: {
+            shape: 'spline',
+            width: 2,
+            color: '#7E0DFF'
+          }
+        },
+        {
+          x: data.x,
+          y: data.y[5],
+          name: 'Average rating',
+          yaxis: 'y2',
+          mode: 'lines',
+          line: {
+            shape: 'spline',
+            width: 3,
+            color: '#B83C2F'
+          },
+          type: 'scatter'
+        }
+      ]}
+      layout={{
+        showlegend: false,
+        margin: {
+          l: 50,
+          r: 0,
+          b: 50,
+          t: 0,
+          pad: 0
+        },
+        width: width,
+        height: height,
+        font: {
+          family: 'Roboto, monospace',
+          size: 13,
+          color: '#7f7f7f'
+        },
+        xaxis: {
+          showline: true,
+          showgrid: true,
+          showticklabels: true,
+          linecolor: 'rgb(255,255,255)',
+          linewidth: 3,
+          autotick: true,
+          ticks: 'inside',
+          tickcolor: 'rgb(55,55,55)',
+          tickwidth: 1,
+          ticklen: 3,
+          tickfont: {
+            family: 'Roboto',
+            size: 14,
+            color: 'rgb(82, 82, 82)'
+          }
+        },
+        yaxis: {
+          showgrid: true,
+          zeroline: false,
+          showline: false,
+          showticklabels: true
+        },
+        yaxis2: {
+          showline: false,
+          showgrid: false,
+          showticklabels: true,
+          overlaying: 'y',
+          side: 'right'
+        }
+      }}
+    />
+  </>
 );
 
 function add_plot_with_latency_botAxis(id, shop_type, data_type, color, rating_stars_count) {
@@ -283,8 +283,8 @@ function add_plot_with_latency_botAxis(id, shop_type, data_type, color, rating_s
 
     // Рендерим основное
     ReactDOM.render(
-        newPlotElementWithBotAxis(width, height, loadPlotStarsCountData(shop_type, data_type), color, rating_stars_count),
-        document.getElementById(id)
+      newPlotElementWithBotAxis(width, height, loadPlotStarsCountData(shop_type, data_type), color, rating_stars_count),
+      document.getElementById(id)
     );
   }, 1);
 }
@@ -296,211 +296,211 @@ function add_BarChart_with_latency(id, shop_type) {
 
     // Рендерим основное
     ReactDOM.render(
-        newBarChartElementWithBotAxis(width, height, loadBarChartStarsCountData(shop_type)),
-        document.getElementById(id)
+      newBarChartElementWithBotAxis(width, height, loadBarChartStarsCountData(shop_type)),
+      document.getElementById(id)
     );
   }, 1);
 }
 
 export default function CommentsPlotTab() {
   return (
-      <>
-        <Grid container>
-          <Grid item xs={12} sm={12}>
-            <div className='plot-cove-comments-title'>
-              <div style={{ fontSize: '0.9rem', fontWeight: 400, alignSelf: 'self-start' }}>  Google Play</div>
-              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
-                <div
-                    style={{
-                      width: 30,
-                      height: 30,
-                      borderRadius: 25,
-                      backgroundImage: 'url("' + window.applicationData.IconUrl + '") ',
-                      backgroundSize: 'cover'
-                    }}
-                ></div>
-                <div style={{ fontSize: '1.5rem', fontWeight: 300 }}>  {window.applicationData.Title}</div>
-              </div>
-
-              <IconButton className='covei-badge-button' href={window.applicationData.AndroidUrl}>
-                <Icon
-                    style={{
-                      width: '100px',
-                      height: '40px',
-                      borderRadius: 13,
-                      backgroundImage:
-                          'url("https://play.google.com/intl/en_us/badges/images/generic/en_badge_web_generic.png") ',
-                      backgroundSize: 'cover'
-                    }}
-                ></Icon>
-              </IconButton>
+    <>
+      <Grid container>
+        <Grid item xs={12} sm={12}>
+          <div className='plot-cove-comments-title'>
+            <div style={{ fontSize: '0.9rem', fontWeight: 400, alignSelf: 'self-start' }}>  Google Play</div>
+            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+              <div
+                style={{
+                  width: 30,
+                  height: 30,
+                  borderRadius: 25,
+                  backgroundImage: 'url("' + window.applicationData.IconUrl + '") ',
+                  backgroundSize: 'cover'
+                }}
+              ></div>
+              <div style={{ fontSize: '1.5rem', fontWeight: 300 }}>  {window.applicationData.Title}</div>
             </div>
+
+            <IconButton className='covei-badge-button' href={window.applicationData.AndroidUrl}>
+              <Icon
+                style={{
+                  width: '100px',
+                  height: '40px',
+                  borderRadius: 13,
+                  backgroundImage:
+                    'url("https://play.google.com/intl/en_us/badges/images/generic/en_badge_web_generic.png") ',
+                  backgroundSize: 'cover'
+                }}
+              ></Icon>
+            </IconButton>
+          </div>
+        </Grid>
+        <Grid item xs={12} sm={12} style={{ margin: 10, textAlign: 'center' }}>
+          Total number of star-ratings per day
+        </Grid>
+        <Grid
+          item
+          xs={12}
+          sm={6}
+          id='CommentsAndroidBarChartId1'
+          className='flext-center non-selectable'
+          style={{ minHeight: 350 }}
+          onLoad={add_BarChart_with_latency('CommentsAndroidBarChartId1', 'android')}
+        >
+          <CircularProgress />
+        </Grid>
+        <Grid item xs={12} sm={6}>
+          {/* <Grid item xs={12} sm={12} style={{margin: 10, textAlign: "center"}}>Total number of star-ratings per day</Grid> */}
+          <Grid
+            item
+            xs={12}
+            sm={12}
+            id='CommentsAndroidPlotTabId1'
+            className='flext-center non-selectable'
+            style={{ minHeight: 120 }}
+            onLoad={add_plot_with_latency_botAxis('CommentsAndroidPlotTabId1', 'android', 'Rating5', '#7E0DFF', 5)}
+          >
+            <CircularProgress />
           </Grid>
-          <Grid item xs={12} sm={12} style={{ margin: 10, textAlign: 'center' }}>
-            Total number of star-ratings per day
+          <Grid
+            item
+            xs={12}
+            sm={12}
+            id='CommentsAndroidPlotTabId2'
+            className='flext-center non-selectable'
+            style={{ minHeight: 120 }}
+            onLoad={add_plot_with_latency_botAxis('CommentsAndroidPlotTabId2', 'android', 'Rating4', '#A600EB', 4)}
+          >
+            <CircularProgress />
           </Grid>
           <Grid
-              item
-              xs={12}
-              sm={6}
-              id='CommentsAndroidBarChartId1'
-              className='flext-center non-selectable'
-              style={{ minHeight: 350 }}
-              onLoad={add_BarChart_with_latency('CommentsAndroidBarChartId1', 'android')}
+            item
+            xs={12}
+            sm={12}
+            id='CommentsAndroidPlotTabId3'
+            className='flext-center non-selectable'
+            style={{ minHeight: 120 }}
+            onLoad={add_plot_with_latency_botAxis('CommentsAndroidPlotTabId3', 'android', 'Rating3', '#F200FF', 3)}
           >
             <CircularProgress />
           </Grid>
-          <Grid item xs={12} sm={6}>
-            {/* <Grid item xs={12} sm={12} style={{margin: 10, textAlign: "center"}}>Total number of star-ratings per day</Grid> */}
-            <Grid
-                item
-                xs={12}
-                sm={12}
-                id='CommentsAndroidPlotTabId1'
-                className='flext-center non-selectable'
-                style={{ minHeight: 120 }}
-                onLoad={add_plot_with_latency_botAxis('CommentsAndroidPlotTabId1', 'android', 'Rating5', '#7E0DFF', 5)}
-            >
-              <CircularProgress />
-            </Grid>
-            <Grid
-                item
-                xs={12}
-                sm={12}
-                id='CommentsAndroidPlotTabId2'
-                className='flext-center non-selectable'
-                style={{ minHeight: 120 }}
-                onLoad={add_plot_with_latency_botAxis('CommentsAndroidPlotTabId2', 'android', 'Rating4', '#A600EB', 4)}
-            >
-              <CircularProgress />
-            </Grid>
-            <Grid
-                item
-                xs={12}
-                sm={12}
-                id='CommentsAndroidPlotTabId3'
-                className='flext-center non-selectable'
-                style={{ minHeight: 120 }}
-                onLoad={add_plot_with_latency_botAxis('CommentsAndroidPlotTabId3', 'android', 'Rating3', '#F200FF', 3)}
-            >
-              <CircularProgress />
-            </Grid>
-            <Grid
-                item
-                xs={12}
-                sm={12}
-                id='CommentsAndroidPlotTabId4'
-                className='flext-center non-selectable'
-                style={{ minHeight: 120 }}
-                onLoad={add_plot_with_latency_botAxis('CommentsAndroidPlotTabId4', 'android', 'Rating2', '#EB0098', 2)}
-            >
-              <CircularProgress />
-            </Grid>
-            <Grid
-                item
-                xs={12}
-                sm={12}
-                id='CommentsAndroidPlotTabId5'
-                className='flext-center non-selectable'
-                style={{ minHeight: 120 }}
-                onLoad={add_plot_with_latency_botAxis('CommentsAndroidPlotTabId5', 'android', 'Rating1', '#FF0034', 1)}
-            >
-              <CircularProgress />
-            </Grid>
+          <Grid
+            item
+            xs={12}
+            sm={12}
+            id='CommentsAndroidPlotTabId4'
+            className='flext-center non-selectable'
+            style={{ minHeight: 120 }}
+            onLoad={add_plot_with_latency_botAxis('CommentsAndroidPlotTabId4', 'android', 'Rating2', '#EB0098', 2)}
+          >
+            <CircularProgress />
+          </Grid>
+          <Grid
+            item
+            xs={12}
+            sm={12}
+            id='CommentsAndroidPlotTabId5'
+            className='flext-center non-selectable'
+            style={{ minHeight: 120 }}
+            onLoad={add_plot_with_latency_botAxis('CommentsAndroidPlotTabId5', 'android', 'Rating1', '#FF0034', 1)}
+          >
+            <CircularProgress />
           </Grid>
         </Grid>
+      </Grid>
 
-        <Grid container>
-          <Grid item xs={12} sm={12}>
-            <div className='plot-cove-comments-title'>
-              <div style={{ fontSize: '0.9rem', fontWeight: 400, alignSelf: 'self-start' }}>  App Store</div>
+      <Grid container>
+        <Grid item xs={12} sm={12}>
+          <div className='plot-cove-comments-title'>
+            <div style={{ fontSize: '0.9rem', fontWeight: 400, alignSelf: 'self-start' }}>  App Store</div>
 
-              <IconButton className='covei-badge-button' href={window.applicationData.AppleUrl}>
-                <Icon
-                    style={{
-                      width: '97px',
-                      height: '32px',
-                      borderRadius: 5,
-                      backgroundImage:
-                          'url("https://developer.apple.com/app-store/marketing/guidelines/images/badge-download-on-the-app-store.svg") ',
-                      backgroundSize: 'cover'
-                    }}
-                ></Icon>
-              </IconButton>
-            </div>
+            <IconButton className='covei-badge-button' href={window.applicationData.AppleUrl}>
+              <Icon
+                style={{
+                  width: '97px',
+                  height: '32px',
+                  borderRadius: 5,
+                  backgroundImage:
+                    'url("https://developer.apple.com/app-store/marketing/guidelines/images/badge-download-on-the-app-store.svg") ',
+                  backgroundSize: 'cover'
+                }}
+              ></Icon>
+            </IconButton>
+          </div>
+        </Grid>
+        <Grid item xs={12} sm={12} style={{ margin: 10, textAlign: 'center' }}>
+          Total number of star-ratings per day
+        </Grid>
+        <Grid
+          item
+          xs={12}
+          sm={6}
+          id='CommentsIosBarChartId1'
+          className='flext-center non-selectable'
+          style={{ minHeight: 350 }}
+          onLoad={add_BarChart_with_latency('CommentsIosBarChartId1', 'ios')}
+        >
+          <CircularProgress />
+        </Grid>
+        <Grid item xs={12} sm={6}>
+          <Grid
+            item
+            xs={12}
+            sm={12}
+            id='CommentsIosPlotTabId1'
+            className='flext-center non-selectable'
+            style={{ minHeight: 120 }}
+            onLoad={add_plot_with_latency_botAxis('CommentsIosPlotTabId1', 'ios', 'Rating5', '#7E0DFF', 5)}
+          >
+            <CircularProgress />
+          </Grid>
+          <Grid
+            item
+            xs={12}
+            sm={12}
+            id='CommentsIosPlotTabId2'
+            className='flext-center non-selectable'
+            style={{ minHeight: 120 }}
+            onLoad={add_plot_with_latency_botAxis('CommentsIosPlotTabId2', 'ios', 'Rating4', '#A600EB', 4)}
+          >
+            <CircularProgress />
           </Grid>
-          <Grid item xs={12} sm={12} style={{ margin: 10, textAlign: 'center' }}>
-            Total number of star-ratings per day
+          <Grid
+            item
+            xs={12}
+            sm={12}
+            id='CommentsIosPlotTabId3'
+            className='flext-center non-selectable'
+            style={{ minHeight: 120 }}
+            onLoad={add_plot_with_latency_botAxis('CommentsIosPlotTabId3', 'ios', 'Rating3', '#F200FF', 3)}
+          >
+            <CircularProgress />
           </Grid>
           <Grid
-              item
-              xs={12}
-              sm={6}
-              id='CommentsIosBarChartId1'
-              className='flext-center non-selectable'
-              style={{ minHeight: 350 }}
-              onLoad={add_BarChart_with_latency('CommentsIosBarChartId1', 'ios')}
+            item
+            xs={12}
+            sm={12}
+            id='CommentsIosPlotTabId4'
+            className='flext-center non-selectable'
+            style={{ minHeight: 120 }}
+            onLoad={add_plot_with_latency_botAxis('CommentsIosPlotTabId4', 'ios', 'Rating2', '#EB0098', 2)}
           >
             <CircularProgress />
           </Grid>
-          <Grid item xs={12} sm={6}>
-            <Grid
-                item
-                xs={12}
-                sm={12}
-                id='CommentsIosPlotTabId1'
-                className='flext-center non-selectable'
-                style={{ minHeight: 120 }}
-                onLoad={add_plot_with_latency_botAxis('CommentsIosPlotTabId1', 'ios', 'Rating5', '#7E0DFF', 5)}
-            >
-              <CircularProgress />
-            </Grid>
-            <Grid
-                item
-                xs={12}
-                sm={12}
-                id='CommentsIosPlotTabId2'
-                className='flext-center non-selectable'
-                style={{ minHeight: 120 }}
-                onLoad={add_plot_with_latency_botAxis('CommentsIosPlotTabId2', 'ios', 'Rating4', '#A600EB', 4)}
-            >
-              <CircularProgress />
-            </Grid>
-            <Grid
-                item
-                xs={12}
-                sm={12}
-                id='CommentsIosPlotTabId3'
-                className='flext-center non-selectable'
-                style={{ minHeight: 120 }}
-                onLoad={add_plot_with_latency_botAxis('CommentsIosPlotTabId3', 'ios', 'Rating3', '#F200FF', 3)}
-            >
-              <CircularProgress />
-            </Grid>
-            <Grid
-                item
-                xs={12}
-                sm={12}
-                id='CommentsIosPlotTabId4'
-                className='flext-center non-selectable'
-                style={{ minHeight: 120 }}
-                onLoad={add_plot_with_latency_botAxis('CommentsIosPlotTabId4', 'ios', 'Rating2', '#EB0098', 2)}
-            >
-              <CircularProgress />
-            </Grid>
-            <Grid
-                item
-                xs={12}
-                sm={12}
-                id='CommentsIosPlotTabId5'
-                className='flext-center non-selectable'
-                style={{ minHeight: 120 }}
-                onLoad={add_plot_with_latency_botAxis('CommentsIosPlotTabId5', 'ios', 'Rating1', '#FF0034', 1)}
-            >
-              <CircularProgress />
-            </Grid>
+          <Grid
+            item
+            xs={12}
+            sm={12}
+            id='CommentsIosPlotTabId5'
+            className='flext-center non-selectable'
+            style={{ minHeight: 120 }}
+            onLoad={add_plot_with_latency_botAxis('CommentsIosPlotTabId5', 'ios', 'Rating1', '#FF0034', 1)}
+          >
+            <CircularProgress />
           </Grid>
         </Grid>
-      </>
+      </Grid>
+    </>
   );
 }