Merge pull request #1039 from replicatedhq/jelena-graphs-margin

Added margin to dashboard graphs to prevent overlaping
replicatedhq · Aug 28, 2020 · 3cf569e · 3cf569e
2 parents ce5412c + aae1cee
commit 3cf569e
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 3 deletions.
diff --git a/kotsadm/web/src/components/apps/Dashboard.jsx b/kotsadm/web/src/components/apps/Dashboard.jsx
@@ -424,10 +424,10 @@ class Dashboard extends Component {
 
     return (
       <div className="dashboard-card graph flex-column flex1 flex u-marginTop--20" key={chart.title}>
-        <XYPlot width={460} height={180} onMouseLeave={() => this.setState({ crosshairValues: [] })}>
+        <XYPlot width={460} height={180} onMouseLeave={() => this.setState({ crosshairValues: [] })} margin={{left: 60}}>
           <VerticalGridLines />
           <HorizontalGridLines />
-          <XAxis tickFormat={v => `${moment.unix(v).format("H:mm")}`} style={axisStyle} />
+          <XAxis tickFormat={v => `${moment.unix(v).format("H:mm")}`} style={axisStyle}/>
           <YAxis width={60} tickFormat={yAxisTickFormat} style={axisStyle} />
           {series}
           {this.state.crosshairValues?.length > 0 && this.state.activeChart === chart &&

diff --git a/kotsadm/web/src/scss/components/watches/Dashboard.scss b/kotsadm/web/src/scss/components/watches/Dashboard.scss
@@ -16,4 +16,4 @@
       right: -12px;
     }
   }
-}
+}
diff --git a/kotsadm/web/src/scss/components/watches/DashboardCard.scss b/kotsadm/web/src/scss/components/watches/DashboardCard.scss
@@ -22,6 +22,14 @@
       min-width: 463px;
       max-width: 463px;
     }
+
+    &:nth-child(3n) {
+      margin-right: 30px;
+      min-width: 455px;
+      min-height: auto;
+      max-width: 455px;
+      max-height: none;
+    }
   }
 
   &.emptyGraph {