fix(dashboard/overview): graphs on Safari (#1771)
There seems to be a bug in Safari with flex layout, hard coding the height of the graph seems to do the trick. Fixes #1755
This commit is contained in:
committed by
Julien Fontanet
parent
f0a430f350
commit
82b1b81999
@@ -27,6 +27,13 @@ $ct-series-colors: (
|
|||||||
flex-direction: column-reverse;
|
flex-direction: column-reverse;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// safari has a bug in flex computing that prevent charts from showing see #1755
|
||||||
|
// by fixing the height with a value found in Chrome it seems like it fixes the issue without breaking the layout
|
||||||
|
// elsewhere
|
||||||
|
.dashboardItem .ct-chart {
|
||||||
|
height: 150px;
|
||||||
|
}
|
||||||
|
|
||||||
// Line in charts with only 2px in width
|
// Line in charts with only 2px in width
|
||||||
.ct-line {
|
.ct-line {
|
||||||
stroke-width: 2px;
|
stroke-width: 2px;
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
.tooltipEnabled {
|
.tooltipEnabled {
|
||||||
background-color: #222;
|
background-color: #222;
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
border: 1px solid $fff;
|
border: 1px solid #fff;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
|
|||||||
@@ -203,7 +203,7 @@ export default class Overview extends Component {
|
|||||||
<CardHeader>
|
<CardHeader>
|
||||||
<Icon icon='memory' /> {_('memoryStatePanel')}
|
<Icon icon='memory' /> {_('memoryStatePanel')}
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardBlock>
|
<CardBlock className='dashboardItem'>
|
||||||
<ChartistGraph
|
<ChartistGraph
|
||||||
data={{
|
data={{
|
||||||
labels: ['Used Memory', 'Total Memory'],
|
labels: ['Used Memory', 'Total Memory'],
|
||||||
@@ -227,7 +227,7 @@ export default class Overview extends Component {
|
|||||||
<Icon icon='cpu' /> {_('cpuStatePanel')}
|
<Icon icon='cpu' /> {_('cpuStatePanel')}
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardBlock>
|
<CardBlock>
|
||||||
<div className='ct-chart'>
|
<div className='ct-chart dashboardItem'>
|
||||||
<ChartistGraph
|
<ChartistGraph
|
||||||
data={{
|
data={{
|
||||||
labels: ['vCPUs', 'CPUs'],
|
labels: ['vCPUs', 'CPUs'],
|
||||||
@@ -252,7 +252,7 @@ export default class Overview extends Component {
|
|||||||
<Icon icon='disk' /> {_('srUsageStatePanel')}
|
<Icon icon='disk' /> {_('srUsageStatePanel')}
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardBlock>
|
<CardBlock>
|
||||||
<div className='ct-chart'>
|
<div className='ct-chart dashboardItem'>
|
||||||
<BlockLink to='/dashboard/health'>
|
<BlockLink to='/dashboard/health'>
|
||||||
<ChartistGraph
|
<ChartistGraph
|
||||||
data={{
|
data={{
|
||||||
@@ -318,7 +318,7 @@ export default class Overview extends Component {
|
|||||||
<CardHeader>
|
<CardHeader>
|
||||||
<Icon icon='vm-force-shutdown' /> {_('vmStatePanel')}
|
<Icon icon='vm-force-shutdown' /> {_('vmStatePanel')}
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardBlock>
|
<CardBlock className='dashboardItem'>
|
||||||
<BlockLink to='/home?t=VM'>
|
<BlockLink to='/home?t=VM'>
|
||||||
<ChartistGraph
|
<ChartistGraph
|
||||||
data={{
|
data={{
|
||||||
@@ -340,7 +340,7 @@ export default class Overview extends Component {
|
|||||||
<CardHeader>
|
<CardHeader>
|
||||||
<Icon icon='disk' /> {_('srTopUsageStatePanel')}
|
<Icon icon='disk' /> {_('srTopUsageStatePanel')}
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardBlock>
|
<CardBlock className='dashboardItem'>
|
||||||
<BlockLink to='/dashboard/health'>
|
<BlockLink to='/dashboard/health'>
|
||||||
<ChartistGraph
|
<ChartistGraph
|
||||||
style={{strokeWidth: '30px'}}
|
style={{strokeWidth: '30px'}}
|
||||||
|
|||||||
Reference in New Issue
Block a user